/* Extracted from home-static.html — homepage visual source of truth */

/* =========================================================
           GLOBAL
        ========================================================= */

        :root {
            --tk-blue: #071b78;
            --tk-blue-light: #075bd8;
            --tk-yellow: #ffc400;
            --tk-bg: #eef3f8;
            --tk-text: #071b55;
            --tk-muted: #68758a;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            padding: 0;
            font-family:
                Arial,
                Helvetica,
                sans-serif;
            background: var(--tk-bg);
            color: var(--tk-text);
        }

        a {
            text-decoration: none;
        }


        /* =========================================================
           STICKY HEADER
        ========================================================= */

        .travel-header {
            position: sticky;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1030;
            background: #257e81;
            box-shadow:
                0 2px 15px rgba(0, 0, 0, 0.08);
        }

        .travel-navbar {
            min-height: 78px;
        }

        .travel-logo {
            display: flex;
            align-items: center;
        }

        .travel-logo img {
            width: auto;
            max-width: 168px;
            height: auto;
            max-height: 72px;
            object-fit: contain;
            background: transparent;
            mix-blend-mode: normal;
            border-radius: 0;
        }

        .main-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2px;
        }

        .main-nav .nav-link {
            color: #ffffff !important;
            font-weight: 700;
            font-size: 14px;
            padding: 11px 13px !important;
            border-radius: 8px;
            transition: 0.25s ease;
            white-space: nowrap;
        }

        .main-nav .nav-link:hover {
            color: #ffffff !important;
            background: rgba(255, 255, 255, 0.12);
        }

        .chat-link {
            color: var(--tk-blue);
            font-weight: 700;
            white-space: nowrap;
        }

        .chat-link i {
            font-size: 18px;
        }

        .sign-in-btn {
            background: var(--tk-blue);
            color: #ffffff !important;
            padding: 11px 20px;
            border-radius: 7px;
            font-weight: 700;
            white-space: nowrap;
        }

        .sign-in-btn:hover {
            background: #090979;
            color: #ffffff !important;
        }

        .menu-btn {
            width: 42px;
            height: 42px;
            border-radius: 9px;
            border: 1px solid #dbe2ed;
            background: #ffffff;
            color: var(--tk-blue);
            font-size: 21px;
        }

        .menu-btn:hover {
            background: #f1f5ff;
        }


        /* =========================================================
           HERO
        ========================================================= */

        .hero-section {
            position: relative;
            min-height: 610px;
            background-image:
                linear-gradient(
                    rgba(12, 87, 105, 0.22),
                    rgba(3, 30, 72, 0.22)
                ),
                url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=2200&q=90");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            padding-top: 1px;
        }

        /* Compensates for the fixed/overlay header on the homepage so the Hero and
           search box keep their original visual position (header floats on top). */
        body.tk-home .hero-section {
            padding-top: 88px;
        }

        .hero-media-layer {
            position: absolute;
            inset: 0;
            overflow: hidden;
            z-index: 0;
        }

        .hero-slide-media {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity .7s ease;
        }

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

        .hero-media-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(rgba(12, 87, 105, 0.22), rgba(3, 30, 72, 0.22));
        }

        .hero-content {
            position: relative;
            z-index: 1;
            max-width: 1200px;
            margin: 0 auto;
            padding:
                75px 20px
                100px;
        }

        .hero-title {
            max-width: 650px;
            color: #ffffff;
            font-size: 55px;
            line-height: 1.05;
            font-weight: 800;
            margin-bottom: 18px;
            text-shadow:
                0 3px 15px rgba(0, 0, 0, 0.18);
        }

        .hero-subtitle {
            max-width: 680px;
            color: #ffffff;
            font-size: 19px;
            line-height: 1.6;
            margin-bottom: 40px;
        }


        /* =========================================================
           SEARCH BOX
        ========================================================= */

        .booking-wrapper {
            max-width: 1120px;
            margin:
                -105px auto 0;
            position: relative;
            z-index: 50;
        }

        .booking-card {
            background: #ffffff;
            border-radius: 18px;
            box-shadow:
                0 18px 45px rgba(0, 0, 0, 0.15);
            padding: 0;
        }

        .booking-tabs {
            display: flex;
            justify-content: center;
            gap: 5px;
            padding: 0;
            margin-top: -1px;
        }

        .booking-tab {
            min-width: 120px;
            border: 0;
            background: #ffffff;
            color: var(--tk-blue);
            font-weight: 700;
            padding: 18px 25px;
            border-radius:
                15px 15px 0 0;
            position: relative;
        }

        .booking-tab i {
            font-size: 19px;
            margin-right: 7px;
        }

        .booking-tab.active {
            color: var(--tk-blue);
        }

        .booking-tab.active::after {
            content: "";
            position: absolute;
            left: 18%;
            right: 18%;
            bottom: 0;
            height: 3px;
            background: var(--tk-yellow);
        }

        .booking-content {
            border-top: 1px solid #e7eaf0;
            padding: 25px 30px 28px;
        }

        .booking-field {
            border: 1px solid #d5dbe5;
            border-radius: 10px;
            min-height: 76px;
            padding: 12px 15px;
            background: #ffffff;
        }

        .booking-label {
            display: block;
            color: #334b77;
            font-size: 11px;
            text-transform: uppercase;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .booking-value {
            color: var(--tk-blue);
            font-size: 17px;
            font-weight: 700;
        }

        .booking-small {
            color: var(--tk-muted);
            font-size: 12px;
        }

        .booking-search-btn {
            height: 76px;
            width: 100%;
            border: 0;
            border-radius: 10px;
            background: var(--tk-blue);
            color: #ffffff;
            font-weight: 800;
            font-size: 15px;
        }

        .booking-search-btn:hover {
            background: #02035c;
        }

        .search-options {
            margin-top: 15px;
            display: flex;
            flex-wrap: wrap;
            gap: 18px;
            align-items: center;
        }

        .search-options strong {
            color: var(--tk-blue);
        }

        .search-options label {
            color: #59657a;
            font-size: 14px;
        }

        /* =========================================================
           CHECK-IN / CHECK-OUT RANGE CALENDAR (single calendar, no design change to booking box)
        ========================================================= */

        .tk-daterange-field {
            position: relative;
            cursor: pointer;
        }

        .tk-daterange-display {
            cursor: pointer;
        }

        .tk-daterange-calendar {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            z-index: 200;
            background: #ffffff;
            border: 1px solid #d5dbe5;
            border-radius: 12px;
            box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
            padding: 16px;
            width: 620px;
            max-width: 92vw;
        }

        .tk-cal-instruction {
            color: var(--tk-blue);
            font-weight: 700;
            font-size: 14px;
            margin-bottom: 12px;
            text-align: center;
        }

        .tk-cal-months {
            display: flex;
            gap: 24px;
        }

        .tk-cal-month {
            flex: 1;
            min-width: 0;
        }

        .tk-cal-month-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
            color: var(--tk-blue);
            font-weight: 700;
            font-size: 14px;
        }

        .tk-cal-nav {
            border: 0;
            background: transparent;
            color: var(--tk-blue);
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
            padding: 2px 6px;
        }

        .tk-cal-nav:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        .tk-cal-weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            color: var(--tk-muted);
            font-size: 11px;
            font-weight: 700;
            text-align: center;
            margin-bottom: 4px;
        }

        .tk-cal-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
        }

        .tk-cal-day {
            border: 0;
            background: transparent;
            border-radius: 6px;
            padding: 8px 0;
            font-size: 13px;
            color: var(--tk-text);
            cursor: pointer;
        }

        .tk-cal-day:hover:not(:disabled) {
            background: #eef3f8;
        }

        .tk-cal-day:disabled {
            color: #c3cad6;
            cursor: not-allowed;
        }

        .tk-cal-day.is-empty {
            visibility: hidden;
        }

        .tk-cal-day.is-in-range {
            background: rgba(7, 91, 216, 0.14);
            border-radius: 0;
        }

        .tk-cal-day.is-start,
        .tk-cal-day.is-end {
            background: var(--tk-blue);
            color: #ffffff;
            font-weight: 700;
        }

        @media (max-width: 576px) {
            .tk-daterange-calendar {
                width: 320px;
            }

            .tk-cal-months {
                gap: 0;
            }

            .tk-cal-month + .tk-cal-month {
                display: none;
            }
        }


        /* =========================================================
           PREVIOUS SEARCH
        ========================================================= */

        .previous-search {
            max-width: 1120px;
            margin: 28px auto 0;
        }

        .previous-title {
            color: var(--tk-blue);
            font-weight: 800;
            font-size: 18px;
        }

        .previous-card {
            display: inline-block;
            background: #ffffff;
            border-radius: 12px;
            padding: 15px 20px;
            min-width: 220px;
            box-shadow:
                0 5px 18px rgba(0, 0, 0, 0.08);
        }

        .previous-card strong {
            color: var(--tk-blue);
        }

        .previous-card span {
            color: #68758a;
            font-size: 13px;
        }


        /* =========================================================
           GENERAL SECTIONS
        ========================================================= */

        .main-container {
            max-width: 1120px;
            margin: 0 auto;
        }

        .section-block {
            padding: 65px 0;
        }

        .section-label {
            display: inline-block;
            color: var(--tk-blue-light);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 1.5px;
            margin-bottom: 7px;
        }

        .section-title {
            color: var(--tk-blue);
            font-size: 34px;
            font-weight: 800;
            margin-bottom: 8px;
        }

        .section-description {
            color: var(--tk-muted);
            font-size: 15px;
        }


        /* =========================================================
           EXISTING DESTINATIONS
        ========================================================= */

        .existing-destination-card {
            background: #ffffff;
            border-radius: 15px;
            padding: 25px;
            height: 100%;
            box-shadow:
                0 8px 25px rgba(8, 27, 80, 0.07);
            transition: 0.3s ease;
        }

        .existing-destination-card:hover {
            transform: translateY(-5px);
        }

        .existing-destination-card i {
            font-size: 35px;
            color: var(--tk-blue-light);
            margin-bottom: 15px;
        }

        .existing-destination-card h5 {
            color: var(--tk-blue);
            font-weight: 800;
        }

        .existing-destination-card p {
            color: var(--tk-muted);
            font-size: 14px;
        }

        /* Bangladesh destination cards: keep every image the same size. */
        .destination-card-image {
            padding: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .destination-img-wrap {
            position: relative;
            width: 100%;
            height: 220px;
            min-height: 220px;
            overflow: hidden;
            background: #e8eef7;
        }

        .destination-img,
        .destination-img-placeholder {
            display: block;
            width: 100%;
            height: 100%;
        }

        .destination-img {
            object-fit: cover;
            transition: transform .5s ease;
        }

        .destination-card-image:hover .destination-img {
            transform: scale(1.06);
        }

        .destination-img-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--tk-blue-light);
            background: linear-gradient(135deg, #eaf1ff, #dce8f8);
        }

        .destination-img-placeholder i {
            font-size: 42px !important;
            margin: 0 !important;
        }

        .destination-country {
            position: absolute;
            top: 14px;
            left: 14px;
            padding: 6px 11px;
            border-radius: 20px;
            background: rgba(3, 20, 76, .82);
            color: #ffffff;
            font-size: 12px;
            font-weight: 700;
        }

        .destination-card-content {
            flex: 1;
            padding: 22px 25px 25px;
        }

        .destination-card-content .destination-card-icon {
            display: block;
            font-size: 30px !important;
            margin: 0 0 12px !important;
        }

        .destination-card-content h5 {
            margin-bottom: 8px;
        }

        @media (max-width: 767px) {
            .destination-img-wrap {
                height: 190px;
                min-height: 190px;
            }
        }


        /* =========================================================
           POPULAR DESTINATIONS
        ========================================================= */

        .popular-destinations {
            background: #eef3f8;
        }

        .destination-card {
            display: block;
            background: #ffffff;
            border-radius: 17px;
            overflow: hidden;
            color: inherit;
            box-shadow:
                0 8px 25px rgba(8, 27, 80, 0.08);
            transition: 0.3s ease;
            height: 100%;
        }

        .destination-card:hover {
            transform: translateY(-7px);
            box-shadow:
                0 15px 35px rgba(8, 27, 80, 0.15);
        }

        .destination-image {
            height: 180px;
            overflow: hidden;
        }

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

        .destination-card:hover
        .destination-image img {
            transform: scale(1.08);
        }

        .destination-info {
            padding: 17px 18px;
        }

        .destination-info h5 {
            color: var(--tk-blue);
            font-size: 18px;
            font-weight: 800;
            margin-bottom: 4px;
        }

        .destination-info span {
            color: var(--tk-muted);
            font-size: 13px;
        }


        /* =========================================================
           HOT DEALS
        ========================================================= */

        .hot-deals-section {
            background: #eef3f8;
        }

        .deal-filter {
            display: flex;
            gap: 5px;
            background: #ffffff;
            border-radius: 30px;
            padding: 5px;
        }

        .deal-filter button {
            border: 0;
            background: transparent;
            padding: 7px 18px;
            border-radius: 20px;
            color: var(--tk-blue);
        }

        .deal-filter button.active {
            background: #edf3ff;
            color: var(--tk-blue-light);
        }

        .deal-card {
            background: #ffffff;
            border-radius: 12px;
            overflow: hidden;
            height: 100%;
            box-shadow:
                0 7px 20px rgba(8, 27, 80, 0.08);
        }

        a.deal-card {
            color: inherit;
            cursor: pointer;
            transition: transform .2s ease, box-shadow .2s ease;
        }

        a.deal-card:hover {
            color: inherit;
            transform: translateY(-3px);
            box-shadow: 0 10px 26px rgba(8, 27, 80, 0.14);
        }

        .deal-top {
            display: flex;
            min-height: 150px;
        }

        .deal-discount {
            width: 40%;
            background: var(--tk-blue);
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 15px;
        }

        .deal-discount strong {
            color: var(--tk-yellow);
            font-size: 27px;
        }

        .deal-info {
            width: 60%;
            padding: 22px;
        }

        .deal-info h5 {
            color: var(--tk-blue);
            font-weight: 800;
            font-size: 18px;
        }

        .deal-info p {
            color: var(--tk-muted);
            font-size: 13px;
        }

        .deal-footer {
            padding: 12px 18px 18px;
        }

        .deal-code {
            display: inline-block;
            background: #eef4ff;
            color: var(--tk-blue);
            border-radius: 6px;
            padding: 7px 12px;
            font-size: 12px;
        }


        /* =========================================================
           SPECIAL OFFERS
        ========================================================= */

        .special-offer-card {
            background: #ffffff;
            border-radius: 12px;
            overflow: hidden;
            height: 100%;
            box-shadow:
                0 8px 20px rgba(8, 27, 80, 0.08);
        }

        .offer-image {
            height: 190px;
            overflow: hidden;
        }

        .offer-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .offer-body {
            padding: 18px;
        }

        .offer-body h5 {
            color: var(--tk-blue);
            font-weight: 800;
            line-height: 1.3;
        }

        .offer-body p {
            color: var(--tk-muted);
            font-size: 14px;
        }

        .yellow-btn {
            display: inline-block;
            background: var(--tk-yellow);
            color: #06134e;
            padding: 10px 17px;
            border-radius: 7px;
            font-weight: 800;
        }

        .yellow-btn:hover {
            background: #ffcf22;
            color: #06134e;
        }


        /* =========================================================
           PROMOTIONAL BANNERS
        ========================================================= */

        .promo-banner {
            background: #ffffff;
            border-radius: 17px;
            min-height: 150px;
            overflow: hidden;
            position: relative;
            box-shadow:
                0 7px 20px rgba(8, 27, 80, 0.08);
        }

        .promo-banner img {
            width: 100%;
            height: 100%;
            min-height: 150px;
            object-fit: cover;
        }

        .promo-content {
            position: absolute;
            left: 30px;
            top: 50%;
            transform: translateY(-50%);
        }

        .promo-content h4 {
            color: var(--tk-blue);
            font-weight: 800;
        }

        .promo-content p {
            color: var(--tk-muted);
            margin: 0;
        }


        /* =========================================================
           FOOTER
        ========================================================= */

        .travel-footer {
            background: #257e81;
            color: #ffffff;
            padding:
                60px 0 25px;
        }

        .travel-footer h5 {
            color: #ffffff;
            font-weight: 800;
            margin-bottom: 20px;
        }

        .travel-footer p,
        .travel-footer li,
        .travel-footer a {
            color: #e4e8ff;
            font-size: 14px;
        }

        .travel-footer ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .travel-footer li {
            margin-bottom: 10px;
        }

        .travel-footer a:hover {
            color: var(--tk-yellow);
        }

        .footer-logo,
        .footer-logo-box {
            width: auto;
            background: #ffffff;
            border-radius: 8px;
            padding: 8px 10px;
            margin-bottom: 15px;
            mix-blend-mode: normal;
            filter: none;
        }

        .footer-logo-box {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .footer-logo-box img {
            width: 160px;
            height: auto;
            max-height: 88px;
            object-fit: contain;
            background: #ffffff;
            mix-blend-mode: normal;
            filter: none;
        }

        .social-links {
            display: flex;
            gap: 10px;
            margin-top: 18px;
        }

        .social-links a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255,255,255,0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 18px;
            transition: 0.25s ease;
        }

        .social-links a:hover {
            background: var(--tk-yellow);
            color: var(--tk-blue);
        }

        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.2);
            margin-top: 45px;
            padding-top: 22px;
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }


        /* =========================================================
           MOBILE
        ========================================================= */

        @media (max-width: 1199px) {

            .main-nav .nav-link {
                font-size: 12px;
                padding-left: 7px !important;
                padding-right: 7px !important;
            }

            .travel-logo img {
                width: 130px;
            }

        }


        @media (max-width: 991px) {

            .travel-navbar {
                min-height: 70px;
            }

            .travel-logo img {
                width: 135px;
            }

            .travel-header .navbar-collapse {
                background: var(--tk-blue);
                border-radius: 14px;
                margin-top: 12px;
                padding: 10px 18px 18px;
                box-shadow: 0 16px 32px rgba(7, 27, 120, 0.28);
            }

            .main-nav {
                display: block;
                margin-top: 5px;
            }

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

            .hero-section {
                min-height: 580px;
            }

            .hero-content {
                padding-top: 55px;
            }

            .hero-title {
                font-size: 42px;
            }

            .booking-wrapper {
                margin-top: -85px;
                padding: 0 15px;
            }

        }


        @media (max-width: 767px) {

            .hero-section {
                min-height: 400px;
                background-position: center;
            }

            .hero-content {
                padding:
                    35px 20px 70px;
            }

            .hero-title {
                font-size: 36px;
            }

            .hero-subtitle {
                font-size: 15px;
            }

            .booking-wrapper {
                margin-top: -55px;
            }

            .booking-tabs {
                overflow-x: auto;
                justify-content: flex-start;
            }

            .booking-tab {
                min-width: 105px;
                padding: 15px 12px;
                font-size: 13px;
            }

            .booking-content {
                padding: 18px;
            }

            .section-block {
                padding: 45px 15px;
            }

            .section-title {
                font-size: 29px;
            }

            .deal-filter {
                overflow-x: auto;
            }

            .deal-filter button {
                white-space: nowrap;
            }

            .footer-bottom {
                flex-direction: column;
            }

        }

