#services h5{ font-weight: normal; line-height:normal; font-size: 16px; }
#services .pad-20{ padding-top: 10px; }

/* About Us Section Styles */
.about-content {
    line-height: 1.8;
    color: #333;
}

.intro-text {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 25px;
    color: #1F1F1F;
}

.about-content p {
    margin-bottom: 20px;
    text-align: justify;
}

.section-title {
    color: #f39c12;
    font-size: 24px;
    font-weight: 700;
    margin: 40px 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #f39c12;
}

.subsection-title {
    color: #e67e22;
    font-size: 20px;
    font-weight: 600;
    margin: 30px 0 15px 0;
    padding-left: 15px;
    border-left: 4px solid #e67e22;
}

.feature-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 25px;
}

.feature-list li {
    background: #f8f9fa;
    padding: 15px 20px;
    margin-bottom: 10px;
    border-radius: 8px;
    border-left: 4px solid #E0B000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.destination-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 25px;
}

.destination-list li {
    background: #FAFAFA;
    padding: 12px 18px;
    margin-bottom: 8px;
    border-radius: 6px;
    border-left: 4px solid #E0B000;
}

.package-list {
    background: #FFF8E1;
    padding: 20px 30px;
    border-radius: 10px;
    margin-bottom: 25px;
    border: 2px solid #E0B000;
}

.package-list li {
    margin-bottom: 15px;
    font-weight: 500;
}

.tips-list {
    background: #FFF8E1;
    padding: 20px 30px;
    border-radius: 10px;
    margin-bottom: 25px;
    border: 2px solid #E0B000;
    list-style: none;
}

.tips-list li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.tips-list li:before {
    content: "•";
    color: #E0B000;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.service-note {
    background: #fff8e1;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #ffc107;
    font-style: italic;
    margin: 25px 0;
}

.itinerary-box {
    background: #f5f5f5;
    padding: 25px;
    border-radius: 12px;
    margin: 25px 0;
    border: 2px solid #9e9e9e;
}

.itinerary-box h5 {
    color: #1F1F1F;
    font-size: 18px;
    margin-bottom: 20px;
    text-align: center;
}

.day-list {
    list-style: none;
    padding-left: 0;
}

.day-list li {
    background: white;
    padding: 12px 15px;
    margin-bottom: 8px;
    border-radius: 6px;
    border-left: 4px solid #E0B000;
}

.destination-grid {
    display: flex;
    gap: 30px;
    margin: 25px 0;
}

.destination-column {
    flex: 1;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 2px solid #dee2e6;
}

.destination-column h5 {
    color: #495057;
    font-size: 16px;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 600;
}

.city-list {
    list-style: none;
    padding-left: 0;
}

.city-list li {
    padding: 8px 12px;
    margin-bottom: 5px;
    background: white;
    border-radius: 4px;
    border-left: 3px solid #6c757d;
}

.benefits-list {
    list-style: none;
    padding-left: 0;
    background: #FFF8E1;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
}

.benefits-list li {
    margin-bottom: 10px;
    padding: 8px 0;
    font-weight: 500;
}

.tour-types {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 25px;
}

.tour-types li {
    background: #FFF8E1;
    padding: 10px 20px;
    border-radius: 25px;
    border: 2px solid #E0B000;
    font-weight: 500;
}

.road-trip-box {
    background: linear-gradient(135deg, #1F1F1F 0%, #2B2B2B 100%);
    color: white;
    padding: 30px;
    border-radius: 15px;
    margin: 30px 0;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.road-trip-box h4 {
    color: #f39c12;
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.trip-day {
    background: rgba(255,255,255,0.1);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.2);
}

.trip-day h5 {
    color: #FFC61A;
    font-size: 18px;
    margin-bottom: 15px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.attraction-list {
    list-style: none;
    padding-left: 0;
}

.attraction-list li {
    padding: 5px 0;
    padding-left: 20px;
    position: relative;
    color: #ecf0f1;
}

.attraction-list li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: #e74c3c;
    font-weight: bold;
}

.trip-summary {
    background: rgba(52, 152, 219, 0.2);
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
    border: 1px solid rgba(52, 152, 219, 0.3);
}

.trip-summary p {
    margin-bottom: 10px;
    color: #ecf0f1;
}

.road-trip-box .tips-list {
    background: rgba(231, 76, 60, 0.2);
    padding: 20px 30px;
    border-radius: 10px;
    margin-bottom: 25px;
    border: 2px solid rgba(231, 76, 60, 0.4);
}

.road-trip-box .tips-list li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
    color: #ecf0f1;
}

.road-trip-box .tips-list li:before {
    content: "•";
    color: #e74c3c;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.road-trip-box .service-note {
    background: rgba(241, 196, 15, 0.2);
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #f1c40f;
    font-style: italic;
    margin: 25px 0;
    color: #ecf0f1;
}

/* Terms & Conditions Section Styles */
.terms-content {
    background: rgba(255, 255, 255, 0.95);
    padding: 30px;
    border-radius: 15px;
    margin-top: 30px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.booking-section {
    margin-bottom: 40px;
    padding: 25px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    border: 2px solid #dee2e6;
}

.booking-section .section-title {
    color: #1F1F1F;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 3px solid #E0B000;
    padding-bottom: 10px;
}

.booking-form {
    background: white;
    padding: 25px;
    border-radius: 10px;
    border: 1px solid #ced4da;
}

.booking-form .subsection-title {
    color: #495057;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 4px solid #6c757d;
}

.booking-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 25px;
}

.booking-list li {
    background: #f8f9fa;
    padding: 12px 20px;
    margin-bottom: 8px;
    border-radius: 6px;
    border-left: 4px solid #E0B000;
    font-weight: 500;
    color: #495057;
}

.contact-info {
    background: #FFF8E1;
    padding: 20px;
    border-radius: 8px;
    border: 2px solid #E0B000;
    text-align: center;
}

.contact-info p {
    margin-bottom: 10px;
    font-size: 16px;
}

.contact-info a {
    color: #1F1F1F;
    text-decoration: none;
    font-weight: 600;
}

.contact-info a:hover {
    color: #B8860B;
    text-decoration: underline;
}
.contact-info p strong{
    color: #333;
}
.terms-grid {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}

.terms-column {
    flex: 1;
    background: #f8f9fa;
    padding: 25px;
    border-radius: 12px;
    border: 2px solid #dee2e6;
}

.terms-subtitle {
    color: #1F1F1F;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 25px;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 3px solid #E0B000;
}

.terms-list {
    list-style: none;
    padding-left: 0;
}

.terms-list li {
    background: white;
    padding: 15px 20px;
    margin-bottom: 12px;
    border-radius: 8px;
    border-left: 4px solid #E0B000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    line-height: 1.6;
    color: #333;
}

.terms-list li i {
    color: #E0B000;
    margin-right: 10px;
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.terms-list li strong {
    color: #1F1F1F;
    font-weight: 600;
}

/* One gold accent for every terms icon. The theme shipped a per-icon rainbow
   (green / red / purple / blue-grey) that fought the yellow-black-white
   palette; a single accent reads as one design system. */
.terms-list li i,
.terms-list li i[class*="fa-"] { color: #E0B000; }

/* Services Section Styles */
#services {
    background: #f8f9fa;
    padding: 60px 0;
}

#services h4.yellow {
    color: #e67e22 !important;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

#services h2.h1 {
    color: #1F1F1F;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

#services .matchHeight {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 20px;
    text-align: center;
}

#services .matchHeight:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

#services .image {
    margin-bottom: 15px;
}

#services .image img {
    max-width: 60px;
    height: auto;
    transition: transform 0.3s ease;
}

#services .matchHeight:hover .image img {
    transform: scale(1.1);
}

#services h5 {
    color: #1F1F1F;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

#services .pad-20 {
    width: 100%;
    clear: both;
}

/* Block Footer Section Styles */
#block-footer {
    color: #333;
    padding: 40px 0;
}

#block-footer h4 {
    color: #f39c12;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#block-footer .company-info p {
    margin-bottom: 8px;
    line-height: 1.6;
}
#block-footer .company-info p strong{
    color: #CCCCCC;
}
#block-footer .company-info .yellow {
    color: #f39c12;
    font-weight: 600;
}

#block-footer .company-info em {
    color: #CCCCCC;
    font-style: italic;
}

#block-footer .address-text {
    /*background: rgba(52, 152, 219, 0.1);
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #E0B000;
    margin: 15px 0;*/
    line-height: 1.8;
    color: #ccc;
}

#block-footer .address {
    list-style: none;
    padding-left: 0;
}

#block-footer .address li {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

#block-footer .address li span {
    color: #E0B000;
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

#block-footer .address li a {
    color: #CCCCCC;
    text-decoration: none;
    transition: color 0.3s ease;
}

#block-footer .address li a:hover {
    color: #f39c12;
    text-decoration: underline;
}

#block-footer .address li.email a {
    color: #E0B000;
}

#block-footer .address li.email a:hover {
    color: #f39c12;
}

#block-footer a[href^="http"] {
    color: #E0B000;
    text-decoration: none;
}

