/* ====================================
   PRATAP TRAVELS - SPIRITUAL JOURNEY
   Premium Dharmik Tours & Travels
   ==================================== */

/* === CSS VARIABLES === */
:root {
    /* Spiritual Color Palette */
    --saffron-primary: #FF9933;
    --saffron-dark: #E68A2E;
    --saffron-light: #FFB366;
    --deep-blue: #003366;
    --blue-dark: #002244;
    --blue-light: #004488;
    --sacred-gold: #D4AF37;
    --pure-white: #FFFFFF;
    --soft-cream: #FFF8F0;
    --text-dark: #2C2C2C;
    --text-gray: #666666;
    --border-light: #E8E8E8;
    
    /* Typography */
    --font-display: 'Cinzel', serif;
    --font-body: 'Lora', serif;
    --font-sans: 'Nunito Sans', sans-serif;
    
    /* Shadows & Effects */
    --shadow-soft: 0 4px 20px rgba(0, 51, 102, 0.08);
    --shadow-medium: 0 8px 30px rgba(0, 51, 102, 0.12);
    --shadow-strong: 0 15px 50px rgba(0, 51, 102, 0.2);
    --glow-saffron: 0 0 30px rgba(255, 153, 51, 0.3);
}

/* === GLOBAL RESET & BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text-dark);
    background: var(--soft-cream);
    line-height: 1.8;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.3;
    color: var(--deep-blue);
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.4rem; }

p {
    font-family: var(--font-body);
    font-size: 1.05rem;
    margin-bottom: 1.2rem;
    color: var(--text-gray);
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container-fluid {
    padding: 0;
}

/* === DECORATIVE ELEMENTS === */
.om-pattern {
    position: absolute;
    opacity: 0.03;
    font-size: 15rem;
    color: var(--saffron-primary);
    pointer-events: none;
    font-family: serif;
    z-index: 0;
}

.mandala-bg {
    position: absolute;
    width: 400px;
    height: 400px;
    opacity: 0.04;
    background: radial-gradient(circle, var(--saffron-primary) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}

/* === HEADER === */
.top-bar {
    background: linear-gradient(135deg, var(--deep-blue) 0%, var(--blue-dark) 100%);
    padding: 10px 0;
    color: var(--pure-white);
    font-family: var(--font-sans);
    font-size: 0.9rem;
}

.top-bar a {
    color: var(--pure-white);
    margin: 0 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.top-bar a:hover {
    color: var(--saffron-light);
}

.top-bar i {
    color: var(--saffron-primary);
}

/* The 15px side margin above is right for the phone and email links, but
   between five adjacent social icons it compounds into 30px gaps and the
   row reads as scattered rather than as one set. They keep their own,
   tighter rhythm. */
.top-bar .social-inline {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    gap: 14px;
}

.top-bar .social-inline a { margin: 0; }

.main-header {
    background: var(--pure-white);
    box-shadow: var(--shadow-soft);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 3px solid var(--saffron-primary);
}

.navbar {
    padding: 15px 0;
}

.navbar-brand {
    padding: 0;
    margin-right: 0;
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.navbar-brand img {
    height: 62px;
    width: auto;
    display: block;
}

.navbar-brand:hover {
    transform: scale(1.03);
}

.nav-link {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--text-dark) !important;
    padding: 10px 20px !important;
    margin: 0 5px;
    position: relative;
    transition: all 0.3s ease;
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--saffron-primary);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover::before,
.nav-link.active::before {
    width: 80%;
}

.nav-link:hover,
.nav-link.active {
    color: var(--saffron-primary) !important;
}

.cta-header {
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    color: var(--pure-white);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-family: var(--font-sans);
    box-shadow: var(--shadow-medium);
    transition: all 0.3s ease;
}

.cta-header:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-strong), var(--glow-saffron);
    color: var(--pure-white);
}

/* === HERO SECTION === */
.hero-section {
    position: relative;
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.9), rgba(0, 34, 68, 0.85)), 
                url('https://images.unsplash.com/photo-1609920658906-8223bd289001?q=80&w=2000') center/cover;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255, 153, 51, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    color: var(--pure-white);
    animation: fadeInUp 1s ease-out;
}

.hero-badge {
    display: inline-block;
    background: rgba(255, 153, 51, 0.2);
    backdrop-filter: blur(10px);
    padding: 10px 25px;
    border-radius: 50px;
    border: 2px solid var(--saffron-primary);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 25px;
    animation: fadeIn 1s ease-out 0.3s both;
}

.hero-title {
    font-size: 4.5rem;
    font-weight: 900;
    color: var(--pure-white);
    margin-bottom: 25px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease-out 0.5s both;
}

.hero-title .highlight {
    color: var(--saffron-primary);
    position: relative;
}

.hero-subtitle {
    font-size: 1.5rem;
    font-family: var(--font-sans);
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 40px;
    font-weight: 400;
    animation: fadeInUp 1s ease-out 0.7s both;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease-out 0.9s both;
}

.btn-primary-custom {
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    color: var(--pure-white);
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    border: none;
    box-shadow: var(--shadow-medium);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-primary-custom:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-strong), var(--glow-saffron);
    background: linear-gradient(135deg, var(--saffron-dark), var(--saffron-primary));
}

.btn-secondary-custom {
    background: transparent;
    color: var(--pure-white);
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    border: 2px solid var(--pure-white);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-secondary-custom:hover {
    background: var(--pure-white);
    color: var(--deep-blue);
    transform: translateY(-3px);
}

/* === SECTION STYLING === */
.section {
    padding: 100px 0;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 70px;
    position: relative;
}

.section-subtitle {
    font-family: var(--font-sans);
    color: var(--saffron-primary);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.section-title {
    font-size: 3rem;
    color: var(--deep-blue);
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--saffron-primary), transparent);
}

.section-description {
    font-size: 1.15rem;
    color: var(--text-gray);
    max-width: 700px;
    margin: 30px auto 0;
}

/* === CARDS === */
.service-card,
.destination-card,
.package-card {
    background: var(--pure-white);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: all 0.4s ease;
    height: 100%;
    border: 1px solid var(--border-light);
}

.service-card:hover,
.destination-card:hover,
.package-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-strong);
}

.card-image-wrapper {
    position: relative;
    overflow: hidden;
    height: 250px;
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.service-card:hover .card-image-wrapper img,
.destination-card:hover .card-image-wrapper img,
.package-card:hover .card-image-wrapper img {
    transform: scale(1.1);
}

.card-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    color: var(--pure-white);
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
    font-family: var(--font-sans);
    box-shadow: var(--shadow-medium);
}

.card-content {
    padding: 30px;
}

.card-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    color: var(--pure-white);
    font-size: 2rem;
    box-shadow: var(--shadow-medium);
}

.card-title {
    font-size: 1.5rem;
    color: var(--deep-blue);
    margin-bottom: 15px;
}

.card-text {
    color: var(--text-gray);
    font-size: 1rem;
    margin-bottom: 20px;
}

.card-link {
    color: var(--saffron-primary);
    font-weight: 700;
    font-family: var(--font-sans);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.card-link:hover {
    color: var(--saffron-dark);
    gap: 12px;
}

/* === FEATURES / WHY CHOOSE === */
.feature-box {
    text-align: center;
    padding: 40px 30px;
    background: var(--pure-white);
    border-radius: 15px;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s ease;
    height: 100%;
    border: 2px solid transparent;
}

.feature-box:hover {
    border-color: var(--saffron-primary);
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.feature-icon {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, rgba(255, 153, 51, 0.1), rgba(255, 153, 51, 0.05));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    color: var(--saffron-primary);
    font-size: 2.5rem;
    border: 3px solid var(--saffron-light);
}

/* === STATS === */
.stats-section {
    background: linear-gradient(135deg, var(--deep-blue), var(--blue-dark));
    color: var(--pure-white);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.stats-section::before {
    content: '॥ ॐ ॥';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25rem;
    opacity: 0.03;
    font-family: serif;
    pointer-events: none;
}

.stat-box {
    text-align: center;
    padding: 30px;
    position: relative;
}

.stat-number {
    font-size: 4rem;
    font-weight: 900;
    font-family: var(--font-display);
    color: var(--saffron-primary);
    margin-bottom: 10px;
}

.stat-label {
    font-size: 1.2rem;
    font-family: var(--font-sans);
    color: var(--pure-white);
    font-weight: 600;
}

/* === TESTIMONIALS === */
.testimonial-card {
    background: var(--pure-white);
    padding: 40px;
    border-radius: 15px;
    box-shadow: var(--shadow-soft);
    position: relative;
    border-left: 4px solid var(--saffron-primary);
}

.testimonial-quote {
    font-size: 4rem;
    color: var(--saffron-primary);
    opacity: 0.2;
    position: absolute;
    top: 20px;
    left: 30px;
    font-family: serif;
}

.testimonial-text {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--text-gray);
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.author-avatar {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pure-white);
    font-size: 1.5rem;
    font-weight: 700;
}

.author-info h5 {
    color: var(--deep-blue);
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.author-info p {
    color: var(--text-gray);
    margin: 0;
    font-size: 0.95rem;
}

.rating {
    color: var(--sacred-gold);
    font-size: 1.1rem;
    margin-top: 15px;
}

/* === FOOTER === */
.footer {
    background: linear-gradient(135deg, var(--deep-blue) 0%, var(--blue-dark) 100%);
    color: var(--pure-white);
    padding: 80px 0 0;
    position: relative;
}

.footer-widget {
    margin-bottom: 40px;
}

.footer-logo {
    display: inline-block;
    background: var(--pure-white);
    padding: 12px 20px;
    border-radius: 14px;
    margin-bottom: 22px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transition: transform 0.3s ease;
}

.footer-logo:hover {
    transform: translateY(-3px);
}

.footer-logo img {
    height: 54px;
    width: auto;
    display: block;
}

.footer-widget h4 {
    color: var(--pure-white);
    font-size: 1.3rem;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 15px;
}

.footer-widget h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--saffron-primary);
}

.footer-widget p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 15px;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-sans);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: var(--saffron-primary);
    padding-left: 10px;
}

.footer-links i {
    color: var(--saffron-primary);
    font-size: 0.8rem;
}

.footer-contact {
    list-style: none;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.8);
}

.footer-contact i {
    color: var(--saffron-primary);
    font-size: 1.2rem;
    margin-top: 3px;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.social-links a {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pure-white);
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.social-links a:hover {
    background: var(--saffron-primary);
    border-color: var(--saffron-primary);
    transform: translateY(-3px);
}

.footer-bottom {
    background: rgba(0, 0, 0, 0.2);
    padding: 25px 0;
    margin-top: 60px;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-sans);
}

.footer-bottom a {
    color: var(--saffron-primary);
    font-weight: 700;
}

/* === GALLERY === */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 30px;
    height: 300px;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 51, 102, 0.9), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    padding: 25px;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-title {
    color: var(--pure-white);
    font-size: 1.3rem;
    font-weight: 700;
}

/* === BREADCRUMB === */
.breadcrumb-section {
    background: linear-gradient(135deg, var(--deep-blue), var(--blue-dark));
    padding: 80px 0;
    color: var(--pure-white);
    text-align: center;
    position: relative;
}

.breadcrumb-title {
    font-size: 3rem;
    color: var(--pure-white);
    margin-bottom: 20px;
}

.breadcrumb-nav {
    font-family: var(--font-sans);
    font-size: 1.1rem;
}

.breadcrumb-nav a {
    color: var(--saffron-primary);
}

.breadcrumb-nav span {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 10px;
}

/* === FORMS === */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--deep-blue);
    margin-bottom: 10px;
    display: block;
}

.form-control,
.form-select,
textarea {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid var(--border-light);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all 0.3s ease;
    background: var(--pure-white);
}

.form-control:focus,
.form-select:focus,
textarea:focus {
    outline: none;
    border-color: var(--saffron-primary);
    box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.1);
}

textarea {
    resize: vertical;
    min-height: 150px;
}

/* === ACCORDION === */
.accordion-item {
    background: var(--pure-white);
    border: 2px solid var(--border-light);
    border-radius: 10px;
    margin-bottom: 15px;
    overflow: hidden;
}

.accordion-button {
    background: var(--pure-white);
    color: var(--deep-blue);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.1rem;
    padding: 20px 25px;
    border: none;
}

.accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    color: var(--pure-white);
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-body {
    padding: 25px;
    color: var(--text-gray);
    font-size: 1.05rem;
}

/* === PACKAGE DETAILS === */
.itinerary-day {
    background: var(--pure-white);
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 20px;
    border-left: 4px solid var(--saffron-primary);
    box-shadow: var(--shadow-soft);
}

.day-title {
    color: var(--deep-blue);
    font-size: 1.4rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.day-number {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    color: var(--pure-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* === ANIMATIONS === */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* === RESPONSIVE === */
@media (max-width: 991px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.5rem; }
    
    .hero-title { font-size: 3rem; }
    .hero-subtitle { font-size: 1.2rem; }
    .section { padding: 60px 0; }
    .section-title { font-size: 2.2rem; }
    
    .nav-link {
        padding: 10px 15px !important;
    }

    .navbar-brand img { height: 52px; }
}

@media (max-width: 767px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.7rem; }

    .navbar-brand img { height: 44px; }
    .footer-logo { padding: 10px 16px; }
    .footer-logo img { height: 46px; }
    
    .hero-section {
        height: auto;
        min-height: 600px;
        padding: 80px 0;
    }
    
    .hero-title { font-size: 2.2rem; }
    .hero-subtitle { font-size: 1.1rem; }
    .section-title { font-size: 1.8rem; }
    
    .hero-buttons {
        flex-direction: column;
    }

    /* Full width only where the layout actually asks for it. Applying it to
       every .btn-primary-custom stretched the small "View Details" pill that
       sits beside the price inside a package card, pushing it hard against
       the card edge. Markup that wants a full-width button carries .w-100. */
    .hero-buttons .btn-primary-custom,
    .hero-buttons .btn-secondary-custom {
        width: 100%;
        justify-content: center;
    }
    
    .stat-number { font-size: 2.5rem; }
    .stat-label { font-size: 1rem; }
}

/* === UTILITIES === */
.text-saffron { color: var(--saffron-primary) !important; }
.text-blue { color: var(--deep-blue) !important; }
.bg-cream { background: var(--soft-cream) !important; }
.bg-blue { background: var(--deep-blue) !important; }

.mb-60 { margin-bottom: 60px; }
.mt-60 { margin-top: 60px; }
.py-100 { padding: 100px 0; }

.fade-in {
    animation: fadeIn 0.8s ease-out;
}

.slide-in-left {
    animation: slideInLeft 0.8s ease-out;
}

/* =============================================
   ADDITIONAL STYLES - .NET CORE MIGRATION
   ============================================= */

/* === FORM CARD === */
.form-card {
    background: var(--pure-white);
    border-radius: 20px;
    padding: 40px;
    box-shadow: var(--shadow-strong);
}

/* === PACKAGE BADGES === */
.package-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--soft-cream);
    border-radius: 50px;
    padding: 5px 14px;
    font-size: 0.82rem;
    color: var(--text-dark);
    font-family: var(--font-sans);
    font-weight: 600;
    border: 1px solid var(--border-light);
}

/* === PRICE BOX (Package Detail) === */
.price-box {
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    border-radius: 20px;
    padding: 30px;
    color: var(--pure-white);
}

.price-amount {
    font-size: 2.8rem;
    font-weight: 900;
    font-family: var(--font-display);
    line-height: 1;
}

.highlights-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-family: var(--font-sans);
}

.highlights-list li i { color: var(--saffron-primary); margin-top: 3px; }

/* === BLOG META === */
.blog-meta span {
    font-size: 0.88rem;
    color: var(--text-gray);
    margin-right: 18px;
    font-family: var(--font-sans);
}

.blog-meta i { color: var(--saffron-primary); margin-right: 5px; }

.blog-content h2, .blog-content h3, .blog-content h4 {
    color: var(--deep-blue);
    margin-top: 35px;
    margin-bottom: 18px;
}

.blog-content p { line-height: 1.9; color: #444; margin-bottom: 22px; }
.blog-content ul, .blog-content ol { padding-left: 26px; line-height: 2.1; }
.blog-content table { width: 100%; border-collapse: collapse; margin: 28px 0; }
.blog-content table th { background: var(--deep-blue); color: white; padding: 14px; }
.blog-content table td { padding: 12px 14px; border-bottom: 1px solid var(--border-light); }

/* === WHATSAPP FLOAT === */
.whatsapp-float {
    position: fixed;
    bottom: 90px;
    right: 30px;
    z-index: 9999;
    width: 58px;
    height: 58px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
    transition: all 0.3s ease;
    text-decoration: none;
    animation: pulse-wa 2.5s infinite;
}

.whatsapp-float:hover {
    transform: scale(1.12);
    background: #1da851;
}

.whatsapp-float i { color: white; font-size: 1.6rem; }

@keyframes pulse-wa {
    0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,0.5); }
    50% { box-shadow: 0 4px 35px rgba(37,211,102,0.8), 0 0 0 8px rgba(37,211,102,0.1); }
}

/* === BACK TO TOP === */
#backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: var(--shadow-medium);
    display: none;
    transition: all 0.3s;
}

#backToTop:hover { transform: translateY(-3px); box-shadow: var(--shadow-strong); }

/* === PRELOADER === */
#preloader {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--pure-white);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}

.preloader-logo {
    width: min(280px, 62vw);
    height: auto;
    animation: logo-breathe 2s ease-in-out infinite;
}

@keyframes logo-breathe {
    0%, 100% { transform: scale(1);    filter: drop-shadow(0 6px 14px rgba(255, 153, 51, 0.25)); }
    50%      { transform: scale(1.04); filter: drop-shadow(0 10px 26px rgba(255, 153, 51, 0.45)); }
}

.preloader-bar {
    width: min(220px, 50vw);
    height: 4px;
    border-radius: 4px;
    background: rgba(0, 51, 102, 0.1);
    overflow: hidden;
}

.preloader-bar span {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--deep-blue), var(--saffron-primary));
    animation: preloader-slide 1.2s ease-in-out infinite;
}

@keyframes preloader-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

/* === ENQUIRY POPUP MODAL === */
.enquiry-popup .modal-content {
    border-radius: 20px;
    border: none;
    overflow: hidden;
    box-shadow: var(--shadow-strong);
}

.enquiry-popup .modal-header {
    background: linear-gradient(135deg, var(--deep-blue), var(--blue-dark));
    color: white;
    border: none;
    padding: 25px 30px;
}

.enquiry-popup .modal-header .modal-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: white;
}

.enquiry-popup .modal-body { padding: 30px; background: var(--soft-cream); }
.enquiry-popup .btn-close { filter: invert(1); }
.enquiry-popup .form-label { font-family: var(--font-sans); font-weight: 600; color: var(--deep-blue); }
.enquiry-popup .form-control, .enquiry-popup .form-select { border: 2px solid var(--border-light); border-radius: 10px; padding: 12px 16px; font-family: var(--font-body); }
.enquiry-popup .form-control:focus, .enquiry-popup .form-select:focus { border-color: var(--saffron-primary); box-shadow: 0 0 0 3px rgba(255,153,51,0.12); }

/* === GOOGLE TRANSLATE STYLES === */
/* Hide the "Powered by Google" text/logo, keep only the <select> */
.goog-te-gadget > span { display: none !important; }
.goog-te-gadget > a   { display: none !important; }
.goog-logo-link        { display: none !important; }
/* Style the select as a rounded pill */
#google_translate_element .goog-te-gadget { display: inline-block; }
#google_translate_element .goog-te-combo {
    background: rgba(255,255,255,0.12);
    border: 1.5px solid rgba(255,255,255,0.45);
    border-radius: 50px;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 5px 16px 5px 12px;
    cursor: pointer;
    outline: none;
    min-width: 115px;
    -webkit-appearance: auto;
    appearance: auto;
}
#google_translate_element .goog-te-combo:hover,
#google_translate_element .goog-te-combo:focus {
    border-color: var(--saffron-primary);
    background: rgba(255,153,51,0.18);
}
#google_translate_element .goog-te-combo option { background: var(--deep-blue); color: #fff; }
.skiptranslate iframe { display: none !important; }
body { top: 0px !important; }

/* Admin-only rules now live in wwwroot/css/admin.css */

/* === CONTENT TABLES ===
   Base look for a plain .table on the public site. Deliberately free of
   !important: content tables inside .blog-content set their own navy
   header, and the flags here used to override its white text, leaving
   grey-on-navy headings nobody could read. */
.table th {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: 2px solid #f0f0f0;
    font-family: var(--font-sans);
    background: #fafafa;
    padding: 14px 12px;
}

.table td {
    vertical-align: middle;
    font-size: 0.88rem;
    font-family: var(--font-sans);
    color: var(--text-dark);
    padding: 12px 12px;
}

.table-hover tbody tr:hover { background: rgba(255, 153, 51, 0.04); }

/* === PAGINATION === */
.pagination .page-link {
    border-radius: 8px !important;
    margin: 0 3px;
    color: var(--deep-blue);
    border: 2px solid var(--border-light);
    font-family: var(--font-sans);
    font-weight: 600;
    padding: 8px 15px;
    transition: all 0.2s;
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark)) !important;
    border-color: var(--saffron-primary) !important;
    color: white !important;
}

