/* ==========================================================================   KOLO TOURS SRI LANKA A,?? Exact Screenshot Match CSS    ========================================================================== */@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600;700&display=swap');:root {    --kolo-green: #65e3a0;    --kolo-green-dark: #4bcc7e;    --kolo-text-dark: #1a2b22;    --kolo-bg-dark: #162b20;    --kolo-bg-light: #f4f6fb;    --kolo-nav-bg: #15222b;    --kolo-card-mint: #e8f7ef;    --kolo-white: #ffffff;    --ff-heading: 'Playfair Display', serif;    --ff-body: 'Inter', sans-serif;    --radius-md: 16px;    --radius-lg: 24px;    --radius-pill: 50px;    --section-py: 6rem;    --container-max: 1140px;}* {    margin: 0;    padding: 0;    box-sizing: border-box;}html {    scroll-behavior: smooth;    font-size: 16px;    overflow-x: hidden;}body {    font-family: var(--ff-body);    color: #6b7280;    line-height: 1.6;    overflow-x: hidden;    width: 100%;    margin: 0;    padding: 0;    background: var(--kolo-bg-dark); /* Match footer bg to prevent white bar at bottom */    -webkit-overflow-scrolling: touch;    scrollbar-width: none;    -ms-overflow-style: none;}::-webkit-scrollbar {    width: 0;    height: 0;    display: none;}body.no-scroll {    overflow: hidden;}a {    text-decoration: none;}ul {    list-style: none;}img {    max-width: 100%;    display: block;}.container {    width: 100%;    max-width: var(--container-max);    margin: 0 auto;    padding: 0 1.5rem;}.section-padding {    padding: var(--section-py) 0;}.white-bg {    background-color: var(--kolo-white);}.light-lavender-bg {    background-color: var(--kolo-bg-light);}.dark-green-bg {    background-color: var(--kolo-bg-dark);}.text-green {    color: var(--kolo-green) !important;}.mt-4 {    margin-top: 3rem;}.relative {    position: relative;}.overflow-hidden {    overflow: hidden;}/* ==========================================================================   PREMIUM ANIMATION SYSTEM v2   ========================================================================== */:root {    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);    --ease-smooth: cubic-bezier(0.45, 0, 0.15, 1);    --transition-premium: all 0.8s var(--ease-out-expo);    --transition-fast: all 0.5s var(--ease-out-expo);}/* --- KEYFRAME ANIMATIONS --- */@keyframes fadeSlideUp {    from {        opacity: 0;        transform: translateY(60px);    }    to {        opacity: 1;        transform: translateY(0);    }}@keyframes fadeSlideDown {    from {        opacity: 0;        transform: translateY(-40px);    }    to {        opacity: 1;        transform: translateY(0);    }}@keyframes fadeSlideLeft {    from {        opacity: 0;        transform: translateX(80px);    }    to {        opacity: 1;        transform: translateX(0);    }}@keyframes fadeSlideRight {    from {        opacity: 0;        transform: translateX(-80px);    }    to {        opacity: 1;        transform: translateX(0);    }}@keyframes scaleIn {    from {        opacity: 0;        transform: scale(0.85);    }    to {        opacity: 1;        transform: scale(1);    }}@keyframes floatBreath {    0%,    100% {        transform: translateY(0);    }    50% {        transform: translateY(-8px);    }}@keyframes scrollPulse {    0% {        transform: translateX(-50%) translateY(0);        opacity: 1;    }    50% {        transform: translateX(-50%) translateY(10px);        opacity: 0.3;    }    100% {        transform: translateX(-50%) translateY(0);        opacity: 1;    }}@keyframes shimmer {    0% {        background-position: -200% center;    }    100% {        background-position: 200% center;    }}@keyframes glowPulse {    0%,    100% {        box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);    }    50% {        box-shadow: 0 4px 30px rgba(37, 211, 102, 0.7), 0 0 60px rgba(37, 211, 102, 0.2);    }}@keyframes iconBounce {    0%,    100% {        transform: scale(1);    }    50% {        transform: scale(1.15);    }}@keyframes gradientShift {    0% {        background-position: 0% 50%;    }    50% {        background-position: 100% 50%;    }    100% {        background-position: 0% 50%;    }}/* --- REVEAL SYSTEM (Intersection Observer Driven) --- */.reveal,[data-reveal] {    opacity: 0;    will-change: transform, opacity;}.reveal-up,[data-reveal] {    transform: translateY(60px);}.reveal-down {    transform: translateY(-40px);}.reveal-left {    transform: translateX(80px);}.reveal-right {    transform: translateX(-80px);}.reveal-zoom {    transform: scale(0.85);}.reveal-fade {    transform: none;}.reveal.active,[data-reveal].active {    animation: fadeSlideUp 0.6s var(--ease-out-expo) forwards;}.reveal-up.active {    animation: fadeSlideUp 0.6s var(--ease-out-expo) forwards;}.reveal-down.active {    animation: fadeSlideDown 0.5s var(--ease-out-expo) forwards;}.reveal-left.active {    animation: fadeSlideLeft 0.7s var(--ease-out-expo) forwards;}.reveal-right.active {    animation: fadeSlideRight 0.7s var(--ease-out-expo) forwards;}.reveal-zoom.active {    animation: scaleIn 0.6s var(--ease-out-back) forwards;}.reveal-fade.active {    animation: fadeSlideUp 0.5s var(--ease-out-expo) forwards;}/* --- LIQUID REVEAL (Cards A,?? Soft 3D Pop) --- */.liquid-reveal {    opacity: 0;    transform: perspective(800px) rotateX(8deg) translateY(40px) scale(0.96);    transition: opacity 0.5s var(--ease-out-expo),        transform 0.7s var(--ease-out-expo);    will-change: transform, opacity;}.liquid-reveal.active {    opacity: 1;    transform: perspective(800px) rotateX(0deg) translateY(0) scale(1);}/* --- MAGNETIC BUTTONS --- */.magnetic-btn {    display: inline-block;    transition: transform 0.4s var(--ease-out-back);    will-change: transform;}/* --- SPLIT TEXT --- */.split-text {    overflow: hidden;    display: block;}.split-text .word {    display: inline-block;    transform: translateY(120%) rotateX(-15deg);    opacity: 0;    transition: transform 0.4s var(--ease-out-expo),        opacity 0.3s var(--ease-out-expo);    will-change: transform, opacity;}.split-text.active .word {    transform: translateY(0) rotateX(0deg);    opacity: 1;}/* SMOOTH SCROLL OPTIMIZATION */html {    scroll-behavior: smooth;}/* --- STAGGER ITEMS (Elastic Cascade) --- */.stagger-item {    opacity: 0;    transform: translateY(50px) scale(0.95);    transition: opacity 0.4s var(--ease-out-expo),        transform 0.5s var(--ease-out-back);}.stagger-item.active {    opacity: 1;    transform: translateY(0) scale(1);}/* --- BUTTON HOVER: Gradient Shimmer + Lift --- */.btn-primary,.btn-primary-pill,.btn-submit,.btn-nav {    transition: var(--transition-fast);    position: relative;    overflow: hidden;}.btn-primary::after,.btn-primary-pill::after,.btn-submit::after {    content: '';    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%);    background-size: 200% 100%;    border-radius: inherit;    opacity: 0;    transition: opacity 0.4s;    pointer-events: none;}.btn-primary:hover::after,.btn-primary-pill:hover::after,.btn-submit:hover::after {    opacity: 1;    animation: shimmer 1.2s ease-in-out;}.btn-primary:hover,.btn-primary-pill:hover,.btn-submit:hover,.btn-nav:hover {    transform: translateY(-4px);    box-shadow: 0 14px 35px rgba(101, 227, 160, 0.35);    filter: brightness(1.08);}/* --- CARD HOVER: Lift + Soft Shadow Expansion (Desktop Only) --- */.tour-card,.excursion-card,.transport-card,.experience-box {    transition: transform 0.6s var(--ease-out-expo),        box-shadow 0.6s var(--ease-out-expo);}@media (hover: hover) {    .tour-card:hover,    .excursion-card:hover,    .transport-card:hover {        transform: translateY(-12px);        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);    }}.card-img img {    transition: transform 1.4s var(--ease-out-expo);}@media (hover: hover) {    .tour-card:hover .card-img img,    .excursion-card:hover .card-img img,    .transport-card:hover img,    .experience-box:hover img {        transform: scale(1.08);    }}.experience-box .overlay {    transition: background 0.6s var(--ease-smooth);}@media (hover: hover) {    .experience-box:hover .overlay {        background: linear-gradient(to top, rgba(15, 30, 40, 0.95) 0%, transparent 75%);    }}/* --- FEATURE CARD ICON BOUNCE ON HOVER --- */@media (hover: hover) {    .feature-card:hover .icon-box {        animation: iconBounce 0.5s var(--ease-out-back);    }    .feature-card:hover {        transform: translateX(8px);        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);    }}/* --- SOCIAL ICONS POP --- */.contact-social a,.footer-social-bottom a {    transition: transform 0.4s var(--ease-out-back),        background 0.4s var(--ease-out-expo);}.contact-social a:hover,.footer-social-bottom a:hover {    transform: translateY(-4px) scale(1.1);}/* --- SECTION DIVIDERS (Soft Gradient Borders) --- */.section-padding+.section-padding {    position: relative;}/* --- TESTIMONIAL BOX HOVER --- */.testimonial-box {    transition: transform 0.6s var(--ease-out-expo),        box-shadow 0.6s var(--ease-out-expo);}.testimonial-box:hover {    transform: translateY(-6px);    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);}/* --- NAV LINK UNDERLINE ANIMATION --- */.desktop-nav-links a {    position: relative;}/* Underline removed as requested *//* HEADER */#main-header {    position: fixed;    top: 0;    width: 100%;    z-index: 1000;    background: transparent;    padding: 1.2rem 0;    transition: all 0.3s;}#main-header.scrolled {    background: var(--kolo-nav-bg);    padding: 0.8rem 0;    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);}#main-header nav {    display: flex;    align-items: center;    justify-content: space-between;    width: 100%;}.nav-container {    max-width: var(--container-width);    margin: 0 auto;    padding: 0 1.5rem;    width: 100%;    display: flex;    align-items: center;    justify-content: space-between;}.logo-text {    display: none; /* Hide old text logo */}.logo-img {    height: 45px;    width: auto;    display: block;    filter: brightness(0) invert(1); /* Make the black logo white */}.footer-logo img {    height: 55px;    filter: brightness(0) invert(1);}.logo-main {    font-family: var(--ff-body);    font-weight: 700;    font-size: 1.8rem;    letter-spacing: 1px;}.logo-sub {    font-size: 0.9rem;    align-self: flex-end;    margin-top: -4px;    font-weight: 300;}.logo { flex-shrink: 0; margin-right: 2rem; } .desktop-nav-links { display: flex; align-items: center; gap: 1.5rem; flex-grow: 1; justify-content: center; }.desktop-nav-links a { color: #d1d5db; font-size: 0.85rem; font-weight: 500; transition: all 0.3s; white-space: nowrap; }.desktop-nav-links a:not(.btn-nav):hover,.desktop-nav-links a:not(.btn-nav).active {    background: rgba(101, 227, 160, 0.15);    color: var(--kolo-green);    border-radius: 20px;    padding: 0.4rem 1rem;    margin: -0.4rem -1rem;}.btn-nav {    background: var(--kolo-green);    color: var(--kolo-white) !important;    padding: 0.6rem 1.5rem;    border-radius: var(--radius-pill);    font-weight: 600;    display: inline-block;    transition: all 0.3s var(--ease-out-expo);}/* Dropdown Menus */.dropdown {    position: relative;}.dropdown-menu {    position: absolute;    top: calc(100% + 15px);    left: 50%;    transform: translateX(-50%) translateY(15px);    width: 220px;    background: rgba(15, 23, 42, 0.85);    backdrop-filter: blur(25px) saturate(180%);    -webkit-backdrop-filter: blur(25px) saturate(180%);    border: 1px solid rgba(255, 255, 255, 0.1);    border-radius: 18px;    list-style: none;    padding: 0.8rem;    opacity: 0;    visibility: hidden;    transition: all 0.4s var(--ease-out-expo);    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);    z-index: 1001;    pointer-events: none;}/* Invisible bridge to prevent menu from closing when moving mouse to it */.dropdown::after {    content: '';    position: absolute;    top: 100%;    left: 0;    width: 100%;    height: 15px;}.dropdown:hover .dropdown-menu {    opacity: 1;    visibility: visible;    transform: translateX(-50%) translateY(0);    pointer-events: auto;}.dropdown-menu li a {    display: block !important;    padding: 0.7rem 1.2rem !important;    color: rgba(255, 255, 255, 0.85) !important;    font-size: 0.88rem !important;    font-weight: 500 !important;    border-radius: 12px !important;    background: transparent !important;    margin: 0 !important;    transition: all 0.3s ease !important;}.dropdown-menu li a:hover {    background: rgba(101, 227, 160, 0.15) !important;    color: var(--kolo-green) !important;    padding-left: 1.5rem !important;}.nav-arrow {    font-size: 0.75rem;    margin-left: 6px;    transition: transform 0.4s var(--ease-out-expo);    opacity: 0.8;}.dropdown:hover .nav-arrow {    transform: rotate(180deg);    color: var(--kolo-green);}/* Mobile Sidebar Submenus */.mobile-dropdown-toggle {    display: flex !important;    justify-content: space-between !important;    align-items: center !important;}.mobile-submenu {    max-height: 0;    overflow: hidden;    list-style: none;    transition: all 0.4s var(--ease-out-expo);    margin: 0;    padding-left: 1.5rem;}.mobile-submenu.active {    max-height: 500px;    margin-bottom: 1rem;    padding: 0.5rem 0;}.mobile-submenu li a {    padding: 0.8rem 1.5rem !important;    font-size: 0.9rem !important;    opacity: 0.8;    display: block !important;}.mobile-dropdown.active .fa-chevron-down {    transform: rotate(180deg);}.mobile-toggle, .sidebar-overlay, .sidebar-menu { display: none !important; }.desktop-only {    display: block;}/* HERO */#hero {    position: relative;    height: 100vh;    min-height: 600px;    display: flex;    align-items: center;    justify-content: center;    text-align: center;}.hero-bg {    position: absolute;    inset: 0;    z-index: 0;    overflow: hidden;}.hero-video {    width: 100%;    height: 100%;    object-fit: cover;    display: block;}.hero-bg img {    width: 100%;    height: 100%;    object-fit: cover;}.hero-overlay {    position: absolute;    inset: 0;    background: rgba(20, 35, 45, 0.55);    z-index: 1;}.hero-content {    position: relative;    z-index: 2;    color: var(--kolo-white);    width: 100%;    padding: 6rem 1.5rem 0;    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;}.hero-content h1 {    font-family: var(--ff-heading);    font-size: clamp(2.5rem, 6vw, 4.8rem);    font-weight: 700;    line-height: 1.15;    margin-bottom: 1.5rem;}.hero-content p {    font-size: clamp(0.95rem, 2vw, 1.1rem);    color: rgba(255, 255, 255, 0.85);    margin-bottom: 2.5rem;    line-height: 1.6;    max-width: 800px;}.hero-cta {    display: flex;    justify-content: center;    gap: 1rem;    margin-bottom: 4rem;    width: 100%;}.btn-primary {    display: inline-block;    background: linear-gradient(135deg, #6ae7a4, #57d58a);    color: var(--kolo-white);    padding: 1rem 2.2rem;    border-radius: var(--radius-pill);    font-weight: 600;    font-size: 1rem;    border: none;    box-shadow: 0 10px 20px rgba(101, 227, 160, 0.2);    transition: transform 0.2s;}.btn-primary:hover {    transform: translateY(-2px);}.btn-outline {    border: 1.5px solid rgba(255, 255, 255, 0.5);    color: var(--kolo-white);    padding: 1rem 2.2rem;    border-radius: var(--radius-pill);    font-weight: 500;    font-size: 1rem;    backdrop-filter: blur(5px);}.hero-stats {    display: flex;    justify-content: center;    gap: 5rem;    margin-bottom: 3rem;}.stat-item {    display: flex;    flex-direction: column;    align-items: center;}.stat-number {    font-family: var(--ff-heading);    font-size: clamp(2rem, 4vw, 2.8rem);    font-weight: 700;    line-height: 1;}.stat-plus {    color: var(--kolo-green);    font-size: 1.2rem;    margin: 2px 0;    line-height: 1;}.stat-text {    font-size: 0.75rem;    letter-spacing: 1px;    font-weight: 500;    color: rgba(255, 255, 255, 0.7);}.mouse {    width: 24px;    height: 38px;    border: 2px solid rgba(255, 255, 255, 0.4);    border-radius: 12px;    margin: 0.5rem auto 0;    position: relative;    transition: border-color 0.4s;}.mouse:hover {    border-color: var(--kolo-green);}.mouse::before {    content: '';    position: absolute;    top: 6px;    left: 50%;    transform: translateX(-50%);    width: 2px;    height: 6px;    background: var(--kolo-white);    border-radius: 2px;}.scroll-down p {    font-size: 0.7rem;    letter-spacing: 2px;    color: rgba(255, 255, 255, 0.6);    margin-bottom: 0;}/* SECTION HEADERS */.section-header {    margin-bottom: 3.5rem;}.center-align {    text-align: center;}.section-header .subtitle {    color: var(--kolo-green);    font-size: 0.8rem;    font-weight: 700;    letter-spacing: 2px;    text-transform: uppercase;    margin-bottom: 1rem;    display: inline-block;}.section-header h2 {    font-family: var(--ff-heading);    font-size: clamp(2.5rem, 4vw, 3.5rem);    color: var(--kolo-text-dark);    font-weight: 700;    line-height: 1.2;    margin-bottom: 1rem;}.section-header.light-text h2,.section-header.light-text p {    color: var(--kolo-white);}.section-header p {    font-size: 1.05rem;    line-height: 1.6;    max-width: 800px;    margin: 0 auto;    color: #6b7280;}/* ABOUT / DMC */.dmc-wrapper {    display: flex;    justify-content: center;    align-items: center;    position: relative;    min-height: 550px;    padding: 2rem 0;}.dmc-center {    max-width: 580px;    text-align: center;    z-index: 2;    background: var(--kolo-white);    padding: 2rem;    border-radius: 20px;}.dmc-center h2 {    font-family: var(--ff-heading);    font-size: 3.5rem;    color: var(--kolo-text-dark);    line-height: 1.1;    margin-bottom: 1.5rem;}.green-italic {    color: var(--kolo-green-dark);    font-family: var(--ff-heading);    font-style: italic;    font-size: 1.4rem;    margin-bottom: 1.5rem;    font-weight: 600;}.dmc-center p {    color: #6b7280;    font-size: 1rem;    margin-bottom: 2rem;    line-height: 1.7;}.check-list {    display: inline-block;    text-align: left;    margin-bottom: 2.5rem;}.check-list li {    margin-bottom: 1rem;    color: var(--kolo-text-dark);    font-weight: 600;    font-size: 0.95rem;    display: flex;    align-items: center;    gap: 10px;}.check-list i {    color: var(--kolo-green);    font-size: 1.2rem;}.btn-dark-pill {    background: var(--kolo-bg-dark);    color: var(--kolo-white);    padding: 0.8rem 2rem;    border-radius: var(--radius-pill);    font-size: 0.85rem;    font-weight: 600;    letter-spacing: 1px;    display: inline-block;}.dmc-img {    position: absolute;    top: 50%;    transform: translateY(-50%);    width: 320px;    height: 380px;    object-fit: cover;    z-index: 1;    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);}.dmc-img.left {    left: -80px;    border: 12px solid var(--kolo-white);    border-radius: 30px;}.dmc-img.right {    right: -80px;    border-radius: 30px;}/* WHY BOOK */.why-book-grid {    display: grid;    grid-template-columns: 1fr 1.4fr;    gap: 4rem;    align-items: center;}.why-book-title h2 {    font-family: var(--ff-heading);    font-size: 4rem;    color: var(--kolo-text-dark);    line-height: 1.1;}.why-book-cards {    display: flex;    flex-direction: column;    gap: 1rem;}.feature-card {    background: var(--kolo-white);    padding: 1.2rem 1.5rem;    border-radius: var(--radius-md);    display: flex;    align-items: center;    gap: 1.5rem;    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);}.icon-box {    width: 50px;    height: 50px;    background: var(--kolo-green);    border-radius: 12px;    display: flex;    align-items: center;    justify-content: center;    color: var(--kolo-white);    font-size: 1.2rem;    flex-shrink: 0;}.feature-card p {    color: var(--kolo-text-dark);    font-size: 1rem;    font-weight: 500;    margin: 0;}/* SLIDER WRAPPER & ARROWS */.slider-wrapper {    position: relative;}.slider-arrow {    position: absolute;    top: 50%;    transform: translateY(-50%);    width: 55px;    height: 55px;    background: rgba(255, 255, 255, 0.15);    border: 1px solid rgba(255, 255, 255, 0.3);    border-radius: 50%;    color: var(--kolo-white);    display: flex;    align-items: center;    justify-content: center;    cursor: pointer;    z-index: 10;    font-size: 1.2rem;    transition: 0.3s;}.slider-arrow:hover {    background: var(--kolo-green);    border-color: var(--kolo-green);}.slider-arrow.left {    left: -25px;}.slider-arrow.right {    right: -25px;}.slider-arrow.ghost {    background: rgba(255, 255, 255, 0.8);    border: none;    color: #9ca3af;    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);}.slider-arrow.ghost:hover {    background: var(--kolo-white);    color: var(--kolo-text-dark);}/* GRIDS & CARDS */.tour-grid {    display: flex;    overflow-x: auto;    scroll-behavior: smooth;    scroll-snap-type: x mandatory;    gap: 2rem;    padding: 1rem 0 3rem;    -ms-overflow-style: none;    /* IE and Edge */    scrollbar-width: none;    /* Firefox */}.tour-grid::-webkit-scrollbar {    display: none;    /* Chrome, Safari and Opera */}.tour-card,.excursion-card {    flex: 0 0 calc(33.333% - 1.35rem);    min-width: 320px;    scroll-snap-align: start;}.experiences-grid {    display: flex;    overflow-x: auto;    scroll-behavior: smooth;    scroll-snap-type: x mandatory;    gap: 2rem;    padding: 1rem 0 3rem;    -ms-overflow-style: none;    scrollbar-width: none;}.experiences-grid::-webkit-scrollbar {    display: none;}.tour-card,.excursion-card,.transport-card {    border-radius: var(--radius-lg);    overflow: hidden;}.tour-card.dark {    background: #375344;}.excursion-card {    background: var(--kolo-white);    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);}.transport-card {    flex: 0 0 calc(25% - 1.5rem);    min-width: 280px;    scroll-snap-align: start;    background: var(--kolo-white);    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);    transition: transform 0.8s var(--ease-out-expo), box-shadow 0.8s var(--ease-out-expo);}@media (hover: hover) {    .transport-card:hover {        transform: translateY(-12px);        box-shadow: 0 30px 60px rgba(101, 227, 160, 0.2);    }}.card-img {    position: relative;    height: 240px;}.card-img img {    width: 100%;    height: 100%;    object-fit: cover;}.card-body {    padding: 1.8rem;}.tour-card.dark h3 {    font-family: var(--ff-heading);    color: var(--kolo-white);    font-size: 1.6rem;    margin-bottom: 0.5rem;}.tour-card.dark p {    color: #d1d5db;    font-size: 0.95rem;    margin-bottom: 1.5rem;}.btn-primary-pill {    background: var(--kolo-green);    color: var(--kolo-white);    padding: 0.6rem 1.8rem;    border-radius: var(--radius-pill);    font-size: 0.9rem;    font-weight: 600;    display: inline-block;}.floating-tag {    position: absolute;    bottom: 1.5rem;    left: 1.5rem;    background: var(--kolo-green);    color: var(--kolo-white);    padding: 0.4rem 1.2rem;    border-radius: var(--radius-pill);    font-size: 0.75rem;    font-weight: 700;    letter-spacing: 1px;}.excursion-card h3 {    font-family: var(--ff-heading);    color: var(--kolo-text-dark);    font-size: 1.6rem;    margin-bottom: 0.5rem;}.experience-box {    position: relative;    height: 380px;    border-radius: var(--radius-lg);    overflow: hidden;    flex: 0 0 calc(33.333% - 1.35rem);    min-width: 320px;    scroll-snap-align: start;}.experience-box img {    width: 100%;    height: 100%;    object-fit: cover;    transition: transform 1.4s var(--ease-out-expo);    will-change: transform;}.experience-box .overlay {    position: absolute;    inset: 0;    background: linear-gradient(to top, rgba(15, 30, 40, 0.9) 0%, transparent 60%);    display: flex;    flex-direction: column;    justify-content: flex-end;    padding: 2rem;}.experience-box .tag {    font-size: 0.75rem;    font-weight: 700;    color: var(--kolo-green);    margin-bottom: 0.5rem;    letter-spacing: 1px;}.experience-box h3 {    font-family: var(--ff-heading);    color: var(--kolo-white);    font-size: 1.8rem;}.experience-box p {    color: rgba(255, 255, 255, 0.8);    font-size: 0.9rem;    margin-top: 0.5rem;}.transport-card img {    height: 250px;    padding: 0;    object-fit: cover;    background: var(--kolo-white);    width: 100%;    display: block;    transition: transform 1.4s var(--ease-out-expo);    will-change: transform;}.transport-card .card-body {    padding: 0;}.transport-footer {    display: flex;    align-items: stretch;    height: 85px;}.transport-info {    flex: 1.5;    background: var(--kolo-bg-dark);    color: var(--kolo-white);    padding: 1.2rem;    display: flex;    flex-direction: column;    justify-content: center;}.transport-info h3 {    margin: 0 !important;    font-size: 1.15rem !important;    color: var(--kolo-green) !important;    font-weight: 700;    font-family: var(--ff-body);}.transport-info .price {    font-size: 0.85rem;    margin-top: 4px;    opacity: 0.9;    letter-spacing: 0.5px;}/* TRANSPORT EXPANDABLE TEXT */.transport-expandable-wrapper {    position: relative;    max-width: 1000px;    margin: 0 auto;    text-align: left;    transition: max-height 1s var(--ease-out-expo);    overflow: hidden;}.transport-expandable-wrapper.collapsed {    max-height: 155px;}.transport-descriptions p {    margin-bottom: 1.5rem;    line-height: 1.8;    color: #64748b; /* Muted blue-grey ("tikk dl poddk blue") */    transition: color 0.5s;}.transport-expandable-wrapper:not(.collapsed) .transport-descriptions p {    color: #4b5563;}.fade-overlay {    position: absolute;    bottom: 0;    left: 0;    width: 100%;    height: 80px;    background: linear-gradient(transparent, var(--kolo-white));    pointer-events: none;    transition: opacity 0.5s;    opacity: 0;}.transport-expandable-wrapper.collapsed .fade-overlay {    opacity: 1;}.btn-see-more {    background: transparent;    border: none;    color: var(--kolo-green);    font-weight: 600;    font-size: 0.95rem;    cursor: pointer;    display: inline-flex;    align-items: center;    gap: 8px;    margin-top: 0.5rem;    padding: 0.5rem 1.2rem;    border-radius: var(--radius-pill);    transition: all 0.3s;}.btn-see-more:hover {    background: rgba(101, 227, 160, 0.1);    gap: 12px;}.btn-see-more i {    transition: transform 0.4s var(--ease-out-back);}.btn-see-more.active i {    transform: rotate(180deg);}.transport-capacity {    flex: 1;    background: var(--kolo-green);    color: var(--kolo-bg-dark);    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;    text-align: center;    gap: 4px;}.transport-capacity i {    font-size: 1.4rem;}.transport-capacity span {    font-size: 0.85rem;    font-weight: 700;}/* CTA (Overlap Fixed) */#cta {    position: relative;    padding: 6rem 1.5rem 7rem; /* Compact as requested */    display: flex;    align-items: center;    justify-content: center;    text-align: center;    overflow: hidden;    clip-path: inset(0); /* Creates a fixed window for the background */    -webkit-clip-path: inset(0);}.cta-bg {    position: fixed; /* Fixed relative to viewport for robust mobile parallax */    top: 0;    left: 0;    width: 100%;    height: 100%;    z-index: -1;    background-image: url('photos/cta_adventure_bg.png');    background-size: cover;    background-position: center bottom;    will-change: transform;}.cta-bg::after {    content: '';    position: absolute;    inset: 0;    background: rgba(22, 43, 32, 0.75);}.cta-content {    position: relative;    z-index: 2;    color: var(--kolo-white);}.cta-content h2 {    font-family: var(--ff-heading);    font-size: clamp(2.5rem, 5vw, 3.5rem);    margin-bottom: 1rem;}.cta-content p {    font-size: 1.1rem;    color: rgba(255, 255, 255, 0.9);    margin-bottom: 2.5rem;    line-height: 1.6;}/* TESTIMONIALS */.testimonial-container {    max-width: 900px;    margin: 0 auto;    text-align: center;}.testimonial-box {    background: var(--kolo-bg-light);    padding: 3.5rem 4rem;    border-radius: var(--radius-lg);    text-align: left;}.stars {    color: var(--kolo-green);    font-size: 1.2rem;    margin-bottom: 1.5rem;    letter-spacing: 3px;}.quote {    font-family: var(--ff-body);    font-size: 1.1rem;    color: #6b7280;    font-style: italic;    margin-bottom: 2rem;    line-height: 1.8;}.author {    display: flex;    align-items: center;    gap: 1rem;}.avatar {    width: 55px;    height: 55px;    background: var(--kolo-green);    border-radius: 50%;    color: var(--kolo-white);    display: flex;    align-items: center;    justify-content: center;    font-weight: 600;    font-size: 1.1rem;}.author h4 {    color: var(--kolo-text-dark);    font-size: 1.1rem;    margin-bottom: 2px;}.author span {    font-size: 0.9rem;    color: #9ca3af;}.testi-arrows {    display: flex;    justify-content: center;    gap: 1rem;    margin-top: 2rem;}.testi-arrows button {    width: 45px;    height: 45px;    border-radius: 50%;    border: 1px solid #e5e7eb;    background: var(--kolo-white);    color: #4b5563;    display: flex;    align-items: center;    justify-content: center;    cursor: pointer;    transition: 0.3s;}.testi-arrows button:hover {    border-color: var(--kolo-green);    color: var(--kolo-green);}/* CONTACT (Screenshot Match: Separated Layout) */.contact-wrapper {    display: grid;    grid-template-columns: 1fr 1.6fr;    gap: 3rem;    align-items: start;    max-width: 1100px;    margin: 0 auto;}.contact-left {    display: flex;    flex-direction: column;}.contact-info-panel {    background: var(--kolo-bg-dark);    border-radius: var(--radius-lg);    padding: 3.5rem 2.5rem;    color: var(--kolo-white);    width: 100%;    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);}.info-item {    display: flex;    gap: 1.2rem;    margin-bottom: 2rem;}.info-item:last-child {    margin-bottom: 0;}.info-icon {    width: 45px;    height: 45px;    background: rgba(255, 255, 255, 0.05);    border-radius: 12px;    display: flex;    align-items: center;    justify-content: center;    font-size: 1.2rem;    color: var(--kolo-green);    flex-shrink: 0;}.info-text h4 {    font-size: 1rem;    margin-bottom: 0.3rem;    font-weight: 600;}.info-text p {    font-size: 0.9rem;    color: rgba(255, 255, 255, 0.7);    line-height: 1.6;}.contact-social {    display: flex;    gap: 0.8rem;    margin-top: 1.5rem;}.contact-social a {    width: 45px;    height: 45px;    background: var(--kolo-bg-dark);    color: var(--kolo-white);    border-radius: 12px;    display: flex;    align-items: center;    justify-content: center;    font-size: 1.1rem;    transition: background 0.3s ease;}.contact-social a:hover {    background: var(--kolo-green);}.contact-social a.empty-box {    background: transparent;    pointer-events: none;}/* Used to push Whatsapp icon to the right if needed to match screenshot exactly */.contact-form-panel {    background: var(--kolo-white);    border-radius: var(--radius-lg);    padding: 3.5rem;    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);}.form-row {    display: flex;    gap: 1.5rem;    margin-bottom: 1.5rem;}.form-group {    flex: 1;    display: flex;    flex-direction: column;}.form-group.full-width {    width: 100%;    margin-bottom: 2rem;}.form-group label {    font-size: 0.75rem;    font-weight: 700;    color: var(--kolo-bg-dark);    margin-bottom: 0.5rem;    letter-spacing: 0.5px;    text-transform: uppercase;}.form-group input,.form-group select,.form-group textarea {    background: var(--kolo-bg-light);    border: 1px solid transparent;    padding: 1.2rem;    border-radius: 12px;    font-family: var(--ff-body);    font-size: 0.95rem;    color: var(--kolo-text-dark);    outline: none;    transition: border-color 0.3s;}.form-group textarea {    height: 120px;    resize: none;}.form-group input::placeholder,.form-group textarea::placeholder {    color: #9ca3af;}.form-group input:focus,.form-group select:focus,.form-group textarea:focus {    border-color: var(--kolo-green);}.btn-submit {    width: 100%;    background: linear-gradient(135deg, #6ae7a4, #57d58a);    color: var(--kolo-white);    border: none;    padding: 1.2rem;    border-radius: var(--radius-pill);    font-size: 1rem;    font-weight: 700;    cursor: pointer;    display: flex;    align-items: center;    justify-content: center;    gap: 0.5rem;}/* FOOTER */.site-footer {    position: relative;    background: var(--kolo-bg-dark);    color: rgba(255, 255, 255, 0.7);    overflow: hidden;    margin-bottom: 0;    padding-bottom: 0;}.footer-wave {    position: absolute;    top: 0;    left: 0;    width: 100%;    transform: translateY(-99.8%); /* Adjusted to eliminate sub-pixel gap */    line-height: 0;    color: var(--kolo-bg-dark); /* Ensure SVG currentColor matches footer bg */}.footer-wave svg {    display: block;    width: 100%;    height: 60px;}.footer-content {    padding: 4rem 0 2rem;}.footer-grid {    display: grid;    grid-template-columns: 2fr 1fr 1.5fr 2fr;    gap: 3rem;    margin-bottom: 4rem;}.brand-col {    display: flex;    flex-direction: column;    align-items: center; /* Centers the logo and social icons */    text-align: center; /* Centers the text */}.footer-logo {    margin-bottom: 1.5rem;}.brand-col p {    font-size: 0.95rem;    margin-bottom: 2rem;    line-height: 1.7;    max-width: 400px; /* Prevents text from being too wide when centered */}.footer-social-bottom {    display: flex;    gap: 0.8rem;    justify-content: center; /* Centers icons horizontally */}.footer-social-bottom a {    width: 40px;    height: 40px;    background: rgba(255, 255, 255, 0.08);    color: var(--kolo-white);    border-radius: 10px;    display: flex;    align-items: center;    justify-content: center;    transition: 0.3s;}.footer-social-bottom a:hover {    background: var(--kolo-green);}.footer-col h4 {    color: var(--kolo-white);    font-family: var(--ff-body);    font-size: 1.1rem;    font-weight: 600;    margin-bottom: 1.5rem;}.footer-col ul li {    margin-bottom: 1rem;}.footer-col ul li a {    color: rgba(255, 255, 255, 0.7);    font-size: 0.95rem;    transition: color 0.3s;}.footer-col ul li a:hover {    color: var(--kolo-green);}.newsletter-form {    position: relative;    margin-bottom: 2rem;    margin-top: 1rem;}.newsletter-form input {    width: 100%;    background: rgba(255, 255, 255, 0.1);    border: 1px solid rgba(255, 255, 255, 0.05);    color: var(--kolo-white);    padding: 1rem 3.5rem 1rem 1.5rem;    border-radius: var(--radius-pill);    outline: none;}.newsletter-form button {    position: absolute;    right: 5px;    top: 50%;    transform: translateY(-50%);    width: 42px;    height: 42px;    background: var(--kolo-green);    color: var(--kolo-white);    border: none;    border-radius: 50%;    cursor: pointer;}.accreditations .acc-item {    font-size: 0.85rem;    margin-bottom: 0.8rem;    display: flex;    align-items: center;    gap: 0.5rem;    color: rgba(255, 255, 255, 0.8);}.acc-item i {    color: var(--kolo-green);    font-size: 1.1rem;}.footer-bottom {    display: flex;    justify-content: space-between;    align-items: center;    padding-top: 2rem;    border-top: 1px solid rgba(255, 255, 255, 0.1);    font-size: 0.85rem;}.legal-links {    display: flex;    gap: 1.5rem;}.legal-links a {    color: rgba(255, 255, 255, 0.7);}/* Replaced by consolidated floating buttons section at the bottom of the file *//* MOBILE RESPONSIVE FIXES */@media (max-width: 1200px) {    .dmc-img.left {        left: 0;    }    .dmc-img.right {        right: 0;    }}@media (max-width: 992px) {    .tour-grid,    .experiences-grid {        grid-template-columns: repeat(2, 1fr);    }    .dmc-wrapper {        flex-direction: column;        padding: 0;    }    .dmc-img {        position: relative;        transform: none;        top: 0;        left: 0;        right: 0;        margin-bottom: 2rem;        width: 100%;        border: none;    }    .why-book-grid {        grid-template-columns: 1fr;        text-align: center;    }    .contact-wrapper {        grid-template-columns: 1fr;        gap: 2rem;    }    .contact-info-panel {        width: 100%;    }    .contact-social {        justify-content: center;    }    .footer-grid {        grid-template-columns: 1fr 1fr;    }}@media (max-width: 768px) {    /* MOBILE NAV */    .desktop-nav-links {        display: none;    }    .mobile-toggle {        display: block !important;        background: none;        border: none;        color: white;        font-size: 1.5rem;        cursor: pointer;    }    .sidebar-overlay {        display: block !important;        position: fixed;        top: 0;        left: 0;        width: 100%;        height: 100vh;        background: rgba(0, 0, 0, 0.6);        z-index: 1001;        opacity: 0;        visibility: hidden;        transition: 0.3s ease;    }    .sidebar-overlay.active {        opacity: 1;        visibility: visible;    }    .sidebar-menu {        display: block !important;        position: fixed;        top: 0;        left: -100%;        width: 280px;        height: 100vh;        background: var(--kolo-bg-dark);        z-index: 1002;        padding: 2rem;        transition: left 0.4s ease;        overflow-y: auto;    }    .sidebar-menu.active {        left: 0;    }    .sidebar-header {        display: flex;        justify-content: space-between;        align-items: center;        margin-bottom: 2rem;    }    .close-sidebar {        background: none;        border: none;        color: white;        font-size: 1.5rem;        cursor: pointer;    }    .mobile-nav-links {        display: flex;        flex-direction: column;        gap: 1.5rem;    }    .mobile-nav-links a {        color: white;        font-size: 1.1rem;        display: flex;        align-items: center;        gap: 10px;    }    .mobile-nav-links i {        color: var(--kolo-green);        width: 20px;    }    .mobile-nav-links .btn-nav {        justify-content: center;        margin-top: 1rem;    }    /* LAYOUT FIXES FOR MOBILE */    .desktop-only {        display: none;    }    .section-padding {        padding: 4rem 0;    }    /* Hero Text Cut-off & Height Fix */    #hero {        height: auto;        min-height: auto;         padding-bottom: 5rem;    }    .hero-content {        padding-top: 7rem;        margin-top: 0;    }    .hero-content h1 {        font-size: 2.5rem;        line-height: 1.2;        margin-bottom: 1rem;    }    .hero-stats {        gap: 1.5rem;        flex-wrap: wrap;        margin-bottom: 2rem;    }    .hero-cta {        flex-direction: column;        width: 100%;        align-items: stretch;    }    .hero-cta a {        width: 100%;        box-sizing: border-box;    }    .slider-arrow {        display: flex;        width: 38px;        height: 38px;        font-size: 0.8rem;        background: rgba(255, 255, 255, 0.95);        border: 1px solid rgba(0, 0, 0, 0.05);        color: var(--kolo-bg-dark);        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);        top: auto;        bottom: -15px; /* Position them below the cards */        transform: none;    }    .slider-arrow.left {        left: calc(50% - 45px);    }    .slider-arrow.right {        right: calc(50% - 45px);    }    .slider-arrow:active {        background: var(--kolo-green);        color: white;        transform: scale(0.9);    }    /* Floating Buttons Separation */    .float-whatsapp {        bottom: 20px;        right: 20px;        width: 50px;        height: 50px;        font-size: 26px;    }    .float-top {        bottom: 105px; /* Aggressively increased separation for mobile */        right: 20px;        width: 42px;        height: 42px;    }    .tour-grid,    .experiences-grid {        display: flex;        flex-direction: row;        align-items: flex-start;        gap: 1rem;        overflow-x: auto;        overflow-y: visible;        padding-bottom: 3.5rem;        padding-left: 1.5rem;        padding-right: 1.5rem;        scroll-snap-type: x mandatory;        -webkit-overflow-scrolling: touch;        touch-action: auto; /* Reset to allow both x and y movement naturally */    }    .tour-card,    .excursion-card,    .transport-card {        flex: 0 0 78%;        min-width: 260px;        scroll-snap-align: center;    }    .why-book-grid {        grid-template-columns: 1fr;        gap: 2rem;        text-align: center;    }    .why-book-title h2 {        font-size: 2.2rem;        line-height: 1.2;    }    .feature-card {        padding: 1.2rem;        gap: 1rem;        text-align: left;    }}    .form-row {        flex-direction: column;        gap: 1rem;    }    .contact-form-panel {        padding: 2.5rem 1.5rem;    }    .footer-grid {        grid-template-columns: 1fr;        text-align: center;    }    .footer-social-bottom {        justify-content: center;    }    .hidden-mobile {        display: none;    }    .footer-bottom {        flex-direction: column;        text-align: center;        gap: 1rem;    }}/* FLOATING BUTTONS */.float-whatsapp {    position: fixed;    bottom: 30px;    right: 30px;    width: 60px;    height: 60px;    background: #25d366;    color: white;    border-radius: 50%;    display: flex;    align-items: center;    justify-content: center;    font-size: 32px;    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);    z-index: 999;    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);    animation: glowPulse 2.5s ease-in-out infinite; /* Added back the glow pulse */}.float-whatsapp:hover {    transform: scale(1.1) rotate(5deg);}.float-top {    position: fixed;    bottom: 135px; /* Aggressively increased separation for desktop */    right: 30px; /* Aligned with WhatsApp button */    width: 50px;    height: 50px;    background: rgba(255, 255, 255, 0.9);    color: var(--kolo-bg-dark);    border: 1px solid rgba(0, 0, 0, 0.05);    border-radius: 12px;    display: flex;    align-items: center;    justify-content: center;    font-size: 1.2rem;    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);    z-index: 998;    cursor: pointer;    opacity: 0;    visibility: hidden;    transition: 0.3s;    backdrop-filter: blur(5px);}.float-top.active,.float-top.visible { /* Match main.js class name */    opacity: 1;    visibility: visible;}.float-top:hover {    background: var(--kolo-green);    color: white;    transform: translateY(-5px);}@media (max-width: 480px) {    .hero-content h1 {        font-size: 2.2rem;    }    .stat-number {        font-size: 2rem;    }}/* STRETCHED LINK PATTERN & BLOCK LINKS */.stretched-link::after {    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    z-index: 20;    pointer-events: auto;    content: "";}.card-link-wrapper {    display: block;    text-decoration: none;    color: inherit;    height: 100%;    width: 100%;}.tour-card, .excursion-card, .experience-box {    position: relative;    cursor: pointer;}.card-body {    position: static;}.experience-box a.stretched-link {    text-decoration: none;    color: inherit;}.tour-card h3 a,.experience-box h3 a {    color: inherit;    text-decoration: none;}/* --- CATEGORY SUB-PAGES (WALKERS STYLE) --- */.category-intro {    max-width: 900px;    margin: 0 auto 4rem;    text-align: center;}.category-intro .pre-title {    font-size: 0.85rem;    font-weight: 700;    letter-spacing: 2px;    color: var(--kolo-text-dark);    text-transform: uppercase;    display: block;    margin-bottom: 0.5rem;}.category-intro h2 {    font-size: 3.5rem;    font-family: var(--ff-heading);    margin-bottom: 1.5rem;    line-height: 1.1;}.category-intro p {    font-size: 1.1rem;    line-height: 1.8;    color: #64748b;}/* Itinerary Grid & Cards */.itinerary-grid {    display: flex;    flex-wrap: nowrap;    overflow-x: auto;    overflow-y: hidden;    scroll-snap-type: x mandatory;    gap: 30px;    margin-bottom: 5rem;    max-width: 1000px;    margin-left: auto;    margin-right: auto;    padding-bottom: 20px;    -ms-overflow-style: none;    scrollbar-width: none;}.itinerary-grid::-webkit-scrollbar {    display: none;}.itinerary-card {    position: relative;    height: 420px;    border-radius: var(--radius-lg);    overflow: hidden;    cursor: pointer;    transition: all 0.6s var(--ease-out-expo);    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);    flex: 0 0 calc((100% - 60px) / 3);    scroll-snap-align: start;}.itinerary-card img {    width: 100%;    height: 100%;    object-fit: cover;    transition: transform 1.2s var(--ease-out-expo);}.itinerary-card:hover img {    transform: scale(1.1);}.itinerary-card .itinerary-overlay {    position: absolute;    inset: 0;    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);    display: flex;    flex-direction: column;    justify-content: flex-end;    padding: 2rem;    transition: background 0.4s;}.itinerary-card .itinerary-cat {    font-size: 0.75rem;    font-weight: 700;    color: var(--kolo-green);    text-transform: uppercase;    letter-spacing: 1px;    margin-bottom: 0.4rem;}.itinerary-card h3 {    color: white;    font-size: 1.5rem;    font-family: var(--ff-heading);    margin-bottom: 0.6rem;    line-height: 1.2;}.itinerary-card .duration {    color: rgba(255, 255, 255, 0.8);    font-size: 0.9rem;    font-weight: 500;    display: flex;    align-items: center;    gap: 8px;}/* Route Map Section */.route-map-section {    background: #ffffff; /* Removed #f8fafc to blend with white page background */    border-radius: var(--radius-xl);    padding: 5rem;    display: flex;    align-items: center;    gap: 5rem;    margin-bottom: 2rem; /* Added bottom margin for spacing instead of top margin */}.map-visual {    flex: 1.2;}.map-visual img {    width: 100%;    height: auto;    border-radius: var(--radius-lg);    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.05));}.map-info {    flex: 1;}.map-info .pre-title {    color: var(--kolo-green);    font-weight: 700;    font-size: 0.9rem;    display: block;    margin-bottom: 0.5rem;}.map-info h2 {    font-size: 2.8rem;    font-family: var(--ff-heading);    margin-bottom: 1.5rem;}.map-info p {    font-size: 1.05rem;    line-height: 1.8;    color: #4b5563;    margin-bottom: 2rem;}.map-features {    list-style: none;    padding: 0;}.map-features li {    display: flex;    align-items: center;    gap: 12px;    margin-bottom: 1rem;    font-weight: 500;    color: var(--kolo-text-dark);}.map-features li i {    color: var(--kolo-green);}@media (max-width: 1024px) {    .route-map-section {        flex-direction: column;        padding: 3rem 2rem;        gap: 3rem;        text-align: center;    }        .map-features li {        justify-content: center;    }    .category-intro h2 {        font-size: 2.5rem;    }}@media (max-width: 768px) {    .itinerary-grid {        display: flex;        flex-wrap: nowrap;        overflow-x: auto;        overflow-y: hidden;        scroll-snap-type: x mandatory;        -webkit-overflow-scrolling: touch;        gap: 20px;        padding-bottom: 20px;        grid-template-columns: none; /* override grid */    }    .itinerary-grid::-webkit-scrollbar {        display: none;    }        .itinerary-grid {        -ms-overflow-style: none;  /* IE and Edge */        scrollbar-width: none;  /* Firefox */    }    .itinerary-card {        flex: 0 0 85vw;        scroll-snap-align: center;    }}/* --- SUBPAGE HERO (GPU-ACCELERATED LAYERED) --- */.subpage-hero {    position: relative;    min-height: 75vh;    display: flex;    align-items: center;    justify-content: center;    overflow: hidden;    max-width: 100%; /* Safety width constraint */    padding: 120px 0 80px;    background: #ffffff; /* Seamless transition to white section below */}.hero-bg-layer {    position: absolute;    top: -30%; /* Larger top buffer */    left: 0;    width: 100%;    height: 160%; /* Massive 160% height for deep parallax */    background-size: cover;    background-position: center;    background-repeat: no-repeat;    z-index: 0;    will-change: transform;}.subpage-hero .hero-overlay {    position: absolute;    inset: 0;    background: rgba(0, 0, 0, 0.4);    z-index: 1;}.subpage-hero .container {    position: relative;    z-index: 2;}.subpage-hero h1 {    color: var(--kolo-white);    position: relative;    z-index: 2;    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);    margin-top: 0.5rem;}.subpage-hero .breadcrumb {    display: flex;    align-items: center;    gap: 10px;    margin-bottom: 0px;    position: relative;    z-index: 2;}.subpage-hero .breadcrumb a, .subpage-hero .breadcrumb i,.subpage-hero .breadcrumb span.current {    color: var(--kolo-white) !important;    opacity: 1 !important;}.subpage-hero .breadcrumb span.current {    color: var(--kolo-green) !important;}.subpage-hero .hero-overlay {    position: absolute;    inset: 0;    background: rgba(0, 0, 0, 0.4);    z-index: 1;}.white-bg {    background-color: #ffffff !important;}.category-intro {    background: transparent;    position: relative;    z-index: 2;}/* ==========================================================================   EXCURSION GALLERY   ========================================================================== */.excursion-gallery {    margin-top: 3rem;    width: 100%;}.gallery-grid {    display: grid;    grid-template-columns: repeat(3, 1fr);    gap: 24px;    margin: 0 auto;}.gallery-item {    border-radius: 16px;    overflow: hidden;    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);    aspect-ratio: 4/5;    position: relative;    cursor: pointer;}.gallery-item img {    width: 100%;    height: 100%;    object-fit: cover;    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);}.gallery-item:hover img {    transform: scale(1.08);}@media (max-width: 991px) {    .gallery-grid {        grid-template-columns: repeat(2, 1fr);    }}@media (max-width: 576px) {    .gallery-grid {        grid-template-columns: 1fr;    }}/* ==========================================================================   FLOATING ACTION BUTTONS A,?? WhatsApp & Scroll To Top   ========================================================================== *//* WhatsApp Button */.wa-action-launcher {    position: fixed;    bottom: 28px;    right: 28px;    width: 56px;    height: 56px;    background: #25d366;    color: #ffffff;    border-radius: 50%;    display: flex;    align-items: center;    justify-content: center;    font-size: 28px;    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);    z-index: 9999;    text-decoration: none;    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),                box-shadow 0.3s ease;    animation: glowPulse 2.5s ease-in-out infinite;}.wa-action-launcher:hover {    transform: scale(1.12) rotate(5deg);    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.6);}/* Scroll To Top Button */.scroll-to-top-btn {    position: fixed;    bottom: 96px; /* 28px bottom + 56px WA btn + 12px gap */    right: 28px;    width: 48px;    height: 48px;    background: rgba(255, 255, 255, 0.92);    color: var(--kolo-bg-dark);    border: 1px solid rgba(0, 0, 0, 0.06);    border-radius: 14px;    display: flex;    align-items: center;    justify-content: center;    font-size: 1.1rem;    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);    z-index: 9998;    cursor: pointer;    opacity: 0;    visibility: hidden;    transition: opacity 0.3s ease,                visibility 0.3s ease,                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),                background 0.3s ease;    backdrop-filter: blur(8px);    -webkit-backdrop-filter: blur(8px);}.scroll-to-top-btn.visible {    opacity: 1;    visibility: visible;}.scroll-to-top-btn:hover {    background: var(--kolo-green);    color: #ffffff;    transform: translateY(-4px);    box-shadow: 0 8px 24px rgba(101, 227, 160, 0.4);}/* Mobile adjustments */@media (max-width: 768px) {    .wa-action-launcher {        bottom: 20px;        right: 20px;        width: 50px;        height: 50px;        font-size: 24px;    }    .scroll-to-top-btn {        bottom: 84px; /* 20px + 50px WA + 14px gap */        right: 20px;        width: 42px;        height: 42px;        font-size: 1rem;        border-radius: 11px;    }}/* ========================================================================= *//* KOLO TOURS NATIVE LAYOUT (TOUR DETAILS)                                   *//* ========================================================================= */.tour-intro {    background-color: var(--kolo-bg-light);    padding: 100px 0 60px;}.recommend-badge {    background-color: var(--kolo-green);    color: var(--kolo-text-dark);    padding: 6px 16px;    font-size: 0.75rem;    letter-spacing: 2px;    text-transform: uppercase;    font-weight: 700;    border-radius: var(--radius-pill);}.duration-line {    display: flex;    align-items: center;    justify-content: center;    gap: 15px;    margin: 30px 0;    color: var(--kolo-text-dark);    font-weight: 600;    font-size: 0.95rem;    letter-spacing: 1px;}.duration-line::before, .duration-line::after {    content: '';    display: block;    width: 60px;    height: 2px;    background-color: var(--kolo-green);}.tour-intro p {    color: #4b5563;    line-height: 2;    font-size: 1.1rem;    font-weight: 400;    margin-bottom: 40px;}.cta-pretext {    font-size: 0.95rem;    color: #6b7280; /* Soft gray */    margin-bottom: 12px;    font-weight: 500;    font-family: var(--ff-body);    letter-spacing: 0.5px;}.btn-inquire {    background-color: var(--kolo-green);    color: #ffffff; /* White text matching screenshot */    padding: 16px 45px;    border-radius: var(--radius-pill);    font-size: 1.05rem;    font-weight: 500;    letter-spacing: 0.5px;    text-decoration: none;    display: inline-flex;    align-items: center;    gap: 10px;    transition: all 0.3s ease;    box-shadow: 0 8px 25px rgba(101, 227, 160, 0.3); /* Base glow */}.btn-inquire i {    font-size: 1.2rem;}.btn-inquire:hover {    background-color: var(--kolo-green-dark);    color: #ffffff;    transform: translateY(-3px);    box-shadow: 0 12px 30px rgba(101, 227, 160, 0.5); /* Enhanced hover glow */}/* Accordion Itinerary */.itinerary-accordion-section {    background-color: var(--kolo-white);    padding: 80px 0;}.accordion-title {    text-align: center;    margin-bottom: 60px;    font-family: var(--ff-heading);    font-size: 2.2rem;    font-weight: 600;    color: var(--kolo-text-dark);}.accordion-container {    max-width: 900px;    margin: 0 auto;    display: flex;    flex-direction: column;    gap: 16px;}.accordion-item {    border-radius: var(--radius-md);    overflow: hidden;    background-color: transparent;}.accordion-header {    width: 100%;    background-color: var(--kolo-bg-dark);    border: none;    padding: 0;    display: flex;    align-items: center;    cursor: pointer;    transition: background-color 0.3s ease;    border-radius: var(--radius-md);    overflow: hidden;}.accordion-header:hover {    background-color: var(--kolo-nav-bg);}.accordion-day {    background-color: var(--kolo-green);    color: var(--kolo-text-dark);    width: 140px;    padding: 22px 20px;    font-size: 1.1rem;    text-align: center;    height: 100%;    font-weight: 700;    font-family: var(--ff-body);}.accordion-header-title {    flex-grow: 1;    padding: 22px 25px;    font-size: 1.1rem;    color: var(--kolo-white);    text-align: left;    font-weight: 500;    font-family: var(--ff-body);}.accordion-header-icon {    padding: 22px 25px;    color: var(--kolo-green);    font-size: 1rem;    transition: transform 0.4s ease;}.accordion-header[aria-expanded="true"] .accordion-header-icon {    transform: rotate(180deg);}.accordion-content {    max-height: 0;    overflow: hidden;    transition: max-height 0.4s ease, padding 0.4s ease;    background-color: transparent;}.accordion-content.open {    max-height: 1000px;    padding: 25px 20px 40px 140px;}.accordion-content p {    color: #4b5563;    line-height: 1.8;    margin: 0;    font-size: 1rem;}@media (max-width: 768px) {    .duration-line::before, .duration-line::after { width: 30px; }    .accordion-header { flex-direction: column; align-items: flex-start; }    .accordion-day { width: 100%; padding: 15px; text-align: left; }    .accordion-header-title { padding: 15px; width: 100%; }    .accordion-content.open { padding: 20px; }    .accordion-header-icon { position: absolute; right: 10px; top: 15px; }    .accordion-item { position: relative; }}/* Visual Journeys Grid */.visual-journeys-section {    background-color: var(--kolo-bg-light);    padding: 80px 0;}.visual-journeys-grid {    display: grid;    grid-template-columns: repeat(3, 1fr);    gap: 20px;}.journey-img {    width: 100%;    aspect-ratio: 4/5;    object-fit: cover;    border-radius: var(--radius-md);    transition: transform 0.5s ease;}.journey-img:hover {    transform: translateY(-5px);    box-shadow: 0 10px 30px rgba(0,0,0,0.1);}@media (max-width: 768px) {    .visual-journeys-grid { grid-template-columns: 1fr; }}/* Inclusions & Policies */.policies-section {    background-color: var(--kolo-white);    padding: 80px 0 100px;}.policies-grid {    display: grid;    grid-template-columns: 1fr 1fr;    gap: 80px 40px;    max-width: 1000px;    margin: 0 auto;}.policy-block h4 {    font-size: 1.3rem;    color: var(--kolo-text-dark);    margin-bottom: 25px;    display: flex;    align-items: center;    gap: 15px;    font-weight: 600;}.policy-block h4::after {    content: '';    flex-grow: 1;    max-width: 120px;    height: 2px;    background-color: var(--kolo-green);    opacity: 0.3;}.policy-block ul {    list-style: none;    padding: 0;    margin: 0;}.policy-block ul li {    position: relative;    padding-left: 25px;    margin-bottom: 15px;    color: #4b5563;    line-height: 1.8;    font-size: 1rem;}.policy-block ul li::before {    content: '\f058'; /* FontAwesome check circle */    font-family: 'Font Awesome 6 Free';    font-weight: 900;    position: absolute;    left: 0;    color: var(--kolo-green);}@media (max-width: 768px) {    .policies-grid { grid-template-columns: 1fr; gap: 40px; }}/* Route Map Feature */.route-map-feature-section {    background-color: #eaf6fb; /* The beautiful soft pastel blue or var(--kolo-bg-light) */    padding: 120px 0;    position: relative;}.route-map-flex {    display: flex;    align-items: center;    justify-content: space-between;    gap: 50px;}.route-text-content {    flex: 1;    max-width: 450px;}.route-text-content h2 {    font-size: 1.8rem;    font-family: var(--ff-body);    font-weight: 600;    color: var(--kolo-text-dark);    margin-bottom: 5px;}.route-text-content h3 {    font-size: 2.5rem;    font-weight: 500;    color: var(--kolo-text-dark);    margin-bottom: 30px;    font-family: var(--ff-heading);}.route-text-content p {    color: #4b5563;    line-height: 2;    font-size: 1.05rem;}.route-map-graphic {    flex: 1;    position: relative;    display: flex;    justify-content: center;}.route-map-graphic img {    max-width: 100%;    height: auto;    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.05));    animation: float 6s ease-in-out infinite;    mix-blend-mode: multiply !important;}@media (max-width: 992px) {    .route-map-flex { flex-direction: column; text-align: center; }    .route-text-content { max-width: 100%; }}/* Centered Grid Modifiers for Desktop Only (Fixing horizontal scroll collision) */@media (min-width: 769px) {    .itinerary-grid.center-desktop {        display: flex !important;        justify-content: center !important;        flex-wrap: wrap !important;        gap: 30px !important;        margin-top: 40px !important;    }    .center-desktop-card {        flex: 0 1 380px !important;    }}/* ========================================================================= *//* DYNAMIC HORIZONTAL SCROLL BUTTONS FOR GRID CAROUSELS                      *//* ========================================================================= */.itinerary-scroll-wrapper {    position: relative;    width: 100%;    padding-bottom: 30px; /* Space for the bottom buttons to sit cleanly */}.dynamic-slider-arrow { z-index: 10; cursor: pointer; }/* Hide arrows on safely centered non-overflow grids */.itinerary-grid.center-desktop ~ .slider-arrow {    display: none !important;}/* Center Footer Support */.footer-centered { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 800px; margin: 0 auto; }.footer-centered .footer-logo { margin-bottom: 2rem; }.footer-desc { font-size: 1.1rem; line-height: 1.8; margin-bottom: 3rem; color: rgba(255, 255, 255, 0.9); font-weight: 300; }.footer-social-bottom { display: flex; gap: 1.2rem; justify-content: center; margin-bottom: 4rem; }.footer-social-bottom a { width: 45px; height: 45px; background: rgba(255, 255, 255, 0.08); color: var(--kolo-white); border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }.footer-social-bottom a:hover { background: var(--kolo-green); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }.footer-newsletter { margin-bottom: 5rem; }.footer-newsletter h4 { color: var(--kolo-white); font-size: 1.3rem; margin-bottom: 1.2rem; letter-spacing: 1px; }.footer-newsletter p { font-size: 1rem; color: rgba(255, 255, 255, 0.7); max-width: 600px; margin: 0 auto; }.footer-bottom { padding-top: 3rem; border-top: 1px solid rgba(255, 255, 255, 0.1); width: 100%; }.footer-bottom .copyright { font-size: 1rem; color: rgba(255, 255, 255, 0.8); }
.developer-credit {
    position: relative;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 2.5rem;
    font-weight: 400;
    padding: 18px 0;
    letter-spacing: 0.5px;
}
.developer-credit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50vw;
    width: 200vw;
    height: 100%;
    background-color: #0c1a2e; /* Thada nil pata (Dark blue) */
    z-index: -1;
}
/* Testimonial Slider Overrides */.testimonial-container { max-width: 900px; margin: 3rem auto 0; position: relative; overflow: hidden; text-align: left; }.testimonial-wrapper { display: flex; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }.testimonial-box { flex: 0 0 100%; box-sizing: border-box; }/* Social Logo Image Scaling */.social-logo-img {    width: 20px;    height: 20px;    object-fit: contain;    /* filter: brightness(0) invert(1); -- Removed to show original logo detail */    transition: transform 0.3s ease;}.footer-social-bottom a:hover .social-logo-img,.contact-social a:hover .social-logo-img {    transform: scale(1.1);}/* Custom Language Selector - Icon-Only circular glass */.custom-lang-selector, .custom-lang-selector * {    /* Prevent language names from being translated */}.custom-lang-selector {    display: inline-flex;    align-items: center;    justify-content: center;    background: rgba(255, 255, 255, 0.08);    border: 1px solid rgba(255, 255, 255, 0.15);    border-radius: 50%;    width: 38px;    height: 38px;    position: relative;    transition: all 0.3s ease;    cursor: pointer;    backdrop-filter: blur(10px);}.custom-lang-selector:hover {    background: rgba(255, 255, 255, 0.15);    border-color: #22c55e;    transform: scale(1.05);}.custom-lang-selector i {    color: #ffffff;    font-size: 1rem;    pointer-events: none;}.custom-lang-selector select {    position: absolute;    inset: 0;    opacity: 0; /* Hide text but keep clickable area */    width: 100% !important;    height: 100% !important;    cursor: pointer !important;    color-scheme: dark;}.custom-lang-selector select option {    background: #1e293b !important;    color: #ffffff !important;}/* Hide Google Translate Branding & Banner */.goog-te-banner-frame, .goog-te-banner,.skiptranslate,#goog-gt-tt,.goog-te-balloon-frame {    display: none !important;}body {    top: 0 !important;}html {    padding-top: 0 !important;}/* Hide Branding */.goog-logo-link, .goog-te-gadget span, .goog-te-gadget img, .goog-te-gadget-icon {    display: none !important;}/* Mobile Adjustment */@media (max-width: 991px) {    #google_translate_element_container {        margin: 15px auto;        background: rgba(0, 0, 0, 0.05);        border-color: rgba(0, 0, 0, 0.1);    }    #google_translate_element_container::before {        color: #000;    }}.subpage #main-header { background: var(--kolo-nav-bg); padding: 0.8rem 0; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); }
/* --- Premium Transparent Header Overrides for Subpages --- */
.subpage #main-header {
    background: transparent !important;
    box-shadow: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.subpage #main-header.scrolled {
    background: var(--kolo-nav-bg) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    padding: 0.6rem 0 !important;
}