#block-footer a[href^="http"]:hover {
    color: #f39c12;
    text-decoration: underline;
}
.navbar .logo img{
    width: auto; height: 60px;
}
.inner-header h1{ color:#fff; }
.inner-header p{ color:#fff; }
.inner-header{ padding: 100px 0; background-repeat: no-repeat; background-size: cover; }
.home-about-section{ padding: 60px 0; }
.contact-details a { color:#B8860B; }
.contact-details a:hover { color:#f39c12; }
#navbar .navbar-nav{ margin-bottom: 0; }
.feature-box i { font-size: 3em; }
@media (max-width: 991px){
    #services .matchHeight{ min-height: 190px; }
    #services .pad-20{ margin-bottom: 0; }
    #services .row > div{ margin: 5px; width: calc(50% - 12px); }
    #services h5{ margin: 10px 0 10px;  }
    .home-about-section{ margin-top: 10px; }
    .navbar .logo img{ height: 50px; }
}

/* Mobile: one service card per row, full width, no horizontal overflow */
@media (max-width: 767px){
    #services .container{ max-width: 100%; overflow-x: hidden; }
    #services .row{ margin-left: 0; margin-right: 0; }
    #services .row > div{
        float: none;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0 0 20px;
        padding-left: 15px;
        padding-right: 15px;
    }
    #services .matchHeight{ min-height: 0; }
}


/* Responsive Design */
@media (max-width: 1199px) {
    /* Car-image clearance now lives on #book-urbania (the section directly
       under the hero); the About section only needs normal spacing. */
    .home-about-section{ margin-top: 0; }
}
@media (max-width: 991px) {
    .home-about-section{ margin-top: 10px; }
}
@media (max-width: 768px) {
    nav.navbar .logo{ display: inline-block; width: auto; margin: 0; padding: 0; }
    .about-content .destination-grid {
        flex-direction: column;
        gap: 20px;
    }
    .about-content .tour-types {
        flex-direction: column;
    }
    .about-content .tour-types li {
        text-align: left;
    }
    .about-content .section-title {
        font-size: 20px;
    }
    .about-content .subsection-title {
        font-size: 18px;
    }

    .about-content .road-trip-box .tips-list {
        padding: 20px 15px;
    }
    /* Responsive design for terms section */
    .terms-grid {
        flex-direction: column;
        gap: 20px;
    }

    .terms-content {
        padding: 0;
    }

    .booking-section {
        padding: 20px;
    }

    .booking-form {
        padding: 20px;
    }

    .terms-column {
        padding: 12px;
    }

    .booking-section .section-title {
        font-size: 20px;
    }

    .terms-subtitle {
        font-size: 18px;
    }

    /* Responsive design for footer */
    #block-footer {
        padding: 30px 0;
    }

    #block-footer h4 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    #block-footer .address-text {
        /*padding: 12px;*/
        font-size: 14px;
    }
    #services h5{ font-size:13px;  }
    #services .pad-20{ display:none; }
}

/* Navigation Layout Fixes — DESKTOP ONLY.
   These were global, so .navbar-collapse .nav { display:flex } was laying the
   mobile menu out as a horizontal row (siblings squashed off-screen when a
   submenu expanded), .navbar-collapse { display:flex !important } defeated the
   .collapse hide, and .navbar-header { display:none } hid the burger between
   992-1199px. Scoped to >=1200px so the mobile block below governs alone. */
@media (min-width: 1200px) {
    .navbar .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    
    .navbar .logo {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }
    
    .navbar .logo span {
        margin-left: 10px;
        font-size: 18px;
        font-weight: 700;
        color: #f39c12;
        white-space: nowrap;
    }
    
    .navbar-collapse {
        display: flex !important;
        flex-grow: 0;
        justify-content: flex-end;
    }
    
    .navbar-collapse .nav {
        display: flex;
        margin: 0;
        align-items: start;
    }
    
    .navbar-collapse .nav li {
        margin-left: 20px;
    }
    
    .navbar-header {
        display: none;
    }
    
}
@media (max-width: 991px) {
    .navbar .container {
        flex-wrap: wrap;
    }
    
    .navbar-header {
        display: block;
        order: 2;
        margin-left: auto;
    }
    
    .navbar .logo {
        order: 1;
    }
    
    .navbar-collapse {
        order: 3;
        width: 100%;
        margin-top: 10px;
        justify-content: center;
    }
    
    .navbar-collapse.collapse {
        display: none !important;
    }
    
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    
    .navbar-collapse .nav {
        flex-direction: column;
        width: 100%;
    }
    
    .navbar-collapse .nav li {
        margin: 5px 0;
        text-align: left;
    }

    .navbar-collapse .nav li a {
        text-align: left;
    }
}

/* Blog Preview Section */
#blog-preview {
    padding: 60px 0;
}

.blog-preview-box {
    transition: all 0.3s ease;
}

.blog-preview-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
    border-color: #1F1F1F !important;
}

.blog-preview-box:hover h3 {
    color: #FFC61A !important;
}

@media (max-width: 767px) {
    .blog-preview-box .row > div {
        margin-bottom: 20px;
    }
    
    .blog-preview-box img {
        height: 180px !important;
    }
}

/* Quick Contact CTA Section */
#quick-contact {
    padding: 60px 0 !important;
    background-color: #fff;
}

#quick-contact .call-to-action {
    background-color: #f39c12 !important;
    color: white !important;
    padding: 40px !important;
    border-radius: 10px !important;
}

#quick-contact .contact-buttons {
    margin-top: 20px;
}

#quick-contact .btn {
    display: inline-block;
    padding: 10px 26px;
    margin: 10px;
    border-radius: 11px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

#quick-contact .btn-light {
    background-color: #fff !important;
    color: #f39c12 !important;
    border: 2px solid #fff;
}

#quick-contact .btn-light:hover {
    background-color: #1F1F1F !important;
    color: #FFC61A !important;
    border-color: #1F1F1F;
}

#quick-contact .btn-success {
    background-color: #25d366 !important;
    color: #fff !important;
    border: 2px solid #25d366;
}

#quick-contact .btn-success:hover {
    background-color: #128c7e !important;
    border-color: #128c7e;
}

@media (max-width: 767px) {
    #quick-contact .contact-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    #quick-contact .btn {
        width: 80%;
        max-width: 300px;
        margin: 5px 10px;
    }
}

/* ==========================================================================
   Book Your Urbania Van Section  (scoped under #book-urbania so it cannot affect
   any existing website styling). Light theme to blend with the homepage.
   ========================================================================== */
#book-urbania {
    padding: 70px 0;
    background: #f8f9fa;
    position: relative;
    z-index: 2;
}

/* Push the booking section clear of the hero van image, which overflows
   below the hero on desktop. The car is hidden below 992px, so no top
   spacing is needed there. (This clearance previously lived on the
   "About" section, which now sits after the booking section.) */


@media (min-width: 992px) {
    #tourism-intro {
        margin-top: 150px;
    }
}
@media (min-width: 1200px) {
    #tourism-intro {
        margin-top: 25px;
    }
}

#book-urbania .bt-heading {
    text-align: left;
    margin-bottom: 40px;
}

/* Section title reuses the site's h1.yellow style (same as the
   "About Urbania Van Rental" heading) for full design consistency. */
#book-urbania .bt-heading h1.yellow, #book-urbania .bt-heading h2.yellow {
    margin: 0 0 15px;
}

#book-urbania .bt-eyebrow {
    color: #d99b00;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 10px;
}

#book-urbania .bt-title {
    color: #1F1F1F;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 38px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 15px;
}

#book-urbania .bt-title span,
#book-urbania .bt-eyebrow-accent {
    color: #FFC61A;
}

#book-urbania .bt-subtitle {
    color: #666;
    font-size: 16px;
    width: 100%;
    margin: 0;
    text-align: left;
    line-height: 1.6;
}

/* How-it-works booking journey strip */
#book-urbania .bt-steps {
    list-style: none;
    padding: 0;
    margin: 0 auto 45px;
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
}

#book-urbania .bt-steps li {
    flex: 1;
    min-width: 150px;
    text-align: center;
    padding: 0 12px;
    position: relative;
}

/* connector line between steps */
#book-urbania .bt-steps li:not(:last-child):after {
    content: "";
    position: absolute;
    top: 28px;
    right: -30px;
    width: 60px;
    height: 2px;
    background: #e6c98f;
}

#book-urbania .bt-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #f39c12;
    color: #fff;
    font-size: 22px;
    margin-bottom: 14px;
    box-shadow: 0 6px 16px rgba(243, 156, 18, 0.3);
}

#book-urbania .bt-step-no {
    display: block;
    color: #f39c12;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

#book-urbania .bt-step-text {
    display: block;
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}

#book-urbania .bt-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 45px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid #ececec;
    max-width: 1000px;
    margin: 0 auto;
    border-top: 5px solid #FFC61A;
}

/* Two-column layout is handled by the site's Bootstrap grid
   (.row + .col-lg-6). Fields stack full-width inside each column,
   and the grid collapses to a single column on tablet / mobile. */
#book-urbania .bt-grid {
    margin-left: -15px;
    margin-right: -15px;
}

#book-urbania .bt-field {
    margin-bottom: 22px;
}

#book-urbania .bt-field label {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1F1F1F;
    margin-bottom: 9px;
    text-transform: none;
}

#book-urbania .bt-field label .bt-req {
    color: #e74c3c;
    margin-left: 2px;
}

#book-urbania .bt-field label .bt-opt {
    color: #999;
    font-weight: 400;
    font-size: 12px;
}

#book-urbania .bt-field input,
#book-urbania .bt-field select,
#book-urbania .bt-field textarea {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    color: #333;
    background: #fbfbfb;
    border: 2px solid #e6e6e6;
    border-radius: 10px;
    box-sizing: border-box;
    line-height: normal;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#book-urbania .bt-field input::placeholder,
#book-urbania .bt-field textarea::placeholder {
    color: #aab1b8;
}

#book-urbania .bt-field select {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22%231F1F1F%22%20d%3D%22M6%208L1%203h10z%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
    padding-right: 40px;
    cursor: pointer;
}

#book-urbania .bt-field textarea {
    height: auto;
    min-height: 130px;
    padding: 14px 16px;
    resize: vertical;
}

/* Pickup Date & Time – two controls in one field */
#book-urbania .bt-inline {
    display: flex;
    gap: 12px;
}

#book-urbania .bt-inline input {
    flex: 1;
    min-width: 0;
}

#book-urbania .bt-field input:focus,
#book-urbania .bt-field select:focus,
#book-urbania .bt-field textarea:focus {
    outline: none;
    border-color: #FFC61A;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 198, 26, 0.25) !important;
}

/* Inline validation errors */
#book-urbania .bt-field.bt-invalid input,
#book-urbania .bt-field.bt-invalid select,
#book-urbania .bt-field.bt-invalid textarea {
    border-color: #e74c3c;
    background: #fff6f5;
}

#book-urbania .bt-error {
    display: none;
    color: #e74c3c;
    font-size: 12.5px;
    margin-top: 6px;
}

#book-urbania .bt-field.bt-invalid .bt-error {
    display: block;
}

/* Honeypot – visually hidden */
#book-urbania .bt-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Security code (captcha) */
#book-urbania .bt-captcha-field {
    max-width: 470px;
}

#book-urbania .bt-captcha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

#book-urbania .bt-captcha img {
    height: 52px;
    width: 130px;
    border: 2px solid #e6e6e6;
    border-radius: 10px;
    background: #fbfbfb;
    flex: 0 0 auto;
}

#book-urbania .bt-captcha-refresh {
    flex: 0 0 auto;
    width: 48px;
    height: 52px;
    border: 2px solid #e6e6e6;
    border-radius: 10px;
    background: #fff;
    color: #1F1F1F;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#book-urbania .bt-captcha-refresh:hover {
    background: #FFC61A;
    border-color: #FFC61A;
    transform: rotate(90deg);
}

#book-urbania .bt-captcha input {
    flex: 1 1 150px;
    min-width: 130px;
    letter-spacing: 3px;
}

/* Submit */
#book-urbania .bt-actions {
    text-align: center;
    margin-top: 30px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

#book-urbania .bt-submit {
    display: inline-block;
    background: #FFC61A;
    color: #1F1F1F;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: 2px solid #FFC61A;
    border-radius: 12px;
    padding: 16px 75px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 22px rgba(255, 198, 26, 0.4);
}

#book-urbania .bt-submit:hover {
    background: #1F1F1F;
    color: #FFC61A;
    border-color: #1F1F1F;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(31, 31, 31, 0.25);
}

#book-urbania .bt-submit:active {
    transform: translateY(-1px);
}

/* ==========================================================================
   SITE-WIDE BUTTON STANDARD
   One consistent button design system across the whole website. Only the
   geometry is standardized here — height, padding, border-radius, font-size
   and font-weight. Colors (blue .btn-primary, orange .btn-warning, green
   WhatsApp, etc.) and each variant's hover effect are left untouched.
   Modern rounded-rectangle style (no pills). Size variants (.btn-lg / .btn-xs)
   keep their own padding/font-size and use a proportional radius.
   ========================================================================== */
.btn {
    display: inline-block;
    padding: 10px 26px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-transform: capitalize;
    vertical-align: middle;
}