/* =========================================================
   TRAVEL GUIDE
========================================================= */

.travel-guide-section {

    padding: 28px 0 35px;

}


/* =========================================================
   THREE CARDS
========================================================= */

.travel-guide-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    margin-bottom: 35px;

}


.travel-guide-card {

    height: 132px;

    display: flex;

    overflow: hidden;

    background: #477f83;

    border-radius: 12px;

    box-shadow: 0 5px 18px rgba(0,0,0,.06);

}

a.travel-guide-card {

    display: flex;

    text-decoration: none;

    color: inherit;

    cursor: pointer;

}

a.travel-guide-card:hover,
a.travel-guide-card:focus,
a.travel-guide-card:visited {

    text-decoration: none;

    color: inherit;

}

a.travel-guide-card:focus-visible {

    outline: 3px solid #ffc400;

    outline-offset: -3px;

}


.travel-guide-card > img {

    width: 125px;

    height: 132px;

    object-fit: cover;

    flex-shrink: 0;

}


.travel-guide-content {

    padding: 14px 16px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.travel-guide-content h4 {

    margin: 0 0 12px;

    color: #062d68;

    font-size: 20px;

    line-height: 1.4;

    font-weight: 700;

}


/* =========================================================
   YELLOW BUTTON
========================================================= */

.travel-guide-btn {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 3px;

    padding: 5px 11px;

    background: #ffc400;

    color: #111;

    border-radius: 4px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

}


.travel-guide-btn:hover {

    background: #ffb300;

    color: #111;

}


/* =========================================================
   LARGE BANNER
========================================================= */

.travel-promo-banner {

    position: relative;

    width: 100%;

    height: 170px;

    overflow: hidden;

    border-radius: 14px;

    background: #477f83;

}

a.travel-promo-banner {

    display: block;

    text-decoration: none;

    color: inherit;

    cursor: pointer;

}

a.travel-promo-banner:hover,
a.travel-promo-banner:focus,
a.travel-promo-banner:visited {

    text-decoration: none;

    color: inherit;

}

a.travel-promo-banner:focus-visible {

    outline: 3px solid #ffc400;

    outline-offset: -3px;

}


.travel-promo-banner > img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}