.pagination .page-link:hover {
    background: rgba(255,153,51,0.1);
    border-color: var(--saffron-primary);
    color: var(--saffron-primary);
}


/* =============================================
   PACKAGE DETAIL PAGE
   ============================================= */

/* --- Hero --- */
.pkg-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 130px 0 90px;
    color: var(--pure-white);
}

.pkg-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,34,68,0.72) 0%, rgba(0,34,68,0.60) 45%, rgba(0,34,68,0.92) 100%);
}

.pkg-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.pkg-breadcrumb {
    font-family: var(--font-sans);
    font-size: 0.92rem;
    margin-bottom: 22px;
    color: rgba(255,255,255,0.75);
}

.pkg-breadcrumb a { color: var(--saffron-light); text-decoration: none; }
.pkg-breadcrumb a:hover { color: var(--saffron-primary); }
.pkg-breadcrumb i { margin: 0 10px; font-size: 0.75rem; opacity: 0.6; }

.pkg-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.pkg-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 50px;
}

.pkg-tag-solid { background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3); }
.pkg-tag-gold  { background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark)); color: #fff; }

.pkg-hero-title {
    color: var(--pure-white);
    font-size: 3.1rem;
    line-height: 1.2;
    margin-bottom: 16px;
    text-shadow: 0 3px 24px rgba(0,0,0,0.35);
}

.pkg-hero-sub {
    font-size: 1.12rem;
    color: rgba(255,255,255,0.88);
    max-width: 720px;
    margin-bottom: 26px;
}

.pkg-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pkg-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.92rem;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    padding: 9px 18px;
    border-radius: 50px;
}

.pkg-hero-meta i { color: var(--saffron-primary); }

/* --- Sticky section nav --- */
.pkg-subnav {
    position: sticky;
    top: 84px;
    z-index: 900;
    background: var(--pure-white);
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 6px 18px rgba(0,51,102,0.06);
}

.pkg-subnav ul {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.pkg-subnav ul::-webkit-scrollbar { display: none; }

.pkg-subnav a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    padding: 18px 20px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-gray);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.25s ease;
}

.pkg-subnav a i { color: var(--saffron-primary); opacity: 0.65; }
.pkg-subnav a:hover { color: var(--deep-blue); }

.pkg-subnav a.active {
    color: var(--deep-blue);
    border-bottom-color: var(--saffron-primary);
}

.pkg-subnav a.active i { opacity: 1; }

/* --- Body + blocks --- */
.pkg-body { padding: 60px 0 90px; }

.pkg-aside { position: sticky; top: 160px; }

.pkg-block {
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 34px;
    box-shadow: var(--shadow-soft);
    scroll-margin-top: 170px;
}

.pkg-block-head { margin-bottom: 28px; }

.pkg-block-kicker {
    display: block;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--saffron-primary);
    margin-bottom: 8px;
}

.pkg-block-head h2 {
    font-size: 1.95rem;
    margin: 0;
    padding-bottom: 16px;
    position: relative;
}

.pkg-block-head h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 62px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--saffron-primary), transparent);
}

.pkg-lead {
    font-size: 1.1rem;
    color: var(--deep-blue);
    font-weight: 600;
    line-height: 1.85;
    padding: 18px 22px;
    border-left: 4px solid var(--saffron-primary);
    background: var(--soft-cream);
    border-radius: 0 12px 12px 0;
    margin-bottom: 26px;
}

.pkg-rich > *:last-child { margin-bottom: 0; }

/* --- Quick facts --- */
.pkg-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 34px;
}

.pkg-fact {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow-soft);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pkg-fact:hover { transform: translateY(-4px); box-shadow: var(--shadow-medium); }

.pkg-fact-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255,153,51,0.16), rgba(255,153,51,0.06));
    color: var(--saffron-primary);
    font-size: 1.15rem;
}

.pkg-fact-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.74rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-gray);
}

.pkg-fact strong {
    font-family: var(--font-sans);
    color: var(--deep-blue);
    font-size: 0.95rem;
    line-height: 1.4;
}

/* --- Itinerary timeline --- */
.pkg-itinerary { position: relative; padding-left: 34px; }

.pkg-itinerary::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, var(--saffron-primary), rgba(255,153,51,0.15));
}

.pkg-itinerary h2,
.pkg-itinerary h3,
.pkg-itinerary h4 { position: relative; }

.pkg-itinerary h2::before,
.pkg-itinerary h3::before,
.pkg-itinerary h4::before {
    content: '';
    position: absolute;
    left: -34px;
    top: 0.45em;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pure-white);
    border: 4px solid var(--saffron-primary);
    box-shadow: 0 0 0 4px rgba(255,153,51,0.14);
}

.pkg-itinerary h2, .pkg-itinerary h3, .pkg-itinerary h4 {
    font-size: 1.25rem;
    margin-top: 30px;
    margin-bottom: 12px;
}

.pkg-itinerary > *:first-child { margin-top: 0; }

/* --- Highlights --- */
.pkg-highlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.pkg-highlight {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    background: var(--soft-cream);
    border: 1px solid rgba(255,153,51,0.22);
    border-radius: 14px;
    padding: 16px 18px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-dark);
    transition: all 0.25s ease;
}

.pkg-highlight:hover {
    border-color: var(--saffron-primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft);
}

.pkg-highlight i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--saffron-primary);
    font-size: 0.9rem;
}

/* --- Inclusions / Exclusions --- */
.pkg-inex {
    height: 100%;
    border-radius: 16px;
    padding: 26px;
    border: 1px solid var(--border-light);
}

.pkg-inex-in { background: rgba(40,167,69,0.05); border-color: rgba(40,167,69,0.25); }
.pkg-inex-ex { background: rgba(220,53,69,0.04); border-color: rgba(220,53,69,0.2); }

.pkg-inex h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    margin-bottom: 18px;
}

.pkg-inex-in h4 i { color: #28a745; }
.pkg-inex-ex h4 i { color: #dc3545; }

.pkg-inex ul { list-style: none; margin: 0; padding: 0; }

.pkg-inex li {
    position: relative;
    padding: 9px 0 9px 30px;
    font-family: var(--font-sans);
    font-size: 0.93rem;
    line-height: 1.6;
    border-bottom: 1px dashed rgba(0,51,102,0.1);
}

.pkg-inex li:last-child { border-bottom: none; }

.pkg-inex li::before {
    position: absolute;
    left: 0;
    top: 9px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.85rem;
}

.pkg-inex-in li::before { content: "\f00c"; color: #28a745; }
.pkg-inex-ex li::before { content: "\f00d"; color: #dc3545; }

/* --- Gallery --- */
.pkg-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.pkg-gallery-item {
    position: relative;
    margin: 0;
    height: 175px;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
}

.pkg-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.pkg-gallery-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,51,102,0.45);
    color: #fff;
    font-size: 1.3rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pkg-gallery-item:hover .pkg-gallery-zoom { opacity: 1; }

.pkg-lightbox-content {
    background: transparent;
    border: none;
    text-align: center;
}

.pkg-lightbox-content img { width: 100%; border-radius: 14px; }
.pkg-lightbox-content p { color: #fff; margin-top: 12px; font-family: var(--font-sans); }
.pkg-lightbox-close { position: absolute; top: -38px; right: 0; }

/* --- Assurance band --- */
.pkg-assure {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255,255,255,0.14);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 34px;
}

.pkg-assure > div {
    background: linear-gradient(135deg, var(--deep-blue), var(--blue-dark));
    padding: 26px 22px;
    color: #fff;
}

.pkg-assure i {
    display: block;
    font-size: 1.5rem;
    color: var(--saffron-primary);
    margin-bottom: 12px;
}

.pkg-assure strong {
    display: block;
    font-family: var(--font-sans);
    font-size: 1rem;
    margin-bottom: 6px;
}

.pkg-assure span {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
}

/* --- Bottom CTA --- */
.pkg-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 26px;
    background: var(--soft-cream);
    border: 2px dashed rgba(255,153,51,0.4);
    border-radius: 20px;
    padding: 38px;
    margin-bottom: 34px;
    scroll-margin-top: 170px;
}

.pkg-cta h3 { font-size: 1.6rem; margin-bottom: 8px; }
.pkg-cta p { color: var(--text-gray); margin: 0; max-width: 480px; }

.pkg-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.pkg-btn-wa {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    padding: 16px 30px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pkg-btn-wa:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 10px 26px rgba(37,211,102,0.4); }

/* --- Related packages --- */
.pkg-related {
    display: block;
    height: 100%;
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pkg-related:hover { transform: translateY(-6px); box-shadow: var(--shadow-medium); border-color: var(--saffron-primary); }

.pkg-related-img { position: relative; height: 150px; overflow: hidden; }
.pkg-related-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.pkg-related:hover .pkg-related-img img { transform: scale(1.08); }

.pkg-related-days {
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: rgba(0,51,102,0.85);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 50px;
}

.pkg-related-body { padding: 18px; }

.pkg-related-body h5 {
    font-size: 1.02rem;
    margin-bottom: 8px;
    line-height: 1.45;
}

.pkg-related-price {
    font-family: var(--font-sans);
    font-weight: 800;
    color: var(--saffron-primary);
    margin-bottom: 10px;
}

.pkg-related-price small { color: var(--text-gray); font-weight: 600; }

.pkg-related-link {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--deep-blue);
}

.pkg-related-link i { margin-left: 6px; transition: transform 0.3s ease; }
.pkg-related:hover .pkg-related-link i { transform: translateX(5px); }

/* --- Sidebar: price card --- */
.pkg-price-card {
    position: relative;
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-top: 5px solid var(--saffron-primary);
    border-radius: 20px;
    padding: 32px 28px;
    box-shadow: var(--shadow-strong);
    margin-bottom: 24px;
}

.pkg-save {
    position: absolute;
    top: 18px;
    right: 18px;
    background: #28a745;
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 0.75rem;
    padding: 5px 13px;
    border-radius: 50px;
}

.pkg-price-label {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-gray);
}

.pkg-price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }

.pkg-price {
    font-family: var(--font-sans);
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1.15;
    color: var(--deep-blue);
}

.pkg-price-ask { font-size: 1.9rem; }
.pkg-price-old { color: var(--text-gray); font-size: 1.15rem; }

.pkg-price-note {
    font-family: var(--font-sans);
    font-size: 0.87rem;
    color: var(--text-gray);
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-light);
}

.pkg-price-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.pkg-price-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 8px;
    border-radius: 12px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    border: 2px solid var(--border-light);
    color: var(--deep-blue);
    transition: all 0.25s ease;
}

.pkg-price-links a:hover { border-color: var(--saffron-primary); color: var(--saffron-primary); }
.pkg-price-links a:last-child:hover { border-color: #25D366; color: #25D366; }

.pkg-price-usp { list-style: none; margin: 22px 0 0; padding: 0; }

.pkg-price-usp li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 0.86rem;
    color: var(--text-gray);
    padding: 7px 0;
}

.pkg-price-usp i { color: #28a745; margin-top: 4px; font-size: 0.78rem; }

/* --- Sidebar: help + mini cards --- */
.pkg-help-card {
    background: linear-gradient(135deg, var(--deep-blue), var(--blue-dark));
    border-radius: 20px;
    padding: 30px 26px;
    color: #fff;
    margin-bottom: 24px;
}

.pkg-help-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,153,51,0.18);
    border: 2px solid var(--saffron-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--saffron-primary);
    font-size: 1.2rem;
    margin-bottom: 16px;
}

.pkg-help-card h5 { color: #fff; font-size: 1.2rem; margin-bottom: 10px; }

.pkg-help-card p {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.7;
    margin-bottom: 18px;
}

.pkg-help-phone {
    display: block;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--saffron-primary);
    text-decoration: none;
    margin-bottom: 10px;
}

.pkg-help-phone:hover { color: var(--saffron-light); }

.pkg-help-link {
    font-family: var(--font-sans);
    font-size: 0.86rem;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
}

.pkg-help-link:hover { color: var(--saffron-primary); }
.pkg-help-link i { margin-left: 6px; font-size: 0.75rem; }

.pkg-mini-card {
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--shadow-soft);
}

.pkg-mini-card h6 {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--saffron-primary);
    margin-bottom: 14px;
}

.pkg-mini-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 0;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--deep-blue);
    text-decoration: none;
    border-bottom: 1px solid var(--border-light);
    transition: padding-left 0.25s ease;
}

.pkg-mini-link:last-child { border-bottom: none; }
.pkg-mini-link:hover { padding-left: 8px; color: var(--saffron-primary); }
.pkg-mini-link i { color: var(--saffron-primary); width: 18px; }

/* --- Mobile sticky booking bar --- */
.pkg-mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--pure-white);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -6px 24px rgba(0,51,102,0.14);
}

.pkg-mobile-price { flex: 1; line-height: 1.25; }

.pkg-mobile-amount {
    display: block;
    font-family: var(--font-sans);
    font-weight: 900;
    font-size: 1.25rem;
    color: var(--deep-blue);
}

.pkg-mobile-note {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-gray);
}

.pkg-mobile-call {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--soft-cream);
    border: 2px solid var(--saffron-primary);
    color: var(--saffron-primary);
    text-decoration: none;
}

.pkg-mobile-book {
    border: none;
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 0.95rem;
    padding: 14px 26px;
    border-radius: 50px;
    box-shadow: var(--shadow-medium);
}

/* Keep the floating widgets clear of the mobile booking bar */
@media (max-width: 991px) {
    body:has(.pkg-mobile-bar) .whatsapp-float { bottom: 150px; }
    body:has(.pkg-mobile-bar) #backToTop { bottom: 92px; }
}

/* --- Package detail responsive --- */
@media (max-width: 991px) {
    .pkg-hero { padding: 90px 0 70px; }
    .pkg-hero-title { font-size: 2.3rem; }
    .pkg-hero-sub { font-size: 1rem; }
    .pkg-subnav { top: 0; }
    .pkg-block { padding: 28px 22px; scroll-margin-top: 90px; }
    .pkg-block-head h2 { font-size: 1.55rem; }
    .pkg-body { padding: 40px 0 120px; }
    .pkg-aside { position: static; }
    .pkg-cta { padding: 28px 22px; scroll-margin-top: 90px; }
}

@media (max-width: 575px) {
    .pkg-facts,
    .pkg-assure { grid-template-columns: minmax(0, 1fr); }
    .pkg-hero { padding: 70px 0 55px; }
    .pkg-hero-title { font-size: 1.8rem; }
    .pkg-hero-meta span { font-size: 0.82rem; padding: 7px 14px; }
    .pkg-subnav a { padding: 14px 14px; font-size: 0.84rem; }
    .pkg-block { padding: 24px 18px; }
    .pkg-itinerary { padding-left: 26px; }
    .pkg-itinerary::before { left: 5px; }
    .pkg-itinerary h2::before,
    .pkg-itinerary h3::before,
    .pkg-itinerary h4::before { left: -26px; width: 16px; height: 16px; border-width: 3px; }
    .pkg-price { font-size: 2.1rem; }
    .pkg-gallery-item { height: 140px; }
    .pkg-cta { padding: 24px 18px; }
    .pkg-cta-actions { width: 100%; }
    .pkg-cta-actions > * { width: 100%; justify-content: center; }
}

/* --- Package detail: long-word / narrow-viewport safety --- */
.pkg-hero-title,
.pkg-hero-sub,
.pkg-block-head h2,
.pkg-cta h3,
.pkg-related-body h5,
.pkg-breadcrumb span {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pkg-hero-inner { min-width: 0; }
.pkg-mobile-price { min-width: 0; }
.pkg-mobile-amount { white-space: nowrap; }

@media (max-width: 420px) {
    .pkg-mobile-bar { gap: 9px; padding: 10px 12px; }
    .pkg-mobile-book { padding: 13px 18px; font-size: 0.9rem; white-space: nowrap; }
    .pkg-mobile-call { width: 42px; height: 42px; flex: 0 0 42px; }
    .pkg-mobile-amount { font-size: 1.1rem; }
    .pkg-hero-title { font-size: 1.55rem; }
}

/* =============================================
   NAV DROPDOWN ("Explore")
   Bootstrap's caret is a border-triangle relying on vertical-align, which a
   flex .nav-link ignores — it floated above the label. Swap in a chevron that
   matches the mobile accordion and align it properly.
   ============================================= */
.navbar-nav .dropdown-toggle {
    align-items: center;
    gap: 8px;
}

.navbar-nav .dropdown-toggle::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.6rem;
    line-height: 1;
    border: 0;
    width: auto;
    height: auto;
    margin: 0;
    vertical-align: baseline;
    color: var(--saffron-primary);
    opacity: 0.7;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.navbar-nav .dropdown-toggle:hover::after,
.navbar-nav .dropdown-toggle[aria-expanded="true"]::after {
    opacity: 1;
}

.navbar-nav .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* Menu panel */
.navbar-nav .dropdown-menu {
    border: 1px solid var(--border-light);
    border-top: 3px solid var(--saffron-primary);
    border-radius: 0 0 14px 14px;
    box-shadow: var(--shadow-medium);
    padding: 10px;
    margin-top: 0;
    min-width: 232px;
}

.navbar-nav .dropdown-item {
    display: flex;
    align-items: center;
    border-radius: 9px;
    padding: 10px 14px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-dark);
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
    background: var(--soft-cream);
    color: var(--saffron-dark);
    padding-left: 18px;
}

.navbar-nav .dropdown-divider {
    margin: 8px 6px;
    border-top-color: var(--border-light);
}

/* =============================================
   MOBILE NAV — plus / minus expander
   The two bars are drawn in CSS rather than swapped as icons, so the
   vertical one can rotate away and the + becomes a - in one movement.
   ============================================= */
/* Layout is declared here rather than relying on Bootstrap's d-flex
   utilities, so the control keeps its shape wherever it is used. */
.mobile-services-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    font-weight: 600;
}

/* The .nav-link underline marks a link you are about to follow. On a
   disclosure toggle it draws a stray rule straight across the top of the
   panel the tap just opened - and touch browsers leave :hover stuck on the
   element afterwards, so it stays there. */
.mobile-services-toggle::before { display: none; }

.nav-expand {
    position: relative;
    display: inline-flex;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin-left: auto;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    opacity: 0.85;
}

/* Horizontal bar - always visible, so the control never disappears. */
.nav-expand::before,
.nav-expand::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--saffron-primary);
    transform: translate(-50%, -50%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s ease;
}

/* Vertical bar - rotates flat on open, turning the + into a - */
.nav-expand::after { transform: translate(-50%, -50%) rotate(90deg); }

.mobile-services-toggle[aria-expanded="true"] .nav-expand {
    transform: rotate(180deg);
    opacity: 1;
}

.mobile-services-toggle[aria-expanded="true"] .nav-expand::before,
.mobile-services-toggle[aria-expanded="true"] .nav-expand::after {
    background: var(--saffron-dark);
}

.mobile-services-toggle[aria-expanded="true"] .nav-expand::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

/* Open row reads as the active section */
.mobile-services-toggle[aria-expanded="true"] { color: var(--saffron-dark) !important; }

@media (prefers-reduced-motion: reduce) {
    .nav-expand,
    .nav-expand::before,
    .nav-expand::after { transition: none; }
}

/* =============================================
   BLOG — LISTING CARDS
   ============================================= */
.blog-section { padding: 80px 0; }

.blog-back {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--saffron-primary);
}

.blog-back i { margin-right: 7px; font-size: 0.8rem; }

.blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-medium);
    border-color: rgba(255,153,51,0.45);
}

.blog-card-media {
    position: relative;
    display: block;
    height: 210px;
    overflow: hidden;
}

.blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-media img { transform: scale(1.08); }

.blog-card-cat {
    position: absolute;
    left: 14px;
    bottom: 14px;
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.6px;
    padding: 5px 13px;
    border-radius: 50px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

.blog-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px;
}

.blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--text-gray);
    margin-bottom: 12px;
}

.blog-card-meta i { color: var(--saffron-primary); margin-right: 6px; }

.blog-card-title {
    font-size: 1.15rem;
    line-height: 1.45;
    margin-bottom: 10px;
}

.blog-card-title a { color: var(--deep-blue); }
.blog-card-title a:hover { color: var(--saffron-primary); }

.blog-card-text {
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 16px;
}

.blog-card-link {
    margin-top: auto;
    align-self: flex-start;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--deep-blue);
}

.blog-card-link i { margin-left: 7px; font-size: 0.8rem; transition: transform 0.3s ease; }
.blog-card-link:hover { color: var(--saffron-primary); }
.blog-card:hover .blog-card-link i { transform: translateX(5px); }

/* =============================================
   BLOG — SIDEBAR WIDGETS
   ============================================= */
.blog-aside { position: sticky; top: 120px; }

.blog-widget {
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    padding: 26px 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-soft);
}

.blog-widget-title {
    position: relative;
    font-size: 1.15rem;
    margin: 0 0 20px;
    padding-bottom: 14px;
}

.blog-widget-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--saffron-primary), transparent);
}

/* Recent posts */
.blog-recent { list-style: none; margin: 0; padding: 0; }

.blog-recent li + li {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-light);
}

.blog-recent a { display: flex; gap: 14px; align-items: flex-start; }

.blog-recent-thumb {
    flex: 0 0 72px;
    width: 72px;
    height: 62px;
    border-radius: 10px;
    overflow: hidden;
}

.blog-recent-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blog-recent a:hover .blog-recent-thumb img { transform: scale(1.1); }