/* Same rounded-rectangle language, proportional to the size variant. */
.btn.btn-lg { border-radius: 12px; }
.btn.btn-xs { border-radius: 8px; }

/* Ready-to-Book CTA and vehicle-fares "Read More" now follow the exact same
   standardized height / padding / radius as every other button on the site. */
.cta-keep .btn {
    padding: 10px 26px;
    text-transform: capitalize;
}
.btn.btn-read-more {
    padding: 10px 26px;
}

/* "Read More About Us" button below the About Us paragraph, centered above the feature boxes */
.about-readmore {
    margin-top: 25px;
}

#book-urbania .bt-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* Feedback messages */
#book-urbania .bt-feedback {
    display: none;
    margin-bottom: 25px;
    padding: 16px 20px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

#book-urbania .bt-feedback.bt-success {
    display: block;
    background: #e8f7ee;
    color: #1e7e45;
    border: 1px solid #34c471;
}

#book-urbania .bt-feedback.bt-fail {
    display: block;
    background: #fdecea;
    color: #b32d20;
    border: 1px solid #e74c3c;
}

/* Responsive: the Bootstrap grid (.col-lg-6) already stacks the two
   columns into one below 992px. These rules just refine spacing /
   make the button full-width on small screens. */
@media (max-width: 991px) {
    #book-urbania {
        padding: 55px 0;
    }
}

@media (max-width: 767px) {
    #book-urbania {
        padding: 45px 0;
    }
    #book-urbania .bt-card {
        padding: 28px 20px;
    }
    #book-urbania .bt-title {
        font-size: 30px;
    }
    #book-urbania .bt-submit {
        display: block;
        width: 100%;
        padding: 16px 20px;
    }
}

/* Very small phones: stack the date & time controls */
@media (max-width: 400px) {
    #book-urbania .bt-inline {
        flex-direction: column;
    }
    /* When stacked, `flex: 1` would apply to the vertical axis and collapse
       the inputs' height. Reset it so they use the shared field styling
       (height, padding, border, radius, font) and fill the full width. */
    #book-urbania .bt-inline input {
        flex: 0 0 auto;
        width: 100%;
    }
}


/* ==========================================================================
   Featured Services grid (index.html)
   Bootstrap 3 columns are floated, so unequal-height cards snag on the float
   above them and wrap out of alignment. Making the row a flex container takes
   the floats out of play: items on a flex line stretch to a shared height,
   and each wrapped line equalises on its own.
   ========================================================================== */

#featured-services .services-grid {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
}

/* Column stretches to the tallest card on its flex line. */
#featured-services .services-grid > div {
    display: flex;
    float: none;
    margin-bottom: 30px;
}

/* Card fills the stretched column, so every card on a line matches height. */
#featured-services .service-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* The body absorbs the slack, so icons and titles share a baseline across
   the row no matter how much copy sits underneath them. */
#featured-services .service-item .service-body {
    flex: 1 1 auto;
}

/* Icon and title stay centred as before; long copy left-aligns for
   legibility, since bullets cannot read centred. */
#featured-services .service-item .service-body p,
#featured-services .service-item .service-body h6,
#featured-services .service-item .service-body ul {
    text-align: left;
}

#featured-services .service-item .service-body ul {
    padding-left: 18px;
    margin-bottom: 0;
}

/* Long place names must not blow out the column on narrow screens. */
#featured-services .service-item .service-body p,
#featured-services .service-item .service-body li {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Button sits below the whole grid, not below the tallest card. The 30px
   gap comes from the columns' own margin-bottom, as it did originally. */
#featured-services .services-cta {
    clear: both;
}

/* Mobile: single column, natural heights. */
@media (max-width: 767px) {
    #featured-services .services-grid > div {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Hero Urbania van (#large-image .car)
   Sizing only. The zoomin animation, z-index, stacking and the hide-below-992px
   rule all stay in style.css and are deliberately untouched here.

   The source PNG is 1302x816. Left unconstrained it renders at ~2x the space
   the old hero car occupied, so it overflowed the 710px hero and the wheels
   were cut off. These rules scale it fluidly back into the same box the
   previous car used (699x439), so the whole vehicle - both wheels included -
   is always visible and it keeps its slight overlap into the section below.
--------------------------------------------------------------------------- */
#homepage-block-1 #large-image .car {
    width: 100%;
    max-width: 699px;   /* same footprint as the previous hero car */
    height: auto;       /* never distort, never crop */
    display: block;
}
#homepage-block-1 #large-image .splash {
    max-width: 100%;
    height: auto;
}

/* Tablet: container is narrower, so trim the van a little to keep both
   wheels clear of the edge alongside style.css's -240px offset. */
@media (min-width: 992px) and (max-width: 1199px) {
    #homepage-block-1 #large-image .car {
        max-width: 560px;
    }
}



/* ---------------------------------------------------------------------------
   Five-column footer
   Colours, typography and hover effects are inherited from style.css and are
   not redefined here - these rules only handle column balance and vertical
   rhythm so the footer sits shorter now the links are spread across 3 lists.
--------------------------------------------------------------------------- */
#block-footer .footer-cols {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
#block-footer .footer-cols > [class*="col-"] {
    margin-bottom: 20px;
}

/* Tighter heading rhythm - same colour and size, just less dead space */
#block-footer .footer-cols h4 {
    margin-bottom: 18px;
}

/* Link lists: the theme's navbar-nav is built for a horizontal menu, so it is
   reset back to a plain stacked list inside the footer columns. */
#block-footer .footer-cols ul.navbar-nav {
    float: none;
    margin: 0;
    width: 100%;
}
#block-footer .footer-cols ul.navbar-nav > li {
    float: none;
    display: block;
}
#block-footer .footer-cols ul.navbar-nav > li > a {
    padding: 4px 0;
    line-height: 1.6em;
}

/* Contact / address columns start level with the link lists */
#block-footer .footer-cols .address {
    margin-top: 0;
}
#block-footer .footer-cols .address li {
    margin-bottom: 10px;
}
#block-footer .footer-cols .company-info .address-text p {
    margin-bottom: 8px;
}
#block-footer .footer-cols .social-small {
    margin-top: 18px;
}

/* Trim the block's own padding now the content is shorter */
@media (min-width: 992px) {
    #block-footer {
        padding: 45px 0 35px 0;
    }
}

/* ===========================================================================
   Homepage sections + Fleet page layout
   Palette is limited to the existing site tokens:
   #FFC61A (brand yellow) - #f39c12 (accent) - #1F1F1F (heading)
   #666/#555 (body) - #f8f9fa (tint) - #fff (card)
   =========================================================================== */

/* ---------- shared: image frame with a fixed 4:3 ratio ---------- */
.uv-frame {
    position: relative;
    width: 100%;
    padding-top: 75%;          /* 4:3 - identical width/height/ratio everywhere */
    overflow: hidden;
    background: #f0f0f0;
}
.uv-frame > img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;         /* fills the frame without ever stretching */
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
}

/* ---------- Homepage: fleet preview ---------- */
#home-fleet { padding: 80px 0; background: #fff; }
#home-fleet .hf-grid { margin-top: 40px; display: flex; flex-wrap: wrap; }
#home-fleet .hf-item { display: flex; }
#home-fleet .hf-card {
    background: #fff;
    border: 2px solid #FFC61A;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
#home-fleet .hf-card:hover { transform: translateY(-6px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
#home-fleet .hf-media {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 66%;
    overflow: hidden;
    background: #f0f0f0;
}
#home-fleet .hf-media img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block; transition: transform 0.4s ease;
}
#home-fleet .hf-card:hover .hf-media img { transform: scale(1.05); }
#home-fleet .hf-body { padding: 22px 22px 24px; flex: 1 1 auto; }
#home-fleet .hf-title { margin: 0 0 14px; font-size: 19px; line-height: 1.3em; color: #1F1F1F; }
#home-fleet .hf-points { list-style: none; margin: 0; padding: 0; }
#home-fleet .hf-points li {
    position: relative; padding: 5px 0 5px 24px;
    color: #666; font-size: 14px; line-height: 1.6em;
}
#home-fleet .hf-points li:before {
    content: "\f00c"; font-family: FontAwesome;
    position: absolute; left: 0; top: 5px; color: #f39c12; font-size: 12px;
}

/* ---------- Homepage: why choose ---------- */
#home-why { padding: 80px 0; background: #f8f9fa; }
#home-why .hw-grid { margin-top: 40px; display: flex; flex-wrap: wrap; }
#home-why .hw-item { display: flex; }
#home-why .hw-card {
    background: #fff;
    border: 2px solid #FFC61A;
    border-radius: 8px;
    padding: 30px 26px;
    width: 100%;
    margin-bottom: 30px;
    text-align: center;
    display: flex; flex-direction: column;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
#home-why .hw-card:hover { transform: translateY(-6px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
#home-why .hw-icon {
    width: 66px; height: 66px; margin: 0 auto 18px;
    border-radius: 50%; background: #f39c12; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; box-shadow: 0 6px 16px rgba(243,156,18,0.3);
}
#home-why .hw-title { margin: 0 0 12px; font-size: 18px; line-height: 1.35em; color: #1F1F1F; }
#home-why .hw-card p { margin: 0; color: #666; font-size: 15px; line-height: 1.75em; flex: 1 1 auto; }

/* ---------- Homepage: popular destinations ---------- */
#home-destinations { padding: 80px 0; background: #fff; }
#home-destinations .hd-tags { list-style: none; padding: 0; margin: 40px 0 25px; text-align: center; }
#home-destinations .hd-tags li {
    display: inline-block; background: #fff;
    border: 1px solid #e6e6e6; border-radius: 20px;
    padding: 8px 18px; margin: 0 8px 10px 0;
    font-size: 14px; color: #555; transition: all 0.2s ease;
}
#home-destinations .hd-tags li:hover { border-color: #FFC61A; color: #1F1F1F; }

/* ---------- Fleet page: alternating two-column rows ---------- */

/* image on the right for alternating rows */

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    #home-fleet, #home-why, #home-destinations { padding: 60px 0; }
}
@media (max-width: 767px) {
    #home-fleet, #home-why, #home-destinations { padding: 50px 0; }
    #home-destinations .hd-tags li { font-size: 13px; padding: 7px 14px; }
}

/* ---------------------------------------------------------------------------
   Logo - monogram SVG wordmark
   The wordmark now lives inside the SVG, so the old .logo span is no longer
   rendered. Sizes are nudged up slightly from the previous bitmap (60/50px)
   while the whole lockup is still narrower than image + text was, so the
   header nav keeps its existing room.
--------------------------------------------------------------------------- */
.navbar .logo img {
    width: auto;
    height: 68px;
    display: block;
}
@media (max-width: 991px) {
    .navbar .logo img { height: 58px; }
}
@media (max-width: 767px) {
    .navbar .logo img { height: 52px; }
}

/* ===========================================================================
   STICKY HEADER + LOGO SWITCHING
   Driven entirely by the `header-sticky` class that sticky-header.js puts on
   <body>. Palette limited to #FFC61A / #f39c12 / #1F1F1F / #fff.
   =========================================================================== */

/* the JS-inserted spacer keeps the page from jumping when the header pins */
.nav-spacer { height: 0; }