/* =========================================================
   BANNER CONTENT
========================================================= */

.travel-promo-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

}


.travel-promo-title {

    color: #160575;

    font-size: clamp(42px, 5vw, 68px);

    font-weight: 800;

    line-height: 1;

    text-align: center;

    text-shadow: 0 3px 10px rgba(0,0,0,.5);

}


/* =========================================================
   WATCH BUTTON
========================================================= */

.travel-promo-button {

    position: absolute;

    right: 7%;

    top: 50%;

    transform: translateY(-50%);

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 7px 9px 7px 18px;

    color: #120fbe;

    background: rgba(240, 186, 9, 0.96);

    border: 1px solid rgba(255,255,255,.5);

    border-radius: 30px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 600;

}


.travel-promo-button:hover {

    color: #fff;

    background: rgba(20,60,90,.95);

}


.travel-promo-button i {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.5);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .travel-guide-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .travel-guide-section {

        padding: 20px 0 30px;

    }


    .travel-guide-grid {

        grid-template-columns: 1fr;

        gap: 14px;

    }


    .travel-guide-card {

        height: 115px;

    }


    .travel-guide-card > img {

        width: 110px;

        height: 115px;

    }


    .travel-guide-content h4 {

        font-size: 17px;

    }


    .travel-promo-banner {

        height: 145px;

        border-radius: 10px;

    }


    .travel-promo-title {

        font-size: 38px;

    }


    .travel-promo-button {

        right: 12px;

        font-size: 12px;

        padding: 5px 7px 5px 12px;

        gap: 6px;

    }


    .travel-promo-button i {

        width: 27px;

        height: 27px;

    }

}