.blog-recent-text { min-width: 0; }

.blog-recent-text strong {
    display: block;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--deep-blue);
    transition: color 0.25s ease;
}

.blog-recent a:hover .blog-recent-text strong { color: var(--saffron-primary); }

.blog-recent-text time {
    display: block;
    margin-top: 5px;
    font-family: var(--font-sans);
    font-size: 0.76rem;
    color: var(--text-gray);
}

.blog-recent-text time i { color: var(--saffron-primary); margin-right: 6px; }

/* Categories */
.blog-cats { list-style: none; margin: 0; padding: 0; }

.blog-cats a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-dark);
    transition: background-color 0.25s ease, color 0.25s ease, padding-left 0.25s ease;
}

.blog-cats a i { color: var(--saffron-primary); margin-right: 10px; font-size: 0.85rem; }

.blog-cats a:hover { background: var(--soft-cream); padding-left: 18px; color: var(--saffron-dark); }

.blog-cats a.active {
    background: var(--soft-cream);
    color: var(--saffron-dark);
    box-shadow: inset 3px 0 0 var(--saffron-primary);
}

.blog-cats em {
    flex: 0 0 auto;
    font-style: normal;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--deep-blue);
    background: rgba(0,51,102,0.07);
    border-radius: 50px;
    padding: 3px 11px;
}

.blog-cats a:hover em,
.blog-cats a.active em { background: var(--saffron-primary); color: #fff; }

/* Tags */
.blog-tags { display: flex; flex-wrap: wrap; gap: 9px; }

.blog-tag {
    display: inline-block;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--text-dark);
    background: var(--soft-cream);
    border: 1px solid var(--border-light);
    border-radius: 50px;
    padding: 7px 15px;
    transition: all 0.25s ease;
}

.blog-tag::before { content: '#'; color: var(--saffron-primary); margin-right: 3px; }

.blog-tag:hover,
.blog-tag.active {
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
}

.blog-tag:hover::before,
.blog-tag.active::before { color: rgba(255,255,255,0.75); }

/* Sidebar CTA */
.blog-widget-cta {
    background: linear-gradient(135deg, var(--deep-blue), var(--blue-dark));
    border: none;
    color: #fff;
}

.blog-cta-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,153,51,0.18);
    border: 2px solid var(--saffron-primary);
    color: var(--saffron-primary);
    font-size: 1.15rem;
    margin-bottom: 15px;
}

.blog-widget-cta h4 { color: #fff; font-size: 1.2rem; margin-bottom: 10px; }

.blog-widget-cta p {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.7;
    margin-bottom: 18px;
}

.blog-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 50px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.92rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-cta-btn + .blog-cta-btn { margin-top: 10px; }
.blog-cta-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); }

.blog-cta-primary { background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark)); color: #fff; }
.blog-cta-primary:hover { color: #fff; }
.blog-cta-ghost { background: #fff; color: var(--deep-blue); }
.blog-cta-ghost:hover { color: var(--deep-blue); }

/* =============================================
   BLOG — SINGLE POST
   ============================================= */
.blog-post {
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 34px;
    box-shadow: var(--shadow-soft);
}

.blog-post-media {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 28px;
    box-shadow: var(--shadow-medium);
}

.blog-post-media img { width: 100%; height: auto; display: block; }

.blog-post-cat {
    display: inline-block;
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 6px 15px;
    border-radius: 50px;
    margin-bottom: 16px;
}

.blog-post-cat:hover { color: #fff; opacity: 0.9; }

.blog-post-head h1 {
    font-size: 2.05rem;
    line-height: 1.32;
    margin-bottom: 16px;
    overflow-wrap: anywhere;
}

.blog-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border-light);
    font-family: var(--font-sans);
    font-size: 0.87rem;
    color: var(--text-gray);
}

.blog-post-meta i { color: var(--saffron-primary); margin-right: 8px; }

.blog-post-lead {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--deep-blue);
    line-height: 1.85;
    background: var(--soft-cream);
    border-left: 4px solid var(--saffron-primary);
    border-radius: 0 12px 12px 0;
    padding: 18px 22px;
    margin: 26px 0;
}

.blog-post-foot {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.blog-post-tags,
.blog-post-share { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }

.blog-post-tags-label {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--deep-blue);
    margin-right: 4px;
}

.blog-post-tags-label i { color: var(--saffron-primary); margin-right: 7px; }

.blog-share {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.9rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-share:hover { color: #fff; transform: translateY(-3px); box-shadow: var(--shadow-medium); }
.blog-share-fb { background: #1877F2; }
.blog-share-wa { background: #25D366; }
.blog-share-tw { background: #0f1419; }

/* Related posts under the article */
.blog-related { margin-top: 40px; }

.blog-related-title {
    font-size: 1.5rem;
    margin-bottom: 24px;
    padding-bottom: 14px;
    position: relative;
}

.blog-related-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--saffron-primary), transparent);
}

.blog-related-card {
    display: block;
    height: 100%;
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.blog-related-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
    border-color: rgba(255,153,51,0.45);
}

.blog-related-img { display: block; height: 130px; overflow: hidden; }
.blog-related-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.blog-related-card:hover .blog-related-img img { transform: scale(1.08); }

.blog-related-body { display: block; padding: 16px; }

.blog-related-body strong {
    display: block;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.93rem;
    line-height: 1.5;
    color: var(--deep-blue);
}

.blog-related-body time {
    display: block;
    margin-top: 7px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: var(--text-gray);
}

/* Blog responsive */
@media (max-width: 991px) {
    .blog-section { padding: 50px 0; }
    .blog-aside { position: static; }
    .blog-post { padding: 24px 20px; }
    .blog-post-head h1 { font-size: 1.6rem; }
}

@media (max-width: 575px) {
    .blog-post-foot { flex-direction: column; align-items: flex-start; }
    .blog-card-media { height: 190px; }
}

/* =============================================
   BLOG — LONG-FORM ARTICLE TYPOGRAPHY
   Overrides the earlier minimal .blog-content rules.
   ============================================= */
.blog-content {
    font-size: 1.06rem;
    line-height: 1.95;
    color: #3a3a3a;
}

.blog-content > *:first-child { margin-top: 0; }
.blog-content > *:last-child { margin-bottom: 0; }

.blog-content h2 {
    font-size: 1.72rem;
    margin-top: 48px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    position: relative;
    scroll-margin-top: 110px;
}

.blog-content h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--saffron-primary), transparent);
}

.blog-content h3 {
    font-size: 1.28rem;
    margin-top: 34px;
    margin-bottom: 14px;
    color: var(--deep-blue);
    scroll-margin-top: 110px;
}

.blog-content h4 { font-size: 1.1rem; margin-top: 26px; margin-bottom: 12px; }

.blog-content p { margin-bottom: 22px; color: inherit; font-size: inherit; }

.blog-content a {
    color: var(--saffron-dark);
    font-weight: 600;
    border-bottom: 1px solid rgba(255,153,51,0.45);
}

.blog-content a:hover { color: var(--saffron-primary); border-bottom-color: var(--saffron-primary); }

.blog-content strong { color: var(--deep-blue); font-weight: 700; }

.blog-content ul,
.blog-content ol {
    padding-left: 0;
    margin: 0 0 24px;
    list-style: none;
}

.blog-content ul li,
.blog-content ol li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 12px;
    line-height: 1.85;
}

.blog-content ul > li::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0.72em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--saffron-primary);
}

.blog-content ol { counter-reset: blog-ol; }

.blog-content ol > li::before {
    counter-increment: blog-ol;
    content: counter(blog-ol);
    position: absolute;
    left: 0;
    top: 0.28em;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--soft-cream);
    border: 1px solid rgba(255,153,51,0.4);
    color: var(--saffron-dark);
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 0.72rem;
    line-height: 21px;
    text-align: center;
}

.blog-content blockquote {
    margin: 30px 0;
    padding: 22px 26px;
    background: var(--soft-cream);
    border-left: 4px solid var(--saffron-primary);
    border-radius: 0 14px 14px 0;
    position: relative;
}

.blog-content blockquote p {
    margin: 0;
    font-size: 1.04rem;
    font-style: italic;
    color: var(--deep-blue);
}

.blog-content blockquote p + p { margin-top: 14px; }

.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    margin: 28px 0;
    box-shadow: var(--shadow-soft);
}

.blog-content hr {
    border: 0;
    height: 1px;
    background: var(--border-light);
    margin: 36px 0;
}

/* Tables get wrapped by JS so they can scroll on narrow screens */
.blog-table-wrap {
    overflow-x: auto;
    margin: 28px 0;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    -webkit-overflow-scrolling: touch;
}

.blog-content table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.93rem;
}

.blog-content table th {
    background: var(--deep-blue);
    color: #fff;
    text-align: left;
    padding: 13px 16px;
    font-weight: 700;
    white-space: nowrap;
}

.blog-content table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: top;
}

.blog-content table tbody tr:last-child td { border-bottom: none; }
.blog-content table tbody tr:nth-child(even) { background: rgba(255,248,240,0.7); }

/* =============================================
   BLOG — READING PROGRESS, TOC, ARTICLE CTA
   ============================================= */
.blog-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1100;
    background: transparent;
    pointer-events: none;
}

.blog-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--saffron-primary), var(--sacred-gold));
    transition: width 0.1s linear;
}

/* Table of contents */
.blog-toc {
    background: var(--soft-cream);
    border: 1px solid rgba(255,153,51,0.28);
    border-radius: 16px;
    padding: 8px 10px 14px;
    margin: 0 0 32px;
}

.blog-toc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    background: none;
    border: 0;
    padding: 12px 14px;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--deep-blue);
    cursor: pointer;
}

.blog-toc-head i:first-child { color: var(--saffron-primary); margin-right: 10px; }

.blog-toc-chevron { font-size: 0.72rem; color: var(--saffron-primary); transition: transform 0.25s ease; }
.blog-toc.collapsed .blog-toc-chevron { transform: rotate(180deg); }
.blog-toc.collapsed ol { display: none; }

.blog-toc ol {
    counter-reset: toc;
    list-style: none;
    margin: 0;
    padding: 0 6px;
}

.blog-toc li { margin: 0; padding: 0; }

.blog-toc a {
    counter-increment: toc;
    display: flex;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 9px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-dark);
    border: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.blog-toc a::before {
    content: counter(toc) ".";
    flex: 0 0 auto;
    font-weight: 800;
    color: var(--saffron-primary);
}

.blog-toc a:hover { background: rgba(255,255,255,0.85); color: var(--saffron-dark); }

.blog-toc a.active {
    background: var(--pure-white);
    color: var(--deep-blue);
    box-shadow: inset 3px 0 0 var(--saffron-primary), var(--shadow-soft);
}

/* End-of-article CTA */
.blog-post-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 34px;
    padding: 34px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--deep-blue), var(--blue-dark));
    color: #fff;
}

.blog-post-cta h3 { color: #fff; font-size: 1.5rem; margin-bottom: 10px; }

.blog-post-cta p {
    color: rgba(255,255,255,0.75);
    font-family: var(--font-sans);
    font-size: 0.94rem;
    line-height: 1.7;
    margin: 0;
    max-width: 460px;
}

.blog-post-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.blog-post-cta-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 30px;
    border-radius: 50px;
    border: 2px solid rgba(255,255,255,0.5);
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    transition: all 0.3s ease;
}

.blog-post-cta-ghost:hover { background: #fff; color: var(--deep-blue); border-color: #fff; }

/* Long-form responsive */
@media (max-width: 991px) {
    .blog-content { font-size: 1.02rem; line-height: 1.88; }
    .blog-content h2 { font-size: 1.45rem; margin-top: 38px; scroll-margin-top: 80px; }
    .blog-content h3 { font-size: 1.18rem; scroll-margin-top: 80px; }
    .blog-post-cta { padding: 26px 22px; }
    .blog-post-cta h3 { font-size: 1.3rem; }
}

@media (max-width: 575px) {
    .blog-content { font-size: 0.99rem; }
    .blog-content h2 { font-size: 1.3rem; }
    .blog-content blockquote { padding: 18px 18px; }
    .blog-content ul li, .blog-content ol li { padding-left: 27px; }
    .blog-post-cta-actions { width: 100%; }
    .blog-post-cta-actions > * { width: 100%; justify-content: center; }
    .blog-toc a { font-size: 0.88rem; }
}

/* =============================================
   ONLINE PAYMENT PAGE
   ============================================= */
.pay-section { padding: 70px 0 90px; }

/* Steps strip */
.pay-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 44px;
}

.pay-step {
    position: relative;
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 24px 20px 20px;
    box-shadow: var(--shadow-soft);
}

.pay-step-num {
    position: absolute;
    top: -14px;
    left: 20px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 0.9rem;
    box-shadow: 0 6px 16px rgba(255,153,51,0.35);
}

.pay-step strong {
    display: block;
    margin: 8px 0 6px;
    font-family: var(--font-sans);
    color: var(--deep-blue);
    font-size: 1rem;
}

.pay-step span:not(.pay-step-num) {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--text-gray);
}

/* Cards */
.pay-card {
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 34px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-soft);
    scroll-margin-top: 120px;
}

.pay-card-head { margin-bottom: 26px; }

.pay-kicker {
    display: block;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--saffron-primary);
    margin-bottom: 8px;
}

.pay-card-head h2 {
    font-size: 1.72rem;
    margin: 0;
    padding-bottom: 14px;
    position: relative;
}

.pay-card-head h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 54px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--saffron-primary), transparent);
}

.pay-card-sub {
    margin: 14px 0 0;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--text-gray);
}

.pay-sub {
    font-size: 1.08rem;
    margin-bottom: 14px;
    color: var(--deep-blue);
}

/* Tabs */
.pay-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px;
    background: var(--soft-cream);
    border-radius: 14px;
    margin-bottom: 28px;
}

.pay-tab {
    flex: 1 1 150px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 16px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-gray);
    cursor: pointer;
    transition: all 0.25s ease;
}

.pay-tab i { font-size: 0.95rem; }
.pay-tab:hover { color: var(--deep-blue); }

.pay-tab.active {
    background: var(--pure-white);
    color: var(--deep-blue);
    box-shadow: var(--shadow-soft);
}

.pay-tab.active i { color: var(--saffron-primary); }

.pay-panel { display: none; }
.pay-panel.active { display: block; animation: fadeIn 0.35s ease-out; }

/* UPI panel */
.pay-upi-box {
    background: linear-gradient(135deg, rgba(255,153,51,0.12), rgba(255,153,51,0.04));
    border: 2px dashed rgba(255,153,51,0.55);
    border-radius: 16px;
    padding: 26px;
    text-align: center;
    margin-bottom: 28px;
}

.pay-upi-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.76rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-gray);
    margin-bottom: 12px;
}

.pay-upi-value {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.pay-upi-value code {
    font-family: 'Courier New', monospace;
    font-size: 1.32rem;
    font-weight: 700;
    color: var(--deep-blue);
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 12px 20px;
    word-break: break-all;
}

.pay-copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 10px;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.pay-copy:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); }
.pay-copy.copied { background: #28a745; }

.pay-copy-sm {
    padding: 8px 11px;
    border-radius: 8px;
    background: var(--soft-cream);
    color: var(--saffron-dark);
    font-size: 0.82rem;
}

.pay-copy-sm:hover { background: var(--saffron-primary); color: #fff; }
.pay-copy-sm.copied { background: #28a745; color: #fff; }

.pay-apps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.pay-apps span {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-gray);
    margin-right: 4px;
}

/* Each app chip carries a dot in its own brand colour, so the row reads as
   a set of recognisable payment apps rather than four identical grey pills. */
.pay-apps em {
    --app: var(--deep-blue);
    font-style: normal;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.79rem;
    line-height: 1;
    color: var(--app);
    background: color-mix(in srgb, var(--app) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--app) 26%, #fff);
    border-radius: 50px;
    padding: 7px 14px 7px 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pay-apps em::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--app);
    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--app) 20%, transparent);
    flex-shrink: 0;
}

.pay-apps em:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 14px color-mix(in srgb, var(--app) 22%, transparent);
}

.pay-apps .app-phonepe { --app: #5F259F; }
.pay-apps .app-gpay    { --app: #1A73E8; }
.pay-apps .app-paytm   { --app: #00A0E3; }
.pay-apps .app-bhim    { --app: #E4761B; }
.pay-apps .app-amazon  { --app: #FF9900; }

/* color-mix is well supported now, but keep a readable result if it is not. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
    .pay-apps em { background: #fff; border-color: var(--border-light); }
}

.pay-list { counter-reset: pay; list-style: none; margin: 0; padding: 0; }

.pay-list li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 14px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-dark);
}

.pay-list li::before {
    counter-increment: pay;
    content: counter(pay);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--soft-cream);
    border: 1px solid rgba(255,153,51,0.45);
    color: var(--saffron-dark);
    font-weight: 800;
    font-size: 0.78rem;
    line-height: 25px;
    text-align: center;
}

/* QR panel */
.pay-qr-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
}

.pay-qr-frame {
    flex: 0 0 auto;
    background: #fff;
    border: 3px solid var(--saffron-primary);
    border-radius: 16px;
    padding: 14px;
    box-shadow: var(--shadow-medium);
}

.pay-qr-frame img {
    width: 250px;
    height: 250px;
    object-fit: contain;
    display: block;
    border-radius: 8px;
}

.pay-qr-side { flex: 1 1 260px; min-width: 0; }

.pay-qr-side p {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 16px;
}

.pay-qr-side .pay-apps { justify-content: flex-start; margin-bottom: 20px; }

.pay-ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 50px;
    border: 2px solid var(--border-light);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--deep-blue);
    transition: all 0.25s ease;
}

.pay-ghost-btn:hover { border-color: var(--saffron-primary); color: var(--saffron-primary); }

/* Bank panel */
/* Bank details read as one passbook-style panel. Six separate floating
   cards left the copy button marooned on the far right with a lot of dead
   space between it and the value it copies. */
.pay-bank {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    overflow: hidden;
    background: var(--pure-white);
}

.pay-bank li {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.2s ease;
}

.pay-bank li:last-child { border-bottom: 0; }
.pay-bank li:nth-child(even) { background: rgba(0, 51, 102, 0.018); }
.pay-bank li:hover { background: rgba(255, 153, 51, 0.07); }

.pay-bank-label {
    font-family: var(--font-sans);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--text-gray);
}

.pay-bank-value {
    min-width: 0;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--deep-blue);
    word-break: break-word;
}

.pay-bank-value.mono {
    font-family: 'Courier New', monospace;
    font-size: 1.02rem;
    letter-spacing: 1.2px;
}

/* The copy button only shows its intent on the row you are pointing at,
   so the column of buttons stops competing with the values. */
.pay-bank .pay-copy-sm {
    opacity: 0.45;
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.pay-bank li:hover .pay-copy-sm,
.pay-bank .pay-copy-sm:focus-visible { opacity: 1; }

@media (hover: none) {
    .pay-bank .pay-copy-sm { opacity: 1; }
}

@media (max-width: 575px) {
    .pay-bank li {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 12px;
        padding: 12px 14px;
    }
    .pay-bank-label { grid-column: 1 / -1; font-size: 0.68rem; }
    .pay-bank-value { font-size: 0.92rem; }
    .pay-bank-value.mono { font-size: 0.95rem; letter-spacing: 0.8px; }
}

/* Reference note */
.pay-note {
    display: flex;
    gap: 14px;
    margin-top: 26px;
    padding: 18px 20px;
    border-radius: 14px;
    background: rgba(255,153,51,0.09);
    border-left: 4px solid var(--saffron-primary);
    font-family: var(--font-sans);
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-dark);
}

.pay-note i { color: var(--saffron-primary); font-size: 1.1rem; margin-top: 3px; }
.pay-note strong { color: var(--deep-blue); display: block; margin-bottom: 3px; }

/* Confirmation form */
.pay-form .form-label {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--deep-blue);
    margin-bottom: 7px;
}

.pay-form .form-label span { color: #dc3545; }

.pay-form .form-control,
.pay-form .form-select {
    border: 2px solid var(--border-light);
    border-radius: 11px;
    padding: 12px 15px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
}

.pay-form .form-control:focus,
.pay-form .form-select:focus {
    border-color: var(--saffron-primary);
    box-shadow: 0 0 0 4px rgba(255,153,51,0.14);
}

.pay-form small {
    display: block;
    margin-top: 5px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: var(--text-gray);
}

.pay-success {
    text-align: center;
    padding: 40px 24px;
    border-radius: 16px;
    background: rgba(40,167,69,0.07);
    border: 2px solid rgba(40,167,69,0.4);
}

.pay-success i { font-size: 3.2rem; color: #28a745; display: block; margin-bottom: 14px; }
.pay-success h4 { color: var(--deep-blue); margin-bottom: 10px; }
.pay-success p { font-family: var(--font-sans); font-size: 0.95rem; margin-bottom: 18px; }

/* What happens next */
.pay-next {
    background: linear-gradient(135deg, var(--deep-blue), var(--blue-dark));
    border-radius: 20px;
    padding: 32px 34px;
    color: #fff;
}

.pay-next h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.pay-next h3 i { color: var(--saffron-primary); }

.pay-next ol { counter-reset: nxt; list-style: none; margin: 0; padding: 0; }

.pay-next li {
    position: relative;
    padding-left: 42px;
    margin-bottom: 14px;
    font-family: var(--font-sans);
    font-size: 0.93rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.78);
}

.pay-next li:last-child { margin-bottom: 0; }
.pay-next li strong { color: #fff; }

.pay-next li::before {
    counter-increment: nxt;
    content: counter(nxt);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,153,51,0.18);
    border: 1px solid var(--saffron-primary);
    color: var(--saffron-primary);
    font-weight: 800;
    font-size: 0.78rem;
    line-height: 26px;
    text-align: center;
}

/* Sidebar */
.pay-aside { position: sticky; top: 120px; }

.pay-help-card {
    background: linear-gradient(135deg, var(--deep-blue), var(--blue-dark));
    border-radius: 20px;
    padding: 30px 26px;
    color: #fff;
    margin-bottom: 24px;
}

.pay-help-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,153,51,0.18);
    border: 2px solid var(--saffron-primary);
    color: var(--saffron-primary);
    font-size: 1.2rem;
    margin-bottom: 16px;
}