#nav-wrapper {
    transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}

body.header-sticky #nav-wrapper {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1030;
    height: auto !important;
    background: #ffffff !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.12);
}
body.header-sticky #nav-wrapper nav.navbar {
    background: transparent !important;
    height: auto !important;
    transition: background .3s ease;
}

/* nav links flip to dark on the white bar */
body.header-sticky #nav-wrapper #navbar ul.navbar-nav > li > a { color: #1F1F1F; }
body.header-sticky #nav-wrapper #navbar ul.navbar-nav > li > a:hover,
body.header-sticky #nav-wrapper #navbar ul.navbar-nav > li.current_page_item > a { color: #f39c12; }
body.header-sticky #nav-wrapper .navbar-toggle .icon-bar { background-color: #1F1F1F; }

/* ---------------------------------------------------------------------------
   Logo variants

   Below 1200px the fixed 70px mobile bar owns the logo (see the MOBILE /
   TABLET NAVIGATION block further down), so that breakpoint keeps the plain
   swap: only one variant is ever rendered.
--------------------------------------------------------------------------- */
.navbar .logo .logo-sticky { display: none; }
body.header-sticky .navbar .logo .logo-default { display: none; }
body.header-sticky .navbar .logo .logo-sticky { display: block; }

/* ---------------------------------------------------------------------------
   Desktop header logo (>=1200px)

   Both variants render at exactly the same size in both states and are stacked
   in a single grid cell, so pinning the header cross-fades them in place
   instead of swapping one box for a differently sized one. Padding is equal in
   the default and sticky states as well, so nothing jumps vertically.
--------------------------------------------------------------------------- */
@media (min-width: 1200px) {

    nav.navbar .logo,
    body.header-sticky nav.navbar .logo {
        display: grid;
        grid-template-areas: "logo";
        align-items: center;      /* vertically centred in both states */
        justify-items: start;
        padding: 14px 0;          /* identical when pinned - no height jump */
    }

    /* both variants share one grid cell, so the anchor keeps a single box */
    .navbar .logo .logo-default,
    .navbar .logo .logo-sticky,
    body.header-sticky .navbar .logo .logo-default,
    body.header-sticky .navbar .logo .logo-sticky {
        grid-area: logo;
        display: block;
        width: auto;              /* aspect ratio comes from the height alone */
        transition: opacity .3s ease, transform .3s ease;
    }

    /* fallback size for any header logo that is not the badge lockup */
    .navbar .logo img,
    body.header-sticky .navbar .logo img { height: 68px; }

    /* every page now uses the round badge lockup, which needs more height than
       a horizontal wordmark before its inner type becomes legible */
    .navbar .logo img[src*="logo_1"],
    .navbar .logo img[src*="logo_2"],
    body.header-sticky .navbar .logo img[src*="logo_1"],
    body.header-sticky .navbar .logo img[src*="logo_2"] { height: 88px; }

    /* cross-fade: outgoing variant eases back very slightly as it fades */
    .navbar .logo .logo-default { opacity: 1; transform: none; }
    .navbar .logo .logo-sticky  { opacity: 0; transform: scale(.96); }
    body.header-sticky .navbar .logo .logo-default { opacity: 0; transform: scale(.96); }
    body.header-sticky .navbar .logo .logo-sticky  { opacity: 1; transform: none; }
}

@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
    .navbar .logo .logo-default,
    .navbar .logo .logo-sticky { transition: none; transform: none; }
    body.header-sticky .navbar .logo .logo-default,
    body.header-sticky .navbar .logo .logo-sticky { transform: none; }
}

/* the homepage header sits over the hero, so neutralise its transparent rules
   only while pinned */
body.header-sticky #homepage-block-1 .nav-wrapper { background: #ffffff !important; }

/* ===========================================================================
   FOOTER - five columns, company block, contact list, gold social icons
   =========================================================================== */
#block-footer .footer-cols > [class*="col-"] { margin-bottom: 30px; }

/* headings align on one baseline across all five columns */
#block-footer .footer-cols h4 {
    margin: 0 0 22px;
    min-height: 24px;
    line-height: 24px;
}

/* --- column 1: company --- */
#block-footer .fc-logo { display: inline-block; margin-bottom: 16px; }
#block-footer .fc-logo img { height: 62px; width: auto; display: block; }
#block-footer .fc-about {
    color: #CCCCCC;
    font-size: 14px;
    line-height: 1.8em;
    margin: 0;
    padding-right: 12px;
}

/* --- column 5: contact information --- */
#block-footer .fc-info { list-style: none; margin: 0; padding: 0; }
#block-footer .fc-info li {
    position: relative;
    padding: 0 0 14px 28px;
    font-size: 14px;
    line-height: 1.7em;
    color: #CCCCCC;
}
#block-footer .fc-info li:last-child { padding-bottom: 0; }
#block-footer .fc-info li > i {
    position: absolute;
    left: 0; top: 4px;
    color: #FFC61A;
    font-size: 15px;
    width: 16px;
    text-align: center;
}
#block-footer .fc-info li a { color: #CCCCCC; transition: color .3s ease; }
#block-footer .fc-info li a:hover { color: #FFC61A; }

/* --- social icons: gold ring + gold glyph, visible without hovering --- */
#block-footer .fc-social { margin-top: 22px; }
#block-footer .fc-social a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    margin: 0 10px 10px 0;
    border: 1px solid #FFC61A;
    border-radius: 50%;
    color: #FFC61A;
    font-size: 17px;
    background: transparent;
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
#block-footer .fc-social a:hover,
#block-footer .fc-social a:focus {
    background: #FFC61A;
    border-color: #FFC61A;
    color: #1F1F1F;
    transform: translateY(-3px);
}
#block-footer .fc-social a i { line-height: inherit; }

@media (max-width: 991px) {
    #block-footer .fc-about { padding-right: 0; }
}
@media (max-width: 767px) {
    #block-footer .footer-cols h4 { margin-bottom: 16px; min-height: 0; }
    #block-footer .fc-social a { width: 38px; height: 38px; line-height: 36px; font-size: 16px; margin-right: 8px; }
}

/* ===========================================================================
   FINAL UI REFINEMENTS
   =========================================================================== */

/* --- Footer: more breathing space at the top, balanced at the bottom.
       Layout and column structure are untouched. --- */
#block-footer { padding: 60px 0 45px 0; }

@media (min-width: 992px) {
    #block-footer { padding: 80px 0 55px 0; }
}
@media (max-width: 767px) {
    #block-footer { padding: 50px 0 35px 0; }
}

/* --- Floating contact buttons: smaller circles and glyphs.
       Colours, shadows, hover effects and corner position are unchanged;
       only the dimensions and the horizontal offsets (to keep the gaps
       between buttons even at the new size) are adjusted. --- */
.myWhtaicon,
.myCallicon,
.myMailicon {
    width: 48px;
    height: 48px;
    line-height: 48px;
    font-size: 22px;
}
.myWhtaicon i,
.myCallicon i,
.myMailicon i {
    padding-top: 0;
    font-size: 24px;
    line-height: 48px;
}

/* even 13px gaps, same right-hand anchor as before */
.myWhtaicon { right: 47px; }
.myCallicon { right: 108px; }
.myMailicon { right: 169px; }

@media (max-width: 767px) {
    .myWhtaicon,
    .myCallicon,
    .myMailicon {
        width: 44px;
        height: 44px;
        line-height: 44px;
    }
    .myWhtaicon i,
    .myCallicon i,
    .myMailicon i {
        font-size: 22px;
        line-height: 44px;
    }
    .myWhtaicon { right: 25px; }
    .myCallicon { right: 82px; }
    .myMailicon { right: 139px; }
}

/* ===========================================================================
   SERVICES GRID v2 - CSS Grid, fixed card height, tight gaps
   Bootstrap columns are no longer used here: their 15px-per-side gutters made
   a 5-10px gap impossible. CSS Grid gives exact control over both the column
   count and the gap, and equal track widths for free.
   =========================================================================== */

#services .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* desktop: 3 columns */
    gap: 22px;                               /* identical horizontal + vertical gap */
    margin-top: 40px;
    align-items: stretch;
}

#services .services-grid .service-item {
    /* fixed height so the card never resizes with the heading length */
    height: 178px;
    width: 100%;
    margin: 0;
    float: none;
    background: #fff;
    border: 2px solid #FFC61A;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}
#services .services-grid .service-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

#services .services-grid .service-item .image {
    margin: 0 0 12px 0;
    line-height: 1;
    flex: 0 0 auto;
}
#services .services-grid .service-item .image img {
    width: 54px;
    height: 54px;
    max-width: 54px;
    object-fit: contain;
    transition: transform 0.3s ease;
}
#services .services-grid .service-item:hover .image img { transform: scale(1.1); }

#services .services-grid .service-item h5 {
    margin: 0;
    font-size: 14px;                 /* reduced so long titles still fit */
    font-weight: 600;
    line-height: 1.45em;
    color: #1F1F1F;
    text-align: center;
    flex: 0 0 auto;
    /* wrap onto a second line, but never a third - the card height is fixed */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.9em;
    word-wrap: break-word;
}
#services .services-grid .service-item h5 a { color: inherit; transition: color 0.3s ease; }
#services .services-grid .service-item h5 a:hover { color: #f39c12; }

/* tablet: 2 columns */
@media (max-width: 991px) {
    #services .services-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
    #services .services-grid .service-item { height: 172px; }
}

/* mobile: 1 column */
@media (max-width: 767px) {
    #services .container { max-width: 100%; }
    #services .services-grid { grid-template-columns: 1fr; gap: 22px; }
    #services .services-grid .service-item { height: 150px; padding: 16px 14px; }
    #services .services-grid .service-item .image img { width: 48px; height: 48px; max-width: 48px; }
    #services .services-grid .service-item h5 { font-size: 14px; }
}

/* ===========================================================================
   OUR FLEET - premium split card
   One parent card per vehicle, two columns of guaranteed equal height.
   The card height is fixed, so the content column can never grow past the
   image; it centres itself vertically inside that height instead.
   =========================================================================== */

.fleet-list { margin-top: 32px; }

.fleet-row {
    position: relative;                 /* for the divider pseudo-element */
    display: flex;
    align-items: stretch;               /* both columns share the card height */
    gap: 22px;                          /* image <-> content gap */
    height: 360px;                      /* fixed: content can never exceed it */
    padding: 16px;
    margin-bottom: 40px;
    background: #fff;
    border: 2px solid #FFC61A;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.fleet-row:last-child { margin-bottom: 0; }
.fleet-row:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); }

/* subtle divider centred in the 40px gap between items */
.fleet-row:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 10%; right: 10%;
    bottom: -20px;
    height: 1px;
    background: rgba(255,198,26,0.35);
}

/* alternating sides */
.fleet-row.is-reversed { flex-direction: row-reverse; }

/* --- image column --- */
.fleet-row .fleet-media {
    flex: 0 0 46%;
    max-width: 46%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;                   /* rounds the image, card stays visible */
    background: #f0f0f0;
}
.fleet-row .fleet-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
}
.fleet-row:hover .fleet-media img { transform: scale(1.04); }