.dynamic-hotels-section {
    background: #ffffff;
}


.dynamic-hotels-view-all {

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 10px 17px;

    border-radius: 8px;

    background: #eef4ff;

    color: var(--tk-blue-light);

    font-size: 14px;

    font-weight: 700;

    transition: all .25s ease;
}


.dynamic-hotels-view-all:hover {

    background: var(--tk-blue-light);

    color: #ffffff;

    transform: translateY(-2px);
}


/* =========================================================
   HOTEL CARD
========================================================= */

.dynamic-hotel-card {

    height: 100%;

    background: #ffffff;

    border: 1px solid #e5eaf1;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 7px 24px rgba(8, 27, 80, 0.07);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.dynamic-hotel-card-link {

    display: block;

    height: 100%;

    display: flex;

    flex-direction: column;

    color: inherit;

    text-decoration: none;

}


.dynamic-hotel-card-link:focus-visible {

    outline: 3px solid var(--tk-yellow);

    outline-offset: -3px;

}


.dynamic-hotel-card:hover {

    transform: translateY(-7px);

    box-shadow:
        0 15px 35px rgba(8, 27, 80, 0.14);
}


/* =========================================================
   HOTEL IMAGE
========================================================= */

.dynamic-hotel-image {

    position: relative;

    width: 100%;

    height: 220px;

    overflow: hidden;

    background: #eef3f8;
}


.dynamic-hotel-image > img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

    transition: transform .5s ease;
}


.dynamic-hotel-card:hover
.dynamic-hotel-image > img {

    transform: scale(1.07);
}


/* =========================================================
   NO IMAGE
========================================================= */

.dynamic-hotel-no-image {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: #8b98aa;
}


.dynamic-hotel-no-image i {

    font-size: 42px;

}


.dynamic-hotel-no-image span {

    font-size: 13px;

    font-weight: 600;

}


/* =========================================================
   FEATURED
========================================================= */

.dynamic-hotel-featured {

    position: absolute;

    top: 12px;

    left: 12px;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 6px 10px;

    background: #ffc400;

    color: #071b55;

    border-radius: 6px;

    font-size: 11px;

    font-weight: 800;
}


.dynamic-hotel-featured i {

    font-size: 10px;

}


/* =========================================================
   STARS
========================================================= */

.dynamic-hotel-stars {

    position: absolute;

    right: 12px;

    top: 12px;

    display: inline-flex;

    gap: 2px;

    padding: 6px 8px;

    background: rgba(0,0,0,.55);

    border-radius: 6px;

    color: #ffc400;

    font-size: 11px;
}


/* =========================================================
   BODY
========================================================= */

.dynamic-hotel-body {

    padding: 19px;

    flex: 1;

    display: flex;

    flex-direction: column;

}


.dynamic-hotel-name {

    margin: 0 0 7px;

    color: var(--tk-blue);

    font-size: 19px;

    line-height: 1.35;

    font-weight: 800;
}


.dynamic-hotel-location {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 11px;

    color: #68758a;

    font-size: 13px;
}


.dynamic-hotel-location i {

    color: var(--tk-blue-light);

}


/* =========================================================
   RATING
========================================================= */

.dynamic-hotel-rating {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 11px;
}


.dynamic-rating-score {

    padding: 5px 7px;

    background: var(--tk-blue);

    color: #ffffff;

    border-radius: 5px;

    font-size: 12px;

    font-weight: 800;
}


.dynamic-rating-text {

    color: #253b66;

    font-size: 12px;

    font-weight: 700;
}