.pay-help-card h4 { color: #fff; font-size: 1.2rem; margin-bottom: 10px; }

.pay-help-card p {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.7;
    margin-bottom: 18px;
}

.pay-help-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    border-radius: 50px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.94rem;
    margin-bottom: 10px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pay-help-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); }
.pay-help-call { background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark)); color: #fff; }
.pay-help-call:hover { color: #fff; }
.pay-help-wa { background: #25D366; color: #fff; }
.pay-help-wa:hover { color: #fff; }

.pay-help-link,
.pay-help-hours {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 0.84rem;
    color: rgba(255,255,255,0.72);
    margin-top: 12px;
    word-break: break-all;
}

.pay-help-link i,
.pay-help-hours i { color: var(--saffron-primary); flex: 0 0 auto; }
.pay-help-link:hover { color: var(--saffron-primary); }

.pay-trust-card,
.pay-mini-card {
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 26px 24px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 24px;
}

.pay-trust-card h4,
.pay-mini-card h5 {
    font-size: 1.1rem;
    margin-bottom: 16px;
    padding-bottom: 12px;
    position: relative;
}

.pay-trust-card h4::after,
.pay-mini-card h5::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--saffron-primary), transparent);
}

.pay-trust-card ul { list-style: none; margin: 0; padding: 0; }

.pay-trust-card li {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-gray);
    border-bottom: 1px solid var(--border-light);
}

.pay-trust-card li:last-child { border-bottom: none; }
.pay-trust-card li i { color: #28a745; margin-top: 4px; flex: 0 0 16px; }

.pay-mini-card p {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

/* Payment responsive */
@media (max-width: 991px) {
    .pay-section { padding: 45px 0 70px; }
    .pay-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
    .pay-card { padding: 26px 22px; }
    .pay-card-head h2 { font-size: 1.42rem; }
    .pay-aside { position: static; }
    .pay-next { padding: 26px 22px; }
}

@media (max-width: 575px) {
    .pay-steps { grid-template-columns: minmax(0, 1fr); }
    .pay-card { padding: 22px 18px; }
    .pay-tab { flex: 1 1 100%; }
    .pay-upi-value code { font-size: 1.05rem; padding: 11px 14px; }
    .pay-copy { width: 100%; justify-content: center; }
    .pay-qr-frame { margin: 0 auto; }
    .pay-qr-frame img { width: 210px; height: 210px; }
    .pay-bank li { flex-wrap: wrap; }
    .pay-bank-label { flex: 1 0 100%; }
    .pay-bank-value { flex: 1 1 auto; }
}

/* =============================================
   CAB BOOKING — FLEET CARDS
   ============================================= */
.cab-section { padding: 80px 0 90px; }

.cab-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 44px;
}

.cab-filter {
    border: 2px solid var(--border-light);
    background: var(--pure-white);
    border-radius: 50px;
    padding: 10px 24px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-gray);
    cursor: pointer;
    transition: all 0.25s ease;
}

.cab-filter:hover { border-color: var(--saffron-primary); color: var(--saffron-primary); }

.cab-filter.active {
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 20px rgba(255,153,51,0.32);
}

.cab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 28px;
}

.cab-card {
    display: flex;
    flex-direction: column;
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.cab-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-medium);
    border-color: rgba(255,153,51,0.45);
}

.cab-card-media {
    position: relative;
    height: 210px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border-bottom: 1px solid var(--border-light);
}

.cab-card-media img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.45s ease;
}

.cab-card:hover .cab-card-media img { transform: scale(1.06); }

.cab-card-cat {
    position: absolute;
    right: 16px;
    bottom: 14px;
    background: var(--deep-blue);
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 6px 15px;
    border-radius: 50px;
}

.cab-card-badge {
    position: absolute;
    left: 16px;
    top: 14px;
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.72rem;
    padding: 6px 14px;
    border-radius: 50px;
    box-shadow: 0 6px 16px rgba(255,153,51,0.35);
}

.cab-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px;
}

.cab-card-title { font-size: 1.3rem; margin-bottom: 16px; }

.cab-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.cab-specs span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--soft-cream);
    border: 1px solid var(--border-light);
    border-radius: 50px;
    padding: 7px 14px;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-dark);
}

.cab-specs i { color: var(--saffron-primary); font-size: 0.82rem; }

.cab-features { list-style: none; margin: 0 0 18px; padding: 0; }

.cab-features li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 5px 0;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-dark);
}

.cab-features i { color: #28a745; margin-top: 4px; font-size: 0.85rem; flex: 0 0 auto; }

.cab-card-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px dashed var(--border-light);
}

.cab-price-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-gray);
}

.cab-price strong {
    display: block;
    font-family: var(--font-sans);
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1.15;
    color: var(--saffron-primary);
}

.cab-price-ask { font-size: 1.2rem !important; }

.cab-price-unit {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-gray);
}

.cab-card-actions { display: flex; align-items: center; gap: 10px; }

.cab-book-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 50px;
    padding: 13px 24px;
    background: linear-gradient(135deg, var(--deep-blue), var(--blue-light));
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.94rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cab-book-btn i { font-size: 0.82rem; transition: transform 0.3s ease; }
.cab-book-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); }
.cab-book-btn:hover i { transform: translateX(4px); }

.cab-wa-btn {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    color: #fff;
    font-size: 1.15rem;
    transition: all 0.3s ease;
}

.cab-wa-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37,211,102,0.4); }

/* Assurance + help strips */
.cab-assure {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255,255,255,0.14);
    border-radius: 20px;
    overflow: hidden;
    margin-top: 50px;
}

.cab-assure > div {
    background: linear-gradient(135deg, var(--deep-blue), var(--blue-dark));
    padding: 26px 22px;
    color: #fff;
}

.cab-assure i { display: block; font-size: 1.5rem; color: var(--saffron-primary); margin-bottom: 12px; }
.cab-assure strong { display: block; font-family: var(--font-sans); font-size: 1rem; margin-bottom: 6px; }
.cab-assure span { font-family: var(--font-sans); font-size: 0.85rem; color: rgba(255,255,255,0.7); line-height: 1.6; }

.cab-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 26px;
    margin-top: 30px;
    padding: 36px;
    border-radius: 20px;
    background: var(--soft-cream);
    border: 2px dashed rgba(255,153,51,0.42);
}

.cab-help h3 { font-size: 1.5rem; margin-bottom: 8px; }
.cab-help p { margin: 0; max-width: 520px; }

.cab-help-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.cab-help-wa {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    padding: 16px 30px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.cab-help-wa:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 10px 26px rgba(37,211,102,0.4); }

/* ===== Cab booking popup ===== */
.cab-modal .modal-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.28);
}

.cab-modal-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 26px 28px;
    background: linear-gradient(135deg, var(--deep-blue), var(--blue-dark));
    color: #fff;
}

.cab-modal-head .btn-close { position: absolute; top: 18px; right: 18px; opacity: 0.85; }

.cab-modal-icon {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,153,51,0.2);
    border: 2px solid var(--saffron-primary);
    color: var(--saffron-primary);
    font-size: 1.15rem;
}

.cab-modal-head h5 { color: #fff; margin: 0 0 4px; font-size: 1.2rem; }

.cab-modal-head p {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: rgba(255,255,255,0.72);
}

.cab-modal-body {
    padding: 20px 24px 22px;
    background: var(--soft-cream);
    max-height: 82vh;
    overflow-y: auto;
    overscroll-behavior: contain;   /* stop the page scrolling behind it */

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 51, 102, 0.22) transparent;
}

/* The default chrome scrollbar is a heavy grey slab against the cream
   panel; a slim rounded track sits inside the rounded modal instead. */
.cab-modal-body::-webkit-scrollbar { width: 6px; }
.cab-modal-body::-webkit-scrollbar-track { background: transparent; }
.cab-modal-body::-webkit-scrollbar-thumb {
    background: rgba(0, 51, 102, 0.18);
    border-radius: 10px;
}
.cab-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 153, 51, 0.65); }

.cab-modal-body .row { --bs-gutter-y: 0.7rem; }

.cab-modal-body .form-label {
    margin-bottom: 4px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--deep-blue);
    margin-bottom: 6px;
}

.cab-modal-body .form-label span { color: #dc3545; }

.cab-modal-body .form-control {
    border: 2px solid var(--border-light);
    border-radius: 10px;
    padding: 11px 14px;
    font-family: var(--font-sans);
    font-size: 0.93rem;
}

.cab-modal-body .form-control:focus {
    border-color: var(--saffron-primary);
    box-shadow: 0 0 0 4px rgba(255,153,51,0.14);
}

.cab-alert {
    background: rgba(220,53,69,0.08);
    border: 1px solid rgba(220,53,69,0.35);
    color: #b02a37;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-family: var(--font-sans);
    font-size: 0.9rem;
}

.cab-trip { display: flex; gap: 10px; flex-wrap: wrap; }
.cab-trip label { flex: 1 1 140px; cursor: pointer; margin: 0; position: relative; }
.cab-trip input { position: absolute; opacity: 0; pointer-events: none; }

.cab-trip span {
    display: block;
    text-align: center;
    padding: 12px 16px;
    border: 2px solid var(--border-light);
    border-radius: 10px;
    background: var(--pure-white);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-gray);
    transition: all 0.25s ease;
}

.cab-trip input:checked + span {
    border-color: var(--saffron-primary);
    background: rgba(255,153,51,0.1);
    color: var(--saffron-dark);
}

/* Success + WhatsApp handoff */
.cab-success {
    text-align: center;
    padding: 24px 20px 20px;
    border-radius: 14px;
    background: rgba(40,167,69,0.08);
    border: 2px solid rgba(40,167,69,0.4);
    margin-bottom: 22px;
}

.cab-success i { font-size: 3rem; color: #28a745; display: block; margin-bottom: 12px; }
.cab-success h4 { color: var(--deep-blue); margin-bottom: 8px; }
.cab-success p { font-family: var(--font-sans); font-size: 0.93rem; margin: 0; }
.cab-success strong { color: var(--saffron-dark); font-family: 'Courier New', monospace; font-size: 1.05rem; }

.cab-wa-offer {
    background: var(--pure-white);
    border: 2px solid rgba(37,211,102,0.4);
    border-radius: 14px;
    padding: 20px;
}

.cab-wa-offer-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }

.cab-wa-offer-head > i {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.cab-wa-offer-head strong { display: block; font-family: var(--font-sans); color: var(--deep-blue); margin-bottom: 3px; }

.cab-wa-offer-head span {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--text-gray);
    line-height: 1.6;
}

.cab-wa-preview {
    background: var(--soft-cream);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 16px;
    font-family: var(--font-sans);
    font-size: 0.84rem;
    line-height: 1.75;
    color: var(--text-dark);
    white-space: pre-wrap;
    max-height: 210px;
    overflow-y: auto;
}

.cab-wa-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.cab-wa-send {
    flex: 1 1 200px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #25D366;
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    padding: 14px 24px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.cab-wa-send:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(37,211,102,0.4); }

.cab-wa-skip {
    border: 2px solid var(--border-light);
    background: transparent;
    border-radius: 50px;
    padding: 14px 22px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-gray);
    cursor: pointer;
    transition: all 0.25s ease;
}

.cab-wa-skip:hover { border-color: var(--text-gray); color: var(--text-dark); }

/* Cab responsive */
@media (max-width: 991px) {
    .cab-section { padding: 50px 0 70px; }
    .cab-assure { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cab-help { padding: 26px 22px; }
    .cab-help h3 { font-size: 1.3rem; }
}

@media (max-width: 575px) {
    .cab-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .cab-assure { grid-template-columns: minmax(0, 1fr); }
    .cab-card-media { height: 180px; }
    .cab-card-body { padding: 20px; }
    .cab-card-actions { width: 100%; }
    .cab-book-btn { flex: 1; justify-content: center; }
    .cab-modal-body { padding: 20px 18px 24px; }
    .cab-help-actions { width: 100%; }
    .cab-help-actions > * { width: 100%; justify-content: center; }
    .cab-wa-actions > * { width: 100%; justify-content: center; }
}

/* =============================================
   GALLERY
   ============================================= */
.gal-section { padding: 80px 0 90px; }

.gal-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 44px;
}

.gal-filter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 2px solid var(--border-light);
    background: var(--pure-white);
    border-radius: 50px;
    padding: 11px 20px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-gray);
    cursor: pointer;
    transition: all 0.25s ease;
}

.gal-filter i { color: var(--saffron-primary); font-size: 0.9rem; }

.gal-filter em {
    font-style: normal;
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--deep-blue);
    background: rgba(0,51,102,0.08);
    border-radius: 50px;
    padding: 3px 10px;
}

.gal-filter:hover { border-color: var(--saffron-primary); color: var(--deep-blue); }

.gal-filter.active {
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 20px rgba(255,153,51,0.32);
}

.gal-filter.active i { color: #fff; }
.gal-filter.active em { background: rgba(255,255,255,0.25); color: #fff; }

/* Grid */
.gal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.gal-item {
    position: relative;
    margin: 0;
    height: 240px;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    background: var(--soft-cream);
}

/* Let the first tile of each run breathe a little for a varied, editorial grid */
.gal-grid .gal-item:nth-child(7n+1) { grid-column: span 2; height: 300px; }
.gal-grid .gal-item:nth-child(11n+5) { height: 300px; }

.gal-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s ease;
}

.gal-item:hover img { transform: scale(1.08); }

.gal-item figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 18px 16px;
    background: linear-gradient(180deg, transparent, rgba(0,34,68,0.9));
    color: #fff;
    transform: translateY(12px);
    opacity: 0;
    transition: all 0.3s ease;
}

.gal-item:hover figcaption { transform: translateY(0); opacity: 1; }

.gal-item-cat {
    display: inline-block;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 0.68rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--saffron-primary);
    margin-bottom: 5px;
}

.gal-item figcaption strong {
    display: block;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.45;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.gal-item-zoom {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.9);
    color: var(--deep-blue);
    font-size: 0.85rem;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

.gal-item:hover .gal-item-zoom { opacity: 1; transform: scale(1); }

.gal-empty {
    text-align: center;
    padding: 60px 20px;
    font-family: var(--font-sans);
    color: var(--text-gray);
}

.gal-empty i { display: block; font-size: 2.4rem; color: var(--saffron-primary); margin-bottom: 14px; }

/* Lightbox */
.gal-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: rgba(0, 17, 34, 0.96);
    backdrop-filter: blur(4px);
}

.gal-lightbox[hidden] { display: none; }

.gal-lb-stage {
    margin: 0;
    max-width: 1100px;
    width: 100%;
    text-align: center;
}

.gal-lb-stage img {
    max-width: 100%;
    max-height: 76vh;
    width: auto;
    margin: 0 auto;
    border-radius: 14px;
    object-fit: contain;
    box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}

.gal-lb-stage figcaption { margin-top: 18px; color: #fff; }

.gal-lb-stage figcaption span {
    display: block;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--saffron-primary);
    margin-bottom: 6px;
}

.gal-lb-stage figcaption strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
}

.gal-lb-stage figcaption small {
    display: block;
    margin-top: 8px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
}

.gal-lb-close,
.gal-lb-nav {
    position: absolute;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.gal-lb-close:hover,
.gal-lb-nav:hover { background: var(--saffron-primary); }

.gal-lb-close {
    top: 24px;
    right: 26px;
    width: 46px;
    height: 46px;
    font-size: 1.2rem;
}

.gal-lb-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 1.15rem;
}

.gal-lb-prev { left: 26px; }
.gal-lb-next { right: 26px; }

/* Gallery responsive */
@media (max-width: 991px) {
    .gal-section { padding: 50px 0 70px; }
    .gal-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
    .gal-item { height: 190px; }
    .gal-grid .gal-item:nth-child(7n+1) { height: 230px; }
    .gal-grid .gal-item:nth-child(11n+5) { height: 190px; }
    .gal-item figcaption { opacity: 1; transform: none; padding: 30px 14px 12px; }
    .gal-item-zoom { display: none; }
}

@media (max-width: 575px) {
    .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .gal-item { height: 150px; border-radius: 12px; }
    .gal-grid .gal-item:nth-child(7n+1) { grid-column: span 2; height: 200px; }
    .gal-grid .gal-item:nth-child(11n+5) { height: 150px; }
    .gal-item figcaption strong { font-size: 0.8rem; -webkit-line-clamp: 1; }
    .gal-filter { padding: 9px 15px; font-size: 0.83rem; }
    .gal-lightbox { padding: 16px; }
    .gal-lb-nav { width: 42px; height: 42px; }
    .gal-lb-prev { left: 10px; }
    .gal-lb-next { right: 10px; }
    .gal-lb-close { top: 12px; right: 12px; width: 40px; height: 40px; }
}

/* =============================================
   FULL-WIDTH LAYOUT
   Bootstrap caps .container at 1140/1320px, which left large
   monitors mostly empty. Widen it site-wide and rescale the type
   so longer lines stay readable.
   ============================================= */
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    width: 100%;
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(16px, 3.2vw, 56px);
    padding-right: clamp(16px, 3.2vw, 56px);
}

/* The navbar lays out its own row inside .container — keep it aligned. */
.navbar > .container { padding-left: clamp(16px, 3.2vw, 56px); padding-right: clamp(16px, 3.2vw, 56px); }

/* --- Type scale, tightened for the wider measure --- */
h1 { font-size: 3rem; }
h2 { font-size: 2.15rem; }
h3 { font-size: 1.55rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }

p { font-size: 1rem; }

body { font-size: 15.5px; line-height: 1.75; }

.hero-title { font-size: 3.6rem; }
.hero-subtitle { font-size: 1.25rem; }
.hero-badge { font-size: 0.88rem; }

.section { padding: 84px 0; }
.section-title { font-size: 2.4rem; }
.section-subtitle { font-size: 0.92rem; }
.section-description { font-size: 1.05rem; max-width: 760px; }

.breadcrumb-section { padding: 66px 0; }
.breadcrumb-title { font-size: 2.5rem; }
.breadcrumb-nav { font-size: 1rem; }

.btn-primary-custom,
.btn-secondary-custom { padding: 14px 34px; font-size: 1rem; }

.nav-link { font-size: 0.95rem; padding: 10px 16px !important; }

.footer { padding: 70px 0 0; }
.footer-widget h4 { font-size: 1.15rem; }

/* --- Keep long-form text at a readable measure inside the wider column --- */
.blog-content,
.blog-post-lead,
.pkg-lead { max-width: 54rem; }

.blog-content .blog-table-wrap,
.blog-content img { max-width: 100%; }

.pkg-rich { max-width: 58rem; }

/* --- Let the auto-fill grids use the extra room --- */
@media (min-width: 1600px) {
    .cab-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
    .gal-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
    .pkg-highlight-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

@media (min-width: 1400px) {
    .hero-title { font-size: 4rem; }
    .section-title { font-size: 2.6rem; }
}

/* --- Responsive scale, re-declared after the full-width block so it still wins --- */
@media (max-width: 1199px) {
    .hero-title { font-size: 3.1rem; }
    .section-title { font-size: 2.2rem; }
    .nav-link { font-size: 0.9rem; padding: 10px 12px !important; }
}

@media (max-width: 991px) {
    h1 { font-size: 2.3rem; }
    h2 { font-size: 1.9rem; }
    h3 { font-size: 1.45rem; }
    h4 { font-size: 1.18rem; }

    .section { padding: 58px 0; }
    .section-title { font-size: 2rem; }
    .section-description { font-size: 1rem; }

    .hero-title { font-size: 2.6rem; }
    .hero-subtitle { font-size: 1.1rem; }

    .breadcrumb-section { padding: 52px 0; }
    .breadcrumb-title { font-size: 2.1rem; }

    .nav-link { padding: 10px 15px !important; }

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media (max-width: 767px) {
    h1 { font-size: 1.95rem; }
    h2 { font-size: 1.65rem; }
    h3 { font-size: 1.35rem; }

    .section { padding: 46px 0; }
    .section-title { font-size: 1.7rem; }

    .hero-title { font-size: 2.1rem; }
    .hero-subtitle { font-size: 1rem; }

    .breadcrumb-section { padding: 44px 0; }
    .breadcrumb-title { font-size: 1.75rem; }
    .breadcrumb-nav { font-size: 0.92rem; }

    .btn-primary-custom,
    .btn-secondary-custom { padding: 14px 26px; font-size: 0.96rem; }

    .footer { padding: 52px 0 0; }
}

@media (max-width: 575px) {
    body { font-size: 15px; }
    h1 { font-size: 1.75rem; }
    .section-title { font-size: 1.55rem; }
    .breadcrumb-title { font-size: 1.55rem; }

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* --- Wide-screen refinements --- */
@media (min-width: 1600px) {
    /* 4 roomy vehicle cards per row reads better than 5 cramped ones */
    .cab-grid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
}

/* Two-line allowance keeps card rows aligned when a model name wraps */
@media (min-width: 576px) {
    .cab-card-title {
        min-height: 3.4rem;
        display: flex;
        align-items: flex-start;
    }
}

/* =============================================
   CARD SLIDER (home page blog carousel)
   Scroll-snap based — no carousel library needed.
   ============================================= */
.blog-slider-section { background: var(--soft-cream); }

.slider-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 36px;
}

.slider-head .section-subtitle { margin-bottom: 8px; }

.slider-head .section-title {
    margin-bottom: 0;
    padding-bottom: 14px;
}

.slider-head .section-title::after { left: 0; transform: none; }

.slider-head-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.slider-all {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--deep-blue);
    white-space: nowrap;
}

.slider-all i { margin-left: 7px; font-size: 0.8rem; transition: transform 0.3s ease; }
.slider-all:hover { color: var(--saffron-primary); }
.slider-all:hover i { transform: translateX(4px); }

.slider-nav { display: flex; gap: 10px; }

.slider-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid var(--border-light);
    background: var(--pure-white);
    color: var(--deep-blue);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.slider-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.slider-btn:disabled { opacity: 0.35; cursor: default; }

/* Track */
.slider-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * 26px) / 3);
    gap: 26px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 6px;
}