/* --- content column --- */
.fleet-row .fleet-body {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;            /* vertically centred within the image height */
    overflow: hidden;
    padding: 4px 6px 4px 0;
}

.fleet-row .fleet-badge {
    align-self: flex-start;
    background: #FFC61A;
    color: #1F1F1F;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.fleet-row .fleet-name {
    margin: 0 0 12px;
    font-size: 21px;
    line-height: 1.25em;
    color: #1F1F1F;
}

/* four compact spec boxes in one grid */
.fleet-row .fleet-specs {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.fleet-row .fleet-specs li {
    background: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 7px 8px;
    text-align: center;
    min-width: 0;
}
.fleet-row .fleet-specs .fs-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #999;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fleet-row .fleet-specs .fs-value {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #1F1F1F;
    line-height: 1.3em;
}

/* three feature points */
.fleet-row .fleet-points { list-style: none; margin: 0 0 14px; padding: 0; }
.fleet-row .fleet-points li {
    position: relative;
    padding: 2px 0 2px 24px;
    color: #555;
    font-size: 13.5px;
    line-height: 1.55em;
}
.fleet-row .fleet-points li:before {
    content: "\f00c";
    font-family: FontAwesome;
    position: absolute;
    left: 0; top: 3px;
    color: #f39c12;
    font-size: 12px;
}

.fleet-row .fleet-actions .btn {
    margin: 0 8px 0 0;
    padding: 8px 18px;
    font-size: 13px;
}

/* --- tablet: keep side-by-side but tighten --- */
@media (max-width: 1199px) {
    .fleet-row { height: 320px; }
    .fleet-row .fleet-specs { grid-template-columns: repeat(2, 1fr); }
    .fleet-row .fleet-name { font-size: 20px; }
}

/* --- below 992px: image on top, content below --- */
@media (max-width: 991px) {
    .fleet-row,
    .fleet-row.is-reversed {
        flex-direction: column;
        height: auto;
        gap: 16px;
    }
    .fleet-row .fleet-media {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        height: 240px;
    }
    .fleet-row .fleet-body {
        height: auto;
        justify-content: flex-start;
        padding: 0 4px 4px;
    }
    .fleet-row:not(:last-child)::after { left: 6%; right: 6%; }
}

@media (max-width: 767px) {
    .fleet-row { padding: 12px; margin-bottom: 34px; }
    .fleet-row:not(:last-child)::after { bottom: -17px; }
    .fleet-row .fleet-media { height: 200px; }
    .fleet-row .fleet-name { font-size: 19px; }
    .fleet-row .fleet-specs { gap: 6px; }
    .fleet-row .fleet-actions .btn { display: inline-block; width: auto; margin-bottom: 6px; }
}

/* ===========================================================================
   HERO / BOOKING SECTION - overlap fix
   The theme gave #homepage-block-1 a fixed height of 710px, but its contents
   (180px top padding + the intro block + the 438px van) are taller than that,
   so the van overflowed the hero and the next section painted over it.
   The previous workaround was extra top padding on #book-urbania, which is a
   compensation rather than a fix and has been removed.

   Here the hero is allowed to grow to fit its own content - no negative
   margins, no translateY, no absolute positioning - so it ends naturally and
   the booking section simply starts below it.
   =========================================================================== */

@media (min-width: 992px) {
    #homepage-block-1 {
        height: auto;              /* was a hard 710px, which clipped the van */
        min-height: 710px;         /* keeps the original hero proportions */
        padding-bottom: 70px;      /* clean gap below the van */
    }
}

/* Booking section: even padding, no clearance compensation */
#book-urbania {
    padding-top: 80px;
    padding-bottom: 80px;
}
@media (max-width: 991px) {
    #book-urbania { padding-top: 60px; padding-bottom: 60px; }
}
@media (max-width: 767px) {
    #book-urbania { padding-top: 50px; padding-bottom: 50px; }
}

/* Centred, width-constrained heading block */
#book-urbania .bt-heading {
    text-align: center;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}
#book-urbania .bt-heading h1.yellow, #book-urbania .bt-heading h2.yellow { text-align: center; }
#book-urbania .bt-subtitle {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------------------------------------------------------------------------
   Booking heading, left-aligned variant (book-now.html)
   The #book-urbania section is shared with the homepage, where the heading is
   centred. This modifier class flips just that page's heading block back to
   the container's left edge so it lines up with the form beneath it.
   Only alignment is changed - font size, colour and spacing are inherited.
--------------------------------------------------------------------------- */
#book-urbania.bt-align-left .bt-heading,
#book-urbania.bt-align-left .bt-heading h1.yellow,
#book-urbania.bt-align-left .bt-subtitle {
    text-align: left;
}
#book-urbania.bt-align-left .bt-heading,
#book-urbania.bt-align-left .bt-subtitle {
    margin-left: 0;
    margin-right: 0;
}



/* ===========================================================================
   HERO TEXT + CALL CTA
   Scoped to .hero-text / .hero-cta so nothing else in the hero is affected.
   The van animation, background and splash are untouched.
   =========================================================================== */

#homepage-block-1 .hero-text { text-align: center; padding-top: 10px; }

/* the theme draws a small dot before each .top-text span, which reads as a
   bullet list - suppressed here so the centred lockup stays clean */
#homepage-block-1 .hero-text span:before { display: none; }

#homepage-block-1 .hero-text .hero-eyebrow {
    display: block;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #FFC61A;
}

#homepage-block-1 .hero-text .hero-title {
    margin: 14px 0 0;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 62px;
    font-weight: 800;
    line-height: 1.05em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #FFFFFF;
    text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}

#homepage-block-1 .hero-text .hero-tagline {
    display: block;
    margin: 16px auto 0;
    padding: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 26px;
    line-height: 1.3em;
    color: #FFC61A;
}

/* thin gold rule under the tagline */
#homepage-block-1 .hero-text .hero-tagline:after {
    content: "";
    display: block;
    width: 90px;
    height: 2px;
    margin: 16px auto 0;
    background: #FFC61A;
    opacity: 0.85;
}

#homepage-block-1 .hero-text .hero-subtitle {
    display: block;
    margin: 16px 0 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 1.6em;
    color: #E8E8E8;
}

/* --- Call CTA -------------------------------------------------------------
   Sits outside .get-icon (which carries z-index:-1) so the link is reliably
   clickable and always paints above the hero backdrop. */
#homepage-block-1 .hero-cta {
    position: relative;
    z-index: 3;
    text-align: center;
    margin-top: 34px;
}

#homepage-block-1 .btn-hero-call {
    display: inline-block;
    padding: 15px 38px;
    background: #FFC107;
    color: #1F1F1F;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-decoration: none;
    border-radius: 50px;
    border: 2px solid #FFC107;
    box-shadow: 0 6px 18px rgba(255,193,7,0.28);
    transition: all 0.3s ease;
}
#homepage-block-1 .btn-hero-call i {
    margin-right: 10px;
    font-size: 17px;
}
#homepage-block-1 .btn-hero-call:hover,
#homepage-block-1 .btn-hero-call:focus {
    background: #1F1F1F;
    color: #FFC107;
    border-color: #FFC107;
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.32);
    text-decoration: none;
}
#homepage-block-1 .btn-hero-call:active { transform: translateY(-1px); }

/* --- responsive --- */
@media (max-width: 1199px) {
    #homepage-block-1 .hero-text .hero-title { font-size: 52px; }
    #homepage-block-1 .hero-text .hero-tagline { font-size: 23px; }
}
@media (max-width: 991px) {
    #homepage-block-1 .hero-text .hero-eyebrow { font-size: 13px; letter-spacing: 3px; }
    #homepage-block-1 .hero-text .hero-title { font-size: 42px; letter-spacing: 1px; }
    #homepage-block-1 .hero-text .hero-tagline { font-size: 21px; }
    #homepage-block-1 .hero-text .hero-subtitle { font-size: 16px; }
    #homepage-block-1 .hero-cta { margin-top: 28px; }
}
@media (max-width: 767px) {
    #homepage-block-1 .hero-text .hero-title { font-size: 32px; }
    #homepage-block-1 .hero-text .hero-tagline { font-size: 18px; }
    #homepage-block-1 .hero-text .hero-tagline:after { width: 70px; margin-top: 12px; }
    #homepage-block-1 .hero-text .hero-subtitle { font-size: 15px; }
    #homepage-block-1 .btn-hero-call { padding: 13px 30px; font-size: 15px; }
}

/* ===========================================================================
   RESPONSIVE PASS - mobile (<=767px) and tablet (768-1199px)
   Desktop (>=1200px) is deliberately untouched except where noted.
   =========================================================================== */

/* ---------- Desktop dropdowns (>=1200px) - unchanged behaviour ---------- */
@media (min-width: 1200px) {
    nav.navbar #navbar ul.navbar-nav ul.sub-menu { border-top: 3px solid #FFC61A; }
    nav.navbar #navbar ul.navbar-nav ul.sub-menu li a { color: #1F1F1F; }
    nav.navbar #navbar ul.navbar-nav .hasSub:hover > a { color: #FFC61A; }
    /* Terms lives in the footer on desktop */
    nav.navbar #navbar ul.navbar-nav li.nav-mobile-only { display: none !important; }
}


/* stop the page scrolling behind the open menu */
body.nav-open { overflow: hidden; }

/* ---------- Global overflow guards ----------
   The horizontal guard belongs on <html> ALONE. Its overflow propagates to the
   viewport, so the page is still clipped horizontally - which is all this guard
   was ever for - while <body> keeps overflow:visible.

   Do not add <body> back into this selector. Per CSS spec, `overflow-x: hidden`
   with `overflow-y: visible` forces the used value of overflow-y to `auto`, and
   because style.css declares `html, body { height: 100% !important }` that turns
   <body> into a viewport-height scroll container. The page then scrolls inside
   <body> instead of the viewport: window.pageYOffset is pinned at 0, the window
   'scroll' event never fires, and sticky-header.js can never add .header-sticky. */
html { overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
.container { padding-left: 15px; padding-right: 15px; }

@media (max-width: 1199px) {
    /* wide data tables scroll inside their own box instead of the page */
    .vd-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .vd-table { min-width: 460px; }
}

/* ---------- Tablet + mobile layout tidy-ups ---------- */
@media (max-width: 991px) {
    /* destination columns stack instead of squeezing */
    .destination-grid { flex-direction: column; gap: 16px; }
    /* long word-lists wrap cleanly */
    .city-list li, .feature-list li, .tour-types li { word-wrap: break-word; }
}

@media (max-width: 767px) {
    /* consistent section rhythm */
    section { padding-left: 0; padding-right: 0; }
    .inner-header { padding: 60px 0; }
    .inner-header h1 { font-size: 26px; line-height: 1.25em; }
    .inner-header p { font-size: 14px; }

    /* headings scale down consistently */
    h2.h1 { font-size: 24px; line-height: 1.3em; }
    .section-title { font-size: 19px; }
    .subsection-title { font-size: 17px; }

    /* buttons: full-width and tappable, but not stacked edge to edge */
    .btn { min-height: 44px; padding: 12px 20px; font-size: 14px; }
    .contact-buttons .btn { display: block; width: 100%; margin: 0 0 10px 0; }

    /* CTA panels */
    .call-to-action { padding: 26px 18px !important; }
    .call-to-action h3 { font-size: 20px; line-height: 1.3em; }
    .call-to-action p { font-size: 14px; }

    /* tag pills stay inside the viewport */
    .hd-tags li, .wc-tags li, .ds-tags li, .vd-tags li, .bl-tags li { font-size: 13px; padding: 6px 12px; }
}

/* ===========================================================================
   MOBILE HEADER + HERO + SECTION RHYTHM
   =========================================================================== */

/* ---------- logo left, burger right (<1200px) ---------- */


/* ---------- hero: start higher, balanced CTA spacing ---------- */
@media (max-width: 991px) {
	#homepage-block-1 .content { padding: 40px 0 45px 0 !important; }
	#homepage-block-1 .hero-text { padding-top: 0; }
	#homepage-block-1 .hero-cta { margin-top: 24px; }
	#homepage-block-1 .get-icon .fa { font-size: 120px; top: -20px; }
}
@media (max-width: 767px) {
	#homepage-block-1 .content { padding: 30px 0 40px 0 !important; }
	#homepage-block-1 .hero-cta { margin-top: 20px; }
}

/* ---------- Book Your Van: smaller type on mobile ---------- */
@media (max-width: 767px) {
	#book-urbania .bt-heading h1.yellow,
	#book-urbania .bt-heading h2.yellow { font-size: 24px; line-height: 1.25em; }
	#book-urbania .bt-subtitle { font-size: 14px; line-height: 1.6em; }
	#book-urbania .bt-step-no { font-size: 12px; }
	#book-urbania .bt-step-text { font-size: 12.5px; line-height: 1.5em; }
	#book-urbania .bt-field label { font-size: 13px; }
	#book-urbania input, #book-urbania select, #book-urbania textarea { font-size: 14px; }
	#book-urbania .bt-submit { font-size: 15px; }
}

/* ---------- Booking steps: 2 per row, no trailing connector ---------- */
@media (max-width: 767px) {
	#book-urbania .bt-steps { margin-bottom: 30px; }
	#book-urbania .bt-steps li {
		flex: 0 0 50%;
		max-width: 50%;
		min-width: 0;
		margin-bottom: 22px;
		padding: 0 8px;
	}
	/* connector only between the pair, never at the end of a row */
	#book-urbania .bt-steps li:not(:last-child):after { right: -14px; width: 28px; }
	#book-urbania .bt-steps li:nth-child(2n):after { display: none !important; content: none !important; }
}

/* ---------- Uniform section rhythm, all breakpoints ---------- */
#home-fleet,
#home-why,
#home-destinations,
#book-urbania,
#tariffs,
#services,
#about,
#blog-intro, #blog-guides, #blog-urbania-guide, #blog-topics, #blog-why,
#dest-intro, #dest-kerala, #dest-southindia, #dest-why,
#pil-intro, #pil-temples, #pil-churches, #pil-comfort, #pil-why,
#why-intro, #why-reasons, #why-services, #why-coverage, #why-promise,
#booking-intro, #booking-coverage, #pickup-locations,
#contact-info, #google-map,
#reviews-intro, #testimonials, #why-customers-choose,
#gallery-intro, #gallery-grid, #gallery-fleet, #gallery-destinations, #gallery-services, #gallery-closing,
#faq-intro, #faq-list,
#quick-contact,
.vd-section {
	padding-top: 70px;
	padding-bottom: 70px;
}
@media (max-width: 991px) {
	#home-fleet, #home-why, #home-destinations, #book-urbania, #tariffs, #services, #about,
	#blog-intro, #blog-guides, #blog-urbania-guide, #blog-topics, #blog-why,
	#dest-intro, #dest-kerala, #dest-southindia, #dest-why,
	#pil-intro, #pil-temples, #pil-churches, #pil-comfort, #pil-why,
	#why-intro, #why-reasons, #why-services, #why-coverage, #why-promise,
	#booking-intro, #booking-coverage, #pickup-locations,
	#contact-info, #google-map,
	#reviews-intro, #testimonials, #why-customers-choose,
	#gallery-intro, #gallery-grid, #gallery-fleet, #gallery-destinations, #gallery-services, #gallery-closing,
	#faq-intro, #faq-list, #quick-contact, .vd-section {
		padding-top: 55px;
		padding-bottom: 55px;
	}
}
@media (max-width: 767px) {
	#home-fleet, #home-why, #home-destinations, #book-urbania, #tariffs, #services, #about,
	#blog-intro, #blog-guides, #blog-urbania-guide, #blog-topics, #blog-why,
	#dest-intro, #dest-kerala, #dest-southindia, #dest-why,
	#pil-intro, #pil-temples, #pil-churches, #pil-comfort, #pil-why,
	#why-intro, #why-reasons, #why-services, #why-coverage, #why-promise,
	#booking-intro, #booking-coverage, #pickup-locations,
	#contact-info, #google-map,
	#reviews-intro, #testimonials, #why-customers-choose,
	#gallery-intro, #gallery-grid, #gallery-fleet, #gallery-destinations, #gallery-services, #gallery-closing,
	#faq-intro, #faq-list, #quick-contact, .vd-section {
		padding-top: 45px;
		padding-bottom: 45px;
	}
}

/* sections that sit back-to-back should not double their gap */
#home-fleet + #home-why,
#home-why + #home-destinations,
#blog-guides + #blog-urbania-guide { padding-top: 0; }

/* ===========================================================================
   MOBILE / TABLET NAVIGATION  (<1200px)   -- single authoritative block
   Header bar (logo left, X right) is fixed; only the menu list scrolls.
   Desktop (>=1200px) is untouched.
   =========================================================================== */
@media (max-width: 1199px) {

	/* ---- 1. header bar: flex row, logo left, toggle right, both centred ---- */
	.nav-wrapper { height: 70px; }
	nav.navbar { height: 70px; position: relative; }
	nav.navbar > .container {
		display: flex;
		align-items: center;          /* vertical centring for both */
		justify-content: space-between;
		height: 70px;
		padding-left: 18px;
		padding-right: 15px;
		position: relative;
	}
	nav.navbar .logo {
		order: 1;
		display: flex !important;
		align-items: center;
		width: auto !important;
		max-width: calc(100% - 70px);
		margin: 0 !important;
		padding: 0 !important;
		left: auto !important;
		right: auto !important;
		text-align: left !important;
		float: none !important;
	}
	nav.navbar .logo img { height: 44px; display: block; }
	nav.navbar .navbar-header { order: 2; float: none !important; margin: 0 !important; }

	/* ---- 2. the toggle sits in the bar, not floating ---- */
	nav.navbar .navbar-header .navbar-toggle {
		position: static !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0 !important;
		padding: 0;
		border: 0;
		border-radius: 6px;
		background: transparent;
	}
	nav.navbar .navbar-header .navbar-toggle .icon-bar {
		display: block !important;
		width: 24px !important;
		height: 2px !important;
		margin: 4px auto !important;
		border-radius: 2px;
		opacity: 1 !important;
		visibility: visible !important;
		transition: transform .3s ease, opacity .2s ease, background-color .2s ease;
	}
	body:not(.nav-open) nav.navbar .navbar-header .navbar-toggle .icon-bar { background-color: #FFC61A !important; }
	body.header-sticky:not(.nav-open) #nav-wrapper .navbar-header .navbar-toggle .icon-bar { background-color: #1F1F1F !important; }

	/* open: white X */
	body.nav-open nav.navbar .navbar-header .navbar-toggle .icon-bar,
	body.nav-open.header-sticky #nav-wrapper .navbar-header .navbar-toggle .icon-bar { background-color: #FFFFFF !important; }
	body.nav-open nav.navbar .navbar-header .navbar-toggle .top-bar    { transform: translateY(10px) rotate(45deg); }
	body.nav-open nav.navbar .navbar-header .navbar-toggle .middle-bar { opacity: 0 !important; }
	body.nav-open nav.navbar .navbar-header .navbar-toggle .bottom-bar { transform: translateY(-10px) rotate(-45deg); }

	/* ---- 3. header stays put while the list scrolls ---- */
	body.nav-open .nav-wrapper {
		position: fixed;
		top: 0; left: 0; right: 0;
		z-index: 1102;
		background: #1F1F1F;
	}

	/* ---- 4. the scrolling panel, below the fixed bar ---- */
	nav.navbar #navbar {
		position: fixed;
		top: 70px; left: 0; right: 0; bottom: 0;
		width: 100%;
		margin: 0;
		padding: 0;
		background: #FFC61A;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		border: 0;
		box-shadow: none;
		z-index: 1100;
	}
	nav.navbar #navbar.collapse { display: none !important; }
	nav.navbar #navbar:not(.collapse) { display: block !important; }

	/* ---- 5. top-level items: one left edge, even rhythm, full-width dividers ---- */
	nav.navbar #navbar ul.navbar-nav {
		background: transparent;
		width: 100%;
		margin: 0;
		padding: 0;
		flex: 1 1 auto;
		overflow: visible;
		float: none;
	}
	nav.navbar #navbar ul.navbar-nav > li {
		float: none;
		display: block;
		width: 100%;
		position: relative;
		border-bottom: 1px solid rgba(31,31,31,0.10);   /* spans the full width */
	}
	nav.navbar #navbar ul.navbar-nav > li:last-child { border-bottom: 0; }
	nav.navbar #navbar ul.navbar-nav > li > a {
		display: block;
		padding: 14px 52px 14px 20px;     /* same left edge for every item */
		font-size: 15px;
		font-weight: 700;
		line-height: 1.4;
		color: #1F1F1F;
		background: transparent;
	}

	/* arrow is a real button now - see .submenu-toggle below */
	/* the theme's extra right-caret */
	nav.navbar ul.navbar-nav > li.hasSub:after { content: none !important; display: none !important; }

	/* ---- 7. sub-menu: full width, no box, smooth height animation ---- */
	nav.navbar #navbar ul.navbar-nav ul.sub-menu {
		position: static !important;
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		left: auto !important;
		right: auto !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		float: none;
		max-height: 0;
		overflow: hidden;
		transition: max-height .32s ease;
	}
	nav.navbar #navbar ul.navbar-nav > li.show-child > ul.sub-menu { max-height: 600px; }
	nav.navbar #navbar ul.navbar-nav ul.sub-menu > li {
		float: none;
		display: block;
		width: 100%;
		border-bottom: 1px solid rgba(31,31,31,0.07);
	}
	nav.navbar #navbar ul.navbar-nav ul.sub-menu > li:last-child { border-bottom: 0; }
	nav.navbar #navbar ul.navbar-nav ul.sub-menu > li > a {
		display: block;
		padding: 11px 20px 11px 34px;    /* slight indent only */
		font-size: 13.5px;
		font-weight: 600;
		line-height: 1.4;
		color: #1F1F1F;
		opacity: .9;
	}

	/* ---- 8. social row pinned to the bottom of the panel ---- */
	nav.navbar #navbar .nav-social {
		flex: 0 0 auto;
		margin-top: auto;
		padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid rgba(31,31,31,0.18);
		background: rgba(31,31,31,0.05);
		text-align: center;
	}
	nav.navbar #navbar .nav-social a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px; height: 44px;
		margin: 0 8px;
		border: 2px solid #1F1F1F;
		border-radius: 50%;
		color: #1F1F1F;
		font-size: 17px;
		transition: all .25s ease;
	}
	nav.navbar #navbar .nav-social a:hover { background: #1F1F1F; color: #FFC61A; text-decoration: none; }

	/* Terms is a top-level item here, not inside the Blog dropdown */
	nav.navbar #navbar ul.navbar-nav li.nav-desktop-only { display: none !important; }

	/* floating page buttons must not sit over the open menu */
	body.nav-open .myWhtaicon,
	body.nav-open .myCallicon,
	body.nav-open .myMailicon { display: none !important; }
}