.dynamic-review-count {

    color: #78869a;

    font-size: 11px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.dynamic-hotel-description {

    min-height: 42px;

    margin: 0 0 11px;

    color: #68758a;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   ROOMS
========================================================= */

.dynamic-hotel-rooms {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 15px;

    color: #198754;

    font-size: 12px;

    font-weight: 700;
}


.dynamic-hotel-rooms i {

    font-size: 14px;

}


/* =========================================================
   BUTTON
========================================================= */

.dynamic-hotel-button {

    display: flex;

    margin-top: auto;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: 100%;

    padding: 10px 14px;

    border-radius: 8px;

    background: var(--tk-blue);

    color: #ffffff;

    font-size: 13px;

    font-weight: 800;

    transition: all .25s ease;
}


.dynamic-hotel-button:hover {

    background: var(--tk-blue-light);

    color: #ffffff;

}


.dynamic-hotel-button i {

    transition: transform .25s ease;
}


.dynamic-hotel-button:hover i {

    transform: translateX(4px);
}


/* =========================================================
   EMPTY STATE
========================================================= */

.dynamic-hotels-empty {

    padding: 55px 20px;

    text-align: center;

    background: #f7f9fc;

    border: 1px dashed #ccd5e3;

    border-radius: 16px;
}


.dynamic-empty-icon {

    width: 65px;

    height: 65px;

    margin: 0 auto 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #eaf1ff;

    color: var(--tk-blue-light);

    font-size: 28px;
}


.dynamic-hotels-empty h4 {

    margin-bottom: 7px;

    color: var(--tk-blue);

    font-weight: 800;
}


.dynamic-hotels-empty p {

    margin: 0;

    color: #68758a;

    font-size: 14px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .dynamic-hotels-section {

        padding-top: 45px;

        padding-bottom: 45px;

    }


    .dynamic-hotel-image {

        height: 210px;

    }


    .dynamic-hotel-body {

        padding: 17px;

    }

}

.hidden-destination {

    display: none;

}


/* যখন show হবে */

.hidden-destination.show-destination {

    display: block;

    animation: destinationFadeIn 0.5s ease both;

}


@keyframes destinationFadeIn {

    from {

        opacity: 0;

        transform: translateY(25px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =========================================================
   MORE DESTINATIONS BUTTON
========================================================= */

.more-destinations-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-width: 210px;

    padding: 13px 24px;

    border: none;

    border-radius: 10px;

    background: #075fd8;

    color: #ffffff;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    box-shadow: 0 8px 20px rgba(7, 95, 216, 0.20);

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.more-destinations-btn:hover {

    background: #064db0;

    transform: translateY(-2px);

    box-shadow: 0 12px 25px rgba(7, 95, 216, 0.28);

}


.more-destinations-btn:active {

    transform: translateY(0);

}


.more-destinations-btn i {

    font-size: 14px;

    transition: transform 0.3s ease;

}


/* Show Less অবস্থায় icon rotate হবে */

.more-destinations-btn.expanded i {

    transform: rotate(180deg);

}


/* =========================================================
   MOBILE
========================================================= */

/* =========================================================
   EXPLORE THE WORLD DESTINATIONS
========================================================= */

.world-destinations-section {
    overflow-x: hidden;
}

.world-destinations-section #worldDestinationGrid {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.world-hidden-destination {
    display: none;
}

.world-hidden-destination.world-show-destination {
    display: block;
    animation: destinationFadeIn 0.45s ease both;
}

.world-more-destinations-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 210px;
    padding: 13px 24px;
    border: none;
    border-radius: 10px;
    background: #075fd8;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(7, 95, 216, 0.20);
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.world-more-destinations-btn:hover {
    background: #064db0;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(7, 95, 216, 0.28);
}

.world-more-destinations-btn:active {
    transform: translateY(0);
}

.world-more-destinations-btn i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.world-more-destinations-btn.expanded i {
    transform: rotate(180deg);
}

/* RESTORED HOMEPAGE IMAGE SECTION STYLES */

.travel-promo-review-section {

    background: #eef3f8;

    padding: 55px 0;

}


/* =========================================================
   LEFT COLUMN
========================================================= */

.left-promo-column {

    height: 100%;

    display: flex;

    flex-direction: column;

    gap: 24px;

}


/* =========================================================
   TRAVEL WITH CONFIDENCE
========================================================= */

.confidence-card {

    position: relative;

    height: 185px;

    border-radius: 18px;

    overflow: hidden;

    background: #ffffff;

    box-shadow: 0 10px 30px rgba(0, 35, 90, 0.08);

}


.confidence-bg {

    position: absolute;

    width: 100%;

    height: 100%;

    object-fit: cover;

    inset: 0;

}


.confidence-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.98) 0%,
            rgba(255,255,255,0.90) 48%,
            rgba(255,255,255,0.10) 100%
        );

}


.confidence-content {

    position: relative;

    z-index: 2;

    padding: 32px;

}


.confidence-label {

    display: inline-block;

    color: #1168df;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;

    margin-bottom: 7px;

}


.confidence-content h3 {

    margin: 0 0 7px;

    color: #082d87;

    font-size: 27px;

    font-weight: 800;

}


.confidence-content p {

    margin: 0;

    color: #557092;

    font-size: 16px;

}


/* =========================================================
   CUSTOMER REVIEW CARD
========================================================= */

.customer-review-card {

    position: relative;

    flex: 1;

    min-height: 320px;

    background: #7a7f80;

    border-radius: 18px;

    padding: 30px;

    box-shadow: 0 10px 30px rgba(0, 35, 90, 0.08);

    overflow: hidden;

}


/* HEADER */

.review-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 15px;

}


.review-label {

    display: block;

    color: #1168df;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.6px;

    margin-bottom: 6px;

}


.review-header h3 {

    margin: 0;

    color: #082d87;

    font-size: 25px;

    font-weight: 800;

}


.review-top-stars {

    color: #ffb000;

    font-size: 18px;

    white-space: nowrap;

    letter-spacing: 1px;

}


/* =========================================================
   REVIEW SLIDER
========================================================= */

.review-slider {

    position: relative;

    min-height: 190px;

    margin-top: 22px;

}


.customer-review {

    display: none;

    animation: reviewFade 0.45s ease;

}


.customer-review.active {

    display: block;

}


@keyframes reviewFade {

    from {

        opacity: 0;

        transform: translateX(12px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}


/* CUSTOMER */

.customer-info {

    display: flex;

    align-items: center;

    gap: 14px;

}


.customer-photo {

    width: 54px;

    height: 54px;

    border-radius: 50%;

    object-fit: cover;

    border: 3px solid #ffffff;

    box-shadow: 0 4px 12px rgba(0,0,0,0.12);

}

.customer-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 800;
    font-size: 18px;
    flex-shrink: 0;
}


.customer-info h5 {

    margin: 0 0 3px;

    color: #111827;

    font-size: 25px;

    font-weight: 800;

}


.customer-info span {

    color: #ffb000;

    font-size: 13px;

}


/* STARS */

.customer-stars {

    color: #ffb000;

    font-size: 17px;

    margin-top: 18px;

    letter-spacing: 2px;

}


/* REVIEW TEXT */

.customer-message {

    margin: 13px 0 0;

    color: #0a3f99;

    font-size: 15px;

    line-height: 1.7;

}


/* =========================================================
   BOTTOM CONTROLS
========================================================= */

.review-bottom {

    position: absolute;

    left: 30px;

    right: 30px;

    bottom: 22px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.review-dots {

    display: flex;

    align-items: center;

    gap: 7px;

}


.review-dot {

    display: block;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #d3dce9;

    cursor: pointer;

    transition: all 0.25s ease;

}


.review-dot.active {

    width: 24px;

    border-radius: 20px;

    background: #1268df;

}


.review-arrow {

    width: 30px;

    height: 30px;

    border: 0;

    border-radius: 50%;

    background: #f0f5fb;

    color: #0a3f99;

    font-size: 22px;

    line-height: 1;

    cursor: pointer;

    transition: 0.25s ease;

}


.review-arrow:hover {

    background: #1268df;

    color: #ffffff;

}


/* =========================================================
   RIGHT DISCOVER CARD
========================================================= */

.discover-card {

    position: relative;

    width: 100%;

    height: 529px;

    border-radius: 18px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0, 35, 90, 0.08);

}


.discover-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}


.discover-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.02) 20%,
            rgba(0,0,0,0.55) 100%
        );

}


.discover-content {

    position: absolute;

    left: 30px;

    bottom: 30px;

    z-index: 2;

    color: #ffffff;

}


.discover-content span {

    display: block;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;

    margin-bottom: 7px;

}


.discover-content h3 {

    margin: 0 0 5px;

    font-size: 31px;

    font-weight: 800;

}


.discover-content p {

    margin: 0 0 17px;

    font-size: 16px;

}


.discover-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 17px;

    border-radius: 8px;

    background: #ffffff;

    color: #08358e;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition: 0.25s ease;

}