.slider-track::-webkit-scrollbar { display: none; }

.slider-slide {
    scroll-snap-align: start;
    min-width: 0;
}

.slider-slide .blog-card { height: 100%; }

/* Dots */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 30px;
}

.slider-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50px;
    background: rgba(0, 51, 102, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-dot:hover { background: rgba(0, 51, 102, 0.4); }

/* background-clip has to be restated here: this rule is more specific than
   the mobile tap-target block below, and the `background` shorthand resets
   background-clip to border-box - which made the active dot paint its whole
   52x36 hit box as a solid orange slab on phones. */
.slider-dot.active {
    width: 26px;
    background: linear-gradient(90deg, var(--saffron-primary), var(--saffron-dark));
    background-clip: content-box;
}

/* Slider responsive */
@media (min-width: 1600px) {
    .slider-track { grid-auto-columns: calc((100% - 3 * 26px) / 4); }
}

@media (max-width: 991px) {
    .slider-track { grid-auto-columns: calc((100% - 20px) / 2); gap: 20px; }
    .slider-head { margin-bottom: 28px; }
}

@media (max-width: 575px) {
    .slider-track { grid-auto-columns: 86%; gap: 16px; }
    .slider-head { align-items: flex-start; }
    .slider-head-actions { width: 100%; justify-content: space-between; }
}

/* =============================================
   LANGUAGE SWITCHER (Google Translate, restyled)
   Google injects its own stylesheet after ours and re-applies native
   select chrome, so rather than fight it we render our own label and
   let their <select> sit invisibly on top - it stays fully functional
   and accessible, we just control how it looks.
   ============================================= */
.lang-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    vertical-align: middle;
    margin-right: 16px;
    padding: 6px 15px 6px 13px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.26);
    transition: border-color 0.25s ease, background-color 0.25s ease;
    cursor: pointer;
    overflow: hidden;
}

.lang-switch:hover,
.lang-switch:focus-within {
    background: rgba(255, 153, 51, 0.18);
    border-color: var(--saffron-primary);
}

.lang-switch-globe,
.lang-switch-caret {
    color: var(--saffron-primary);
    pointer-events: none;
    flex: 0 0 auto;
}

.lang-switch-globe { font-size: 0.88rem; }
.lang-switch-caret { font-size: 0.62rem; opacity: 0.85; transition: transform 0.25s ease; }
.lang-switch:hover .lang-switch-caret { transform: translateY(2px); }

.lang-switch-label {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.82rem;
    line-height: 1.4;
    color: #fff;
    white-space: nowrap;
    pointer-events: none;
}

/* Google's widget, stretched invisibly across the pill */
.lang-switch #google_translate_element {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.lang-switch .goog-te-gadget {
    display: block !important;
    width: 100%;
    height: 100%;
    font-size: 0 !important;
    margin: 0 !important;
}

.lang-switch .goog-te-gadget > span,
.lang-switch .goog-te-gadget > a,
.lang-switch .goog-logo-link,
.lang-switch img { display: none !important; }

.lang-switch .goog-te-gadget > div { width: 100%; height: 100%; }

.lang-switch .goog-te-combo {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    cursor: pointer;
}

/* Visible focus ring for keyboard users, since the select itself is transparent */
.lang-switch:focus-within { outline: 2px solid var(--saffron-primary); outline-offset: 2px; }

/* Keep Google's injected banner from shifting the page */
.skiptranslate > iframe { display: none !important; visibility: hidden !important; }
body { top: 0 !important; position: static !important; }

@media (max-width: 991px) {
    .lang-switch { margin-right: 10px; padding: 5px 12px; }
    .lang-switch-label { font-size: 0.78rem; }
}

/* =============================================
   FLOATING ACTION STACK
   WhatsApp on top, call below it, back-to-top at the bottom.
   ============================================= */
.whatsapp-float { bottom: 156px !important; }

.call-float {
    position: fixed;
    bottom: 90px;
    right: 30px;
    z-index: 9999;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    color: #fff;
    font-size: 1.4rem;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(255, 153, 51, 0.5);
    transition: all 0.3s ease;
}

.call-float:hover {
    color: #fff;
    transform: scale(1.12);
    background: linear-gradient(135deg, var(--saffron-dark), var(--saffron-primary));
}

/* Gentle ring so the call button reads as "tap me" without being noisy */
.call-float::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 153, 51, 0.55);
    animation: call-pulse 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes call-pulse {
    0%   { transform: scale(0.9); opacity: 0.9; }
    70%  { transform: scale(1.25); opacity: 0; }
    100% { transform: scale(1.25); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .call-float::after { animation: none; opacity: 0.5; }
}

@media (max-width: 991px) {
    .whatsapp-float { bottom: 148px !important; right: 18px; width: 52px; height: 52px; }
    .call-float { bottom: 88px; right: 18px; width: 52px; height: 52px; font-size: 1.25rem; }
    #backToTop { right: 18px; }
}

/* Package pages add a sticky booking bar - lift the stack clear of it */
@media (max-width: 991px) {
    body:has(.pkg-mobile-bar) .whatsapp-float { bottom: 210px !important; }
    body:has(.pkg-mobile-bar) .call-float { bottom: 150px; }
    body:has(.pkg-mobile-bar) #backToTop { bottom: 92px; }
}

/* =============================================
   HOME HERO — split layout, photos shown clean
   The banner images carry no dark overlay; the copy sits on the
   brand background beside them instead of on top of them.
   ============================================= */
.hero-section {
    height: auto !important;
    min-height: 0 !important;
    padding: 70px 0 80px;
    background: linear-gradient(135deg, var(--deep-blue) 0%, var(--blue-dark) 55%, #001a33 100%) !important;
    overflow: hidden;
}

.hero-section::before {
    background: radial-gradient(circle at 12% 25%, rgba(255, 153, 51, 0.16) 0%, transparent 45%);
}

.hero-content { position: relative; z-index: 2; padding: 0; }

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 153, 51, 0.16);
    border: 1px solid rgba(255, 153, 51, 0.5);
    border-radius: 50px;
    padding: 8px 20px;
    margin-bottom: 22px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--saffron-light);
}

.hero-kicker i { color: var(--saffron-primary); }

.hero-title {
    color: var(--pure-white);
    font-size: 3.3rem;
    line-height: 1.18;
    margin-bottom: 20px;
    text-shadow: none;
}

.hero-title span { color: var(--saffron-primary); }

.hero-desc {
    font-family: var(--font-sans);
    font-size: 1.06rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.78);
    max-width: 33rem;
    margin-bottom: 32px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-call {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    border-radius: 50px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.hero-call:hover { background: #fff; color: var(--deep-blue); border-color: #fff; }

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 38px;
    margin-top: 42px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-stat strong {
    display: block;
    font-family: var(--font-sans);
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1.1;
    color: var(--saffron-primary);
}

.hero-stat span {
    font-family: var(--font-sans);
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.7);
}

/* --- Hero image slider (no overlay on the photos) --- */
.hero-slider {
    position: relative;
    z-index: 2;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
}

.hero-slider-stage {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--blue-dark);
}

.hero-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 0.9s ease;
    pointer-events: none;
}

.hero-slide.active { opacity: 1; pointer-events: auto; }

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Caption chip sits on the photo edge, not a wash over the whole image */
.hero-slide figcaption {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    border-radius: 50px;
    background: rgba(0, 34, 68, 0.72);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.86rem;
}

.hero-slide figcaption i { color: var(--saffron-primary); font-size: 0.82rem; }

.hero-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--deep-blue);
    font-size: 0.9rem;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
}

.hero-slider:hover .hero-slider-btn { opacity: 1; }
.hero-slider-btn:hover { background: var(--saffron-primary); color: #fff; }
.hero-slider-prev { left: 16px; }
.hero-slider-next { right: 16px; }

.hero-slider-dots {
    position: absolute;
    right: 18px;
    bottom: 22px;
    z-index: 3;
    display: flex;
    gap: 8px;
}

.hero-slider-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-slider-dots button.active {
    width: 26px;
    background: var(--saffron-primary);
}

/* Hero responsive */
@media (max-width: 991px) {
    .hero-section { padding: 50px 0 60px; }
    .hero-title { font-size: 2.5rem; }
    .hero-desc { font-size: 1rem; margin-bottom: 26px; }
    .hero-stats { margin-top: 32px; padding-top: 24px; gap: 12px 28px; }
    .hero-stat strong { font-size: 1.55rem; }
    .hero-slider-btn { opacity: 1; width: 38px; height: 38px; }
}

@media (max-width: 575px) {
    .hero-section { padding: 38px 0 48px; }
    .hero-title { font-size: 1.95rem; }
    .hero-kicker { font-size: 0.8rem; padding: 7px 16px; margin-bottom: 16px; }
    .hero-actions { width: 100%; }
    .hero-actions > * { width: 100%; justify-content: center; }
    .hero-slider { border-radius: 16px; }
    .hero-slider-stage { aspect-ratio: 3 / 2; }
    .hero-slide figcaption { left: 12px; bottom: 12px; font-size: 0.78rem; padding: 7px 14px; }
    .hero-slider-dots { right: 12px; bottom: 14px; }
    .hero-stat strong { font-size: 1.35rem; }
}

/* =============================================
   VIDEO GALLERY
   ============================================= */
.vid-section { padding: 70px 0 90px; }

/* Featured video */
.vid-featured {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 34px;
    align-items: center;
    background: linear-gradient(135deg, var(--deep-blue), var(--blue-dark));
    border-radius: 22px;
    padding: 26px;
    margin-bottom: 70px;
    box-shadow: var(--shadow-strong);
}

.vid-featured-media {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    aspect-ratio: 16 / 9;
}

.vid-featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.vid-featured-media:hover img { transform: scale(1.05); }

.vid-featured-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 153, 51, 0.16);
    border: 1px solid rgba(255, 153, 51, 0.5);
    border-radius: 50px;
    padding: 7px 17px;
    margin-bottom: 16px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--saffron-light);
}

.vid-featured-body h2 { color: #fff; font-size: 1.75rem; margin-bottom: 14px; }

.vid-featured-body p {
    font-family: var(--font-sans);
    font-size: 0.98rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 18px;
}

.vid-featured-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 24px;
    font-family: var(--font-sans);
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.7);
}

.vid-featured-meta i { color: var(--saffron-primary); margin-right: 8px; }

/* Play buttons */
.vid-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    color: var(--deep-blue);
    font-size: 1.1rem;
    padding-left: 4px;
    transition: all 0.3s ease;
}

.vid-play-lg { width: 78px; height: 78px; font-size: 1.4rem; }

.vid-featured-media:hover .vid-play,
.vid-card-media:hover .vid-play {
    background: var(--saffron-primary);
    color: #fff;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Filters */
.vid-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 42px;
}

.vid-filter {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 2px solid var(--border-light);
    background: var(--pure-white);
    border-radius: 50px;
    padding: 11px 20px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-gray);
    cursor: pointer;
    transition: all 0.25s ease;
}

.vid-filter i { color: var(--saffron-primary); }

.vid-filter em {
    font-style: normal;
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--deep-blue);
    background: rgba(0, 51, 102, 0.08);
    border-radius: 50px;
    padding: 3px 10px;
}

.vid-filter:hover { border-color: var(--saffron-primary); color: var(--deep-blue); }

.vid-filter.active {
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 20px rgba(255, 153, 51, 0.32);
}

.vid-filter.active i { color: #fff; }
.vid-filter.active em { background: rgba(255, 255, 255, 0.25); color: #fff; }

/* Grid */
.vid-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 26px;
}

.vid-card {
    display: flex;
    flex-direction: column;
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.vid-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-medium);
    border-color: rgba(255, 153, 51, 0.45);
}

.vid-card-media {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: #000;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.vid-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.vid-card:hover .vid-card-media img { transform: scale(1.07); }

.vid-duration {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.74rem;
    padding: 4px 10px;
    border-radius: 6px;
}

.vid-cat {
    position: absolute;
    left: 12px;
    top: 12px;
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.72rem;
    padding: 5px 13px;
    border-radius: 50px;
}

.vid-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px; }

.vid-card-title { font-size: 1.12rem; line-height: 1.45; margin-bottom: 10px; }

.vid-card-text {
    font-size: 0.94rem;
    line-height: 1.75;
    margin-bottom: 16px;
}

.vid-card-link {
    margin-top: auto;
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--deep-blue);
    cursor: pointer;
}

.vid-card-link i { margin-left: 7px; font-size: 0.8rem; transition: transform 0.3s ease; }
.vid-card-link:hover { color: var(--saffron-primary); }
.vid-card:hover .vid-card-link i { transform: translateX(5px); }

.vid-empty {
    text-align: center;
    padding: 60px 20px;
    font-family: var(--font-sans);
    color: var(--text-gray);
}

.vid-empty i { display: block; font-size: 2.4rem; color: var(--saffron-primary); margin-bottom: 14px; }

/* Video CTA */
.vid-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 26px;
    margin-top: 60px;
    padding: 36px;
    border-radius: 20px;
    background: var(--soft-cream);
    border: 2px dashed rgba(255, 153, 51, 0.42);
}

.vid-cta h3 { font-size: 1.5rem; margin-bottom: 8px; }
.vid-cta p { margin: 0; max-width: 520px; }
.vid-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.vid-cta-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 30px;
    border-radius: 50px;
    border: 2px solid var(--border-light);
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--deep-blue);
    transition: all 0.3s ease;
}

.vid-cta-ghost:hover { border-color: var(--saffron-primary); color: var(--saffron-primary); }

/* Player modal */
.vid-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: rgba(0, 12, 24, 0.96);
    backdrop-filter: blur(4px);
}

.vid-modal[hidden] { display: none; }

.vid-modal-stage { width: 100%; max-width: 1080px; }

.vid-modal-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

.vid-modal-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.vid-modal-title {
    margin: 18px 0 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 700;
    color: #fff;
}

.vid-modal-close,
.vid-modal-nav {
    position: absolute;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.vid-modal-close:hover,
.vid-modal-nav:hover { background: var(--saffron-primary); }

.vid-modal-close { top: 24px; right: 26px; width: 46px; height: 46px; font-size: 1.2rem; }

.vid-modal-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.15rem; }
.vid-modal-prev { left: 26px; }
.vid-modal-next { right: 26px; }

/* Video responsive */
@media (max-width: 991px) {
    .vid-section { padding: 45px 0 70px; }
    .vid-featured { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 20px; margin-bottom: 50px; }
    .vid-featured-body h2 { font-size: 1.4rem; }
    .vid-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
    .vid-cta { padding: 26px 22px; }
    .vid-cta h3 { font-size: 1.3rem; }
}

@media (max-width: 575px) {
    .vid-grid { grid-template-columns: minmax(0, 1fr); }
    .vid-play { width: 52px; height: 52px; font-size: 0.95rem; }
    .vid-play-lg { width: 60px; height: 60px; font-size: 1.1rem; }
    .vid-modal { padding: 16px; }
    .vid-modal-nav { width: 42px; height: 42px; }
    .vid-modal-prev { left: 8px; }
    .vid-modal-next { right: 8px; }
    .vid-modal-close { top: 12px; right: 12px; width: 40px; height: 40px; }
    .vid-cta-actions { width: 100%; }
    .vid-cta-actions > * { width: 100%; justify-content: center; }
}

/* =============================================
   HOME HERO — full-width image carousel
   Edge-to-edge photos with no overlay; the copy sits in its own
   band underneath rather than on top of the images.
   ============================================= */
.hero-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--blue-dark);
}

.hero-carousel-stage {
    position: relative;
    width: 100%;
    /* Sized against viewport height, not width, so the carousel plus the copy
       band beneath it stay visible on a laptop without scrolling. */
    height: clamp(280px, 46vh, 540px);
}

.hero-cslide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}

.hero-cslide.active { opacity: 1; pointer-events: auto; }

.hero-cslide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Small chip only — the photo itself stays untouched */
.hero-cslide figcaption {
    position: absolute;
    left: clamp(16px, 3.2vw, 56px);
    bottom: 26px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-radius: 50px;
    background: rgba(0, 34, 68, 0.72);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.4px;
}

.hero-cslide figcaption i { color: var(--saffron-primary); font-size: 0.85rem; }

.hero-cbtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--deep-blue);
    font-size: 1rem;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
}