/* tablet header is the same height, so no separate offset is needed */
@media (min-width: 1200px) {
	nav.navbar #navbar .nav-social { display: none !important; }
	nav.navbar #navbar ul.navbar-nav li.nav-mobile-only { display: none !important; }
}

body.nav-open { overflow: hidden; }

/* ===========================================================================
   MOBILE ACCORDION - hard guarantees
   Every rule that could lay the list out horizontally, shrink it, or take an
   item out of flow is neutralised here. Accordion behaviour is then purely:
   sibling <li>s stay in normal block flow; only the child <ul> changes height.
   =========================================================================== */
@media (max-width: 1199px) {

	/* the panel and its list are block-level, never flex rows */
	nav.navbar #navbar,
	nav.navbar #navbar ul.navbar-nav,
	nav.navbar #navbar ul.navbar-nav ul.sub-menu {
		display: block !important;
		flex: none !important;
		float: none !important;
	}
	nav.navbar #navbar.collapse { display: none !important; }

	/* the burger must exist between 992-1199px too */
	nav.navbar .navbar-header { display: block !important; }

	/* every item is a full-width block in normal flow - siblings can never be
	   pushed aside or squashed when one expands */
	nav.navbar #navbar ul.navbar-nav > li,
	nav.navbar #navbar ul.navbar-nav ul.sub-menu > li {
		display: block !important;
		float: none !important;
		width: 100% !important;
		margin: 0 !important;          /* kills .navbar-collapse .nav li{margin-left:20px} */
		position: relative;
		flex: none !important;
	}

	/* the list scrolls with the panel, never clipped to a fixed height */
	nav.navbar #navbar ul.navbar-nav {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		max-height: none !important;
		overflow: visible !important;
		align-items: stretch !important;
	}

	/* social row simply follows the list (no flex margin-top:auto needed) */
	nav.navbar #navbar .nav-social { margin-top: 0 !important; }
}


/* desktop keeps its hover dropdowns - the button is not used there */
@media (min-width: 1200px) {
	nav.navbar #navbar ul.navbar-nav > li.hasSub > button.submenu-toggle { display: none !important; }
}

/* ===========================================================================
   MOBILE NAV - premium refinements
   Arrow is a real <button> (a sibling of the link, never inside it) so touch
   devices cannot navigate when it is tapped. It is styled as part of the row
   rather than a boxed control.
   =========================================================================== */
@media (max-width: 1199px) {

	nav.navbar #navbar ul.navbar-nav > li.hasSub { position: relative; }

	/* text link stops short of the arrow so the two hit areas never overlap */
	nav.navbar #navbar ul.navbar-nav > li.hasSub > a { padding-right: 58px; }

	/* --- arrow: part of the row, no box, no border --- */
	nav.navbar #navbar ul.navbar-nav > li.hasSub > button.submenu-toggle {
		position: absolute;
		top: 0;
		right: 0;
		width: 52px;
		/* sized to the parent row, NOT the li - the li grows when the
		   sub-menu opens, which used to drag the arrow down with it */
		height: auto;
		bottom: auto;
		margin: 0;
		padding: 14px 0;
		line-height: 21px;
		text-align: center;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		color: rgba(31,31,31,0.55);
		font-size: 17px;
		cursor: pointer;
		outline: none;
		z-index: 2;
		-webkit-appearance: none;
		appearance: none;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}
	nav.navbar #navbar ul.navbar-nav > li.hasSub > button.submenu-toggle i {
		display: inline-block;
		transition: transform .28s ease;
		pointer-events: none;                     /* taps resolve to the button */
	}
	/* closed: >   |   open: v  (90deg turn of the right chevron) */
	nav.navbar #navbar ul.navbar-nav > li.hasSub.show-child > button.submenu-toggle i {
		transform: rotate(90deg);
	}
	nav.navbar #navbar ul.navbar-nav > li.hasSub.show-child > button.submenu-toggle {
		color: #1F1F1F;
	}

	/* no stray pseudo-element arrows */
	nav.navbar #navbar ul.navbar-nav > li.hasSub > a:after,
	nav.navbar ul.navbar-nav > li.hasSub:after { content: none !important; display: none !important; }
	/* and never on plain items or sub-items */
	nav.navbar #navbar ul.navbar-nav > li:not(.hasSub) > a:after,
	nav.navbar #navbar ul.navbar-nav ul.sub-menu li > a:after { content: none !important; }

	/* --- parent rows: one hairline each, nothing more --- */
	nav.navbar #navbar ul.navbar-nav > li {
		border-bottom: 1px solid rgba(31,31,31,0.09);
	}
	nav.navbar #navbar ul.navbar-nav > li:last-child { border-bottom: 0; }
	nav.navbar #navbar ul.navbar-nav > li > a {
		padding: 14px 20px;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: .2px;
		color: #1F1F1F;
	}

	/* --- sub-menu: clearly secondary, no internal borders --- */
	nav.navbar #navbar ul.navbar-nav ul.sub-menu {
		background: rgba(31,31,31,0.045) !important;   /* subtle recess */
	}
	nav.navbar #navbar ul.navbar-nav ul.sub-menu > li {
		border-bottom: 0 !important;                   /* less clutter */
	}
	nav.navbar #navbar ul.navbar-nav ul.sub-menu > li > a {
		padding: 10px 20px 10px 46px;                  /* ~26px deeper than parents */
		font-size: 13.5px;
		font-weight: 500;                              /* lighter than parents */
		letter-spacing: 0;
		color: rgba(31,31,31,0.78);
		opacity: 1;
	}
	nav.navbar #navbar ul.navbar-nav ul.sub-menu > li:first-child > a { padding-top: 14px; }
	nav.navbar #navbar ul.navbar-nav ul.sub-menu > li:last-child  > a { padding-bottom: 14px; }
	nav.navbar #navbar ul.navbar-nav ul.sub-menu > li > a:active { color: #1F1F1F; }
}

@media (min-width: 1200px) {
	nav.navbar #navbar ul.navbar-nav > li.hasSub > button.submenu-toggle { display: none !important; }
}

/* ===========================================================================
   MOBILE MENU = TOPMOST OPAQUE LAYER
   Root cause of the hero text showing through the header:
     style.css L1322  #homepage-block-1 .navbar,
                      #homepage-block-1 .nav-wrapper { background: transparent !important; }
   That !important beat the dark background on the open header, so the hero
   ("Welcome To" / the title) was visible *through* the bar around the logo.
   It was never a z-index fault - the layer was simply transparent.

   Fixed here by (a) forcing an opaque background with matching !important,
   (b) lifting the whole menu above every page layer, and (c) taking the page
   content out of view entirely while the menu is open, so nothing can bleed.
   =========================================================================== */
@media (max-width: 1199px) {

	/* (a) opaque header - needs !important to beat the theme's transparent */
	body.nav-open .nav-wrapper,
	body.nav-open #homepage-block-1 .nav-wrapper,
	body.nav-open nav.navbar,
	body.nav-open #homepage-block-1 .navbar,
	body.nav-open #homepage-block-1 .nav-wrapper .navbar {
		background: #1F1F1F !important;
		background-image: none !important;
	}

	/* (b) topmost layer. The header sits one above the panel so the X is
	   always reachable; both clear any page-level stacking. */
	.nav-wrapper { position: relative; z-index: 9990; }
	body.nav-open .nav-wrapper { z-index: 2147483000 !important; }
	body.nav-open nav.navbar #navbar { z-index: 2147482999 !important; }

	/* the panel itself must be fully opaque */
	nav.navbar #navbar { background: #FFC61A !important; }

	/* the theme puts the hero container at z-index 2 - neutralise it while open */
	body.nav-open #homepage-block-1 .container,
	body.nav-open #homepage-block-1 .nav-wrapper .container { z-index: auto !important; }

	/* (c) nothing underneath can show through */
	body.nav-open #homepage-block-1 .content,
	body.nav-open #homepage-block-1 #large-image,
	body.nav-open .inner-header { visibility: hidden !important; }
	body.nav-open #homepage-block-1:after { display: none !important; }

	/* the sticky-header variant must not repaint the bar white while open */
	body.nav-open.header-sticky #nav-wrapper,
	body.nav-open.header-sticky #homepage-block-1 .nav-wrapper {
		background: #1F1F1F !important;
	}
}

/* Parent row and its arrow share one line box, so the arrow can never drift
   out of the row when the sub-menu below it expands. */
@media (max-width: 1199px) {
	nav.navbar #navbar ul.navbar-nav > li.hasSub > a {
		padding-top: 14px;
		padding-bottom: 14px;
		line-height: 21px;
	}
}

/* ==========================================================================
   BRAND COLOUR SYSTEM  -  Yellow / Black / White
   --------------------------------------------------------------------------
   Everything below is deliberately last in the file so it beats the vendor
   sheets (bootstrap-grid.css, swiper.css) without editing them - those are
   third-party and would lose the change on any upgrade.

   Tokens
     Yellow         #FFC61A   primary fill (same yellow as the logo mark)
     Gold           #E0B000   borders, hovers, icon accents
     Gold deep      #B8860B   links on light surfaces
     Yellow soft    #FFF8E1   tinted panel / pill background
     Yellow soft +  #FFE082   pill hover
     Black          #1F1F1F   secondary fill, headings, text on yellow
     Ink            #222222   body text on tinted surfaces
     White          #FFFFFF
   ========================================================================== */

/* --- 1. Kill the framework blues ------------------------------------------
   Bootstrap 3 hard-codes #337ab7 and friends across links, text/bg helpers,
   labels, badges, list groups, panels, progress bars and form focus rings. */