.discover-btn:hover {

    background: #ffc400;

    color: #071f67;

    transform: translateY(-2px);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .confidence-card {

        height: 190px;

    }

    .customer-review-card {

        min-height: 320px;

    }

    .discover-card {

        height: 520px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .travel-promo-review-section {

        padding: 35px 0;

    }


    .confidence-card {

        height: 180px;

    }


    .confidence-content {

        padding: 25px;

    }


    .confidence-content h3 {

        font-size: 23px;

    }


    .customer-review-card {

        min-height: 350px;

        padding: 24px;

    }


    .review-header h3 {

        font-size: 22px;

    }


    .review-top-stars {

        font-size: 14px;

    }


    .review-bottom {

        left: 24px;

        right: 24px;

    }


    .discover-card {

        height: 400px;

    }


    .discover-content {

        left: 24px;

        bottom: 24px;

    }


    .discover-content h3 {

        font-size: 27px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .review-top-stars {

        display: none;

    }


    .confidence-content h3 {

        font-size: 21px;

    }


    .customer-message {

        font-size: 14px;

    }


    .discover-card {

        height: 350px;

    }

}

/* =========================================================
   TRAVEL KING — TRUSTED PARTNERS SECTION
========================================================= */

.tk-partners-section {

    padding: 42px 0 45px;

    background: #ffffff;

}


.tk-partners-container {

    width: 100%;

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 20px;

}


/* =========================================================
   HEADER
========================================================= */

.tk-partners-heading {

    text-align: center;

    margin-bottom: 28px;

}


.tk-partners-label {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 9px;

    color: #075fd8;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.tk-partners-label i {

    font-size: 14px;

}


.tk-partners-heading h2 {

    margin: 0 0 8px;

    color: #062d68;

    font-size: 30px;

    line-height: 1.2;

    font-weight: 800;

}


.tk-partners-heading p {

    max-width: 700px;

    margin: 0 auto;

    color: #64748b;

    font-size: 14px;

    line-height: 1.6;

}


/* =========================================================
   SLIDER
========================================================= */

.tk-partners-slider {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 7px 0 16px;

}


/* LEFT FADE */

.tk-partners-slider::before {

    content: "";

    position: absolute;

    z-index: 5;

    left: 0;

    top: 0;

    width: 85px;

    height: 100%;

    pointer-events: none;

    background:
        linear-gradient(
            to right,
            #ffffff,
            rgba(255,255,255,0)
        );

}


/* RIGHT FADE */

.tk-partners-slider::after {

    content: "";

    position: absolute;

    z-index: 5;

    right: 0;

    top: 0;

    width: 85px;

    height: 100%;

    pointer-events: none;

    background:
        linear-gradient(
            to left,
            #ffffff,
            rgba(255,255,255,0)
        );

}


/* =========================================================
   TRACK
========================================================= */

.tk-partners-track {

    display: flex;

    align-items: center;

    width: max-content;

    gap: 18px;

    animation:
        tkPartnersInfiniteSlide
        32s
        linear
        infinite;

}


.tk-partners-slider:hover
.tk-partners-track {

    animation-play-state: paused;

}


/* =========================================================
   PARTNER CARD
========================================================= */

.tk-partner-item {

    width: 175px;

    min-width: 175px;

    height: 125px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    padding: 13px;

    border: 1px solid #e6edf5;

    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 6px 20px
        rgba(15, 55, 100, .06);

    transition: .25s ease;

}


.tk-partner-item:hover {

    transform:
        translateY(-4px);

    border-color:
        #c9dbf5;

    box-shadow:
        0 14px 30px
        rgba(15, 55, 100, .12);

}


/* =========================================================
   PLACEHOLDER LOGO
========================================================= */

.tk-partner-logo {

    width: 135px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.tk-partner-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


.tk-placeholder-logo {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #edf5ff,
            #f6faff
        );

    color: #075fd8;

    font-size: 25px;

}


/* =========================================================
   PARTNER NAME
========================================================= */

.tk-partner-item strong {

    color: #062d68;

    font-size: 11px;

    font-weight: 800;

    text-align: center;

}


.tk-partner-item span {

    color: #7a899b;

    font-size: 9px;

    font-weight: 500;

    text-align: center;

}


/* =========================================================
   TRUST MESSAGE
========================================================= */

.tk-partners-trust {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 13px;

    color: #6b7c91;

    font-size: 11px;

}


.tk-partners-trust i {

    color: #1ca65c;

    font-size: 14px;

}


/* =========================================================
   INFINITE SLIDE
========================================================= */

@keyframes tkPartnersInfiniteSlide {

    0% {

        transform:
            translateX(0);

    }

    100% {

        transform:
            translateX(
                calc(-50% - 9px)
            );

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .tk-partners-heading h2 {

        font-size: 27px;

    }


    .tk-partner-item {

        width: 160px;

        min-width: 160px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .tk-partners-section {

        padding: 32px 0 35px;

    }


    .tk-partners-container {

        padding: 0 14px;

    }


    .tk-partners-heading {

        margin-bottom: 20px;

    }


    .tk-partners-heading h2 {

        font-size: 24px;

    }


    .tk-partners-heading p {

        font-size: 13px;

    }


    .tk-partner-item {

        width: 140px;

        min-width: 140px;

        height: 105px;

        border-radius: 13px;

    }


    .tk-partner-logo {

        width: 110px;

        height: 50px;

    }


    .tk-placeholder-logo {

        width: 47px;

        height: 47px;

        font-size: 21px;

    }


    .tk-partners-trust {

        font-size: 10px;

        text-align: center;

    }

}

/* =========================================================
   TRAVEL KING PREMIUM APP BANNER
========================================================= */

.tk-app-promo {

    padding: 40px 0 45px;

}


.tk-app-container {

    width: 100%;

    max-width: 1280px;

    margin: auto;

    padding: 0 15px;

}


.tk-app-banner {

    position: relative;

    min-height: 390px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 45px 65px;

    border-radius: 28px;

    background:
        linear-gradient(
            120deg,
            #031d49 0%,
            #064cae 48%,
            #0787dc 100%
        );

    box-shadow:
        0 22px 55px rgba(0, 55, 130, .22);

}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.tk-app-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


.tk-app-glow-1 {

    width: 450px;

    height: 450px;

    right: 120px;

    top: -280px;

    background:
        rgba(255,255,255,.08);

}


.tk-app-glow-2 {

    width: 350px;

    height: 350px;

    left: -200px;

    bottom: -250px;

    background:
        rgba(255,255,255,.06);

}


/* =========================================================
   CONTENT
========================================================= */

.tk-app-content {

    position: relative;

    z-index: 3;

    max-width: 610px;

}


.tk-app-mini-title {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 12px;

    color: rgba(255,255,255,.85);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

}


.tk-app-mini-title i {

    color: #ffd23f;

}


/* =========================================================
   BIG APP TITLE
========================================================= */

.tk-app-big-title {

    display: flex;

    flex-direction: column;

    line-height: .88;

    margin-bottom: 20px;

}


.tk-app-big-title span {

    color: #ffffff;

    font-size: clamp(28px, 4vw, 42px);

    font-weight: 700;

    letter-spacing: 1px;

}


.tk-app-big-title strong {

    display: block;

    margin-top: 4px;

    color: #ffd23f;

    font-size: clamp(65px, 8vw, 105px);

    line-height: .85;

    font-weight: 900;

    letter-spacing: -2px;

    text-shadow:
        0 5px 20px rgba(0,0,0,.18);

}


/* =========================================================
   DESCRIPTION
========================================================= */

.tk-app-description {

    max-width: 560px;

    margin: 0 0 18px;

    color: rgba(255,255,255,.88);

    font-size: 16px;

    line-height: 1.6;

}


/* =========================================================
   FEATURES
========================================================= */

.tk-app-feature-list {

    display: flex;

    flex-wrap: wrap;

    gap: 14px 22px;

    margin-bottom: 23px;

}


.tk-app-feature-list span {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #ffffff;

    font-size: 13px;

    font-weight: 600;

}


.tk-app-feature-list i {

    color: #ffd23f;

}


/* =========================================================
   BUTTONS
========================================================= */

.tk-app-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

}


.tk-install-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-width: 165px;

    padding: 13px 20px;

    border: none;

    border-radius: 10px;

    background: #ffd23f;

    color: #102c56;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 7px 18px rgba(0,0,0,.15);

    transition: .25s ease;

}


.tk-install-button:hover {

    background: #ffe070;

    transform: translateY(-2px);

}


.tk-learn-button {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 12px 18px;

    border: 1px solid rgba(255,255,255,.5);

    border-radius: 10px;

    background: rgba(255,255,255,.08);

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition: .25s ease;

}


.tk-learn-button:hover {

    color: #ffffff;

    background: rgba(255,255,255,.16);

}


/* =========================================================
   AVAILABLE TEXT
========================================================= */

.tk-app-available {

    margin-top: 15px;

    color: rgba(255,255,255,.68);

    font-size: 11px;

}


.tk-app-available i {

    margin-right: 4px;

}


/* =========================================================
   PHONE AREA
========================================================= */

.tk-app-phone-area {

    position: relative;

    z-index: 3;

    width: 390px;

    min-width: 390px;

    height: 350px;

    display: flex;

    justify-content: center;

    align-items: center;

}


/* =========================================================
   PHONE
========================================================= */

.tk-phone {

    position: relative;

    width: 190px;

    height: 355px;

    padding: 7px;

    border-radius: 30px;

    background: #101318;

    transform:
        rotate(5deg);

    box-shadow:
        0 25px 50px rgba(0,0,0,.42);

}


.tk-phone-speaker {

    position: absolute;

    z-index: 5;

    top: 12px;

    left: 50%;

    transform: translateX(-50%);

    width: 70px;

    height: 20px;

    border-radius: 20px;

    background: #101318;

}


.tk-phone-screen {

    width: 100%;

    height: 100%;

    overflow: hidden;

    padding: 38px 12px 12px;

    border-radius: 24px;

    background:
        linear-gradient(
            180deg,
            #f7fbff,
            #ffffff
        );

}


/* PHONE HEADER */

.tk-phone-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #062d68;

    font-size: 8px;

    font-weight: 800;

}


/* PHONE LOGO */

.tk-phone-logo {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 13px auto 8px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #075fd8,
            #08a0ef
        );

    color: #ffffff;

    font-size: 21px;

    box-shadow:
        0 7px 16px rgba(7,95,216,.25);

}