.hero-carousel:hover .hero-cbtn { opacity: 1; }
.hero-cbtn:hover { background: var(--saffron-primary); color: #fff; }
.hero-cprev { left: clamp(12px, 2vw, 32px); }
.hero-cnext { right: clamp(12px, 2vw, 32px); }

.hero-cdots {
    position: absolute;
    right: clamp(16px, 3.2vw, 56px);
    bottom: 30px;
    z-index: 3;
    display: flex;
    gap: 9px;
}

.hero-cdots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.hero-cdots button.active { width: 30px; background: var(--saffron-primary); }

/* Copy band below the carousel */
.hero-section {
    padding: 40px 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

.hero-section .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 26px;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.hero-section .hero-stat {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 16px 20px;
}

@media (max-width: 991px) {
    .hero-carousel-stage { height: clamp(240px, 40vh, 380px); }
    .hero-cbtn { opacity: 1; width: 42px; height: 42px; }
    .hero-cslide figcaption { bottom: 18px; font-size: 0.84rem; padding: 8px 17px; }
    .hero-cdots { bottom: 20px; }
    .hero-section { padding: 40px 0 !important; }
}

@media (max-width: 575px) {
    .hero-carousel-stage { height: 230px; }
    .hero-cdots { display: none; }
    .hero-section .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .hero-section .hero-stat { padding: 12px 14px; }
}

/* =============================================
   HEADER — tighten the band around the logo
   ============================================= */
.main-header .navbar { padding: 6px 0; }

.navbar-brand { margin: 0; }
.navbar-brand img { height: 66px; display: block; }

/* Nav items keep their own vertical rhythm so the bar doesn't collapse */
.main-header .nav-link { padding: 9px 10px !important; }
.main-header .cta-header { padding: 11px 26px; }

@media (max-width: 991px) {
    .main-header .navbar { padding: 5px 0; }
    .navbar-brand img { height: 54px; }
}

@media (max-width: 767px) {
    .navbar-brand img { height: 46px; }
}

/* =============================================
   CAB CARDS — compact pass
   The chips were wide enough to take a row each, which made the
   cards very tall. Smaller chips, fewer feature lines and a single
   footer row bring the height down a lot.
   ============================================= */
.cab-card-media { height: 178px; padding: 14px; }

.cab-card-body { padding: 18px 18px 20px; }

.cab-card-title {
    font-size: 1.1rem;
    line-height: 1.4;
    margin-bottom: 12px;
}

@media (min-width: 576px) {
    .cab-card-title { min-height: 3.1rem; }
}

.cab-specs { gap: 6px; margin-bottom: 13px; }

.cab-specs span {
    gap: 6px;
    padding: 5px 11px;
    font-size: 0.75rem;
    font-weight: 600;
}

.cab-specs i { font-size: 0.72rem; }

.cab-features { margin-bottom: 13px; }

.cab-features li {
    gap: 9px;
    padding: 3px 0;
    font-size: 0.86rem;
    line-height: 1.5;
}

.cab-features i { margin-top: 3px; font-size: 0.78rem; }

.cab-card-foot {
    gap: 12px;
    padding-top: 13px;
    flex-wrap: nowrap;
    align-items: center;
}

.cab-price-label { font-size: 0.64rem; letter-spacing: 1.1px; }
.cab-price strong { font-size: 1.5rem; }
.cab-price-ask { font-size: 1.02rem !important; }
.cab-price-unit { font-size: 0.64rem; }

.cab-card-actions { gap: 8px; flex: 0 0 auto; }

.cab-book-btn {
    gap: 8px;
    padding: 11px 18px;
    font-size: 0.87rem;
    white-space: nowrap;
}

.cab-wa-btn { width: 40px; height: 40px; flex: 0 0 40px; font-size: 1.02rem; }

/* Keep price and buttons side by side on phones too */
@media (max-width: 575px) {
    .cab-card-media { height: 165px; }
    .cab-card-body { padding: 16px; }
    .cab-card-foot { flex-wrap: nowrap; align-items: center; }
    .cab-card-actions { width: auto; }
    .cab-book-btn { flex: 0 0 auto; padding: 10px 16px; font-size: 0.84rem; }
}

@media (max-width: 380px) {
    .cab-book-btn i { display: none; }
    .cab-book-btn { padding: 10px 14px; }
}

/* =============================================
   CAB POPUP — compact
   ============================================= */
.cab-modal .modal-dialog { max-width: 520px; }

.cab-modal-head { padding: 18px 22px; gap: 13px; }
.cab-modal-icon { flex: 0 0 42px; width: 42px; height: 42px; font-size: 1rem; }
.cab-modal-head h5 { font-size: 1.05rem; margin-bottom: 3px; }
.cab-modal-head p { font-size: 0.79rem; }
.cab-modal-head .btn-close { top: 14px; right: 14px; }

.cab-modal-body { padding: 18px 22px 22px; max-height: 78vh; }

.cab-modal-body .row { --bs-gutter-x: 0.75rem; --bs-gutter-y: 0.75rem; }

.cab-modal-body .form-label { font-size: 0.78rem; margin-bottom: 4px; }

.cab-modal-body .form-control {
    padding: 9px 12px;
    font-size: 0.88rem;
    border-radius: 9px;
    border-width: 1.5px;
}

.cab-modal-body textarea.form-control { min-height: 0; }

.cab-trip { gap: 8px; }
.cab-trip span { padding: 9px 12px; font-size: 0.84rem; border-width: 1.5px; }

.cab-modal-body .btn-primary-custom { padding: 12px !important; font-size: 0.95rem; }

/* Success + WhatsApp step, scaled to match */
.cab-success { padding: 18px 16px 16px; margin-bottom: 16px; }
.cab-success i { font-size: 2.4rem; margin-bottom: 9px; }
.cab-success h4 { font-size: 1.15rem; margin-bottom: 6px; }
.cab-success p { font-size: 0.87rem; }

.cab-wa-offer { padding: 16px; }
.cab-wa-offer-head { gap: 11px; margin-bottom: 11px; }
.cab-wa-offer-head > i { flex: 0 0 36px; width: 36px; height: 36px; font-size: 1.05rem; }
.cab-wa-offer-head strong { font-size: 0.92rem; }
.cab-wa-offer-head span { font-size: 0.8rem; }
.cab-wa-preview { font-size: 0.79rem; line-height: 1.65; padding: 11px 13px; max-height: 160px; }
.cab-wa-send { padding: 12px 20px; font-size: 0.92rem; }
.cab-wa-skip { padding: 12px 18px; font-size: 0.85rem; }

@media (max-width: 575px) {
    .cab-modal-body { padding: 16px 16px 20px; }
    .cab-modal-head { padding: 15px 18px; }
}

/* =============================================
   SHARED WHATSAPP HANDOFF PANEL
   Shown after any form submits, offering to send the same
   details on WhatsApp for an instant reply.
   ============================================= */
.wa-handoff {
    margin-top: 14px;
    background: var(--pure-white);
    border: 2px solid rgba(37, 211, 102, 0.4);
    border-radius: 12px;
    padding: 13px;
    text-align: left;
}

.wa-handoff-head {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.wa-handoff-head > i {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.wa-handoff-head strong {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.87rem;
    color: var(--deep-blue);
    margin-bottom: 1px;
}

.wa-handoff-head span {
    font-family: var(--font-sans);
    font-size: 0.76rem;
    color: var(--text-gray);
    line-height: 1.45;
}

.wa-handoff-preview {
    background: var(--soft-cream);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 9px 11px;
    margin: 0 0 10px;
    font-family: var(--font-sans);
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-dark);
    white-space: pre-wrap;
    max-height: 108px;
    overflow-y: auto;
}

.wa-handoff-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.wa-handoff-send {
    flex: 1 1 150px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #25D366;
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.83rem;
    padding: 9px 16px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.wa-handoff-send:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37, 211, 102, 0.38); }

.wa-handoff-skip {
    border: 2px solid var(--border-light);
    background: transparent;
    border-radius: 50px;
    padding: 9px 14px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.79rem;
    color: var(--text-gray);
    cursor: pointer;
    transition: all 0.25s ease;
}

.wa-handoff-skip:hover { border-color: var(--text-gray); color: var(--text-dark); }

@media (max-width: 575px) {
    .wa-handoff-actions > * { width: 100%; justify-content: center; }
}

/* =============================================
   FOOTER COPYRIGHT BAR
   Three zones: copyright | policy links | credit
   ============================================= */
.footer-bottom {
    background: #061a30;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px 0;
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 28px;
}

.footer-copy,
.footer-credit {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.72);
}

.footer-credit a {
    color: var(--saffron-primary);
    font-weight: 700;
}

.footer-credit a:hover { color: var(--saffron-light); }

.footer-policies {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
}

.footer-policies a {
    position: relative;
    padding: 2px 15px;
    font-family: var(--font-sans);
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.78);
    white-space: nowrap;
}

.footer-policies a:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 13px;
    background: rgba(255, 255, 255, 0.22);
}

.footer-policies a:hover { color: var(--saffron-primary); }

@media (max-width: 1199px) {
    .footer-bottom-inner { justify-content: center; text-align: center; gap: 10px 20px; }
}

@media (max-width: 767px) {
    /* Extra bottom room so the floating call / WhatsApp / back-to-top
       buttons don't sit on top of the credit line. */
    .footer-bottom { padding: 20px 0 84px; }

    .footer-bottom-inner {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .footer-copy, .footer-credit { font-size: 0.79rem; line-height: 1.6; }

    /* Two tidy columns instead of links wrapping into ragged rows with
       orphaned separators. */
    .footer-policies {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        width: 100%;
        max-width: 330px;
        margin: 0 auto;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.03);
    }

    .footer-policies a {
        padding: 11px 10px;
        font-size: 0.78rem;
        line-height: 1.35;
        text-align: center;
        white-space: normal;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* The pipe separators only make sense on one line. */
    .footer-policies a::after { display: none !important; }

    .footer-policies a:nth-child(2n) { border-right: 0; }

    /* Five links: the last one spans the full width and closes the box. */
    .footer-policies a:last-child {
        grid-column: 1 / -1;
        border-right: 0;
        border-bottom: 0;
    }
    .footer-policies a:nth-last-child(2) { border-bottom: 0; }

    .footer-policies a:active { background: rgba(255, 153, 51, 0.14); }
}

@media (max-width: 400px) {
    .footer-policies { max-width: 100%; }
    .footer-policies a { font-size: 0.74rem; padding: 10px 7px; }
}

/* Policy pages */
.policy-section { padding: 60px 0 80px; }

.policy-meta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--soft-cream);
    border: 1px solid var(--border-light);
    border-radius: 50px;
    padding: 7px 16px;
    margin-bottom: 26px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--text-gray);
}

.policy-meta i { color: var(--saffron-primary); font-size: 0.8rem; }

/* Policy pages are dense - give the tables and lists a little more room */
.policy-section .blog-content h2 { font-size: 1.4rem; margin-top: 38px; }
.policy-section .blog-content table { font-size: 0.9rem; }

/* breadcrumb-title is an <h1> on most pages, but a <span> where the page
   already has its own H1 (blog article) - keep it looking identical. */
span.breadcrumb-title {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.3;
}

/* =============================================
   CAPTCHA  —  input on the left, image on the right
   ============================================= */
.captcha-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.captcha-input {
    flex: 1 1 auto;
    min-width: 0;
    letter-spacing: 3px;
    font-weight: 700;
    text-transform: uppercase;
}

.captcha-image {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    background: var(--soft-cream);
    border: 2px solid var(--border-light);
    border-radius: 10px;
    padding: 4px 6px;
    user-select: none;
}

.captcha-image img {
    display: block;
    height: 46px;
    width: auto;
    max-width: 170px;
    border-radius: 6px;
    pointer-events: none;
}

.captcha-refresh {
    flex: 0 0 auto;
    margin-left: 4px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--saffron-dark);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.captcha-refresh:hover {
    background: var(--saffron-primary);
    color: #fff;
    transform: rotate(90deg);
}

.captcha-hint {
    display: block;
    margin-top: 6px;
    font-family: var(--font-sans);
    font-size: 0.76rem;
    color: var(--text-gray);
}

@media (max-width: 480px) {
    .captcha-row { flex-direction: column; gap: 10px; }
    .captcha-image { justify-content: center; }
    .captcha-input { letter-spacing: 2px; }
}

/* =============================================
   CONTACT — social links
   ============================================= */
.contact-social {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--border-light);
}

.contact-social h6 {
    font-family: var(--font-sans);
    font-size: 0.76rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--saffron-primary);
    margin-bottom: 14px;
}

.contact-social-links { display: flex; flex-wrap: wrap; gap: 10px; }

.contact-social-links a {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.05rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.contact-social-links a:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
    filter: brightness(1.08);
}

.contact-social-links .sc-fb   { background: #1877F2; }
.contact-social-links .sc-ig   { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.contact-social-links .sc-tw   { background: #0f1419; }
.contact-social-links .sc-yt   { background: #FF0000; }
.contact-social-links .sc-wa   { background: #25D366; }
.contact-social-links .sc-mail { background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark)); }

/* =============================================
   SERVICES PAGE
   ============================================= */
.svc-section { padding: 70px 0 90px; }

/* --- Cards --- */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 80px;
}

.svc-card {
    position: relative;
    display: block;
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 30px 26px;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.svc-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-medium);
    border-color: rgba(255, 153, 51, 0.5);
}

.svc-card-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 50px;
}

.svc-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, rgba(255,153,51,0.18), rgba(255,153,51,0.06));
    color: var(--saffron-primary);
    font-size: 1.4rem;
    transition: all 0.3s ease;
}

.svc-card:hover .svc-card-icon {
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    color: #fff;
}

.svc-card h3 { font-size: 1.22rem; margin-bottom: 10px; }

.svc-card p {
    font-family: var(--font-sans);
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 16px;
}

.svc-card-link {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.87rem;
    color: var(--deep-blue);
}

.svc-card-link i { margin-left: 7px; font-size: 0.78rem; transition: transform 0.3s ease; }
.svc-card:hover .svc-card-link { color: var(--saffron-primary); }
.svc-card:hover .svc-card-link i { transform: translateY(3px); }

/* --- Detail sections --- */
.svc-detail {
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 46px 0;
    border-top: 1px solid var(--border-light);
    scroll-margin-top: 110px;
    transition: background-color 0.5s ease;
}

.svc-detail:first-of-type { border-top: none; }

.svc-detail-flip .svc-detail-media { order: 2; }
.svc-detail-flip .svc-detail-body  { order: 1; }

.svc-detail-flash { background: rgba(255, 153, 51, 0.08); }

.svc-detail-media {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--soft-cream);
    box-shadow: var(--shadow-medium);
}

.svc-detail-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.svc-detail:hover .svc-detail-media img { transform: scale(1.05); }

.svc-detail-icon {
    position: absolute;
    left: 18px;
    bottom: 18px;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 34, 68, 0.82);
    backdrop-filter: blur(6px);
    color: var(--saffron-primary);
    font-size: 1.3rem;
}

.svc-detail-kicker {
    display: block;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 0.76rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--saffron-primary);
    margin-bottom: 8px;
}

.svc-detail-body h2 {
    font-size: 1.85rem;
    margin-bottom: 16px;
    padding-bottom: 14px;
    position: relative;
}

.svc-detail-body h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 54px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--saffron-primary), transparent);
}

.svc-detail-copy p {
    font-size: 1rem;
    line-height: 1.85;
    margin-bottom: 16px;
}

.svc-features {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 6px 18px;
}

.svc-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 5px 0;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-dark);
}

.svc-features i { color: #28a745; margin-top: 4px; font-size: 0.82rem; flex: 0 0 auto; }

.svc-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.svc-call {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 50px;
    border: 2px solid var(--border-light);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.94rem;
    color: var(--deep-blue);
    transition: all 0.25s ease;
}

.svc-call:hover { border-color: var(--saffron-primary); color: var(--saffron-primary); }

/* --- CTA --- */
.svc-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 26px;
    margin-top: 60px;
    padding: 38px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--deep-blue), var(--blue-dark));
    color: #fff;
}

.svc-cta h3 { color: #fff; font-size: 1.55rem; margin-bottom: 8px; }

.svc-cta p {
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-sans);
    font-size: 0.96rem;
    margin: 0;
    max-width: 520px;
}

.svc-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.svc-cta-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 30px;
    border-radius: 50px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    transition: all 0.3s ease;
}

.svc-cta-ghost:hover { background: #fff; color: var(--deep-blue); border-color: #fff; }

/* --- Services responsive --- */
@media (max-width: 991px) {
    .svc-section { padding: 46px 0 70px; }
    .svc-grid { gap: 18px; margin-bottom: 50px; }
    .svc-detail { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 34px 0; scroll-margin-top: 80px; }
    .svc-detail-flip .svc-detail-media { order: 0; }
    .svc-detail-flip .svc-detail-body  { order: 0; }
    .svc-detail-body h2 { font-size: 1.5rem; }
    .svc-cta { padding: 26px 22px; }
    .svc-cta h3 { font-size: 1.3rem; }
}

@media (max-width: 575px) {
    .svc-grid { grid-template-columns: minmax(0, 1fr); }
    .svc-card { padding: 24px 20px; }
    .svc-features { grid-template-columns: minmax(0, 1fr); }
    .svc-detail-actions { width: 100%; }
    .svc-detail-actions > * { width: 100%; justify-content: center; }
    .svc-cta-actions { width: 100%; }
    .svc-cta-actions > * { width: 100%; justify-content: center; }
}

/* =============================================
   PAGE TITLE BANNER — photo backdrop
   The image comes from --page-banner, set on <body> by the layout,
   so every page that uses .breadcrumb-section gets one automatically.
   A gradient sits over the photo because white text has to stay
   readable on top of it.
   ============================================= */
.breadcrumb-section {
    position: relative;
    background: linear-gradient(135deg, var(--deep-blue), var(--blue-dark));
    background-image:
        linear-gradient(135deg, rgba(0, 34, 68, 0.86), rgba(0, 20, 42, 0.78)),
        var(--page-banner, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    isolation: isolate;
}

/* Soft saffron glow so the band matches the rest of the site */
.breadcrumb-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 30%, rgba(255, 153, 51, 0.20) 0%, transparent 52%);
    pointer-events: none;
    z-index: 0;
}

.breadcrumb-section > .container { position: relative; z-index: 1; }

.breadcrumb-title {
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.45);
}

.breadcrumb-nav {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Fixed backdrop reads nicely on desktop; on touch devices it stutters, so pin it. */
@media (min-width: 992px) {
    .breadcrumb-section { background-attachment: scroll, fixed; }
}

/* =============================================
   CONTACT PAGE
   ============================================= */
.ct-section { padding: 70px 0 90px; }

/* --- Quick contact tiles --- */
.ct-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 60px;
}

.ct-tile {
    display: block;
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    padding: 26px 24px;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.ct-tile:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-medium);
    border-color: rgba(255, 153, 51, 0.5);
}

.ct-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(255,153,51,0.18), rgba(255,153,51,0.06));
    color: var(--saffron-primary);
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

.ct-tile:hover .ct-tile-icon {
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    color: #fff;
}

.ct-tile-wa:hover .ct-tile-icon { background: #25D366; }

.ct-tile-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-gray);
    margin-bottom: 5px;
}

.ct-tile strong {
    display: block;
    font-family: var(--font-sans);
    font-size: 1.06rem;
    font-weight: 800;
    line-height: 1.4;
    color: var(--deep-blue);
}

.ct-tile-break { word-break: break-word; font-size: 0.95rem !important; }

.ct-tile-sub {
    display: block;
    margin-top: 5px;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: var(--text-gray);
}

/* --- Form card --- */
.ct-card {
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 34px;
    box-shadow: var(--shadow-soft);
}

.ct-card-head { margin-bottom: 26px; }

.ct-kicker {
    display: block;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--saffron-primary);
    margin-bottom: 8px;
}

.ct-card-head h2 {
    font-size: 1.7rem;
    margin: 0 0 12px;
    padding-bottom: 14px;
    position: relative;
}

.ct-card-head h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 54px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--saffron-primary), transparent);
}

.ct-card-head p {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.75;
    margin: 0;
}

.ct-form .form-label {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--deep-blue);
    margin-bottom: 6px;
}

.ct-form .form-label span { color: #dc3545; }

.ct-form .form-control {
    border: 2px solid var(--border-light);
    border-radius: 11px;
    padding: 12px 15px;
    font-family: var(--font-sans);
    font-size: 0.94rem;
}

.ct-form .form-control:focus {
    border-color: var(--saffron-primary);
    box-shadow: 0 0 0 4px rgba(255, 153, 51, 0.14);
}

.ct-error {
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.35);
    color: #b02a37;
    border-radius: 11px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-family: var(--font-sans);
    font-size: 0.9rem;
}

.ct-success {
    text-align: center;
    padding: 34px 22px;
    border-radius: 16px;
    background: rgba(40, 167, 69, 0.07);
    border: 2px solid rgba(40, 167, 69, 0.4);
}

.ct-success i { font-size: 3rem; color: #28a745; display: block; margin-bottom: 12px; }
.ct-success h4 { color: var(--deep-blue); margin-bottom: 8px; }
.ct-success p { font-family: var(--font-sans); font-size: 0.94rem; margin-bottom: 18px; }

/* --- Contact sidebar --- */
.ct-aside { position: sticky; top: 120px; }

.ct-office {
    background: linear-gradient(135deg, var(--deep-blue), var(--blue-dark));
    border-radius: 20px;
    padding: 30px 26px;
    color: #fff;
    margin-bottom: 22px;
}

.ct-office h3 {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 14px;
}

.ct-office h3 i { color: var(--saffron-primary); font-size: 1rem; }

.ct-office address {
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 0.92rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 18px;
}

.ct-directions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 12px 24px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.ct-directions:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-medium); }

.ct-hours {
    list-style: none;
    margin: 22px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.ct-hours li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    font-family: var(--font-sans);
    font-size: 0.87rem;
    color: rgba(255, 255, 255, 0.72);
}

.ct-hours em { font-style: normal; font-weight: 700; color: #fff; white-space: nowrap; }

/* Map */
.ct-map {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-soft);
    margin-bottom: 22px;
    line-height: 0;
}

.ct-map iframe {
    width: 100%;
    height: 260px;
    border: 0;
    display: block;
    filter: saturate(1.05);
}

/* Social */
.ct-social,
.ct-quick {
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 26px 24px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 22px;
}

.ct-social h4,
.ct-quick h4 {
    font-size: 1.1rem;
    margin-bottom: 12px;
    padding-bottom: 12px;
    position: relative;
}

.ct-social h4::after,
.ct-quick h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--saffron-primary), transparent);
}

.ct-social p {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    margin-bottom: 16px;
}

/* Quick links */
.ct-quick-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.93rem;
    color: var(--deep-blue);
    border-bottom: 1px solid var(--border-light);
    transition: padding-left 0.25s ease, color 0.25s ease;
}

.ct-quick-link:last-child { border-bottom: none; }
.ct-quick-link:hover { padding-left: 8px; color: var(--saffron-primary); }
.ct-quick-link i:first-child { color: var(--saffron-primary); width: 20px; flex: 0 0 20px; }