/* ========================================================================= */
/* NAVY BLUE DEVELOPER BAR                                                    */
/* ========================================================================= */
.developer-credit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #0a1f44;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    padding: 1rem 1.5rem;
    margin-top: 2rem;
    border-radius: 10px;
    gap: 6px;
}
.developer-credit a {
    color: rgba(255, 255, 255, 0.75);
}
.developer-credit a:hover {
    color: #25d366;
}

/* Developer bar full width override */
.developer-credit {
    width: 100% !important;
    position: relative !important;
    z-index: 1 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 1.2rem 2rem !important;
    text-align: center !important;
    background-color: transparent !important;
    color: #000000 !important;
    display: block !important;
}
.developer-credit a {
    color: #000000 !important;
}
.developer-credit a:hover {
    color: #25d366 !important;
}
.developer-credit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50vw;
    width: 200vw;
    height: 100%;
    background-color: #ffffff !important;
    z-index: -1;
}

/* Force footer-bottom to stack vertically to center the content */
.footer-bottom {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1rem;
    padding-bottom: 0 !important;
}

/* Remove bottom padding from footer to make the white bar flush with the bottom */
.footer-content {
    padding-bottom: 0 !important;
}

/* Mobile break for developer credit */
.mobile-break {
    display: none;
}
@media (max-width: 768px) {
    .mobile-break {
        display: block;
    }
}