.text-primary                       { color: #B8860B; }
a.text-primary:hover,
a.text-primary:focus                { color: #E0B000; }
.text-info                          { color: #B8860B; }

.bg-primary                         { background-color: #1F1F1F; color: #FFFFFF; }
a.bg-primary:hover,
a.bg-primary:focus                  { background-color: #E0B000; color: #1F1F1F; }
.bg-info                            { background-color: #FFF8E1; color: #222222; }

.label-primary,
.label-info                         { background-color: #E0B000; color: #1F1F1F; }
.badge                              { background-color: #1F1F1F; color: #FFFFFF; }

.alert-info                         { background-color: #FFF8E1; border-color: #E0B000; color: #222222; }
.alert-info .alert-link             { color: #B8860B; }
.panel-primary                      { border-color: #E0B000; }
.panel-primary > .panel-heading     { background-color: #FFC61A; border-color: #E0B000; color: #1F1F1F; }
.progress-bar                       { background-color: #FFC61A; color: #1F1F1F; }
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus       { background-color: #1F1F1F; border-color: #1F1F1F; color: #FFFFFF; }
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span        { background-color: #FFC61A; border-color: #E0B000; color: #1F1F1F; }
.pagination > li > a                { color: #1F1F1F; }
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus    { background-color: #FFC61A; color: #1F1F1F; }

.table > tbody > tr.info > td,
.table > tbody > tr.info > th,
.table > tbody > tr > td.info       { background-color: #FFF8E1; }

/* Focus rings: keep them visible for keyboard users, just not blue. */
.form-control:focus {
	border-color: #E0B000;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(224,176,0,.45);
}
.btn:focus,
.btn.focus,
.btn:active:focus,
a:focus,
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="number"]:focus {
	outline: 2px solid #E0B000;
	outline-offset: 2px;
}
::selection      { background: #FFC61A; color: #1F1F1F; }
::-moz-selection { background: #FFC61A; color: #1F1F1F; }

/* Swiper ships an iOS blue (#007aff) for the active bullet and the scrollbar. */
.swiper-pagination-bullet-active,
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #FFC61A; }
.swiper-scrollbar-drag { background: rgba(31,31,31,.6); }


/* --- 2. Button system ------------------------------------------------------
   Three roles, mapped onto the classes the pages already use so the markup
   does not have to change:

     .btn-primary  PRIMARY    yellow fill, black text
     .btn-warning  SECONDARY  black fill, white text, yellow on hover
     .btn-success  GHOST      gold outline, for the dark CTA bands
     .btn-light    LIGHT      white fill, for the dark CTA bands

   Where two CTAs sit side by side the pages already pair .btn-primary with
   .btn-warning, so "Explore Destinations" comes out yellow and "View Tour
   Packages" black - hierarchy without two identical yellow buttons. */
.btn {
	border-width: 2px;
	border-radius: 6px;
	font-weight: 600;
	letter-spacing: .3px;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.btn-primary,
.btn-primary:visited {
	background-color: #FFC61A;
	border-color: #FFC61A;
	color: #1F1F1F;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
	background-color: #E0B000;
	border-color: #E0B000;
	color: #1F1F1F;
}

.btn-warning,
.btn-warning:visited {
	background-color: #1F1F1F;
	border-color: #1F1F1F;
	color: #FFFFFF;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
	background-color: #FFC61A;
	border-color: #FFC61A;
	color: #1F1F1F;
}

/* Sits on the dark CTA strips, so it is an outline rather than a fill -
   a black button would disappear against a black band. */
.btn-success,
.btn-success:visited {
	background-color: transparent;
	border-color: #FFC61A;
	color: #FFC61A;
}
.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
	background-color: #FFC61A;
	border-color: #FFC61A;
	color: #1F1F1F;
}

/* !important on the colour only: several pages carry an inline
   style="color:#f39c12" here, which put yellow text on a white button
   (about 1.9:1 - unreadable). Black on white is 17.9:1. */
.btn-light,
.btn-light:visited {
	background-color: #FFFFFF;
	border-color: #FFFFFF;
	color: #1F1F1F !important;
}
.btn-light:hover,
.btn-light:focus,
.btn-light:active {
	background-color: #FFC61A;
	border-color: #FFC61A;
	color: #1F1F1F !important;
}

.btn-default,
.btn-info {
	background-color: #1F1F1F;
	border-color: #1F1F1F;
	color: #FFFFFF;
}
.btn-default:hover,
.btn-default:focus,
.btn-info:hover,
.btn-info:focus {
	background-color: #FFC61A;
	border-color: #FFC61A;
	color: #1F1F1F;
}


/* --- 3. Pills / tags -------------------------------------------------------
   Was a light-blue chip (#e3f2fd on a #2196f3 border). Now a warm gold chip. */
.pill,
.tag,
.tour-types li,
.tips-list li.pill {
	display: inline-block;
	background: #FFF8E1;
	border: 2px solid #E0B000;
	color: #222222;
	padding: 10px 20px;
	border-radius: 25px;
	font-weight: 500;
	line-height: 1.4;
	transition: background-color .25s ease, border-color .25s ease;
}
.pill:hover,
.tag:hover,
.tour-types li:hover {
	background: #FFE082;
	border-color: #E0B000;
	color: #222222;
}
a.pill,
a.tag { text-decoration: none; }


/* --- 4. Floating action buttons -------------------------------------------
   The call bubble was Bootstrap-blue (#007bff) next to a green WhatsApp
   bubble; both now read as one branded pair. */
.myCallicon  { background-color: #1F1F1F; color: #FFC61A !important; }
.myCallicon i { color: #FFC61A !important; }
.myCallicon:hover { background-color: #FFC61A !important; }
.myCallicon:hover i { color: #1F1F1F !important; }
.myMailicon  { background-color: #FFC61A !important; color: #1F1F1F !important; }
.myMailicon i { color: #1F1F1F !important; }
.myMailicon:hover { background-color: #1F1F1F !important; }
.myMailicon:hover i { color: #FFC61A !important; }


/* ==========================================================================
   SUB-MENU HOVER / ACTIVE STATE
   --------------------------------------------------------------------------
   Root cause of the unreadable hover: style.css already did the right thing
   (li:hover -> yellow panel, li:hover a -> #1F1F1F). A later rule in this
   file, "ul.sub-menu li a:hover { color: #f39c12 }", won on both order and
   specificity, so the text went orange on the yellow panel - roughly 1.6:1.
   That rule is deleted, not overridden, so one declaration governs the state.

   Contrast: #222222 on #FFC61A = 10.9:1  (AAA, normal text)
   ========================================================================== */
nav.navbar #navbar ul.navbar-nav ul.sub-menu li:hover,
nav.navbar #navbar ul.navbar-nav ul.sub-menu li:focus-within {
	background: #FFC61A;
}
nav.navbar #navbar ul.navbar-nav ul.sub-menu li:hover > a,
nav.navbar #navbar ul.navbar-nav ul.sub-menu li:focus-within > a,
nav.navbar #navbar ul.navbar-nav ul.sub-menu li > a:hover,
nav.navbar #navbar ul.navbar-nav ul.sub-menu li > a:focus,
nav.navbar #navbar ul.navbar-nav ul.sub-menu li > a:active {
	color: #222222;
	background: transparent;
}
/* Icons and the theme's :after chevron follow the text. */
nav.navbar #navbar ul.navbar-nav ul.sub-menu li:hover > a i,
nav.navbar #navbar ul.navbar-nav ul.sub-menu li:hover > a:after,
nav.navbar #navbar ul.navbar-nav ul.sub-menu li:focus-within > a i,
nav.navbar #navbar ul.navbar-nav ul.sub-menu li > a:hover i {
	color: #222222;
}

/* The current page inside a dropdown was #FFC61A on white - about 1.7:1, and
   it vanished entirely once the row turned yellow on hover. Weight now marks
   it instead of colour. */
nav.navbar #navbar ul.navbar-nav ul.sub-menu li.current_page_item > a,
nav.navbar #navbar ul.navbar-nav ul.sub-menu li.current-menu-item > a {
	color: #222222;
	font-weight: 700;
	box-shadow: inset 3px 0 0 #E0B000;
}
nav.navbar #navbar ul.navbar-nav ul.sub-menu li.current_page_item:hover > a,
nav.navbar #navbar ul.navbar-nav ul.sub-menu li.current-menu-item:hover > a {
	color: #222222;
}

/* Third-level flyout: the theme gave it a yellow panel with white hover text
   (1.9:1). Same treatment as level two. */
nav.navbar #navbar ul.navbar-nav ul.sub-menu ul { background: #FFFFFF; }
nav.navbar #navbar ul.navbar-nav ul.sub-menu ul li:hover { background: #FFC61A; }
nav.navbar #navbar ul.navbar-nav ul.sub-menu ul a:hover,
nav.navbar #navbar ul.navbar-nav ul.sub-menu ul a:focus { color: #222222; }

/* Mobile / tablet: the panel is dark, so the sub-menu rows invert - yellow
   fill, black text - which is the same visual language as desktop. */
@media (max-width: 1199px) {
	nav.navbar #navbar ul.navbar-nav ul.sub-menu > li > a:hover,
	nav.navbar #navbar ul.navbar-nav ul.sub-menu > li > a:focus,
	nav.navbar #navbar ul.navbar-nav ul.sub-menu > li > a:active {
		background: #FFC61A;
		color: #222222;
		opacity: 1;
	}
	nav.navbar #navbar ul.navbar-nav ul.sub-menu > li > a:hover i,
	nav.navbar #navbar ul.navbar-nav ul.sub-menu > li > a:active i {
		color: #222222;
	}
}


/* ==========================================================================
   CHECK ICONS  -  Font Awesome, gold, replacing the green emoji
   --------------------------------------------------------------------------
   198 list items across 10 pages carried a green emoji check. Emoji render
   from the platform font, so they ignore the brand palette entirely and vary
   between Windows, Android and iOS. Replaced with .fa-check-circle so the
   colour, size and baseline are ours to control.

   Flex on the list item is what keeps the icon aligned with the FIRST line of
   a wrapped label instead of drifting to the vertical centre of the block.
   Scoped to .feature-list and .tour-types only - .terms-list items contain a
   nested <ul>, which flex would lay out as a sibling column.
   ========================================================================== */
.feature-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.feature-list li > i.fa {
	flex: 0 0 auto;
	width: 17px;
	text-align: center;
	color: #E0B000;
	font-size: 15px;
	/* inherit the row's line-height so the glyph box matches the first text
	   line box - this is what makes it sit on the text baseline rather than
	   floating above it */
	line-height: inherit;
}

/* Pills stay inline so they keep wrapping, but inline-flex still gives the
   icon proper vertical centring against the label. */
.pill,
.tag,
.tour-types li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.tour-types li > i.fa,
.pill > i.fa,
.tag > i.fa {
	flex: 0 0 auto;
	color: #E0B000;
	font-size: 13px;
	line-height: 1;
}
/* On hover the pill deepens to #FFE082, so the icon goes black with the text
   to hold contrast. */
.tour-types li:hover > i.fa,
.pill:hover > i.fa,
.tag:hover > i.fa { color: #222222; }

/* Terms list keeps its own layout (nested sub-lists) - colour only. */
.terms-list li > i.fa { color: #E0B000; }

@media (max-width: 767px) {
	.feature-list li { gap: 10px; }
	.feature-list li > i.fa { width: 15px; font-size: 14px; }
	.tour-types li > i.fa,
	.pill > i.fa { font-size: 12px; }
}


/* Lead line under a South India state heading on the Destinations page.
   The Kerala blocks above use .ds-card, which already pairs a heading with a
   description; this gives the state blocks the same voice without importing
   the card chrome. */
.ds-state .ds-state-intro {
	margin: 0 0 10px;
	max-width: 760px;
	font-size: 15.5px;
	line-height: 1.75;
	color: #444;
}
@media (max-width: 767px) {
	.ds-state .ds-state-intro { font-size: 14.5px; line-height: 1.7; }
}