.ct-quick-link i:last-child {
    margin-left: auto;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.ct-quick-link:hover i:last-child { opacity: 1; transform: translateX(3px); }

/* --- Contact responsive --- */
@media (max-width: 991px) {
    .ct-section { padding: 46px 0 70px; }
    .ct-tiles { gap: 14px; margin-bottom: 40px; }
    .ct-tile { padding: 20px 18px; }
    .ct-card { padding: 24px 20px; }
    .ct-card-head h2 { font-size: 1.4rem; }
    .ct-aside { position: static; }
    .ct-map iframe { height: 230px; }
}

@media (max-width: 575px) {
    .ct-tiles { grid-template-columns: minmax(0, 1fr); }
    .ct-office { padding: 24px 20px; }
    .ct-hours li { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* =============================================
   MOBILE-FIRST FIXES
   ============================================= */

/* Bootstrap's .row.g-5 uses -24px side margins. Our container padding drops
   to 14px on phones, so the row pushed 10px past the viewport and the page
   scrolled sideways. Shrink the gutter to match the padding on small screens. */
@media (max-width: 991.98px) {
    .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

@media (max-width: 575.98px) {
    .row.g-5, .row.gx-5, .row.g-4, .row.gx-4 { --bs-gutter-x: 1.25rem; }
    .container, .container-lg, .container-md,
    .container-sm, .container-xl, .container-xxl {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Belt and braces: nothing should ever scroll the page sideways. */
html, body { max-width: 100%; overflow-x: hidden; }

/* --- Legibility: keep small labels at 11px or above on phones --- */
@media (max-width: 767.98px) {
    .gal-item-cat,
    .vid-duration, .vid-cat,
    .cab-card-cat, .cab-card-badge,
    .pkg-tag, .pkg-fact-label, .pkg-price-label, .pkg-price-unit,
    .svc-card-badge, .svc-detail-kicker,
    .ct-tile-label, .ct-kicker,
    .blog-card-cat, .blog-item-cat,
    .pay-kicker, .pkg-block-kicker, .section-subtitle,
    .vid-featured-kicker, .gal-filter em, .vid-filter em, .blog-cats em,
    .footer-policies a, .footer-copy, .footer-credit,
    .captcha-hint, .cab-price-label, .cab-price-unit {
        font-size: 0.75rem;      /* ~11.25px at the 15px mobile base */
        letter-spacing: 0.6px;
    }

    .blog-card-meta, .vid-card-text, .cab-specs span,
    .blog-recent-text time, .pkg-price-note {
        font-size: 0.8rem;
    }
}

/* --- Tap targets: give the small round controls a comfortable minimum --- */
@media (max-width: 991.98px) {
    .gal-filter, .vid-filter, .cab-filter, .pay-tab,
    .blog-cats a, .pkg-mini-link, .ct-quick-link,
    .footer-links a, .footer-policies a, .blog-tag {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    .footer-links a, .blog-cats a, .pkg-mini-link, .ct-quick-link { display: flex; }

    .contact-social-links a,
    .blog-share,
    .captcha-refresh,
    .slider-btn,
    .gal-lb-nav, .vid-modal-nav, .hero-cbtn {
        min-width: 44px;
        min-height: 44px;
    }

    .top-bar a { min-height: 32px; }
}

/* --- Tap targets: identified by measuring, not guessing --- */
@media (max-width: 991.98px) {

    /* Carousel dots were 9px of tappable area. Pad the hit box out to 30px
       and use content-box clipping so the dot still *looks* small. */
    .slider-dot,
    .hero-cdots button {
        min-width: 36px;
        min-height: 36px;
        padding: 13px;
        background-clip: content-box;
        box-sizing: border-box;
    }

    .slider-dot.active { min-width: 52px; }
    .hero-cdots button.active { min-width: 56px; }

    /* Bootstrap's modal close was 23px */
    .btn-close {
        min-width: 38px;
        min-height: 38px;
        background-size: 14px;
        background-position: center;
    }

    /* Native checkboxes render around 13px */
    input[type="checkbox"], input[type="radio"] {
        width: 24px;      /* WCAG 2.2 AA minimum target size */
        height: 24px;
        accent-color: var(--saffron-primary);
    }

    /* Inline "read more" style links inside cards */
    .blog-card-link, .card-link, .slider-all, .vid-card-link,
    .pay-help-link, .pkg-help-phone, .blog-post-cat, .pkg-related-link,
    .blog-back, .ct-directions, .svc-card-link {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }

    .top-bar a { min-height: 36px; }
    .btn.btn-sm { min-height: 36px; }
}

/* =============================================
   ERROR / 404 PAGE
   ============================================= */
.err-section {
    padding: 80px 0 100px;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 153, 51, 0.10) 0%, transparent 45%),
        var(--soft-cream);
}

.err-wrap { max-width: 780px; margin: 0 auto; text-align: center; }

.err-code {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}

.err-code span {
    font-family: var(--font-display);
    font-size: clamp(5rem, 16vw, 9rem);
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--deep-blue), var(--saffron-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 2px;
}

.err-code-om {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(6rem, 19vw, 11rem);
    color: var(--saffron-primary);
    opacity: 0.09;
    pointer-events: none;
}

.err-heading { font-size: clamp(1.5rem, 4vw, 2.2rem); margin-bottom: 14px; }

.err-message {
    font-family: var(--font-sans);
    font-size: 1.02rem;
    line-height: 1.85;
    max-width: 34rem;
    margin: 0 auto 18px;
}

.err-path {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-radius: 50px;
    padding: 8px 18px;
    margin-bottom: 26px;
    font-family: ui-monospace, 'Courier New', monospace;
    font-size: 0.84rem;
    color: var(--text-gray);
    word-break: break-all;
}

.err-path i { color: var(--saffron-primary); }

.err-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 54px;
}

.err-call, .err-wa {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 50px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.96rem;
    transition: all 0.3s ease;
}

.err-call {
    border: 2px solid var(--border-light);
    color: var(--deep-blue);
    background: var(--pure-white);
}

.err-call:hover { border-color: var(--saffron-primary); color: var(--saffron-primary); }

.err-wa { background: #25D366; color: #fff; }
.err-wa:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37,211,102,0.38); }

.err-links h2 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: var(--text-gray);
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.err-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.err-links-grid a {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 15px 18px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--deep-blue);
    text-align: left;
    transition: all 0.25s ease;
}

.err-links-grid a:hover {
    border-color: var(--saffron-primary);
    color: var(--saffron-primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft);
}

.err-links-grid i { color: var(--saffron-primary); width: 20px; flex: 0 0 20px; }

@media (max-width: 575px) {
    .err-section { padding: 50px 0 70px; }
    .err-actions { flex-direction: column; }
    .err-actions > * { width: 100%; justify-content: center; }
    .err-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .err-links-grid a { padding: 13px 12px; font-size: 0.85rem; }
}

/* =============================================
   GUIDE DETAIL PAGE
   ============================================= */
.gd-section { padding: 60px 0 90px; }

.gd-profile {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 44px;
    align-items: center;
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-radius: 22px;
    padding: 34px;
    margin-bottom: 44px;
    box-shadow: var(--shadow-soft);
}

.gd-photo {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--soft-cream);
    box-shadow: var(--shadow-medium);
}

.gd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gd-photo-badge {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    background: rgba(0, 34, 68, 0.85);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 10px 16px;
    color: #fff;
    line-height: 1.25;
}

.gd-photo-badge strong { font-family: var(--font-sans); font-weight: 900; font-size: 1.1rem; color: var(--saffron-primary); }
.gd-photo-badge span { font-family: var(--font-sans); font-size: 0.72rem; color: rgba(255,255,255,0.75); }

.gd-role {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 153, 51, 0.14);
    border: 1px solid rgba(255, 153, 51, 0.45);
    border-radius: 50px;
    padding: 7px 18px;
    margin-bottom: 14px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--saffron-dark);
}

.gd-intro h2 { font-size: 2.1rem; margin-bottom: 12px; }

.gd-spec {
    font-family: var(--font-sans);
    font-size: 0.98rem;
    margin-bottom: 16px;
}

.gd-spec i { color: var(--saffron-primary); margin-right: 9px; }

.gd-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; }

.gd-langs-label {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-gray);
    margin-right: 4px;
}

.gd-langs-label i { color: var(--saffron-primary); margin-right: 7px; }

.gd-langs em {
    font-style: normal;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--deep-blue);
    background: var(--soft-cream);
    border: 1px solid var(--border-light);
    border-radius: 50px;
    padding: 6px 15px;
}

.gd-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    padding: 20px 0;
    margin-bottom: 22px;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.gd-fact { display: flex; align-items: center; gap: 12px; }

.gd-fact i {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255,153,51,0.16), rgba(255,153,51,0.06));
    color: var(--saffron-primary);
    font-size: 0.95rem;
    flex: 0 0 40px;
}

.gd-fact span {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--text-gray);
}

.gd-fact strong { font-family: var(--font-sans); font-size: 0.95rem; color: var(--deep-blue); }

.gd-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.gd-wa {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.gd-wa:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37,211,102,0.4); }

/* Other guides */
.gd-others { margin-top: 50px; }

.gd-card {
    display: block;
    height: 100%;
    background: var(--pure-white);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s ease;
}

.gd-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-medium); border-color: rgba(255,153,51,0.45); }

.gd-card-photo { display: block; height: 220px; overflow: hidden; background: var(--soft-cream); }
.gd-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.gd-card:hover .gd-card-photo img { transform: scale(1.06); }

.gd-card-body { display: block; padding: 18px; }
.gd-card-body strong { display: block; font-family: var(--font-sans); font-size: 1.02rem; color: var(--deep-blue); margin-bottom: 4px; }
.gd-card-body em { display: block; font-style: normal; font-family: var(--font-sans); font-size: 0.85rem; color: var(--saffron-dark); margin-bottom: 8px; }
.gd-card-body small { font-family: var(--font-sans); font-size: 0.8rem; color: var(--text-gray); }
.gd-card-body small i { color: var(--saffron-primary); margin-right: 7px; }

@media (max-width: 991px) {
    .gd-section { padding: 40px 0 70px; }
    .gd-profile { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 22px; }
    .gd-photo { max-width: 300px; margin: 0 auto; }
    .gd-intro h2 { font-size: 1.6rem; }
}

@media (max-width: 575px) {
    .gd-actions { width: 100%; }
    .gd-actions > * { width: 100%; justify-content: center; }
    .gd-card-photo { height: 190px; }
}

/* =============================================
   HOME HERO — join the carousel to the copy band
   The photo strip and the blue band are one hero, so they must share a
   left edge and meet without a visible seam.
   ============================================= */

/* Exactly where .container puts its content: the centring margin the
   1800px cap creates, plus the container's own gutter. */
.hero-carousel,
.hero-section {
    --hero-edge: calc(max(0px, (100% - 1800px) / 2) + clamp(16px, 3.2vw, 56px));
}

.hero-carousel { background: var(--deep-blue); }

/* Fades the bottom of the photo into the exact colour the band starts
   with, so the two blocks read as one instead of two stacked slabs. */
.hero-carousel::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(90px, 14vh, 150px);
    background: linear-gradient(180deg,
                rgba(0, 51, 102, 0) 0%,
                rgba(0, 51, 102, 0.45) 55%,
                var(--deep-blue) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Caption and dots sit in a real .container, so they inherit the same
   max-width and gutter as the heading underneath and line up exactly. */
.hero-cslide figcaption,
.hero-cdots-wrap {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.hero-cslide figcaption {
    bottom: 34px;
    justify-content: flex-start;
    /* The pill moved to the inner .hero-cchip - strip the styling the
       original single-element caption carried, or it paints a full-width bar. */
    background: none;
    backdrop-filter: none;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
    letter-spacing: normal;
}
.hero-cdots-wrap { bottom: 38px; justify-content: flex-end; }

.hero-cchip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-radius: 50px;
    background: rgba(0, 34, 68, 0.72);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.4px;
}

.hero-cchip i { color: var(--saffron-primary); font-size: 0.85rem; }

.hero-cdots {
    position: static;
    pointer-events: auto;
}

/* Band picks up where the fade left off: a flat deep blue across the
   whole top edge, darkening downwards. A diagonal gradient here would
   meet the fade at a different colour on the right and show the seam. */
.hero-section {
    background: linear-gradient(180deg,
                var(--deep-blue) 0%,
                var(--blue-dark) 58%,
                #001a33 100%) !important;
    padding: 46px 0 62px !important;
    margin-top: -1px;   /* hides sub-pixel rounding between the two blocks */
}

.hero-section::before {
    background: radial-gradient(circle at 14% 0%, rgba(255, 153, 51, 0.18) 0%, transparent 52%);
}

/* .hero-content is the Bootstrap column and an earlier rule zeroed its
   padding, which left the copy 12px to the left of the container edge the
   carousel chip and dots sit on. Put the gutter back so they line up. */
.hero-section .hero-content {
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

@media (max-width: 991px) {
    .hero-carousel::after { height: 80px; }
    .hero-cslide figcaption { bottom: 24px; }
    .hero-cdots-wrap { bottom: 26px; }
    .hero-section { padding: 34px 0 46px !important; }
}

@media (max-width: 575px) {
    .hero-carousel::after { height: 64px; }
    .hero-cslide figcaption { bottom: 16px; }
    .hero-cchip { font-size: 0.82rem; padding: 8px 16px; }
}

/* =============================================
   TOP BAR — one line on phones
   Contact details, language and socials stay on a single row; the
   labels that would force a wrap collapse to their icons instead.
   ============================================= */
@media (max-width: 767.98px) {
    .top-bar { padding: 7px 0; font-size: 0.76rem; }

    /* Bootstrap's .row carries a -12px side margin, which ate the
       container's 16px padding and left the phone icon 4px off the screen
       edge. The columns below zero their own padding, so the gutter has
       nothing left to do here. */
    .top-bar .row {
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        --bs-gutter-x: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .top-bar .row > [class*="col-"] {
        width: auto;
        flex: 0 0 auto;
        padding-left: 0;
        padding-right: 0;
    }

    /* Contact side takes the slack, socials hug the right edge */
    .top-bar .row > [class*="col-"]:first-child {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .top-bar .row > [class*="col-"]:last-child {
        margin-left: auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 2px;
    }

    .top-bar a { margin: 0; gap: 5px; }

    /* The email address alone is wider than the whole bar. On a phone the
       lone envelope icon was not earning its place either - the address is
       in the footer and on the contact page. */
    .top-bar .tb-hide-sm { display: none; }
    .top-bar a[href^="mailto:"] { display: none; }

    .top-bar .tb-phone { white-space: nowrap; }

    .top-bar .social-inline { gap: 2px; }

    .top-bar .social-inline a {
        width: 26px;
        justify-content: center;
        font-size: 0.95rem;
    }

    /* Globe only - "Language" is what pushed this onto its own line. Scoped
       to .top-bar: below 992px the pill lives in the burger menu instead,
       where it has room for its full label. */
    .top-bar .lang-switch { padding: 4px 8px; gap: 0; }
    .top-bar .lang-switch .lang-switch-label,
    .top-bar .lang-switch .lang-switch-caret { display: none; }
    .top-bar .lang-switch-globe { font-size: 1rem; }
}

@media (max-width: 400px) {
    .top-bar { font-size: 0.71rem; }
    .top-bar .social-inline a { width: 22px; font-size: 0.88rem; }
    .top-bar .row { gap: 5px; }
}

/* =============================================
   TESTIMONIAL SLIDER
   ============================================= */
.slider-slide .testimonial-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.slider-slide .testimonial-text { flex: 1; }


/* =============================================
   CALLBACK POPUP — compact "submitted" state
   The success message plus the WhatsApp handoff has to fit a phone
   screen without scrolling, so it is a single tight row rather than a
   big tick, a heading, a paragraph and a full-width button.
   ============================================= */
.popup-done { text-align: left; }

.popup-done-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(40, 167, 69, 0.09);
    border: 1px solid rgba(40, 167, 69, 0.32);
}

.popup-done-head > i {
    flex: 0 0 auto;
    font-size: 1.5rem;
    color: #28a745;
}

.popup-done-head strong {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--deep-blue);
    line-height: 1.3;
}

.popup-done-head span {
    font-family: var(--font-sans);
    font-size: 0.79rem;
    color: var(--text-gray);
    line-height: 1.45;
}

/* Trim the modal chrome around it too */
.enquiry-popup .popup-done + .wa-handoff { margin-top: 12px; }

/* =============================================
   CAR RENTAL — per-card WhatsApp + missing photo
   ============================================= */
.car-wa-btn {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.12);
    border: 1px solid rgba(37, 211, 102, 0.45);
    color: #1da851;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    transition: all 0.25s ease;
}

.car-wa-btn:hover {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(37, 211, 102, 0.35);
}

/* Shown instead of guessing a photo of a different vehicle. */
.car-photo-missing {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 190px;
    background: linear-gradient(135deg, #eef2f7, #e3e9f1);
    color: #9aa8bb;
    font-size: 2.6rem;
}

/* =============================================
   HOME — SACRED DESTINATIONS
   Photo-led tiles: the picture is the card, the name sits on a gradient
   veil, and the description reveals on hover so the grid stays calm.
   ============================================= */
.dest-section { background: var(--soft-cream); }

.dest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 24px;
}

.dest-tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    background: var(--deep-blue);
    box-shadow: 0 6px 22px rgba(0, 34, 68, 0.13);
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1),
                box-shadow 0.4s ease;
    isolation: isolate;
}

.dest-tile:hover,
.dest-tile:focus-visible {
    transform: translateY(-7px);
    box-shadow: 0 22px 48px rgba(0, 34, 68, 0.28);
}

.dest-tile:focus-visible { outline: 3px solid var(--saffron-primary); outline-offset: 3px; }

.dest-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.dest-tile:hover img { transform: scale(1.08); }

/* Dark at the foot so the type always reads, whatever the photo. */
.dest-tile-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                rgba(0, 34, 68, 0) 28%,
                rgba(0, 34, 68, 0.55) 62%,
                rgba(0, 26, 51, 0.93) 100%);
    transition: background 0.4s ease;
}

.dest-tile:hover .dest-tile-veil {
    background: linear-gradient(180deg,
                rgba(0, 34, 68, 0.12) 12%,
                rgba(0, 34, 68, 0.66) 52%,
                rgba(0, 26, 51, 0.96) 100%);
}

.dest-tile-body {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding: 24px 22px 22px;
    color: #fff;
}

.dest-tile-region {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 50px;
    background: rgba(255, 153, 51, 0.22);
    border: 1px solid rgba(255, 153, 51, 0.55);
    color: var(--saffron-light);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}

.dest-tile-region i { font-size: 0.7rem; }

.dest-tile-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* Kept out of the way until the tile is hovered, so six tiles read as a
   clean set of photographs rather than six blocks of text. */
.dest-tile-desc {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.86);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.45s cubic-bezier(0.2, 0.7, 0.3, 1),
                opacity 0.35s ease, margin 0.45s ease;
}

.dest-tile:hover .dest-tile-desc,
.dest-tile:focus-visible .dest-tile-desc {
    max-height: 5.2rem;
    opacity: 1;
    margin-top: 2px;
}

.dest-tile-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 6px;
    font-family: var(--font-sans);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: var(--saffron-primary);
}

.dest-tile-cta i {
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.dest-tile:hover .dest-tile-cta i { transform: translateX(6px); }

/* A thin saffron edge lights up on hover to tie it to the brand. */
.dest-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    border: 2px solid transparent;
    transition: border-color 0.4s ease;
    pointer-events: none;
    z-index: 2;
}

.dest-tile:hover::after { border-color: rgba(255, 153, 51, 0.85); }

@media (max-width: 991px) {
    .dest-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
    .dest-tile-name { font-size: 1.32rem; }
}

/* Touch devices never hover, so show the description outright. */
@media (hover: none) {
    .dest-tile-desc { max-height: 5.2rem; opacity: 1; margin-top: 2px; }
    .dest-tile-veil {
        background: linear-gradient(180deg,
                    rgba(0, 34, 68, 0.1) 15%,
                    rgba(0, 34, 68, 0.62) 55%,
                    rgba(0, 26, 51, 0.95) 100%);
    }
}

@media (max-width: 575px) {
    .dest-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .dest-tile { aspect-ratio: 3 / 2; }
    .dest-tile-body { padding: 20px 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .dest-tile, .dest-tile img, .dest-tile-desc, .dest-tile-cta i { transition: none; }
    .dest-tile:hover { transform: none; }
    .dest-tile:hover img { transform: none; }
}

/* =============================================
   PAGE SCROLLBAR
   Scoped to the root element so it restyles the window bar only - the
   inner scrollers (cab modal, card sliders, sticky sub-nav) keep the
   treatment they already define for themselves.
   ============================================= */
html {
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--saffron-primary) rgba(0, 51, 102, 0.07);
}

html::-webkit-scrollbar {
    width: 13px;
}

html::-webkit-scrollbar-track {
    background: rgba(0, 51, 102, 0.06);
}

/* The transparent border plus content-box clipping keeps the thumb slim
   while leaving the track its full width, so the bar looks inset. */
html::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--saffron-primary), var(--saffron-dark));
    border-radius: 20px;
    border: 3px solid transparent;
    background-clip: content-box;
    transition: background 0.25s ease;
}

html::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--saffron-dark), #c96f14);
    background-clip: content-box;
}

html::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, var(--deep-blue), var(--blue-dark));
    background-clip: content-box;
}

/* Chrome draws little arrow buttons at each end by default. */
html::-webkit-scrollbar-button { display: none; }
html::-webkit-scrollbar-corner { background: transparent; }

/* =============================================
   HOME HERO — single overlay banner
   Replaces the old split layout (photo strip above a separate blue copy
   band). The photograph is the hero; the message sits on it, and the
   stats close it off along the bottom.
   ============================================= */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min(86vh, 780px);
    padding: 90px 0 0;
    overflow: hidden;
    background: linear-gradient(135deg, var(--deep-blue), var(--blue-dark));
    isolation: isolate;
}

/* ---------- photo layer ---------- */
.hero-stage { position: absolute; inset: 0; z-index: -2; }

.hero-cslide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 1.1s ease;
}

.hero-cslide.active { opacity: 1; }

.hero-cslide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Slow drift keeps a still photo feeling alive. */
@media (prefers-reduced-motion: no-preference) {
    .hero-cslide.active img { animation: heroDrift 18s ease-out forwards; }
}
@keyframes heroDrift {
    from { transform: scale(1.02); }
    to   { transform: scale(1.11); }
}

/* ---------- readability scrim ---------- */
.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg,
            rgba(0, 26, 51, 0.90) 0%,
            rgba(0, 34, 68, 0.72) 38%,
            rgba(0, 34, 68, 0.34) 62%,
            rgba(0, 34, 68, 0.20) 100%),
        linear-gradient(180deg,
            rgba(0, 26, 51, 0.45) 0%,
            rgba(0, 26, 51, 0.00) 26%,
            rgba(0, 26, 51, 0.00) 55%,
            rgba(0, 26, 51, 0.88) 100%);
}