/* Hide mobile-specific translate button on desktop */
@media (min-width: 769px) {
    .mobile-lang-header {
        display: none !important;
    }
}


/* Align mobile translate button next to hamburger menu */
@media (max-width: 768px) {
    .nav-container {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    .nav-container > .logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
    }
    .mobile-lang-header {
        position: absolute !important;
        right: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        align-items: center !important;
    }
}


/* Service Announcement Box */
.service-announcement {
    display: flex;
    justify-content: center;
    margin: -1.5rem auto 3rem;
    position: relative;
    z-index: 5;
}

.service-announcement p {
    background: #000000;
    color: #ffffff !important;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0;
    text-align: center;
}


/* Souvenir Gallery */
.souvenir-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto 4rem;
    padding: 0 1.5rem;
}

.souvenir-item {
    text-align: center;
    transition: transform 0.4s var(--ease-out-expo);
}

.souvenir-item:hover {
    transform: translateY(-8px);
}

.souvenir-img {
    height: 220px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 1.2rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
    background: #f8fafc;
}

.souvenir-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease-out-expo);
}

.souvenir-item:hover .souvenir-img img {
    transform: scale(1.1);
}

.souvenir-item h4 {
    font-size: 1.05rem;
    color: var(--kolo-text-dark);
    font-weight: 600;
    font-family: var(--ff-body);
}