.tk-phone-screen h3 {

    margin: 0;

    text-align: center;

    color: #062d68;

    font-size: 17px;

    font-weight: 900;

}


.tk-phone-screen > p {

    margin: 4px 0 13px;

    text-align: center;

    color: #7b8795;

    font-size: 8px;

}


/* PHONE SEARCH */

.tk-phone-search {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 9px;

    margin-bottom: 12px;

    border-radius: 9px;

    background: #ffffff;

    box-shadow:
        0 3px 12px rgba(0,0,0,.07);

    color: #8a94a1;

    font-size: 7px;

}


.tk-phone-search i {

    color: #075fd8;

}


/* PHONE SERVICES */

.tk-phone-services {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 5px;

}


.tk-phone-services div {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    padding: 7px 2px;

    border-radius: 7px;

    background: #f3f7fc;

    color: #062d68;

    font-size: 6px;

    font-weight: 700;

}


.tk-phone-services i {

    color: #075fd8;

    font-size: 12px;

}


/* PHONE OFFER */

.tk-phone-offer {

    display: flex;

    flex-direction: column;

    margin-top: 10px;

    padding: 11px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #075fd8,
            #08a0ef
        );

    color: #ffffff;

}


.tk-phone-offer small {

    font-size: 5px;

    font-weight: 800;

    letter-spacing: 1px;

}


.tk-phone-offer strong {

    margin-top: 3px;

    font-size: 11px;

}


.tk-phone-offer span {

    margin-top: 3px;

    font-size: 6px;

    opacity: .85;

}


/* =========================================================
   FLOATING CARDS
========================================================= */

.tk-floating-card {

    position: absolute;

    z-index: 6;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 9px 12px;

    border-radius: 12px;

    background: rgba(255,255,255,.96);

    box-shadow:
        0 12px 28px rgba(0,0,0,.20);

}


.tk-floating-card > i {

    width: 31px;

    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background: #e9f3ff;

    color: #075fd8;

    font-size: 14px;

}


.tk-floating-card div {

    display: flex;

    flex-direction: column;

}


.tk-floating-card small {

    color: #7b8795;

    font-size: 8px;

}


.tk-floating-card strong {

    color: #062d68;

    font-size: 9px;

}


.tk-flight-card {

    top: 30px;

    left: 5px;

    transform: rotate(-4deg);

}


.tk-hotel-card {

    right: 0;

    top: 85px;

    transform: rotate(4deg);

}