/* ---------- copy ---------- */
.hero-inner { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; }

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 153, 51, 0.18);
    border: 1px solid rgba(255, 153, 51, 0.55);
    border-radius: 50px;
    padding: 8px 20px;
    margin-bottom: 20px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--saffron-light);
    backdrop-filter: blur(4px);
}
.hero-kicker i { color: var(--saffron-primary); }

.hero-title {
    max-width: 17ch;
    color: #fff;
    font-size: clamp(2.1rem, 4.6vw, 4rem);
    line-height: 1.12;
    margin-bottom: 18px;
    text-shadow: 0 3px 24px rgba(0, 0, 0, 0.42);
}
.hero-title span { color: var(--saffron-primary); }

.hero-desc {
    max-width: 34rem;
    margin-bottom: 30px;
    font-family: var(--font-sans);
    font-size: clamp(0.96rem, 1.2vw, 1.1rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-call {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    border-radius: 50px;
    border: 2px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
}
.hero-call:hover { background: #fff; color: var(--deep-blue); border-color: #fff; }

/* ---------- stats + dots along the foot ---------- */
.hero-foot {
    position: relative;
    z-index: 2;
    padding: 24px 0 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    margin-top: 40px;
}

.hero-foot-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 34px;
    flex-wrap: wrap;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 42px;
}

.hero-stat strong {
    display: block;
    font-family: var(--font-sans);
    font-size: clamp(1.4rem, 2.1vw, 1.95rem);
    font-weight: 900;
    line-height: 1.1;
    color: var(--saffron-primary);
}

.hero-stat span {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.72);
}

.hero-cdots { display: flex; gap: 9px; }

.hero-cdots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.45);
    /* The mobile tap-target rule pads these out to 36px and relies on
       content-box clipping to keep the dot looking small. The background
       shorthand above resets background-clip, so restate it. */
    background-clip: content-box;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-cdots button.active {
    width: 30px;
    background: var(--saffron-primary);
    background-clip: content-box;
}

/* ---------- arrows ---------- */
.hero-cbtn {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    z-index: 3;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(0, 26, 51, 0.4);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
}
.hero:hover .hero-cbtn,
.hero-cbtn:focus-visible { opacity: 1; }
.hero-cbtn:hover { background: var(--saffron-primary); border-color: var(--saffron-primary); }
.hero-cbtn:focus-visible { outline: 3px solid var(--saffron-primary); outline-offset: 3px; }
.hero-cprev { left: clamp(12px, 2vw, 30px); }
.hero-cnext { right: clamp(12px, 2vw, 30px); }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    .hero { min-height: min(80vh, 640px); padding-top: 70px; }
    .hero-scrim {
        background:
            linear-gradient(180deg,
                rgba(0, 26, 51, 0.62) 0%,
                rgba(0, 26, 51, 0.55) 45%,
                rgba(0, 26, 51, 0.92) 100%);
    }
    .hero-cbtn { opacity: 1; width: 42px; height: 42px; }
    .hero-foot { margin-top: 28px; padding: 18px 0 24px; }
    .hero-stats { gap: 12px 30px; }
}

@media (max-width: 575px) {
    .hero { min-height: auto; padding: 44px 0 0; }
    .hero-title { max-width: none; }
    .hero-desc { margin-bottom: 24px; }
    .hero-actions { width: 100%; }
    .hero-actions > * { width: 100%; justify-content: center; }
    .hero-cbtn { display: none; }
    .hero-foot-inner { justify-content: center; }
    .hero-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 20px;
        width: 100%;
    }
    .hero-cdots { width: 100%; justify-content: center; }
}

/* Entrance for the hero copy.
   The legacy .hero-title rule carried "fadeInUp 1s ease-out 0.5s both",
   whose fill-mode holds opacity:0 through the delay - the headline was
   invisible on arrival. Own it here with a short staggered fade instead. */
@keyframes heroIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

.hero-kicker,
.hero-title,
.hero-desc,
.hero-actions {
    animation: heroIn 0.65s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.hero-title   { animation-delay: 0.08s; }
.hero-desc    { animation-delay: 0.16s; }
.hero-actions { animation-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
    .hero-kicker,
    .hero-title,
    .hero-desc,
    .hero-actions { animation: none; }
}

/* The base .hero-cdots rule above sets padding:0, which lands after the
   shared tap-target block and cancelled its 13px padding - leaving a 36px
   box with nothing to clip away, so the dots rendered as large discs.
   Restate the padded hit box here, after the base rule. */
@media (max-width: 991.98px) {
    .hero-cdots button {
        min-width: 36px;
        min-height: 36px;
        padding: 13px;
        box-sizing: border-box;
        background-clip: content-box;
    }
    /* Padding stays symmetrical: 56px box - 2x13px = the same 30px bar the
       desktop rule draws. The old 26px side padding left 4px of content, so
       the active dot rendered as a thin vertical sliver. */
    .hero-cdots button.active {
        min-width: 56px;
        padding: 13px;
    }
}

/* =============================================
   FOOTER LINKS — mobile spacing
   The tap-target rule gives each link a 40px minimum height, which on its
   own sets a comfortable row. Keeping the list item's 12px bottom margin
   on top of that pushed the rows to ~55px and left the column looking
   half empty, so drop the margin where the tap target applies.
   ============================================= */
@media (max-width: 991.98px) {
    .footer-links li { margin-bottom: 0; }
    .footer-links a { min-height: 38px; }

    /* Hover nudges the link right; on touch that only causes reflow. */
    .footer-links a:hover { padding-left: 0; }
}

@media (max-width: 767px) {
    .footer-widget { margin-bottom: 26px; }
    .footer-widget h4 { margin-bottom: 12px; }
    .footer-contact li { margin-bottom: 10px; }
}

/* Secondary action next to a primary button - used on the guide cards so
   "View Profile" and "Book Now" don't compete as two solid saffron pills. */
.btn-ghost-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--saffron-primary);
    border-radius: 50px;
    background: transparent;
    color: var(--saffron-dark);
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: 1.4;
    transition: all 0.28s ease;
}

.btn-ghost-outline:hover {
    background: var(--saffron-primary);
    color: #fff;
}

.btn-ghost-outline i { font-size: 0.82rem; transition: transform 0.28s ease; }
.btn-ghost-outline:hover i { transform: translateX(3px); }

/* =============================================
   GUIDE CARDS — listing
   Was a stack of inline styles with uneven rhythm, mismatched icons and
   left-aligned buttons inside a centred card.
   ============================================= */
.guide-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 9px;
}

.guide-name { margin: 0; font-size: 1.18rem; }
.guide-name a { color: var(--deep-blue); transition: color 0.25s ease; }
.guide-name a:hover { color: var(--saffron-primary); }

.guide-role {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--saffron-primary);
}

.guide-exp {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 15px;
    border-radius: 50px;
    background: var(--soft-cream);
    border: 1px solid rgba(255, 153, 51, 0.28);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--deep-blue);
}
.guide-exp i { color: var(--sacred-gold, #D4AF37); font-size: 0.78rem; }

/* Fixed-width icon column so the two rows line up under each other. */
.guide-meta {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.guide-meta li {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 9px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-gray);
}

.guide-meta i {
    flex: 0 0 18px;
    margin-top: 2px;
    text-align: center;
    color: var(--saffron-primary);
    font-size: 0.86rem;
}

.guide-meta span { text-align: left; }

.guide-bio {
    margin: 4px 0 0;
    font-size: 0.87rem;
    line-height: 1.7;
    color: var(--text-gray);
}

.guide-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
    width: 100%;
}

.guide-btn { padding: 10px 20px; font-size: 0.86rem; }

.guide-call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-family: var(--font-sans);
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--deep-blue);
}
.guide-call:hover { color: var(--saffron-primary); }
.guide-call i { color: var(--saffron-primary); font-size: 0.8rem; }

@media (max-width: 575px) {
    .guide-actions > * { width: 100%; justify-content: center; }
}

/* =============================================
   HOME — MOBILE-FIRST LAYOUT
   The base rules below are written for a phone and widen from there. The
   block lands last on purpose: several of the declarations it corrects sit
   in older sections at equal specificity, so order is what settles them.
   ============================================= */

/* ---------------------------------------------
   Footer lists sat 32px in from their own heading
   The global `* { padding: 0 }` reset loses to Bootstrap's `ul { padding-left:
   2rem }` on specificity, so both footer lists carried an indent nothing else
   in the column shared. Costly on a 360px screen, where that is a fifth of
   the usable width.
   --------------------------------------------- */
.footer-links,
.footer-contact { padding-left: 0; }

/* ---------------------------------------------
   Floating action stack
   The three fixed buttons were spread far enough up the right edge to sit
   on the footer's policy grid and its credit line, with only 84px reserved
   underneath. Tighten the column and reserve the height it actually needs.
   --------------------------------------------- */
@media (max-width: 991.98px) {
    /* Column, bottom-up: back-to-top, call, WhatsApp. Everything stays on the
       right so it never lands on the left-aligned footer link text, and the
       whole stack is 186px tall - which is exactly what the footer reserves
       below its last line. */
    #backToTop {
        right: 16px;
        left: auto;
        bottom: 16px;
        width: 46px;
        height: 46px;
    }

    .call-float {
        bottom: 74px;
        right: 16px;
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .whatsapp-float {
        bottom: 136px !important;
        right: 16px;
        width: 50px;
        height: 50px;
    }
    .whatsapp-float i { font-size: 1.4rem; }

    /* Package pages pin a ~70px booking bar over the same corner. */
    body:has(.pkg-mobile-bar) #backToTop { bottom: 88px; }
    body:has(.pkg-mobile-bar) .call-float { bottom: 146px; }
    body:has(.pkg-mobile-bar) .whatsapp-float { bottom: 208px !important; }

    /* Only the back-to-top button has to be made room for down here: the
       other two stand down over the copyright strip (see .at-footer below),
       which is why this is a normal footer inset rather than the 192px void
       a full three-button stack would need. */
    .footer-bottom { padding-bottom: 76px; }

    /* Package pages keep a sticky booking bar pinned below it. */
    body:has(.pkg-mobile-bar) .footer-bottom { padding-bottom: 148px; }

    /* Stand down while the burger menu is open. The open menu fills the
       screen, so the buttons land on top of it - and the WhatsApp one sat
       exactly over the "Gallery" expander, swallowing the tap. */
    body:has(#navbarNav.show) .whatsapp-float,
    body:has(#navbarNav.show) .call-float,
    body:has(#navbarNav.show) #backToTop {
        opacity: 0;
        pointer-events: none;
    }
}

/* Once the copyright strip is on screen, call and WhatsApp have nothing
   left to offer that the footer above them does not already carry, so they
   step aside rather than the page reserving a dead band for them.
   Back-to-top stays: the foot of the page is exactly where it earns its
   keep. .at-footer is set by an observer in site.js. */
body.at-footer .whatsapp-float,
body.at-footer .call-float {
    opacity: 0;
    pointer-events: none;
}

/* ---------------------------------------------
   Package card foot — price beside the CTA
   Replaces a Bootstrap utility row whose button inherited a blanket
   width:100%, so the pill filled the row and crowded the price out.
   --------------------------------------------- */
.card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.package-badge i { color: var(--text-gray); font-size: 0.78rem; }

.pkg-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 18px;
}

.pkg-card-price { line-height: 1.25; }

.pkg-card-price-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: var(--text-gray);
}

.pkg-card-price-value {
    font-family: var(--font-sans);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--saffron-primary);
}

/* Natural width, never stretched by a flex parent. */
.pkg-card-btn {
    flex: 0 0 auto;
    padding: 10px 20px;
    font-size: 0.85rem;
}

/* ---------------------------------------------
   Testimonials — the home markup had no styles of its own
   The stars inherited body colour (they rendered near-black instead of
   gold) and the name sat at the same weight as the city under it.
   --------------------------------------------- */
.testimonial-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    color: var(--sacred-gold, #D4AF37);
    font-size: 0.95rem;
}

.testimonial-by {
    display: flex;
    align-items: center;
    gap: 14px;
}

.testimonial-avatar {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--saffron-primary), var(--saffron-dark));
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 1.05rem;
}

.testimonial-who { min-width: 0; }

/* Overrides the legacy flex rule left over from the old author block. */
.testimonial-author {
    display: block;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--deep-blue);
}

.testimonial-location {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: var(--text-gray);
}

/* ---------------------------------------------
   Slider heads — let long titles wrap
   The heading column is a flex item, so its automatic min-width kept
   "Travel Guides & Yatra Tips" on one line hard against the screen edge.
   --------------------------------------------- */
.slider-head > div:first-child { min-width: 0; }

@media (max-width: 767.98px) {
    .slider-head { margin-bottom: 22px; gap: 14px; }
    .slider-head .section-title { padding-bottom: 12px; }
    .slider-head .section-title::after { bottom: -2px; }
    .slider-dots { margin-top: 22px; }
}

/* Dot rhythm on phones.
   Each dot is a 10px disc centred in a padded box that exists only to make
   it tappable, so the space you actually see between two dots is the two
   paddings plus the flex gap - 35px at the original 36px/9px, which read as
   a broken row rather than a control. Tightened to a 30px box with no gap:
   20px between discs, and the target stays above the 24px minimum. */
@media (max-width: 991.98px) {
    .hero-cdots,
    .slider-dots { gap: 0; }

    .slider-dot,
    .hero-cdots button {
        min-width: 30px;
        min-height: 30px;
        padding: 10px;
    }

    .slider-dot.active { min-width: 46px; }
    .hero-cdots button.active { min-width: 50px; padding: 10px; }
}

/* ---------------------------------------------
   Phone rhythm
   Desktop spacing on a 360px screen turns every section into a scroll.
   Tighten the vertical rhythm and the card interiors together so the
   proportions still read as the same design.
   --------------------------------------------- */
@media (max-width: 575.98px) {
    .section { padding: 44px 0; }
    .section-header { margin-bottom: 30px; }
    .section-title { margin-bottom: 12px; }
    .section-title::after { bottom: -10px; width: 62px; height: 3px; }
    .section-description { font-size: 0.95rem; margin-top: 18px; }

    /* Package / service cards */
    .card-image-wrapper { height: 190px; }
    .card-content { padding: 20px; }
    .card-title { font-size: 1.15rem; margin-bottom: 10px; }
    .card-text { font-size: 0.92rem; line-height: 1.65; margin-bottom: 0; }
    .pkg-card-foot { margin-top: 16px; }
    .pkg-card-price-value { font-size: 1.1rem; }

    /* Why choose us */
    .feature-box { padding: 26px 20px; }
    .feature-icon {
        width: 68px;
        height: 68px;
        font-size: 1.8rem;
        border-width: 2px;
        margin-bottom: 16px;
    }
    .feature-box h4 { font-size: 1.05rem; }
    .feature-box p { font-size: 0.9rem; margin-bottom: 0; }

    /* Testimonials */
    .testimonial-card { padding: 24px 20px; border-left-width: 3px; }
    .testimonial-text { font-size: 1rem; line-height: 1.7; margin-bottom: 18px; }
    .testimonial-stars { margin-bottom: 12px; }

    /* Enquiry card in the closing CTA */
    .form-card { padding: 22px 18px; border-radius: 16px; }
    .form-card h4 { font-size: 1.15rem; margin-bottom: 14px !important; }

    /* The closing CTA stacks; drop the desktop gutter between the halves. */
    .bg-blue .row.g-5 { --bs-gutter-y: 1.75rem; }
}

/* ---------------------------------------------
   Hero on a phone
   --------------------------------------------- */
@media (max-width: 575.98px) {
    .hero { padding-top: 36px; }

    /* The photo shows through more on a narrow screen because the copy no
       longer covers the left third - carry a little more scrim. */
    .hero-scrim {
        background:
            linear-gradient(180deg,
                rgba(0, 26, 51, 0.70) 0%,
                rgba(0, 26, 51, 0.62) 45%,
                rgba(0, 26, 51, 0.94) 100%);
    }

    .hero-kicker {
        padding: 6px 15px;
        margin-bottom: 14px;
        font-size: 0.78rem;
    }

    .hero-desc { font-size: 0.95rem; line-height: 1.65; margin-bottom: 22px; }
    .hero-actions { gap: 10px; }
    .hero-call { padding: 13px 24px; font-size: 0.95rem; }

    .hero-foot { margin-top: 24px; padding: 16px 0 20px; }
    .hero-stat strong { font-size: 1.5rem; }
    .hero-stat span { font-size: 0.76rem; }
}

/* =============================================
   MOBILE NAV — the burger panel as a designed surface
   Below 992px the nav stops being a row of links and becomes a list, so it
   is given list furniture: full-bleed hairlines between rows, a saffron rail
   marking the row you are on, and one consistent row height shared by the
   plain links and the two accordion toggles.
   ============================================= */
@media (max-width: 991.98px) {
    .navbar-collapse { padding-bottom: 6px; }

    .navbar-nav {
        margin-top: 10px;
        border-top: 1px solid var(--border-light);
    }

    .navbar-nav > .nav-item + .nav-item { border-top: 1px solid var(--border-light); }

    /* One row metric for links and toggles alike, so the hairlines sit on an
       even rhythm however a row is built. */
    .navbar-nav > .nav-item > .nav-link,
    .navbar-nav > .nav-item .mobile-services-toggle {
        padding: 14px 4px 14px 12px !important;
        margin: 0;
        font-size: 0.97rem;
        letter-spacing: 0.1px;
    }

    /* The underline is a pointer affordance for an inline nav. On a
       full-width row it reads as a stray rule, so the same pseudo-element is
       re-pointed as a left rail instead of being thrown away. */
    .navbar-nav > .nav-item > .nav-link::before {
        top: 9px;
        bottom: 9px;
        left: 0;
        width: 3px;
        height: auto;
        border-radius: 0 3px 3px 0;
        transform: none;
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .navbar-nav > .nav-item > .nav-link:hover::before,
    .navbar-nav > .nav-item > .nav-link.active::before { width: 3px; opacity: 1; }

    .navbar-nav > .nav-item > .nav-link:hover,
    .navbar-nav > .nav-item > .nav-link.active { background: rgba(255, 153, 51, 0.06); }

    /* Open section reads as one block: tinted row above its own panel. */
    .mobile-services-toggle[aria-expanded="true"] { background: rgba(255, 153, 51, 0.07); }

    .mobile-services-menu {
        margin: 0 0 10px 12px;
        border-left: 3px solid var(--saffron-primary);
        border-radius: 0 10px 10px 0;
        background: var(--soft-cream);
        overflow: hidden;
    }

    .mobile-services-menu .nav-link {
        padding: 11px 14px !important;
        margin: 0;
        font-size: 0.92rem;
    }

    .mobile-services-menu .nav-link::before { display: none; }
    .mobile-services-menu .nav-link:active { background: rgba(255, 153, 51, 0.14); }
    .mobile-services-menu hr { margin: 4px 14px; border-top-color: var(--border-light); }

}

/* "Book Now" duplicates the call and WhatsApp buttons that follow the page,
   and the enquiry form at the foot of it. It is dropped well above the
   burger breakpoint because on a 1366x768 laptop - still the most common
   panel size - the nav row has no slack left for it once Destinations
   carries a dropdown too. */
@media (max-width: 1366px) {
    .navbar-collapse .cta-header { display: none; }
}

/* =============================================
   LANGUAGE PILL INSIDE THE BURGER MENU
   In the top bar the pill collapses to a bare globe for want of room. Here
   there is room, so it gets its label back and reads as a menu row - which
   is also the first place the control is genuinely tappable on a phone: the
   Google widget used to be display:none below 768px, leaving the globe as
   decoration.
   ============================================= */
.nav-lang { padding: 12px 0 4px; }

.nav-lang .lang-switch {
    display: flex;
    width: 100%;
    gap: 11px;
    margin: 0;
    padding: 12px 14px;
    background: var(--soft-cream);
    border: 1px solid var(--border-light);
    border-radius: 12px;
}

.nav-lang .lang-switch:hover,
.nav-lang .lang-switch:focus-within {
    background: rgba(255, 153, 51, 0.1);
    border-color: var(--saffron-primary);
}

.nav-lang .lang-switch-globe {
    display: inline-flex;
    font-size: 1rem;
}

.nav-lang .lang-switch-label {
    display: inline-flex;
    flex: 1;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--deep-blue);
}

.nav-lang .lang-switch-caret {
    display: inline-flex;
    font-size: 0.7rem;
    opacity: 1;
}

/* =============================================
   HOME ENQUIRY FORM — phone density
   Desktop field metrics (58px inputs, 26px labels, 16px gutters) stacked
   into a 740px column on a phone. Same design, tighter.
   ============================================= */
@media (max-width: 575.98px) {
    .form-card .row { --bs-gutter-y: 0.7rem; }

    .form-card .form-label {
        margin-bottom: 5px;
        font-size: 0.85rem;
    }

    /* Padding carries the whole reduction. The 1rem font size is left alone
       deliberately: rem tracks the root, so it is 16px here, and dropping
       below that is what makes iOS Safari zoom the viewport when a field
       takes focus. */
    .form-card .form-control,
    .form-card .form-select {
        padding: 11px 14px;
        border-width: 1.5px;
        border-radius: 9px;
    }

    /* rows="3" gives the textarea a 96px natural height; height wins where
       min-height cannot shrink it. */
    .form-card textarea.form-control { min-height: 0; height: 84px; }

    .form-card .btn-primary-custom { padding: 13px 24px; }
}