@media (max-width: 768px) {
    .souvenir-gallery {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 3rem;
    }
    .souvenir-img {
        height: 200px;
    }
}


/* Souvenir Details Text */
.souvenir-details {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 1.5rem;
    padding: 0 1.5rem;
}

.souvenir-intro {
    font-size: 1.25rem;
    color: var(--kolo-text-dark);
    font-weight: 700;
    margin-bottom: 0.8rem;
    font-family: var(--ff-heading);
}

.souvenir-list {
    font-size: 1.05rem;
    color: var(--kolo-green-dark);
    font-weight: 500;
    font-style: italic;
    margin-bottom: 1.2rem;
    letter-spacing: 0.3px;
}

.souvenir-trust {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.6;
    font-weight: 400;
    display: block;
    text-align: center;
}

.souvenir-trust i {
    color: var(--kolo-green);
    margin-right: 8px;
    display: inline-block;
}

@media (max-width: 768px) {
    .souvenir-intro {
        font-size: 1.1rem;
    }
    .souvenir-list {
        font-size: 0.95rem;
    }
    .souvenir-trust {
        font-size: 0.9rem;
    }
}


/* Mobile Slider Arrow Adjustment */
@media (max-width: 768px) {
    .slider-arrow {
        bottom: 5px !important;
    }
}