.tk-tour-card {

    bottom: 25px;

    left: 5px;

    transform: rotate(-4deg);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .tk-app-banner {

        padding: 40px;

    }


    .tk-app-phone-area {

        width: 300px;

        min-width: 300px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .tk-app-promo {

        padding: 25px 0 30px;

    }


    .tk-app-banner {

        display: block;

        min-height: auto;

        padding: 32px 22px 25px;

        border-radius: 20px;

        text-align: center;

    }


    .tk-app-content {

        max-width: 100%;

    }


    .tk-app-mini-title {

        justify-content: center;

    }


    .tk-app-big-title {

        align-items: center;

    }


    .tk-app-big-title strong {

        font-size: 75px;

    }


    .tk-app-description {

        font-size: 14px;

    }


    .tk-app-feature-list {

        justify-content: center;

        gap: 9px 14px;

    }


    .tk-app-actions {

        justify-content: center;

    }


    .tk-app-available {

        margin-bottom: 10px;

    }


    .tk-app-phone-area {

        width: 100%;

        min-width: 100%;

        height: 330px;

        margin-top: 15px;

    }


    .tk-phone {

        width: 170px;

        height: 315px;

    }


    .tk-flight-card {

        left: 5%;

    }


    .tk-hotel-card {

        right: 3%;

    }


    .tk-tour-card {

        left: 5%;

    }

}

/* Equal-height promo cards: the right card matches both left cards together. */
@media (min-width: 992px) {
    .travel-promo-review-section .row > .col-lg-6 {
        display: flex;
    }

    .travel-promo-review-section .left-promo-column,
    .travel-promo-review-section .discover-card {
        width: 100%;
        height: 100%;
    }

    .travel-promo-review-section .discover-card {
        min-height: 0;
    }
}


/* MyNzTrip-style booking controls; the existing booking wrapper position is unchanged. */
.booking-search-panel[hidden] { display: none !important; }
.flight-search-panel { padding-top: 18px; }
.flight-search-options { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.flight-trip-types, .flight-preferences { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.flight-trip-types label { color: #59657a; font-size: 14px; font-weight: 600; cursor: pointer; }
.flight-trip-types input { accent-color: var(--tk-blue); }
.flight-trip-types .is-unavailable { opacity: .55; cursor: not-allowed; }
.flight-preferences select { border: 0; background: transparent; color: #334b77; font-weight: 700; padding: 5px 22px 5px 4px; }
.flight-search-grid { display: grid; grid-template-columns: minmax(180px, 1.35fr) 34px minmax(180px, 1.35fr) minmax(145px, .9fr) minmax(190px, 1.15fr) minmax(125px, .8fr); gap: 10px; align-items: stretch; }
.flight-search-grid.has-return { grid-template-columns: minmax(170px, 1.25fr) 34px minmax(170px, 1.25fr) minmax(135px, .85fr) minmax(135px, .85fr) minmax(180px, 1.1fr) minmax(115px, .75fr); }
.flight-swap { width: 34px; height: 34px; align-self: center; border: 1px solid #d5dbe5; border-radius: 50%; background: #fff; color: var(--tk-blue); }
.flight-swap:hover { background: #f4f6fb; }
.flight-traveller-inputs { display: flex; gap: 8px; }
.flight-traveller-inputs label { display: grid; grid-template-columns: 34px auto; align-items: center; gap: 3px; font-size: 10px; color: #59657a; }
.flight-traveller-inputs input { width: 34px; border: 0; color: var(--tk-blue); font-weight: 700; padding: 0; }
.booking-tab[data-coming-soon] { opacity: .72; }

@media (max-width: 1199px) {
    .flight-search-grid, .flight-search-grid.has-return { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .flight-swap { display: none; }
}
@media (max-width: 767px) {
    .flight-search-options { align-items: flex-start; flex-direction: column; }
    .flight-search-grid, .flight-search-grid.has-return { grid-template-columns: 1fr; }
    .flight-traveller-inputs { justify-content: space-between; }
}


/* Complete MyNzTrip-style hotel controls; booking-wrapper position remains unchanged. */
.mynz-hotel-search { position: relative; }
.mynz-hotel-main-row { display: grid; grid-template-columns: 1.45fr 1.08fr .7fr 1.08fr; gap: 14px; align-items: stretch; }
.mynz-hotel-date-pair { position: relative; }
.mynz-hotel-date-fields { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #d5dbe5; border-radius: 10px; overflow: hidden; }
.mynz-hotel-date-fields .booking-field { border: 0; border-radius: 0; }
.mynz-hotel-date-fields .booking-field + .booking-field { border-left: 1px solid #d5dbe5; text-align: right; }
.mynz-hotel-nights { background: #f7f8fc; }
.mynz-hotel-guests { position: relative; }
.mynz-guest-summary { display: block; width: 100%; border: 0; background: transparent; padding: 0; color: var(--tk-blue); font-size: 16px; font-weight: 700; text-align: left; }
.mynz-guest-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 260px; padding: 14px; border: 1px solid #d5dbe5; border-radius: 10px; background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.15); z-index: 80; }
.mynz-guest-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 7px 0; color: #334b77; font-weight: 700; }
.mynz-guest-row div { display: flex; align-items: center; gap: 10px; }
.mynz-guest-row button { width: 28px; height: 28px; border: 1px solid #d5dbe5; border-radius: 50%; background: #fff; color: var(--tk-blue); }
.mynz-hotel-bottom-row { display: grid; grid-template-columns: minmax(390px, 1fr) 130px 130px 140px; gap: 10px; align-items: center; margin-top: 14px; }
.mynz-star-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: #334b77; font-size: 12px; text-transform: uppercase; }
.mynz-star-option { min-height: 34px; display: inline-flex; align-items: center; border: 1px solid #d5dbe5; border-radius: 6px; background: #fff; cursor: pointer; overflow: hidden; }
.mynz-star-option input { position: absolute; opacity: 0; pointer-events: none; }
.mynz-star-option span, .mynz-star-option.is-unrated { padding: 7px 9px; }
.mynz-star-option i { color: #f5b400; }
.mynz-star-option input:checked + span { color: #fff; background: var(--tk-blue); }
.mynz-star-option input:checked + span i { color: var(--tk-yellow); }
.mynz-star-option.is-unrated { opacity: .75; cursor: default; }
.mynz-hotel-select select { width: 100%; min-height: 40px; border: 1px solid #d5dbe5; border-radius: 6px; padding: 8px 10px; color: #334b77; background: #fff; }
.mynz-hotel-submit { height: 46px; }

@media (max-width: 991px) {
    .mynz-hotel-main-row { grid-template-columns: 1fr 1fr; }
    .mynz-hotel-bottom-row { grid-template-columns: 1fr 1fr; }
    .mynz-star-rating { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
    .mynz-hotel-main-row, .mynz-hotel-bottom-row { grid-template-columns: 1fr; }
    .mynz-star-rating { grid-column: auto; }
    .mynz-hotel-date-fields { grid-template-columns: 1fr; }
    .mynz-hotel-date-fields .booking-field + .booking-field { border-left: 0; border-top: 1px solid #d5dbe5; text-align: left; }
    .mynz-guest-panel { left: 0; right: auto; width: min(260px, 100%); }
}


/* Four requested product tabs; icon is intentionally above its label. */
.four-booking-tabs { justify-content: center; }
.four-booking-tabs .booking-tab { min-width: 150px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.four-booking-tabs .booking-tab i { display: block; margin: 0; font-size: 22px; line-height: 1; }
.four-booking-tabs .booking-tab span { display: block; line-height: 1.2; }
@media (max-width: 767px) {
    .four-booking-tabs { justify-content: space-between; overflow-x: visible; }
    .four-booking-tabs .booking-tab { flex: 1 1 0; min-width: 0; padding: 10px 4px; }
    .four-booking-tabs .booking-tab i { font-size: 18px; }
    .four-booking-tabs .booking-tab span { font-size: 11px; }
}


.booking-tab-svg { display:block; width:24px; height:24px; margin:0; color:currentColor; }
.booking-suggest-title { display:block; font-weight:700; color:var(--tk-blue); }
.booking-suggest-country { margin-left:7px; color:#0b42c7; font-weight:700; }




/* Mobile four-tab layout: keep Hotel, Flight, Ship and Tour Package visible without horizontal scrolling. */
@media (max-width: 767px) {
    .booking-tabs.four-booking-tabs {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        width: 100%;
        overflow-x: visible !important;
        justify-content: initial;
    }

    .booking-tabs.four-booking-tabs .booking-tab {
        min-width: 0 !important;
        width: 100%;
        max-width: none;
        padding: 10px 2px 9px;
        font-size: clamp(10px, 2.9vw, 12px);
        line-height: 1.15;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .booking-tabs.four-booking-tabs .booking-tab i,
    .booking-tabs.four-booking-tabs .booking-tab svg,
    .booking-tabs.four-booking-tabs .booking-tab .booking-tab-svg {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin: 0;
        font-size: 18px;
    }

    .booking-tabs.four-booking-tabs .booking-tab span {
        display: block;
        max-width: 100%;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 359px) {
    .booking-tabs.four-booking-tabs .booking-tab {
        padding-left: 1px;
        padding-right: 1px;
        font-size: 10px;
    }

    .booking-tabs.four-booking-tabs .booking-tab i,
    .booking-tabs.four-booking-tabs .booking-tab svg,
    .booking-tabs.four-booking-tabs .booking-tab .booking-tab-svg {
        width: 16px;
        height: 16px;
        font-size: 16px;
    }
}