/* Basic Reset & Box-Sizing */
 html {
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
     text-size-adjust: 100%;
 }

 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     /*padding: 0;*/
 }

 :root {
     /* old colors scheme */
     /* --primary-color: #32b67a; */
     /* Coral - vibrant, adventurous */
     /* --secondary-color: #4682B4; */
     /* Steel Blue - calming, sky/water */
     /* --accent-color: #FFD700; */
     /* Gold - bright, highlight */
     /* --dark-color: #333;
     --light-color: #f8f8f8;
     --text-color: #555;
     --bg-light: #fefefe;
     --bg-dark: #2c3e50; */
     /* Dark for footer */
     --header-height: 80px;

     /* new color scheme */
     /* Green - vibrant but deeper for readability */
     --primary-color: #268c5d;

     /* Steel Blue - adjusted for professional depth */
     --secondary-color: #315b7d;

     /* Gold - more "Goldenrod" to prevent washing out */
     --accent-color: #d4af37;

     /* Neutral Palette */
     --dark-color: #1a1a1a;
     --light-color: #f8f8f8;
     --text-color: #333333;
     /* Vital for readability */

     /* Backgrounds */
     --bg-light: #fefefe;
     --bg-dark: #2c3e50;
 }

 body {
     font-family: 'Montserrat', sans-serif;
     line-height: 1.6;
     color: var(--text-color);
     color: var(--bg-light);
     scroll-behavior: smooth;
     font-size-adjust: 0.5;
 }

 a {
     text-decoration: none;
     color: var(--primary-color);
     transition: color 0.3s ease;
 }

 a:hover {
     color: var(--secondary-color);
 }

 ul {
     list-style: none;
 }

 h1,
 h2,
 h3,
 h4 {
     font-family: ' Garamond', serif;
     color: var(--dark-color);
     margin-bottom: 1rem;
 }

 .btn {
     display: inline-block;
     background: var(--primary-color);
     color: white;
     padding: 12px 25px;
     border-radius: 50px;
     transition: background-color 0.3s ease, transform 0.2s ease;
     font-weight: 600;
     text-transform: uppercase;
     font-size: 0.9rem;
     border: none;
     cursor: pointer;
 }

 .btn:hover {
     background-color: var(--secondary-color);
     color: #fff;
     transform: translateY(-2px);
 }

 /* --- Footer Styling --- */
 .main-footer {
     background-color: var(--bg-dark);
     /* Using your existing dark background variable */
     color: var(--light-color);
     /* Light text color for contrast */
     padding: 60px 0 20px;
     /* Top, bottom, and copyright padding */
     text-align: center;
     /* Default align for responsiveness */
 }

 .main-top-footer {
     padding-bottom: 40px;
     /* Space above copyright */
 }

 .footer-columns {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     /* Responsive grid columns */
     gap: 40px;
     /* Space between columns */
     text-align: left;
     /* Align content within columns to the left */
 }

 .footer-widget {
     margin-bottom: 20px;
     /* Space between widgets on smaller screens */
 }

 .footer-widget .widget-title {
     font-family: ' Garamond', serif;
     /* Use your heading font */
     font-size: 1.8rem;
     color: var(--primary-color);
     /* Vibrant color for titles */
     margin-bottom: 25px;
     position: relative;
     padding-bottom: 10px;
 }

 .footer-widget .widget-title::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: 0;
     width: 60px;
     /* Underline for titles */
     height: 2px;
     background-color: var(--accent-color);
     border-radius: 5px;
 }

 .footer-widget p {
     font-size: 0.95rem;
     line-height: 1.7;
     color: rgba(255, 255, 255, 0.8);
     /* Slightly faded text */
     text-align: justify;
     /* Justify text in about section */
 }

 /* Footer Navigation (ECO Tours) */
 .footer-widget .menu.list-arrow {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .footer-widget .menu.list-arrow li {
     margin-bottom: 10px;
     position: relative;
     padding-left: 20px;
     /* Space for arrow icon */
 }

 .footer-widget .menu.list-arrow li::before {
     content: '→';
     /* Simple arrow icon */
     position: absolute;
     left: 0;
     color: var(--accent-color);
     font-size: 0.9em;
     top: 2px;
 }

 .footer-widget .menu.list-arrow a {
     color: rgba(255, 255, 255, 0.8);
     font-size: 0.95rem;
     transition: color 0.3s ease;
 }

 .footer-widget .menu.list-arrow a:hover {
     color: var(--accent-color);
     text-decoration: underline;
 }

 /* Contact Info List */
 .contact-info-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .contact-info-list li {
     margin-bottom: 15px;
     font-size: 0.95rem;
     line-height: 1.6;
     color: rgba(255, 255, 255, 0.8);
     display: flex;
     /* For icon alignment */
     align-items: flex-start;
 }

 .contact-info-list li i {
     margin-right: 12px;
     color: var(--primary-color);
     font-size: 1.1rem;
     padding-top: 2px;
     /* Adjust icon vertical alignment */
 }

 .contact-info-list li a {
     color: rgba(255, 255, 255, 0.8);
     transition: color 0.3s ease;
 }

 .contact-info-list li a:hover {
     color: var(--accent-color);
     text-decoration: underline;
 }


 /* Footer Social Links */
 .footer-social {
     margin-top: 25px;
     display: flex;
     gap: 20px;
     justify-content: flex-start;
     /* Align left with other content */
 }

 .footer-social a {
     font-size: 1.6rem;
     color: var(--light-color);
     transition: color 0.3s ease, transform 0.2s ease;
 }

 .footer-social a:hover {
     color: var(--primary-color);
     transform: translateY(-3px);
 }

 /* Footer Inquiry Form */
 .footer-inquiry-form {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .footer-inquiry-form label {
     font-size: 0.9rem;
     color: var(--light-color);
     margin-bottom: -5px;
     /* Pull label closer to input */
     font-weight: 500;
 }

 .footer-inquiry-form input[type="text"],
 .footer-inquiry-form input[type="email"],
 .footer-inquiry-form input[type="number"],
 .footer-inquiry-form textarea {
     width: 100%;
     padding: 10px 15px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 5px;
     background-color: rgba(255, 255, 255, 0.1);
     color: var(--light-color);
     font-family: 'Montserrat', sans-serif;
     font-size: 0.95rem;
     transition: border-color 0.3s ease, background-color 0.3s ease;
 }

 .footer-inquiry-form input::placeholder,
 .footer-inquiry-form textarea::placeholder {
     color: rgba(255, 255, 255, 0.6);
 }

 .footer-inquiry-form input:focus,
 .footer-inquiry-form textarea:focus {
     outline: none;
     border-color: var(--primary-color);
     background-color: rgba(255, 255, 255, 0.15);
     box-shadow: 0 0 0 2px rgba(50, 182, 122, 0.3);
     /* Primary color shadow */
 }

 .footer-inquiry-form .btn {
     align-self: flex-start;
     /* Align button to the left */
     margin-top: 10px;
     background: var(--primary-color);
     /* Use theme button style */
     color: white;
     padding: 10px 20px;
     border-radius: 50px;
     transition: background-color 0.3s ease, transform 0.2s ease;
     font-weight: 600;
     text-transform: uppercase;
     font-size: 0.85rem;
     border: none;
     cursor: pointer;
 }

 .footer-inquiry-form .btn:hover {
     background-color: var(--secondary-color);
     transform: translateY(-2px);
 }

 /* Copyright Section */
 .wrapper-copyright {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 20px;
     margin-top: 40px;
     text-align: center;
 }

 .footer-bottom p {
     font-size: 0.85rem;
     opacity: 0.8;
     margin-bottom: 8px;
     color: rgba(255, 255, 255, 0.7);
 }

 .footer-bottom a {
     color: var(--light-color);
     transition: color 0.3s ease;
 }

 /*
.footer-bottom a:hover {
    color: var(--accent-color);
    text-decoration: underline;
} */

 /* --- Media Queries for Footer --- */
 @media (max-width: 768px) {
     .footer-columns {
         grid-template-columns: 1fr;
         /* Stack columns on smaller screens */
         gap: 30px;
     }

     .footer-widget {
         text-align: center;
         /* Center content in widgets */
     }

     .footer-widget .widget-title::after {
         left: 50%;
         /* Center the underline */
         transform: translateX(-50%);
     }

     .footer-widget p {
         text-align: center;
         /* Center justify on smaller screens */
     }

     .footer-widget .menu.list-arrow li {
         padding-left: 0;
         /* Remove padding for icon on smaller screens */
         display: inline-block;
         /* Display as inline-block to allow centering */
         margin: 5px 10px;
         /* Adjust spacing */
     }

     .footer-widget .menu.list-arrow li::before {
         display: none;
         /* Hide the arrow icon */
     }

     .footer-social {
         justify-content: center;
         /* Center social icons */
     }

     .social-links-light a {
         font-size: 1.8rem;
         color: var(--light-color);
         transition: color 0.3s ease;
     }

     .social-links-light a:hover {
         color: var(--primary-color);
     }

     .footer-inquiry-form .btn {
         align-self: center;
         /* Center submit button */
     }

     .contact-info-list li {
         justify-content: center;
         /* Center contact info list items */
         text-align: center;
     }
 }

 @media (max-width: 480px) {
     .main-footer {
         padding: 40px 0 15px;
     }

     .main-top-footer {
         padding-bottom: 30px;
     }

     .footer-widget .widget-title {
         font-size: 1.6rem;
         margin-bottom: 20px;
     }

     .footer-inquiry-form input,
     .footer-inquiry-form textarea {
         padding: 8px 12px;
         font-size: 0.9rem;
     }

     .footer-inquiry-form .btn {
         padding: 8px 15px;
         font-size: 0.8rem;
     }

     .footer-bottom p {
         font-size: 0.8rem;
     }
 }

 /* --- LANDSCAPE PHOTO REVIEW SECTION STYLES --- */
 .customer-reviews-landscape {
     background-color: var(--bg-light);
     /* Light background for this section */
     padding: 80px 0;
     color: var(--text-color);
 }

 /* Carousel Specific Styles */
 .carousel-container-landscape {
     position: relative;
     width: 100%;
     max-width: 1500px;
     /* Max width for the carousel */
     margin: 0 auto;
     overflow: hidden;
     padding: 0 40px;
     /* Padding for navigation buttons */
 }

 .carousel-track-landscape {
     display: flex;
     transition: transform 0.5s ease-in-out;
     /* Smooth transition for manual slide */
     align-items: stretch;
     gap: 25px;
     /* Space between cards */
     padding: 0 15px;
     /* Show glimpse of next/prev card */
 }

 /* Review Card with Landscape Photo */
 .review-card-landscape {
     background-color: #fff;
     border-radius: 8px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
     overflow: hidden;
     /* Important for image within */
     flex-shrink: 0;
     flex-grow: 1;
     flex-basis: 400px;
     /* Base width for cards, will adapt */
     min-width: 300px;
     /* Minimum width to prevent crushing */
     max-width: 450px;
     /* Max width for single card in view */
     display: flex;
     flex-direction: column;
     color: var(--dark-color);
     min-height: 480px;
     /* Adjust height based on content and image */
     position: relative;
 }

 .review-comment-top {
     padding: 30px 25px;
     flex-grow: 1;
     /* Allows comment section to expand */
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     overflow: hidden;
     /* For pseudo-elements */
     text-align: center;
 }

 .review-comment-top blockquote {
     font-family: 'Montserrat', sans-serif;
     font-size: 1.05rem;
     line-height: 1.6;
     font-style: italic;
     margin: 0;
     padding: 0;
     position: relative;
     z-index: 1;
     color: var(--text-color);
 }

 /* Quote Icons */
 .review-comment-top blockquote::before,
 .review-comment-top blockquote::after {
     font-family: 'FontAwesome';
     position: absolute;
     font-size: 60px;
     color: var(--primary-color);
     opacity: 0.1;
     font-style: normal;
     z-index: 0;
 }

 .review-comment-top blockquote::before {
     content: "\f10d";
     /* Left double quote */
     top: 10px;
     left: 10px;
 }

 .review-comment-top blockquote::after {
     content: "\f10e";
     /* Right double quote */
     bottom: 10px;
     right: 10px;
 }

 .reviewer-photo-landscape {
     width: 100%;
     height: 200px;
     /* Fixed height for the landscape photo */
     background-size: cover;
     background-position: center;
     position: relative;
     display: flex;
     align-items: flex-end;
     /* Align content to bottom */
     padding: 20px;
     color: white;
     /* Text color over image */
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
     /* Text shadow for readability */
 }

 .reviewer-overlay-info {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     /* Align name and stars to left */
     width: 100%;
     /* Take full width of padding */
 }

 .reviewer-overlay-info .reviewer-name {
     font-family: 'Montserrat', sans-serif;
     font-size: 1.2rem;
     font-weight: 700;
     margin-bottom: 5px;
 }

 .reviewer-overlay-info .stars-rating {
     color: var(--accent-color);
     font-size: 1.1rem;
     letter-spacing: 1px;
 }

 /* Carousel Navigation Buttons */
 .carousel-btn-landscape {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background-color: rgba(50, 182, 122, 0.7);
     /* Primary color with opacity */
     color: white;
     border: none;
     padding: 15px 10px;
     cursor: pointer;
     font-size: 2rem;
     border-radius: 5px;
     z-index: 10;
     transition: background-color 0.3s ease, transform 0.2s ease;
 }

 .carousel-btn-landscape:hover {
     background-color: var(--primary-color);
     transform: translateY(-50%) scale(1.05);
 }

 .carousel-btn-landscape.prev-btn {
     left: 0;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }

 .carousel-btn-landscape.next-btn {
     right: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }

 .carousel-btn-landscape:disabled {
     background-color: rgba(189, 195, 199, 0.5);
     /* Lighter grey for disabled */
     cursor: not-allowed;
     transform: translateY(-50%);
     /* No scale effect */
 }


 /* Responsive Adjustments */
 @media (min-width: 992px) {

     /* Show 2 cards on larger desktops */
     .review-card-landscape {
         flex-basis: calc(50% - 25px);
         /* Two cards per row, accounting for gap */
     }
 }

 @media (min-width: 769px) and (max-width: 991px) {

     /* Show 1 card on tablets/smaller desktops */
     .review-card-landscape {
         flex-basis: 100%;
         /* One card per row */
         max-width: 500px;
         /* Limit width to look good */
         margin: 0 auto;
         /* Center card if it's the only one */
     }
 }

 @media (max-width: 768px) {
     .customer-reviews-landscape {
         padding: 60px 0;
     }

     h2 {
         font-size: 2rem;
         margin-bottom: 40px;
     }

     .carousel-container-landscape {
         padding: 0 10px;
     }

     .carousel-btn-landscape {
         padding: 10px 7px;
         font-size: 1.5rem;
     }

     .carousel-track-landscape {
         gap: 20px;
         padding: 0;
         /* Remove track padding on small screens */
     }

     .review-card-landscape {
         min-width: 90%;
         /* Ensure cards take up most width */
         min-height: auto;
         flex-basis: 100%;
         /* Stack cards fully */
     }

     .review-comment-top {
         padding: 25px 20px;
     }

     .review-comment-top blockquote {
         font-size: 0.95rem;
     }

     .review-comment-top blockquote::before,
     .review-comment-top blockquote::after {
         font-size: 50px;
     }

     .reviewer-photo-landscape {
         height: 180px;
         padding: 15px;
     }

     .reviewer-overlay-info .reviewer-name {
         font-size: 1.1rem;
     }

     .reviewer-overlay-info .stars-rating {
         font-size: 1rem;
     }
 }

 @media (max-width: 480px) {
     .customer-reviews-landscape {
         padding: 40px 0;
     }

     h2 {
         font-size: 1.8rem;
         margin-bottom: 30px;
     }

     .carousel-btn-landscape {
         padding: 8px 5px;
         font-size: 1.2rem;
     }

     .review-comment-top {
         padding: 20px 15px;
     }

     .review-comment-top blockquote {
         font-size: 0.85rem;
     }

     .review-comment-top blockquote::before,
     .review-comment-top blockquote::after {
         font-size: 40px;
     }

     .reviewer-photo-landscape {
         height: 150px;
     }

     .reviewer-overlay-info .reviewer-name {
         font-size: 1rem;
     }

     .reviewer-overlay-info .stars-rating {
         font-size: 0.9rem;
     }
 }

 /* --- Our Programs Overlay Styles --- */
 .our-programs-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     /* background-color: rgba(0, 0, 0, 0.7); */
     /* Dark semi-transparent background */
     display: flex;
     justify-content: end;
     align-items: center;
     z-index: 2000;
     /* High z-index to appear on top of everything */
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease, visibility 0.3s ease;
 }

 .our-programs-overlay.active {
     opacity: 1;
     visibility: visible;
 }

 .our-programs-overlay-content {
     background-color: var(--light-color);
     padding: 40px;
     border-radius: 10px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
     max-width: 500px;
     /* Max width for the overlay content */
     width: 90%;
     /* Responsive width */
     max-height: 90vh;
     /* Limit height to prevent overflow */
     overflow-y: auto;
     /* Enable scrolling for long lists */
     position: relative;
     transform: translateY(20px);
     /* Initial slight drop effect */
     transition: transform 0.3s ease;
 }

 .our-programs-overlay.active .our-programs-overlay-content {
     transform: translateY(0);
     /* Slide in effect */
 }

 .close-programs-btn {
     position: absolute;
     top: 15px;
     right: 15px;
     background: none;
     border: none;
     font-size: 2rem;
     color: var(--dark-color);
     cursor: pointer;
     padding: 5px;
     line-height: 1;
     transition: color 0.2s ease;
 }

 .close-programs-btn:hover {
     color: var(--primary-color);
 }

 .our-programs-overlay-content .widget-title {
     font-family: ' Garamond', serif;
     font-size: 2.2rem;
     /* Prominent title */
     color: var(--dark-color);
     margin-bottom: 25px;
     position: relative;
     padding-bottom: 10px;
     text-align: center;
     /* Center title */
 }

 .our-programs-overlay-content .widget-title::after {
     left: 50%;
     transform: translateX(-50%);
     /* Center underline */
     width: 80px;
     height: 3px;
     background-color: var(--primary-color);
 }

 .our-programs-overlay-content h3 {
     font-family: 'Montserrat', sans-serif;
     font-size: 1.4rem;
     font-weight: 600;
     color: var(--dark-color);
     margin-top: 25px;
     margin-bottom: 15px;
     text-align: left;
     /* Align sub-titles to left within overlay */
 }

 .our-programs-overlay-content h3.highlight {
     color: var(--primary-color);
 }

 .our-programs-overlay-content ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .our-programs-overlay-content ul li {
     margin-bottom: 10px;
     position: relative;
     padding-left: 25px;
     /* Space for custom bullet */
 }

 .our-programs-overlay-content ul li::before {
     content: '\f054';
     /* Font Awesome angle-right icon */
     font-family: 'FontAwesome';
     position: absolute;
     left: 0;
     color: var(--primary-color);
     font-size: 0.9em;
     line-height: 1;
     top: 4px;
 }

 .our-programs-overlay-content ul li a {
     color: var(--text-color);
     text-decoration: none;
     font-size: 1.05rem;
     transition: color 0.3s ease;
 }

 .our-programs-overlay-content ul li a:hover {
     color: var(--primary-color);
     text-decoration: underline;
 }

 /* Media Queries for Overlay */
 @media (max-width: 768px) {
     .our-programs-overlay-content {
         padding: 30px;
         max-width: 95%;
     }

     .close-programs-btn {
         font-size: 1.8rem;
         top: 10px;
         right: 10px;
     }

     .our-programs-overlay-content .widget-title {
         font-size: 2rem;
         margin-bottom: 20px;
     }

     .our-programs-overlay-content h3 {
         font-size: 1.3rem;
         margin-top: 20px;
         margin-bottom: 10px;
     }

     .our-programs-overlay-content ul li {
         padding-left: 20px;
     }

     .our-programs-overlay-content ul li a {
         font-size: 1rem;
     }
 }

 @media (max-width: 480px) {
     .our-programs-overlay-content {
         padding: 20px;
     }

     .close-programs-btn {
         font-size: 1.5rem;
     }

     .our-programs-overlay-content .widget-title {
         font-size: 1.8rem;
         margin-bottom: 15px;
     }

     .our-programs-overlay-content h3 {
         font-size: 1.2rem;
         margin-top: 15px;
         margin-bottom: 8px;
     }

     .our-programs-overlay-content ul li {
         padding-left: 18px;
     }

     .our-programs-overlay-content ul li a {
         font-size: 0.95rem;
     }
 }

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 h2 {
     /* font-size: 2.5rem; */
     text-align: center;
     margin-bottom: 3rem;
     position: relative;
     padding-bottom: 10px;
 }

 h2::after {
     content: '';
     position: absolute;
     left: 50%;
     bottom: 0;
     transform: translateX(-50%);
     width: 80px;
     height: 3px;
     background-color: var(--primary-color);
     border-radius: 5px;
 }

 .container {
     max-width: 1500px;
     margin: 0 auto;
     padding: 0 20px;
 }

 /* Header */
 .main-header {
     background-color: rgba(255, 255, 255, 0.95);
     padding: 0 0;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
     position: sticky;
     top: 0;
     z-index: 1000;
     height: var(--header-height);
     display: flex;
     align-items: center;
 }

 .main-nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
 }

 .logo-container {
     align-items: center;
     /* gap: 10px; */
 }

 .logo {
     font-family: serif;
     font-size: 2.2rem;
     font-weight: 700;
     color: var(--dark-color);
     display: flex;
     align-items: center;
     /* gap: 10px; */
 }

 .logo img {
     min-height: 50px;
     max-height: 70px;
     width: auto;
     display: block;
     margin-right: 10px;
 }

 .logo span {
     color: var(--primary-color);
 }

 .nav-list {
     display: flex;
     gap: 20px;
 }

 .nav-list a {
     color: var(--dark-color);
     font-weight: 600;
     padding: 5px 0;
     position: relative;
 }

 .nav-list a::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: 0;
     width: 0;
     height: 2px;
     background-color: var(--primary-color);
     transition: width 0.3s ease;
 }

 .nav-list a:hover::after,
 .nav-list a.active::after {
     width: 100%;
 }

 /* Hamburger Menu Styles */
 .menu-toggle {
     display: none;
     flex-direction: column;
     justify-content: space-between;
     width: 30px;
     height: 20px;
     cursor: pointer;
     z-index: 1100;
 }

 .menu-toggle span {
     display: block;
     width: 100%;
     height: 2px;
     background-color: var(--dark-color);
     transition: all 0.3s ease-in-out;
 }

 .menu-toggle.active span:nth-child(1) {
     transform: translateY(9px) rotate(45deg);
 }

 .menu-toggle.active span:nth-child(2) {
     opacity: 0;
 }

 .menu-toggle.active span:nth-child(3) {
     transform: translateY(-9px) rotate(-45deg);
 }

 /* Hero Section */
 /* Hero Section */
 .hero {
     position: relative;
     color: white;
     height: calc(100vh - var(--header-height));
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 20px;
     margin-top: -var(--header-height);
     overflow: hidden;
 }

 .hero-carousel {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
 }

 .hero-slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-size: cover;
     background-position: center;
     opacity: 0;
     transition: opacity 1.5s ease-in-out;
 }

 .hero-slide.active {
     opacity: 1;
 }

 /* Dark overlay on top of images but behind text */
 .hero-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     z-index: 2;
 }

 .hero-content {
     position: relative;
     z-index: 3;
     max-width: 800px;
     transform: translateY(calc(var(--header-height) / 2));
 }

 .hero h1 {
     font-size: 4.5rem;
     margin-bottom: 1rem;
     color: white;
     line-height: 1.1;
 }

 .hero p {
     font-size: 1.4rem;
     margin-bottom: 2.5rem;
     font-weight: 400;
     opacity: 0.9;
 }

 /* Section Styling */
 section {
     padding: 80px 0;
     overflow: hidden;
 }

 section:nth-of-type(odd) {
     background-color: var(--light-color);
 }

 section:nth-of-type(even) {
     background-color: #fff;
 }

 /* About Us */
 .about-us-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px;
     align-items: center;
 }

 .about-us-content p {
     margin-bottom: 1rem;
     color: var(--text-color);
     font-size: 1.1rem;
 }

 .about-us-image {
     min-width: 100%;
     border-radius: 10px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 /* Why Choose Us */
 .why-choose-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 30px;
 }

 .choose-card {
     background-color: white;
     padding: 30px;
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
     text-align: center;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .choose-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
 }

 .choose-card i {
     font-size: 3rem;
     color: var(--primary-color);
     margin-bottom: 15px;
 }

 .choose-card h3 {
     font-family: 'Montserrat', sans-serif;
     font-size: 1.4rem;
     margin-bottom: 10px;
     color: var(--dark-color);
 }

 .choose-card p {
     font-size: 0.95rem;
     color: var(--text-color);
 }

 /* Popular Tours */
 .tours-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 30px;
 }

 .tour-card {
     background-color: white;
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
     overflow: hidden;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .tour-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
 }

 .tour-card-image {
     width: 100%;
     height: 200px;
     background-color: var(--light-color);
     background-size: cover;
     background-position: center;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--dark-color);
     font-weight: 600;
     font-size: 1.2rem;
 }

 .tour-card-content {
     padding: 20px;
 }

 .tour-card-content h3 {
     font-family: 'Montserrat', sans-serif;
     font-size: 1.5rem;
     margin-bottom: 10px;
     color: var(--dark-color);
 }

 .tour-card-content p {
     font-size: 0.9rem;
     color: var(--text-color);
     margin-bottom: 15px;
 }

 /* Gallery */
 .gallery-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
     gap: 10px;
     justify-content: center;
 }

 .gallery-item {
     background-color: var(--light-color);
     height: 250px;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
     background-size: cover;
     background-position: center;
     transition: all 0.3s ease;
     max-width: 400px;
     width: 100%;
     position: relative;
     display: flex;
     align-items: flex-end;
 }

 .gallery-item-overlay {
     position: absolute;
     width: 100%;
     background: rgba(0, 0, 0, 0.4);
     padding: 12px 15px;
     color: white;
     font-weight: 600;
     font-size: 0.95rem;
     text-align: center;
     backdrop-filter: blur(4px);
     transition: background 0.3s ease;
 }

 .gallery-item:hover .gallery-item-overlay {
     background: rgba(0, 0, 0, 0.8);
 }

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

 /* Contact & Inquiry */
 .contact-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 40px;
     padding-top: 20px;
 }

 .contact-info,
 .inquiry-form {
     background-color: white;
     padding: 30px;
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
 }

 .contact-info h3,
 .inquiry-form h3 {
     font-size: 1.8rem;
     margin-bottom: 20px;
     color: var(--dark-color);
 }

 .contact-info p {
     color: #000;
     margin-bottom: 10px;
     font-size: 1.1rem;
     display: flex;
     align-items: baseline;
 }

 .contact-info p i {
     margin-right: 10px;
     color: var(--primary-color);
     font-size: 1.3rem;
 }

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

 .social-links a {
     font-size: 1.8rem;
     color: var(--dark-color);
     transition: color 0.3s ease;
 }

 .social-links a:hover {
     color: var(--primary-color);
 }

 .inquiry-form form {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .inquiry-form input,
 .inquiry-form textarea {
     width: 100%;
     padding: 12px 15px;
     border: 1px solid #ddd;
     border-radius: 5px;
     font-family: 'Montserrat', sans-serif;
     font-size: 1rem;
 }

 .inquiry-form textarea {
     resize: vertical;
     min-height: 120px;
 }

 .inquiry-form input:focus,
 .inquiry-form textarea:focus {
     outline: none;
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(255, 127, 80, 0.2);
 }

 /* --- Tour Details Page Styles --- */
 .tour-page-header {
     height: 400px;
     background-size: cover;
     background-position: center;
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     margin-top: -var(--header-height);
     padding-top: var(--header-height);
 }

 .tour-page-header h1 {
     font-size: 3.5rem;
     margin-bottom: 10px;
     color: white;
 }

 .tour-subtitle {
     font-size: 1.5rem;
     font-weight: 500;
 }

 .tour-content-wrapper {
     display: flex;
     flex-direction: column;
     padding: 60px 20px;
     align-items: stretch;
 }

 .tour-main-column {
     background-color: white;
     border-radius: 8px;
     padding: 30px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     width: 100%;
 }

 /* Summary Section */
 .tour-summary-section {
     display: grid;
     grid-template-columns: 2fr 1fr;
     grid-template-areas:
         "overview price"
         "video highlights";
     gap: 30px;
     margin-bottom: 30px;
 }

 .tour-overview {
     grid-area: overview;
     font-size: 1.1rem;
     color: var(--text-color);
 }

 .tour-overview p {
     padding-bottom: 30px;
 }

 .price-card {
     grid-area: price;
 }

 .quick-info {
     grid-area: highlights;
 }

 .video-container {
     grid-area: video;
     position: relative;
     padding-bottom: 56.25%;
     /* 16:9 Aspect Ratio */
     height: 0;
     overflow: hidden;
     border-radius: 12px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 .video-container iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: none;
 }

 /* Tabs */
 .tour-tabs-nav {
     display: flex;
     flex-wrap: wrap;
     border-bottom: 2px solid #eee;
     margin-bottom: 20px;
     gap: 10px;
 }

 .tab-btn {
     background: none;
     border: none;
     padding: 10px 20px;
     font-family: 'Montserrat', sans-serif;
     font-weight: 600;
     font-size: 1rem;
     cursor: pointer;
     color: var(--text-color);
     transition: all 0.3s ease;
     border-bottom: 3px solid transparent;
 }

 .tab-btn:hover {
     color: var(--primary-color);
 }

 .tab-btn.active {
     color: var(--primary-color);
     border-bottom: 3px solid var(--primary-color);
 }

 .tab-content {
     display: none;
     padding: 10px 0;
     animation: fadeIn 0.5s;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 .tab-content h3 {
     font-size: 1.5rem;
     margin-bottom: 20px;
     color: var(--dark-color);
     border-left: 4px solid var(--primary-color);
     padding-left: 15px;
 }

 /* Dates Table */
 .dates-table {
     width: 100%;
     border-collapse: collapse;
     margin-bottom: 20px;
 }

 .dates-table th,
 .dates-table td {
     padding: 12px 15px;
     text-align: left;
     border-bottom: 1px solid #eee;
     color: #333 !important;
     /* Force text color */
 }

 .dates-table th {
     background-color: #f9f9f9;
     font-weight: 600;
 }

 .status-badge {
     padding: 5px 10px;
     border-radius: 20px;
     font-size: 0.8rem;
     font-weight: 600;
     color: white;
 }

 .status-badge.open {
     background-color: var(--primary-color);
 }

 .status-badge.filling-fast {
     background-color: #f39c12;
 }

 .status-badge.waitlist {
     background-color: #e74c3c;
 }

 /* Timeline */
 .timeline-item {
     display: flex;
     gap: 20px;
     margin-bottom: 20px;
 }

 .timeline-marker {
     flex: none;
     width: 40px;
     height: 40px;
     background-color: var(--primary-color);
     color: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
 }

 .timeline-content h4 {
     margin-bottom: 5px;
     margin-top: 5px;
 }

 .timeline-content p {
     white-space: pre-line;
 }

 /* Sidebar */
 .sidebar-card {
     background-color: white;
     padding: 25px;
     border-radius: 8px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
     margin-bottom: 30px;
 }

 .price-card {
     text-align: center;
 }

 .price-card .price {
     font-size: 2rem;
     font-weight: 700;
     color: var(--primary-color);
     margin: 10px 0;
 }

 .btn.full-width {
     width: 100%;
     display: block;
     margin-top: 15px;
     text-align: center;
 }

 .quick-info ul li {
     margin-bottom: 10px;
     color: var(--text-color);
 }

 .quick-info ul li i {
     color: var(--accent-color);
     margin-right: 10px;
 }

 /* Fix Text Visibility in Tour Tabs */
 .tour-main-column,
 .tour-main-column p,
 .tour-main-column li,
 .tour-main-column h3,
 .tour-main-column h4,
 .tour-main-column h5,
 .tab-content {
     color: #333 !important;
 }

 /* --- Consolidated Responsive Styles --- */
 /* Base Responsive Elements */
 img,
 iframe,
 video {
     max-width: 100%;
 }

 @media (max-width: 1025px) {
     .nav-list {
         gap: 15px;
     }

     .hero h1 {
         font-size: 3.5rem;
     }

     .hero p {
         font-size: 1.2rem;
     }

     .about-us-grid {
         grid-template-columns: 1fr;
     }

     .about-us-image {
         order: -1;
     }

     .tour-content-wrapper {
         grid-template-columns: 1fr;
     }

     .tour-sidebar {
         margin-top: 30px;
         order: 2;
     }
 }

 @media (max-width: 992px) {

     .main-nav {
         flex-wrap: nowrap;
         justify-content: space-between;
         align-items: center;
     }

     .logo {
         font-size: 1.5rem;
         margin-bottom: 0;
     }

     .logo img {
         min-height: 35px;
         max-height: 45px;
     }

     .menu-toggle {
         display: flex;
     }

     nav {
         position: fixed;
         top: 0;
         right: -100%;
         width: 70%;
         height: 100vh;
         background-color: var(--bg-light);
         box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
         transition: right 0.3s ease-in-out;
         padding-top: var(--header-height);
         z-index: 999;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: flex-start;
         overflow-y: auto;
     }

     nav.active {
         right: 0;
     }

     .nav-list {
         flex-direction: column;
         width: 100%;
         gap: 20px;
         padding: 20px 0;
         align-items: center;
     }

     .nav-list a {
         padding: 10px 0;
         width: fit-content;
         font-size: 1.1rem;
     }

     /* Hero */
     .hero {
         height: 70vh;
     }

     .hero h1 {
         font-size: 2.8rem;
     }

     .hero p {
         font-size: 1rem;
     }

     h2 {
         font-size: 2rem;
     }

     .choose-card,
     .contact-info,
     .inquiry-form {
         padding: 20px;
     }

     .contact-map-container {
         margin-bottom: 20px;
         border: 1px solid #eee;
     }

     .contact-grid {
         grid-template-columns: 1fr;
     }

     /* Tour Details Specifics */
     .tour-page-header {
         height: 300px;
     }

     .tour-page-header h1 {
         font-size: 2.2rem;
     }

     .tour-subtitle {
         font-size: 1.2rem;
     }

     .tour-content-wrapper {
         padding: 20px 15px;
     }

     .tour-main-column {
         padding: 15px;
     }

     /* Summary Section Responsive */
     .tour-summary-section {
         grid-template-columns: 1fr 1fr;
         grid-template-areas:
             "overview overview"
             "price highlights"
             "video video";
         gap: 20px;
     }

     .tour-quick-info {
         display: contents;
     }

     .sidebar-card {
         padding: 15px;
     }

     .price-card .price {
         font-size: 1.5rem;
     }

     .video-container {
         margin-top: 10px;
     }

     /* Scrollable Tabs */
     .tour-tabs-nav {
         overflow-x: auto;
         white-space: nowrap;
         /* flex-wrap: nowrap; */
         padding-bottom: 5px;
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none;
     }

     .tour-tabs-nav::-webkit-scrollbar {
         display: none;
     }

     .tab-btn {
         flex: 0 0 auto;
         padding: 10px 15px;
         font-size: 0.9rem;
     }

     /* Scrollable Tables */
     .dates-table {
         display: block;
         width: 100%;
         overflow-x: auto;
         white-space: nowrap;
         -webkit-overflow-scrolling: touch;
     }

     .gallery-grid {
         grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     }

     .gallery-item {
         height: 160px !important;
         max-width: 100%;
     }
 }

 @media (max-width: 480px) {
     .hero h1 {
         font-size: 2.2rem;
     }

     .hero p {
         font-size: 0.9rem;
     }

     h2 {
         font-size: 1.8rem;
     }

     .btn {
         padding: 10px 20px;
         font-size: 0.8rem;
     }

     .container {
         padding: 0 15px;
     }

     nav {
         width: 90%;
     }
 }

 /* All Programs Section */
 .all-programs-section {
     background-color: var(--light-color);
     padding: 80px 0;
 }

 /* Affiliate Partners Section */
 .partners-section {
     padding: 80px 0;
     background-color: #fff;
 }

 .partners-section h2 {
     text-align: center;
     margin-bottom: 50px;
 }

 .partners-grid {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     gap: 40px 60px;
 }

 .partner-logo {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 15px;
     max-width: 150px;
     transition: transform 0.3s ease;
 }

 .partner-logo:hover {
     transform: scale(1.05);
 }

 .partner-logo img {
     max-height: 80px;
     width: auto;
     object-fit: contain;
 }

 .partner-name {
     font-size: 0.95rem;
     color: #444;
     font-weight: 600;
     text-align: center;
 }

 @media (max-width: 768px) {
     .partners-section {
         padding: 60px 0;
     }

     .partners-grid {
         gap: 30px;
     }

     .partner-logo img {
         max-height: 60px;
     }
 }

 .programs-type-grid {
     column-count: 3;
     column-gap: 30px;
 }

 .program-type-card {
     background-color: white;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     margin-bottom: 30px;
     break-inside: avoid;
     border: 1px solid #eee;
     transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
 }

 .program-type-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
 }

 .program-type-header {
     background-color: var(--primary-color);
     /* background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); */
     padding: 18px 25px;
     text-align: center;
     font-weight: bold;
 }

 .program-type-header h3 {
     text-transform: uppercase;
     font-size: 1.15rem;
     color: white;
     margin: 0;
     font-weight: 700;
     letter-spacing: 1.5px;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }

 .program-list {
     padding: 10px 0;
 }

 .program-link {
     display: block;
     padding: 15px 25px;
     color: var(--dark-color);
     text-decoration: none;
     border-bottom: 1px solid #f0f0f0;
     transition: all 0.2s ease;
     font-weight: 600;
     font-size: 1rem;
     position: relative;
     padding-left: 25px;
 }

 .program-link:last-child {
     border-bottom: none;
 }

 .program-link::before {
     content: '\f105';
     /* FontAwesome chevron right */
     font-family: 'Font Awesome 5 Free';
     font-weight: 900;
     position: absolute;
     left: 25px;
     color: #ccc;
     transition: color 0.2s;
     opacity: 0;
     /* Hidden by default for clean look, or visible if preferred. Let's make it appear on hover or be subtle */
     left: 10px;
 }

 .program-link {
     padding-left: 20px;
     /* Reset padding */
 }

 .program-link:hover {
     background-color: #fff5f2;
     /* Very light tint of primary color */
     color: var(--primary-color);
     padding-left: 30px;
     /* Slight movement effect */
 }

 .program-link:hover::before {
     opacity: 1;
     color: var(--primary-color);
 }

 @media (max-width: 1100px) {
     .programs-type-grid {
         column-count: 2;
     }
 }

 @media (max-width: 768px) {
     .programs-type-grid {
         column-count: 1;
     }
 }

 .tours-page {
     background-color: var(--bg-light);
 }

 /* Header Section */
 .tours-header-section {
     padding: 60px 0 20px;
     text-align: center;
 }

 .page-title h1 {
     font-size: 3rem;
     color: var(--dark-color);
     margin-bottom: 10px;
 }

 .page-title p {
     font-size: 1.2rem;
     color: var(--text-color);
     margin-bottom: 20px;
 }

 .header-line {
     width: 80px;
     height: 4px;
     background: var(--primary-color);
     margin: 0 auto;
     border-radius: 2px;
 }

 /* Group Layout */
 .tour-type-group {
     padding: 20px 0;
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }

 .tour-type-group:last-child {
     border-bottom: none;
 }

 .group-header {
     margin-bottom: 40px;
     text-align: left;
 }

 .group-header h2 {
     font-size: 2.2rem;
     color: var(--primary-color);
     margin-bottom: 10px;
     text-align: left;
     padding-bottom: 0;
 }

 .group-header h2::after {
     display: none;
 }

 .group-header p {
     font-size: 1.1rem;
     color: var(--text-color);
 }

 /* Badge on Card */
 .tour-badge {
     position: absolute;
     top: 15px;
     right: 15px;
     background: var(--primary-color);
     color: white;
     padding: 4px 12px;
     border-radius: 4px;
     font-size: 0.8rem;
     font-weight: 700;
     text-transform: uppercase;
 }

 .tour-meta {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 15px;
     padding-top: 15px;
     border-top: 1px solid rgba(0, 0, 0, 0.05);
     font-size: 0.9rem;
     color: var(--text-color);
 }

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

 .btn-text {
     color: var(--primary-color);
     font-weight: 700;
 }

 /* Responsive Grid Adjustments */
 @media (max-width: 768px) {
     .page-title h1 {
         font-size: 2.5rem;
     }

     .group-header h2 {
         font-size: 1.8rem;
     }
 }

 /* Offer Chip System */
 .offer-chip-container {
     position: fixed;
     top: 85px;
     /* Below main header */
     right: 0;
     z-index: 990;
     /* display: flex; */
     align-items: flex-start;
     pointer-events: none;
     transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .offer-chip-trigger {
     background: var(--primary-color, #268c5d);
     color: white;
     padding: 12px 20px;
     border-radius: 30px 0 0 30px;
     cursor: pointer;
     font-weight: 700;
     pointer-events: auto;
     box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.15);
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 0.95rem;
     transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
     white-space: nowrap;
     position: relative;
     overflow: hidden;
 }

 .offer-chip-trigger.expanded {
     border-radius: 30px 0 0 0;
 }

 /* Shine/Shimmer Effect */
 .offer-chip-trigger::after {
     content: '';
     position: absolute;
     top: -50%;
     left: -150%;
     width: 200%;
     height: 200%;
     background: linear-gradient(to right,
             rgba(255, 255, 255, 0) 0%,
             rgba(255, 255, 255, 0.3) 50%,
             rgba(255, 255, 255, 0) 100%);
     transform: rotate(30deg);
     animation: shimmer 4s infinite ease-in-out;
 }

 @keyframes shimmer {
     0% {
         left: -150%;
     }

     30% {
         left: 150%;
     }

     100% {
         left: 150%;
     }
 }

 .offer-chip-trigger:hover {
     padding-right: 35px;
     background: var(--secondary-color, #315b7d);
 }

 .offer-chip-trigger i {
     transition: transform 0.4s ease;
 }

 .offer-content-box {
     background: white;
     width: 250px;
     max-width: calc(100vw - 40px);
     border-left: 5px solid var(--primary-color);
     box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.1);
     pointer-events: auto;
     transform: translateX(100%);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     flex-direction: column;
     border-radius: 0 0 0 15px;
 }

 .offer-chip-container.expanded {
     transform: translateX(0);
 }

 .offer-chip-container.expanded .offer-content-box {
     transform: translateX(0);
 }

 .offer-chip-container.expanded .offer-chip-trigger {
     background: var(--secondary-color, #315b7d);
 }

 .offer-chip-container.expanded .offer-chip-trigger i {
     transform: rotate(180deg);
 }

 .offer-box-header {
     padding: 20px;
     border-bottom: 1px solid #eee;
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: #fafafa;
 }

 .offer-box-header h3 {
     margin: 0;
     font-size: 1.1rem;
     color: var(--secondary-color);
     font-family: 'Montserrat', sans-serif;
     font-weight: 700;
 }

 #closeOffersBtn {
     background: none;
     border: none;
     color: #999;
     cursor: pointer;
     font-size: 1.1rem;
     transition: color 0.2s;
 }

 #closeOffersBtn:hover {
     color: var(--primary-color);
 }

 .offer-items-list {
     max-height: 400px;
     overflow-y: auto;
     padding: 15px;
 }

 .offer-card {
     background: #fff;
     padding: 15px;
     border: 1px solid #efefef;
     border-radius: 10px;
     margin-bottom: 15px;
     transition: border-color 0.3s;
 }

 .offer-card:hover {
     border-color: var(--primary-color);
 }

 .offer-card h4 {
     margin: 0 0 8px 0;
     font-size: 1rem;
     color: var(--dark-color);
 }

 .offer-card p {
     font-size: 0.85rem;
     color: #666;
     margin-bottom: 12px;
     line-height: 1.4;
 }

 .offer-card a {
     font-size: 0.85rem;
     font-weight: 700;
     color: var(--primary-color);
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 5px;
 }

 .offer-card a:hover {
     gap: 10px;
 }

 @media (max-width: 576px) {

     .offer-content-box {
         width: 150px;
     }

     .offer-chip-container.expanded .offer-content-box {
         width: 200px;
         /* transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); */
     }
 }

 /* --- Tour FAQ Section Styles --- */
 .faq-list {
     margin-top: 20px;
 }

 .faq-item {
     margin-bottom: 30px;
     padding-bottom: 20px;
     border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
 }

 .faq-item:last-child {
     border-bottom: none;
 }

 .faq-question {
     font-weight: 700;
     font-size: 1.15rem;
     color: var(--secondary-color);
     margin-bottom: 12px;
     display: flex;
     align-items: flex-start;
     gap: 12px;
     line-height: 1.4;
 }

 .faq-question i {
     color: var(--primary-color);
     font-size: 1.25rem;
     /* Slightly bigger icons */
     margin-top: 3px;
 }

 .faq-answer {
     color: var(--text-color);
     padding-left: 32px;
     /* Adjusted for larger icon */
     line-height: 1.6;
     font-size: 1rem;
     white-space: pre-line;
 }

 /* --- Gallery Page Styles --- */

 .gallery-page {
     background-color: #fff;
 }

 /* Section Header */
 .section-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
 }

 .section-header h2 {
     font-size: 2.3rem;
     color: var(--dark-color);
     margin-bottom: 0;
     padding-bottom: 0;
     text-align: left;
 }

 .section-header h2::after {
     display: none;
 }

 /* Main Content Area */
 .gallery-content {
     background-color: var(--bg-light);
     padding: 40px 0;
 }

 /* Tour Selector Grid (Main View) */
 .tour-selector-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 30px;
 }

 .tour-gallery-card {
     background: white;
     border-radius: 15px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     display: block;
 }

 .tour-gallery-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
 }

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

 .card-image {
     width: 100%;
     height: 100%;
     background-size: cover;
     background-position: center;
     transition: transform 0.5s ease;
 }

 .tour-gallery-card:hover .card-image {
     transform: scale(1.1);
 }

 /* .image-count {
     position: absolute;
     top: 15px;
     right: 15px;
     background: rgba(0, 0, 0, 0.7);
     color: white;
     padding: 5px 12px;
     border-radius: 20px;
     font-size: 0.85rem;
     font-weight: 600;
     backdrop-filter: blur(4px);
 } */

 .card-details {
     padding: 20px;
     text-align: left;
 }

 .card-details h3 {
     font-size: 1.3rem;
     margin-bottom: 10px;
     color: var(--dark-color);
 }

 .view-label {
     color: var(--primary-color);
     font-weight: 700;
     font-size: 0.9rem;
     text-transform: uppercase;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 /* Photo Grid (Specific Tour View) */
 .photo-grid {
     column-count: 3;
     column-gap: 20px;
 }

 .photo-item {
     margin-bottom: 20px;
     break-inside: avoid;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
 }

 .photo-item img {
     width: 100%;
     display: block;
     transition: transform 0.4s ease;
     min-height: 200px;
     /* Force height for lazy loading */
     background-color: #f0f0f0;
     /* Placeholder */
 }

 .photo-item:hover img {
     transform: scale(1.05);
 }

 .no-images {
     text-align: center;
     padding: 100px 0;
 }

 .no-images p {
     font-size: 1.2rem;
     margin-bottom: 20px;
     color: var(--text-color);
 }

 /* --- Media Queries --- */
 @media (max-width: 992px) {
     .photo-grid {
         column-count: 2;
     }

     .gallery-hero h1 {
         font-size: 2.5rem;
     }
 }

 @media (max-width: 600px) {
     .photo-grid {
         column-count: 1;
     }

     .gallery-hero h1 {
         font-size: 2rem;
     }
 }

 /* home page inquiry form notification */
 .notification {
     padding: 15px;
     border-radius: 8px;
     margin-bottom: 20px;
     display: none;
 }

 .notification.success {
     background: #d4edda;
     color: #155724;
     border: 1px solid #c3e6cb;
 }

 .notification.error {
     background: #f8d7da;
     color: #721c24;
     border: 1px solid #f5c6cb;
 }

 /* register page  */
 .register-page {
     padding: 40px 0;
     background: var(--bg-light);
     min-height: 100vh;
 }

 .register-container {
     max-width: 900px;
     margin: 0 auto;
     padding: 0 20px;
 }

 .register-header {
     text-align: center;
     margin-bottom: 30px;
 }

 .register-header h1 {
     color: var(--primary-color);
     margin-bottom: 10px;
 }

 .register-header p {
     color: var(--text-color);
 }

 .register-form {
     background: white;
     padding: 40px;
     border-radius: 12px;
     box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
 }

 .form-row {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
     margin-bottom: 20px;
 }

 .form-row.full {
     grid-template-columns: 1fr;
 }

 .form-group {
     margin-bottom: 0;
 }

 .form-group label {
     display: block;
     margin-bottom: 8px;
     font-weight: 600;
     color: var(--dark-color);
 }

 .form-group label .required {
     color: #dc3545;
 }

 .form-group input,
 .form-group select,
 .form-group textarea {
     width: 100%;
     padding: 12px 15px;
     border: 1px solid #ddd;
     border-radius: 8px;
     font-size: 1rem;
     transition: border-color 0.3s, box-shadow 0.3s;
 }

 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     outline: none;
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(38, 140, 93, 0.1);
 }

 .form-group input.error,
 .form-group select.error {
     border-color: #dc3545;
 }

 .form-group .error-message {
     color: #dc3545;
     font-size: 0.85rem;
     margin-top: 5px;
     display: none;
 }

 .radio-group {
     display: flex;
     gap: 20px;
     padding: 10px 0;
 }

 .radio-group label {
     display: flex;
     align-items: center;
     gap: 8px;
     font-weight: normal;
     cursor: pointer;
 }

 .radio-group input[type="radio"] {
     width: auto;
 }

 .checkbox-group {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     padding: 15px;
     background: #f8f9fa;
     border-radius: 8px;
     margin-top: 20px;
 }

 .checkbox-group input[type="checkbox"] {
     width: auto;
     margin-top: 3px;
 }

 .checkbox-group label {
     font-weight: normal;
     margin-bottom: 0;
 }

 .checkbox-group a {
     color: var(--primary-color);
     text-decoration: underline;
 }

 .note-box {
     background: #fff3cd;
     border: 1px solid var(--primary-color);
     color: var(--text-color);
     border-radius: 8px;
     padding: 15px;
     margin: 20px 0;
 }

 .note-box strong {
     color: #856404;
 }

 .submit-btn {
     display: block;
     width: 100%;
     padding: 15px;
     background: var(--primary-color);
     color: white;
     border: none;
     border-radius: 8px;
     font-size: 1.1rem;
     font-weight: 600;
     cursor: pointer;
     transition: background 0.3s, transform 0.2s;
     margin-top: 20px;
 }

 .submit-btn:hover {
     background: var(--secondary-color);
     transform: translateY(-2px);
 }

 .submit-btn:disabled {
     background: #ccc;
     cursor: not-allowed;
     transform: none;
 }

 .notification {
     padding: 15px;
     border-radius: 8px;
     margin-bottom: 20px;
     display: none;
 }

 .notification.success {
     background: #d4edda;
     color: #155724;
     border: 1px solid #c3e6cb;
 }

 .notification.error {
     background: #f8d7da;
     color: #721c24;
     border: 1px solid #f5c6cb;
 }

 @media (max-width: 768px) {
     .form-row {
         grid-template-columns: 1fr;
     }

     .register-form {
         padding: 25px;
     }

     .radio-group {
         flex-direction: column;
         gap: 10px;
     }
 }

 /* services */
 /* --- COMPONENT SCOPE --- */
 .service-section-wrapper {
     width: 100%;
     background-color: var(--light-color);
     font-family: inherit;
 }

 /* --- HERO & ACTION BAR --- */
 .svc-hero {
     background-color: var(--bg-dark);
     color: var(--bg-light);
     padding: 6rem 1.5rem 8rem 1.5rem;
     text-align: center;
     position: relative;
     background-image: linear-gradient(135deg, var(--bg-dark) 0%, var(--secondary-color) 150%);
     margin-top: -var(--header-height);
 }

 .svc-hero h1 {
     margin: 0 0 1rem 0;
     font-size: 3.5rem;
     color: var(--bg-light);
     padding-top: var(--header-height);
 }

 .svc-hero p {
     color: #cbd5e1;
     max-width: 650px;
     margin: 0 auto 3rem auto;
     font-size: 1.25rem;
     line-height: 1.6;
 }

 /* THE CONTACT CTA (High Visibility) */
 .inquiry-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background-color: transparent;
     border: 2px solid var(--accent-color);
     color: var(--accent-color);
     padding: 1rem 2.5rem;
     border-radius: 50px;
     text-decoration: none;
     font-weight: 700;
     font-size: 1.2rem;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .inquiry-btn i {
     margin-right: 12px;
 }

 /* Hover State: Fill with Gold */
 .inquiry-btn:hover {
     background-color: var(--accent-color);
     color: var(--bg-dark);
     box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
     transform: translateY(-3px);
 }

 /* --- CARDS GRID --- */
 .svc-grid {
     max-width: 1200px;
     margin: -5rem auto 0 auto;
     padding: 0 1.5rem 6rem 1.5rem;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 2.5rem;
     position: relative;
     z-index: 10;
 }

 .svc-card {
     background-color: white;
     border-radius: 15px;
     padding: 3rem 2rem;
     box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.1);
     text-align: center;
     transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s ease;
     border-top: 5px solid transparent;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .svc-card:hover {
     transform: translateY(-15px);
     box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.15);
 }

 /* Icon Styling */
 .card-icon {
     font-size: 3rem;
     margin-bottom: 2rem;
     width: 100px;
     height: 100px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: #f8f9fa;
     transition: background-color 0.3s ease;
 }

 .svc-card:hover .card-icon {
     background-color: white;
 }

 .svc-card h3 {
     color: var(--dark-color);
     margin-bottom: 1.2rem;
     font-size: 1.8rem;
     font-family: 'Montserrat', sans-serif;
     font-weight: 700;
 }

 .svc-card p {
     color: var(--text-color);
     font-size: 1rem;
     line-height: 1.7;
     margin-bottom: 2.5rem;
     flex-grow: 1;
 }

 /* --- VARIATIONS --- */

 /* 1. FLIGHT: Secondary Steel Blue */
 .svc-card.flight:hover {
     border-top-color: var(--secondary-color);
 }

 .svc-card.flight .card-icon {
     color: var(--secondary-color);
 }

 .svc-card.flight .svc-link {
     color: var(--secondary-color);
 }

 /* 2. TRAIN: Primary Green */
 .svc-card.train:hover {
     border-top-color: var(--primary-color);
 }

 .svc-card.train .card-icon {
     color: var(--primary-color);
 }

 .svc-card.train .svc-link {
     color: var(--primary-color);
 }

 /* 3. CRUISE: Accent Gold */
 .svc-card.cruise:hover {
     border-top-color: var(--accent-color);
 }

 .svc-card.cruise .card-icon {
     color: var(--accent-color);
 }

 .svc-card.cruise .svc-link {
     color: var(--accent-color);
 }

 /* 4. VISA: Royal Blue (using secondary or distinct) */
 .svc-card.visa:hover {
     border-top-color: #1e40af;
     /* Deep Royal Blue */
 }

 .svc-card.visa .card-icon {
     color: #1e40af;
 }

 .svc-card.visa .svc-link {
     color: #1e40af;
 }

 /* Card Link Buttons */
 .svc-link {
     font-weight: 700;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     transition: gap 0.2s ease, opacity 0.2s ease;
     font-size: 1.1rem;
 }

 .svc-link:hover {
     gap: 12px;
     opacity: 0.8;
 }

 /* --- RESPONSIVE ADJUSTMENTS --- */
 @media (max-width: 768px) {
     .svc-hero {
         padding-top: 4rem;
         padding-bottom: 6rem;
     }

     .svc-hero h1 {
         font-size: 2.5rem;
     }

     .svc-grid {
         margin-top: -4rem;
         grid-template-columns: 1fr;
     }

     .inquiry-btn {
         width: 100%;
         padding: 0.8rem 1.5rem;
     }
 }

 /* ==============================================
    GLOBAL MOBILE RESPONSIVE OVERRIDES
    ============================================== */

 /* --- Tablet (768px) --- */
 @media (max-width: 768px) {

     /* Page Titles */
     .page-title h1 {
         font-size: 2rem;
     }

     .page-title p {
         font-size: 1rem;
     }

     /* Section Headers */
     .section-header h2 {
         font-size: 1.8rem;
     }

     /* Tour Group Headers */
     .group-header h2 {
         font-size: 1.6rem;
     }

     .group-header p {
         font-size: 0.95rem;
     }

     /* Footer */
     .footer-widget .widget-title {
         font-size: 1.4rem;
     }

     /* Services Hero */
     .svc-hero h1 {
         font-size: 2.2rem;
     }

     .svc-hero p {
         font-size: 1rem;
     }

     /* Card icon */
     .card-icon {
         font-size: 2.2rem;
         width: 80px;
         height: 80px;
     }

     /* Tour Detail Page */
     .price-card .price {
         font-size: 1.6rem;
     }

     /* General section padding */
     section {
         padding: 40px 0;
     }
 }

 /* --- Mobile (480px) --- */
 @media (max-width: 480px) {

     /* Logo & Header */
     .logo {
         font-size: 1.6rem;
     }

     .logo img {
         min-height: 34px;
         max-height: 42px;
         margin-right: 6px;
     }

     /* Page Titles */
     .page-title h1 {
         font-size: 1.6rem;
     }

     .page-title p {
         font-size: 0.85rem;
     }

     /* Section Headers */
     .section-header h2 {
         font-size: 1.5rem;
     }

     /* Tour Group Headers */
     .group-header h2 {
         font-size: 1.4rem;
     }

     .group-header p {
         font-size: 0.85rem;
     }

     /* Footer */
     .footer-widget .widget-title {
         font-size: 1.2rem;
     }

     .footer-social a {
         font-size: 1.3rem;
     }

     /* Services Hero */
     .svc-hero h1 {
         font-size: 1.8rem;
     }

     .svc-hero p {
         font-size: 0.9rem;
     }

     /* Card icon */
     .card-icon {
         font-size: 1.8rem;
         width: 65px;
         height: 65px;
     }

     .svc-card {
         padding: 2rem 1.5rem;
     }

     .svc-card h3 {
         font-size: 1.1rem;
     }

     /* Tour Detail Page */
     .price-card .price {
         font-size: 1.4rem;
     }

     /* General section padding */
     section {
         padding: 30px 0;
     }
 }