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

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f5f7fb;
    color: #172033;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input {
    font-family: inherit;
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {
    width: 100%;
    height: 82px;

    background: #0d172b;

    display: flex;
    align-items: center;

    padding: 0 28px;

    position: relative;
    z-index: 1000;

    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.18);
}


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

.logo {
    display: flex;
    align-items: center;
    gap: 8px;

    width: 360px;
    min-width: 360px;
    flex: 0 0 360px;

    color: #ffffff;

    font-size: 30px;
    font-weight: 800;

    white-space: nowrap;

    transition: 0.2s ease;
}

.logo:hover {
    color: #ffffff;
}

.logo-plane {
    font-size: 31px;
}


/* =========================================================
   CENTER NAVIGATION
========================================================= */

.main-nav {
    flex: 1 1 auto;

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 42px;
}

.nav-item {
    min-width: 150px;
    height: 48px;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 0 12px;

    border-radius: 10px;

    color: #ffffff;

    font-size: 18px;
    font-weight: 700;

    white-space: nowrap;

    background: transparent;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        color 0.2s ease;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}


.home-link {
    background: rgba(255, 255, 255, 0.05);
}


/* =========================================================
   RIGHT NAVIGATION
========================================================= */

.right-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    width: 525px;
    min-width: 525px;
    flex: 0 0 525px;

    gap: 24px;
}


/* =========================================================
   NOTIFICATION
========================================================= */

.notification-link {
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 0 12px;

    border-radius: 10px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 700;

    white-space: nowrap;

    transition: 0.2s ease;
}

.notification-link:hover {
    background: rgba(255, 255, 255, 0.08);
}


/* Notification badge */

.notification-badge {
    min-width: 24px;
    height: 24px;

    padding: 0 7px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50px;

    background: #ff4141;
    color: #ffffff;

    font-size: 13px;
    font-weight: 800;

    line-height: 1;
}


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

.logout-btn {
    width: 145px;
    height: 50px;

    flex-shrink: 0;

    border: none;
    border-radius: 12px;

    background: #ff4242;
    color: #ffffff;

    font-size: 17px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.logout-btn:hover {
    background: #ed3030;

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px rgba(255, 66, 66, 0.25);
}


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

.menu-toggle {
    width: 58px;
    height: 58px;

    flex-shrink: 0;

    margin-left: 2px;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;

    background: #101b31;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 6px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.menu-toggle:hover {
    background: #17243e;

    border-color: rgba(255, 255, 255, 0.5);

    transform: translateY(-1px);
}


.menu-toggle span {
    width: 27px;
    height: 3px;

    border-radius: 5px;

    background: #ffffff;

    display: block;
}


/* =========================================================
   DROPDOWN MENU
========================================================= */

.menu-dropdown {
    position: absolute;

    top: calc(100% + 12px);
    right: 22px;

    width: 360px;
    max-height: calc(100vh - 110px);

    overflow-y: auto;

    padding: 8px;

    background: #101a2e;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 18px;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.42);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-10px) scale(0.98);

    pointer-events: none;
    z-index: 2000;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}


/* IMPORTANT:
   JS adds .show when hamburger is clicked
*/

.menu-dropdown.show {
    opacity: 1;
    visibility: visible;

    transform: translateY(0) scale(1);

    pointer-events: auto;
}


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

.menu-header {
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 14px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 800;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.10);

    margin-bottom: 6px;
}


.menu-close {
    width: 34px;
    height: 34px;

    border: none;
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.08);

    color: #ffffff;

    font-size: 24px;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-close:hover {
    background: rgba(255, 255, 255, 0.16);
}


/* =========================================================
   MENU SECTION
========================================================= */

.menu-section {
    padding: 7px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}


.menu-section:last-of-type {
    border-bottom: none;
}


.menu-section-title {
    padding: 8px 14px 6px;

    color: #8fa3c7;

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.8px;
}


/* =========================================================
   MENU LINKS
========================================================= */

.menu-section a {
    min-height: 45px;

    display: flex;
    align-items: center;

    padding: 0 14px;

    border-radius: 9px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;

    transition:
        background 0.2s ease,
        padding-left 0.2s ease;
}


.menu-section a:hover {
    background: rgba(255, 255, 255, 0.08);

    padding-left: 19px;
}


/* =========================================================
   ADMIN MENU
========================================================= */

.admin-menu-section {
    display: block;
}


/* =========================================================
   MENU LOGOUT
========================================================= */

.menu-logout-btn {
    width: 100%;
    height: 46px;

    margin-top: 8px;

    border: none;
    border-radius: 10px;

    background: rgba(255, 66, 66, 0.15);

    color: #ff6b6b;

    font-size: 15px;
    font-weight: 800;

    cursor: pointer;

    transition: 0.2s ease;
}


.menu-logout-btn:hover {
    background: #ff4242;
    color: #ffffff;
}


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

.hero {
    position: relative;

    width: 100%;

    min-height: 720px;

    height: calc(100vh - 82px);

    max-height: 850px;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
}


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

.hero-slider {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;
}


.slide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;

    transition:
        opacity 1.2s ease-in-out;
}


.slide.active {
    opacity: 1;
}


/* =========================================================
   HERO DARK OVERLAY
========================================================= */

.hero::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(4, 12, 28, 0.25),
            rgba(4, 12, 28, 0.42)
        );
}


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

.hero-content {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1250px;

    padding: 45px 30px 55px;

    text-align: center;
}


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

.hero h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(48px, 5vw, 78px);

    font-weight: 900;

    line-height: 1.08;

    letter-spacing: -1.5px;

    text-shadow:
        0 4px 14px rgba(0, 0, 0, 0.45);
}


.hero-globe {
    display: inline-block;

    margin-left: 10px;

    font-size: 0.72em;

    vertical-align: middle;
}


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

.hero-content > p {
    margin-top: 24px;

    color: #ffffff;

    font-size: 22px;

    font-weight: 500;

    text-shadow:
        0 3px 10px rgba(0, 0, 0, 0.45);
}


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

.search-box {
    width: 100%;
    max-width: 950px;

    margin: 38px auto 0;

    display: flex;

    gap: 14px;
}


.search-box input {
    flex: 1;

    min-width: 0;

    height: 82px;

    padding: 0 28px;

    border: none;

    border-radius: 15px;

    outline: none;

    background: #ffffff;

    color: #26364e;

    font-size: 20px;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.16);
}


.search-box input::placeholder {
    color: #6c7a90;
}


.search-box button {
    width: 150px;
    height: 82px;

    flex-shrink: 0;

    border: none;

    border-radius: 15px;

    background: #2865e8;

    color: #ffffff;

    font-size: 20px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.18);

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.search-box button:hover {
    background: #1f57cf;

    transform: translateY(-2px);
}


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

.hero-stats {
    margin: 58px auto 0;

    display: flex;

    justify-content: center;
    align-items: center;

    gap: 95px;
}


.hero-stat {
    min-width: 155px;

    text-align: center;
}


.hero-stat h3 {
    margin-bottom: 8px;

    color: #ffffff;

    font-size: 34px;

    font-weight: 900;

    text-shadow:
        0 3px 9px rgba(0, 0, 0, 0.45);
}


.hero-stat span {
    color: #ffffff;

    font-size: 17px;

    font-weight: 500;

    text-shadow:
        0 2px 7px rgba(0, 0, 0, 0.4);
}
/* =========================================================
   DESTINATIONS
========================================================= */

.destinations {
    padding: 80px 35px;

    background: #f6f8fc;

    text-align: center;
}

.destinations h2,
.services h2,
#trips h2,
.post-trip h2 {
    margin-bottom: 35px;

    color: #172033;

    font-size: 36px;

    font-weight: 800;
}

.cards {
    max-width: 1250px;

    margin: auto;

    display: grid;

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

    gap: 25px;
}

.card {
    min-height: 220px;

    padding: 30px;

    border-radius: 18px;

    display: flex;
    flex-direction: column;

    justify-content: flex-end;
    align-items: flex-start;

    text-align: left;

    color: #ffffff;

    overflow: hidden;

    position: relative;

    background-size: cover;
    background-position: center;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.12);

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

.card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.2);
}

.card::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            transparent 25%,
            rgba(0, 0, 0, 0.72)
        );

    z-index: 0;
}

.card h3,
.card p {
    position: relative;

    z-index: 1;
}

.card h3 {
    margin-bottom: 8px;

    font-size: 25px;
}

.card p {
    font-size: 15px;

    line-height: 1.5;
}


/* Destination images */

.uttarakhand {
    background-image:
        url("images/uttarakhand.jpg");
}

.himachal {
    background-image:
        url("images/himachal.jpg");
}

.rajasthan {
    background-image:
        url("images/rajasthan.jpg");
}

.kerala {
    background-image:
        url("images/kerala.jpg");
}

.goa {
    background-image:
        url("images/goa.jpg");
}

.kashmir {
    background-image:
        url("images/kashmir.jpg");
}
/* =========================================================
   SERVICES - MYTRAVELBUDDY
========================================================= */

.services {
    padding: 85px 35px;
    background: #ffffff;
    text-align: center;
}

.services > p {
    margin-top: -20px;
    margin-bottom: 40px;
    color: #64748b;
    font-size: 17px;
}


/* =========================================================
   MAIN SERVICE LAYOUT
========================================================= */

.service-layout {
    max-width: 1400px;
    margin: auto;

    display: grid;

    grid-template-columns:
        1.05fr
        1fr;

    gap: 18px;

    align-items: stretch;
}


/* =========================================================
   TAXI BANNER
========================================================= */

.taxi-banner {
    min-height: 620px;

    position: relative;
    overflow: hidden;

    padding: 50px;

    border-radius: 28px;

    display: flex;
    align-items: flex-end;

    text-align: left;

    color: #ffffff;

    background:
        linear-gradient(
            180deg,
            rgba(8, 35, 72, 0.12),
            rgba(5, 25, 58, 0.82)
        ),
        url("images/taxi.jpg");

    background-size: cover;
    background-position: center;

    box-shadow:
        0 20px 50px
        rgba(15, 23, 42, 0.20);
}


/* =========================================================
   MOST BOOKED
========================================================= */

.taxi-banner .tag {
    position: absolute;

    top: 30px;
    left: 30px;

    padding: 13px 24px;

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            #ffb703,
            #ff8c00
        );

    color: #ffffff;

    font-size: 15px;
    font-weight: 900;

    letter-spacing: 0.5px;

    box-shadow:
        0 8px 22px
        rgba(255, 159, 28, 0.35);
}


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

.taxi-left {
    position: absolute;
    top: 135px;
    right: 45px;
    z-index: 10;
    width: 62%;
    text-align: left;
}

.taxi-left h1 {
    margin: 0 0 14px 0;
    color: #ffffff;
    font-size: 48px;
    line-height: 1.1;
    font-weight: 900;
}

.taxi-left p {
    max-width: 550px;
    margin: 0 0 28px 0;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.6;
}


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

.taxi-left a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 230px;
    height: 58px;

    padding: 0 28px;

    margin-top: 0;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #1677ff,
            #2563eb
        );

    color: #ffffff;

    font-size: 18px;
    font-weight: 800;

    transition: 0.25s ease;

    box-shadow:
        0 10px 25px
        rgba(37, 99, 235, 0.30);
}


.taxi-left a:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 32px
        rgba(37, 99, 235, 0.40);
}


/* =========================================================
   RIGHT SIDE SERVICES
========================================================= */

.small-service {
    position: relative;

    min-height: 620px;

    display: grid;

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

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

    gap: 18px;
}


/* =========================================================
   SERVICE CARD
========================================================= */

.small-service .service-card {
    position: relative;

    z-index: 1;

    min-height: 195px;

    padding: 25px 18px;

    border-radius: 25px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.92),
            rgba(241,245,249,0.72)
        );

    border:
        1px solid
        rgba(255,255,255,0.95);

    color: #172033;

    box-shadow:
        0 12px 30px
        rgba(15, 23, 42, 0.09);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

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

.small-service .service-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 38px
        rgba(15, 23, 42, 0.14);
}


/* =========================================================
   ICON
========================================================= */

.small-service .service-card .icon {
    font-size: 55px;

    line-height: 1;

    margin-bottom: 13px;

    position: relative;
    z-index: 2;
}


/* =========================================================
   TITLE
========================================================= */

.small-service .service-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 7px;

    color: #172033;

    font-size: 21px;

    font-weight: 900;
}


/* =========================================================
   DESCRIPTION
========================================================= */
/* =========================================================
   SERVICE DESCRIPTIONS
========================================================= */

.small-service .service-card p {

    position: relative;

    z-index: 5;

    margin: 6px 0 15px;

    color: #64748b;

    font-size: 13px;

    line-height: 1.4;

    font-weight: 500;
}

/* =========================================================
   BIG TRANSPARENT GLASS PANEL
   ABOVE BIKE / CAR / HOTEL / CHAR DHAM / TREKKING
========================================================= */
/* =========================================================
   BIG GLASS COMING SOON PANEL
========================================================= */
/* =========================================================
   FINAL GLASS COMING SOON PANEL
========================================================= */
/* =========================================================
   STEP 4B — EXCITING FEATURES GLASS PANEL
========================================================= */

.coming-soon-panel {

    position: absolute;

    left: 3%;
    right: 3%;

    top: 19%;

    height: 63%;

    z-index: 20;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-radius: 28px;

    background: rgba(255, 255, 255, 0.56);

    border: 1px solid rgba(255, 255, 255, 0.86);

    box-shadow:
        0 20px 55px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);

    pointer-events: none;
}


/* =========================================================
   TRAVEL ILLUSTRATION BACKGROUND
========================================================= */

.travel-map-art {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;
}


/* =========================================================
   MAP
========================================================= */

.travel-map {

    position: absolute;

    left: 50%;

    top: 43%;

    transform:
        translate(-50%, -50%)
        rotate(-4deg);

    font-size: 95px;

    opacity: 0.9;

    filter:
        drop-shadow(
            0 10px 12px
            rgba(15, 23, 42, 0.12)
        );
}


/* =========================================================
   LOCATION PIN
========================================================= */

.travel-location {

    position: absolute;

    left: 51%;

    top: 32%;

    transform:
        translate(-50%, -50%);

    z-index: 5;

    font-size: 65px;

    filter:
        drop-shadow(
            0 6px 8px
            rgba(15, 23, 42, 0.16)
        );
}


/* =========================================================
   CAMERA
========================================================= */

.travel-camera {

    position: absolute;

    left: 19%;

    top: 50%;

    z-index: 5;

    font-size: 48px;

    transform: rotate(-12deg);
}


/* =========================================================
   SUITCASE
========================================================= */

.travel-suitcase {

    position: absolute;

    right: 18%;

    top: 53%;

    z-index: 5;

    font-size: 48px;

    transform: rotate(8deg);
}


/* =========================================================
   CLOUDS
========================================================= */

.travel-cloud {

    position: absolute;

    z-index: 3;

    font-size: 34px;

    opacity: 0.85;
}


.cloud-one {

    left: 28%;

    top: 22%;
}


.cloud-two {

    right: 25%;

    top: 26%;
}


/* =========================================================
   DECORATIVE SPARKS
========================================================= */

.travel-spark {

    position: absolute;

    z-index: 6;

    color: #facc15;

    font-size: 30px;

    font-weight: 900;
}


.spark-one {

    left: 28%;

    top: 40%;
}


.spark-two {

    right: 28%;

    top: 40%;
}


/* =========================================================
   DOTTED TRAVEL ROUTES
========================================================= */

.travel-route {

    position: absolute;

    width: 130px;

    height: 70px;

    border-top:
        3px dashed
        rgba(59, 130, 246, 0.50);

    border-radius: 50%;
}


.route-one {

    left: 24%;

    top: 34%;

    transform: rotate(-18deg);
}


.route-two {

    right: 23%;

    top: 36%;

    transform: rotate(18deg);
}


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

.coming-content {

    position: relative;

    z-index: 10;

    width: 100%;

    margin-top: 125px;

    padding: 0 25px;
}


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

.coming-label {

    margin-bottom: 6px;

    color: #172033;

    font-size: 17px;

    font-weight: 900;

    letter-spacing: 0.6px;
}


/* =========================================================
   COMING SOON HEADING
========================================================= */

.coming-soon-panel h2 {

    margin: 0;

    color: #101b31;

    font-size: 48px;

    line-height: 1.05;

    font-weight: 950;
}


/* =========================================================
   YELLOW LINE
========================================================= */

.coming-line {

    width: 250px;

    height: 6px;

    margin: 8px auto 15px;

    border-radius: 50px;

    background: #facc15;
}


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

.coming-soon-panel p {

    max-width: 560px;

    margin: 0 auto 7px;

    color: #334155;

    font-size: 15px;

    line-height: 1.5;

    font-weight: 500;
}


/* =========================================================
   STAY TUNED
========================================================= */

.stay-tuned {

    color: #334155;

    font-size: 15px;

    font-weight: 700;
}


/* =========================================================
   PANEL ICON
========================================================= */

.coming-icon {

    font-size: 58px;

    line-height: 1;

    margin-bottom: 8px;
}


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

.coming-label {

    color: #172033;

    font-size: 17px;

    font-weight: 900;

    letter-spacing: 0.6px;

    margin-bottom: 7px;
}


/* =========================================================
   MAIN HEADING
========================================================= */

.coming-soon-panel h2 {

    margin: 0;

    color: #101b31;

    font-size: 48px;

    line-height: 1.05;

    font-weight: 950;
}


/* =========================================================
   YELLOW LINE
========================================================= */

.coming-line {

    width: 255px;

    height: 6px;

    margin: 8px auto 15px;

    border-radius: 50px;

    background: #facc15;
}


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

.coming-soon-panel p {

    max-width: 560px;

    margin: 0 0 7px;

    color: #334155;

    font-size: 15px;

    line-height: 1.5;

    font-weight: 500;
}


/* =========================================================
   STAY TUNED
========================================================= */

.stay-tuned {

    color: #334155;

    font-size: 15px;

    font-weight: 700;
}


/* =========================================================
   MAKE INDIVIDUAL COMING SOON BUTTONS CLEAR
========================================================= */

.small-service .service-card .coming-card-btn {

    position: relative;

    z-index: 100;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: auto;

    min-width: 145px;

    height: 38px;

    padding: 0 22px;

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #7c3aed
        );

    color: #ffffff;

    font-size: 13px;

    font-weight: 800;

    box-shadow:
        0 7px 18px
        rgba(124, 58, 237, 0.25);
}

/* =========================================================
   POST TRIP
========================================================= */

.post-trip {
    padding: 80px 35px;

    background:
        linear-gradient(
            135deg,
            #edf3ff,
            #f8fbff
        );

    text-align: center;
}
/* =========================================================
   POST TRIP
========================================================= */

.post-trip {
    padding: 80px 35px;

    background:
        linear-gradient(
            135deg,
            #edf3ff,
            #f8fbff
        );

    text-align: center;
}


#tripForm {
    max-width: 1100px;

    margin: auto;

    display: grid;

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

    gap: 18px;
}


#tripForm input {
    width: 100%;

    height: 55px;

    padding: 0 18px;

    border: 1px solid #d9e0eb;

    border-radius: 10px;

    outline: none;

    background: #ffffff;

    color: #172033;

    font-size: 16px;
}


#tripForm input:focus {
    border-color: #2865e8;

    box-shadow:
        0 0 0 3px rgba(40, 101, 232, 0.1);
}


#tripForm button {
    grid-column: 1 / -1;

    width: 210px;

    height: 52px;

    margin: 5px auto 0;

    border: none;

    border-radius: 10px;

    background: #2865e8;

    color: #ffffff;

    font-size: 16px;

    font-weight: 800;

    cursor: pointer;

    transition: 0.2s ease;
}


#tripForm button:hover {
    background: #1d55ca;

    transform: translateY(-2px);
}


/* =========================================================
   TRENDING TRIPS
========================================================= */

#trips {
    padding: 80px 35px;

    background: #ffffff;
}


#tripContainer {
    max-width: 1250px;

    margin: auto;

    display: grid;

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

    gap: 24px;
}


/* =========================================================
   TRIP CARD
========================================================= */

.trip-card {
    padding: 24px;

    border-radius: 18px;

    background: #ffffff;

    border: 1px solid #e4e9f1;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.07);

    transition: 0.2s ease;
}


.trip-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 15px 32px rgba(0, 0, 0, 0.12);
}


.trip-top {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 22px;
}


.trip-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #edf3ff;

    font-size: 25px;
}


.trip-top h3 {
    margin-bottom: 5px;

    color: #172033;

    font-size: 21px;
}


.trip-date {
    color: #718096;

    font-size: 14px;
}


.trip-info {
    display: grid;

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

    gap: 10px;

    margin-bottom: 20px;
}


.info-box {
    min-height: 48px;

    padding: 8px 10px;

    border-radius: 9px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    background: #f5f7fb;

    color: #26364e;

    font-weight: 700;
}


.join-btn {
    width: 100%;

    height: 46px;

    border: none;

    border-radius: 9px;

    background: #2865e8;

    color: #ffffff;

    font-size: 15px;

    font-weight: 800;

    cursor: pointer;

    transition: 0.2s ease;
}


.join-btn:hover {
    background: #1d55ca;
}


/* =========================================================
   COOKIE BANNER
========================================================= */

.cookie-banner {
    position: fixed;

    left: 20px;
    right: 20px;
    bottom: 20px;

    z-index: 3000;

    display: none;

    padding: 20px 24px;

    border-radius: 16px;

    background: #ffffff;

    border: 1px solid #e1e6ef;

    box-shadow:
        0 12px 45px rgba(0, 0, 0, 0.2);
}


.cookie-banner.show {
    display: block;
}


.cookie-content {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


.cookie-content strong {
    display: block;

    margin-bottom: 6px;

    color: #172033;

    font-size: 17px;
}


.cookie-content p {
    color: #64748b;

    font-size: 14px;

    line-height: 1.5;
}


.cookie-actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 9px;
}


.cookie-actions button {
    height: 40px;

    padding: 0 15px;

    border-radius: 8px;

    cursor: pointer;

    font-size: 13px;

    font-weight: 700;
}


.cookie-accept {
    border: none;

    background: #2865e8;

    color: #ffffff;
}


.cookie-decline {
    border: 1px solid #d8dee8;

    background: #ffffff;

    color: #344054;
}


.cookie-personalise {
    border: 1px solid #2865e8;

    background: #ffffff;

    color: #2865e8;
}


#cookieMoreInfo {
    color: #2865e8;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   SCROLLBAR FOR MENU
========================================================= */

.menu-dropdown::-webkit-scrollbar {
    width: 6px;
}

.menu-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.menu-dropdown::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);

    border-radius: 10px;
}
/* =========================================================
   RESPONSIVE NAVBAR
========================================================= */

/* ---------------------------------------------------------
   LARGE LAPTOP / SMALL DESKTOP
--------------------------------------------------------- */

@media (max-width: 1450px) {

    .navbar {
        padding: 0 22px;
    }

    .logo {
        min-width: 290px;
        font-size: 27px;
    }

    .main-nav {
        gap: 8px;
    }

    .nav-item {
        min-width: 135px;
        padding: 0 12px;
        font-size: 16px;
    }

    .right-nav {
        min-width: 390px;
        gap: 12px;
    }

    .notification-link {
        font-size: 15px;
        padding: 0 7px;
    }

    .logout-btn {
        width: 120px;
        font-size: 16px;
    }

    .hero-content {
        max-width: 1150px;
    }

    .hero h1 {
        font-size: 65px;
    }

}


/* ---------------------------------------------------------
   TABLET / SMALL LAPTOP
--------------------------------------------------------- */

@media (max-width: 1150px) {

    .navbar {
        height: 76px;
        padding: 0 18px;
    }

    .logo {
        min-width: auto;
        flex: 1;
        font-size: 25px;
    }

    .main-nav {
        display: none;
    }

    .right-nav {
        min-width: auto;
        gap: 12px;
    }

    .notification-link {
        display: none;
    }

    .logout-btn {
        width: 115px;
        height: 48px;
    }

    .menu-toggle {
        width: 54px;
        height: 54px;
    }


    .hero {
        height: calc(100vh - 76px);
        min-height: 650px;
    }

    .hero h1 {
        font-size: clamp(43px, 6vw, 62px);
    }

    .hero-content > p {
        font-size: 19px;
    }

    .search-box {
        max-width: 850px;
    }

    .hero-stats {
        gap: 65px;
    }

    .service-layout {
        grid-template-columns: 1fr;
    }

}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 850px) {

    .logo {
        font-size: 23px;
    }

    .logo-plane {
        font-size: 25px;
    }

    .logout-btn {
        width: 105px;
        height: 46px;
        font-size: 15px;
    }


    .menu-dropdown {
        right: 15px;
        width: min(360px, calc(100vw - 30px));
    }


    .hero {
        min-height: 680px;
    }

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

    .hero h1 {
        font-size: clamp(38px, 7vw, 55px);
    }

    .hero-globe {
        margin-left: 4px;
    }

    .hero-content > p {
        margin-top: 18px;
        font-size: 17px;
    }

    .search-box {
        margin-top: 28px;
    }

    .search-box input {
        height: 65px;
        font-size: 17px;
    }

    .search-box button {
        width: 125px;
        height: 65px;
        font-size: 17px;
    }

    .hero-stats {
        margin-top: 45px;
        gap: 35px;
    }

    .hero-stat h3 {
        font-size: 29px;
    }

    .hero-stat span {
        font-size: 15px;
    }


    .cards {
        grid-template-columns: repeat(2, 1fr);
    }


    #tripContainer {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 650px) {

    .navbar {
        height: 70px;
        padding: 0 12px;
    }


    .logo {
        font-size: 21px;
        gap: 5px;
    }

    .logo-plane {
        font-size: 23px;
    }


    .right-nav {
        gap: 8px;
    }


    .logout-btn {
        width: 92px;
        height: 43px;

        border-radius: 9px;

        font-size: 14px;
    }


    .menu-toggle {
        width: 48px;
        height: 48px;

        border-radius: 11px;

        gap: 5px;
    }

    .menu-toggle span {
        width: 23px;
        height: 2.5px;
    }


    .menu-dropdown {
        top: calc(100% + 8px);
        right: 10px;

        width: calc(100vw - 20px);

        max-height: calc(100vh - 90px);

        border-radius: 15px;
    }


    .hero {
        height: auto;
        min-height: 700px;
    }


    .hero-content {
        padding:
            75px 15px 60px;
    }


    .hero h1 {
        font-size: 39px;
        line-height: 1.12;
        letter-spacing: -0.5px;
    }


    .hero-globe {
        display: inline-block;
        font-size: 32px;
    }


    .hero-content > p {
        font-size: 16px;
        line-height: 1.45;
    }


    .search-box {
        flex-direction: column;
        gap: 10px;
    }


    .search-box input {
        width: 100%;
        height: 58px;

        padding: 0 18px;

        border-radius: 12px;

        font-size: 16px;
    }


    .search-box button {
        width: 100%;
        height: 55px;

        border-radius: 12px;

        font-size: 16px;
    }


    .hero-stats {
        margin-top: 40px;

        gap: 18px;

        flex-wrap: wrap;
    }


    .hero-stat {
        min-width: 90px;
    }


    .hero-stat h3 {
        font-size: 25px;
    }


    .hero-stat span {
        font-size: 13px;
    }


    /* DESTINATIONS */

    .destinations,
    .services,
    .post-trip,
    #trips {
        padding: 60px 18px;
    }


    .destinations h2,
    .services h2,
    #trips h2,
    .post-trip h2 {
        font-size: 30px;
    }


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


    .card {
        min-height: 210px;
    }


    /* SERVICES */

    .service-layout {
        grid-template-columns: 1fr;
    }


    .taxi-banner {
        min-height: 350px;
        padding: 28px;
    }


    .taxi-left h1 {
        font-size: 30px;
    }


    .small-service {
        grid-template-columns: 1fr 1fr;
    }


    .service-card {
        min-height: 170px;
    }


    /* POST TRIP */

    #tripForm {
        grid-template-columns: 1fr;
    }


    #tripForm button {
        width: 100%;
    }


    /* TRIPS */

    #tripContainer {
        grid-template-columns: 1fr;
    }


    /* COOKIE */

    .cookie-banner {
        left: 10px;
        right: 10px;
        bottom: 10px;

        padding: 18px;
    }


    .cookie-content {
        flex-direction: column;

        align-items: stretch;

        gap: 15px;
    }


    .cookie-actions {
        justify-content: flex-start;
    }

}


/* ---------------------------------------------------------
   VERY SMALL MOBILE
--------------------------------------------------------- */

@media (max-width: 430px) {

    .logo {
        font-size: 19px;
    }

    .logo-plane {
        font-size: 21px;
    }


    .logout-btn {
        width: 82px;
        font-size: 13px;
    }


    .menu-toggle {
        width: 45px;
        height: 45px;
    }


    .hero h1 {
        font-size: 34px;
    }


    .hero-stats {
        gap: 12px;
    }


    .hero-stat {
        min-width: 80px;
    }


    .hero-stat h3 {
        font-size: 22px;
    }


    .hero-stat span {
        font-size: 12px;
    }


    .small-service {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   ACCESSIBILITY / FOCUS
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid rgba(40, 101, 232, 0.55);
    outline-offset: 3px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

}
/* =========================================================
   FINAL MYTRAVELBUDDY DASHBOARD
   TARGET = SECOND SCREENSHOT
========================================================= */

@media (min-width: 1151px) {

    /* ================= NAVBAR ================= */

    .navbar {
        height: 108px;
        padding: 0 30px;
        display: flex;
        align-items: center;
        background: #0d172b;
    }

    /* LOGO */
    .logo {
        width: 340px;
        min-width: 340px;
        flex: 0 0 340px;

        font-size: 29px;
        font-weight: 800;

        display: flex;
        align-items: center;

        gap: 8px;
    }

    .logo-plane {
        font-size: 30px;
    }


    /* CENTER NAV */

    .main-nav {
        flex: 1;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 0;
    }

    .nav-item {
        min-width: 0;
        width: auto;

        height: 48px;

        padding: 0 52px;

        display: flex;
        align-items: center;
        justify-content: center;

        background: transparent !important;

        border-radius: 0;

        color: #ffffff;

        font-size: 18px;
        font-weight: 700;

        position: relative;
    }

    .nav-item:hover {
        background: transparent !important;
        transform: none;
    }


    /* vertical separator between center links */

    .nav-item + .nav-item {
        border-left: 1px solid rgba(255,255,255,0.28);
    }


    /* HOME ACTIVE */

    .home-link {
        background: transparent !important;
    }

    .home-link::after {
        content: "";

        position: absolute;

        left: 52px;
        right: 52px;
        bottom: -5px;

        height: 3px;

        border-radius: 5px;

        background: #2865e8;
    }


    /* ================= RIGHT SIDE ================= */

    .right-nav {
        width: 500px;
        min-width: 500px;
        flex: 0 0 500px;

        display: flex;
        align-items: center;
        justify-content: flex-end;

        gap: 28px;
    }


    /* NOTIFICATIONS */

    .notification-link {
        height: 50px;

        padding: 0 5px;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 9px;

        color: #ffffff;

        font-size: 17px;
        font-weight: 700;

        white-space: nowrap;
    }

    .notification-link:hover {
        background: transparent;
    }


    /* BADGE */

    .notification-badge {
        min-width: 25px;
        height: 25px;

        padding: 0 7px;

        font-size: 13px;
    }


    /* LOGOUT */

    .logout-btn {
        width: 125px;
        height: 50px;

        flex: 0 0 125px;

        border-radius: 12px;

        background: #ff4242;

        font-size: 17px;
        font-weight: 800;
    }


    /* HAMBURGER */

    .menu-toggle {
        width: 58px;
        height: 58px;

        flex: 0 0 58px;

        margin-left: 0;

        border-radius: 14px;

        background: #101b31;
    }


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

    .hero {
        min-height: 720px;
        height: calc(100vh - 108px);

        max-height: 850px;
    }


    /* HERO CONTENT */

    .hero-content {
        width: 100%;

        max-width: 1550px;

        padding: 45px 30px 55px;

        text-align: center;
    }


    /* HEADING */

    .hero h1 {
        font-size: clamp(58px, 4.2vw, 76px);

        line-height: 1.05;

        letter-spacing: -2px;

        white-space: nowrap;

        font-weight: 900;
    }


    /* GLOBE */

    .hero-globe {
        margin-left: 12px;

        font-size: 0.70em;

        vertical-align: middle;
    }


    /* SUBTITLE */

    .hero-content > p {
        margin-top: 22px;

        font-size: 20px;

        font-weight: 500;
    }


    /* SEARCH */

    .search-box {
        width: 100%;

        max-width: 930px;

        margin: 38px auto 0;

        display: flex;

        gap: 14px;
    }


    .search-box input {
        height: 80px;

        padding: 0 28px;

        border-radius: 15px;

        font-size: 19px;
    }


    .search-box button {
        width: 150px;
        height: 80px;

        border-radius: 15px;

        font-size: 19px;
    }


    /* ================= STATS ================= */

    .hero-stats {
        margin: 52px auto 0;

        display: flex;

        align-items: center;
        justify-content: center;

        gap: 0;
    }


    .hero-stat {
        min-width: 175px;

        text-align: center;

        padding: 0 48px;
    }


    /* vertical separators */

    .hero-stat + .hero-stat {
        border-left: 2px solid rgba(255,255,255,0.45);
    }


    .hero-stat h3 {
        margin-bottom: 8px;

        font-size: 34px;
        font-weight: 900;
    }


    .hero-stat span {
        font-size: 17px;
        font-weight: 500;
    }

}
/* =========================================================
   FINAL NAVBAR
   4 EQUAL CENTER ITEMS + RIGHT NAV
========================================================= */

@media (min-width: 1151px) {

    .navbar {
        width: 100%;
        height: 82px;

        padding: 0 24px;

        display: flex;
        align-items: center;

        background: #0d172b;

        overflow: visible;
    }


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

    .logo {
        width: 330px;
        min-width: 330px;
        flex: 0 0 330px;

        display: flex;
        align-items: center;

        gap: 8px;

        font-size: 28px;
        font-weight: 800;

        white-space: nowrap;
    }


    .logo-plane {
        font-size: 30px;
    }


    /* ================= CENTER NAV ================= */

    .main-nav {

        flex: 1 1 auto;

        min-width: 0;

        height: 100%;

        display: grid;

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

        align-items: center;

        justify-content: stretch;

        gap: 0;
    }


    /* ================= NAV ITEMS ================= */

    .main-nav .nav-item {

        width: 100%;
        min-width: 0;

        height: 50px;

        display: flex;

        align-items: center;

        justify-content: center;

        padding: 0 8px;

        border-radius: 0;

        color: #ffffff;

        font-size: 17px;

        font-weight: 700;

        white-space: nowrap;

        text-align: center;

        transition:
            background 0.2s ease,
            color 0.2s ease;
    }


    /* Separators */

    .main-nav .nav-item:not(:last-child) {

        border-right:
            1px solid
            rgba(255,255,255,0.22);
    }


    /* Hover */

    .main-nav .nav-item:hover {

        background:
            rgba(255,255,255,0.92);

        transform: none;
    }


    /* Active Home */

    .main-nav .home-link {

        position: relative;

        background: transparent;
    }


    .main-nav .home-link::after {

        content: "";

        position: absolute;

        bottom: -1px;

        left: 30%;

        right: 30%;

        height: 4px;

        border-radius: 10px;

        background: #2865e8;
    }


    /* ================= RIGHT NAV ================= */

    .right-nav {

        width: 440px;

        min-width: 440px;

        flex: 0 0 440px;

        height: 100%;

        display: flex;

        align-items: center;

        justify-content: flex-end;

        gap: 16px;

        margin-left: 12px;
    }


    /* ================= NOTIFICATIONS ================= */

    .notification-link {

        height: 50px;

        min-width: 150px;

        padding: 0 8px;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 8px;

        border-radius: 10px;

        color: #ffffff;

        font-size: 16px;

        font-weight: 700;

        white-space: nowrap;
    }


    .notification-link:hover {

        background:
            rgba(255,255,255,0.88);
    }


    /* ================= NOTIFICATION BADGE ================= */

    .notification-badge {

        min-width: 24px;

        height: 24px;

        padding: 0 7px;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        border-radius: 50px;

        background: #ff4141;

        color: #ffffff;

        font-size: 13px;

        font-weight: 800;
    }


    /* ================= LOGOUT ================= */

    .logout-btn {

        width: 140px;

        min-width: 140px;

        height: 50px;

        border: none;

        border-radius: 12px;

        background: #ff4242;

        color: #ffffff;

        font-size: 17px;

        font-weight: 800;

        cursor: pointer;

        flex-shrink: 0;
    }


    .logout-btn:hover {

        background: #ed3030;

        transform: translateY(-1px);
    }


    /* ================= MENU ================= */

    .menu-toggle {

        width: 56px;

        min-width: 56px;

        height: 56px;

        flex-shrink: 0;

        border:
            1px solid
            rgba(255,255,255,0.25);

        border-radius: 14px;

        background: #101b31;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 6px;

        cursor: pointer;
    }


    .menu-toggle span {

        width: 31px;

        height: 4px;

        border-radius: 5px;

        background: #ffffff;

        display: block;
    }

}


/* =========================================================
   SMALLER LAPTOP
========================================================= */

@media (min-width: 1151px) and (max-width: 1450px) {

    .navbar {

        padding: 0 16px;
    }


    .logo {

        width: 285px;

        min-width: 285px;

        flex-basis: 285px;

        font-size: 25px;
    }


    .main-nav .nav-item {

        font-size: 15px;

        padding: 0 5px;
    }


    .right-nav {

        width: 375px;

        min-width: 375px;

        flex-basis: 375px;

        gap: 9px;
    }


    .notification-link {

        min-width: 125px;

        font-size: 14px;
    }


    .logout-btn {

        width: 115px;

        min-width: 115px;

        font-size: 15px;
    }


    .menu-toggle {

        width: 52px;

        min-width: 52px;

        height: 52px;
    }

}
/* =========================================================
   FINAL SERVICES SECTION
   ========================================================= */

/* RIGHT SIDE — 4 CARDS */
.small-service {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 18px;
    min-height: 680px;
    overflow: hidden;
}

/* HIDE TREKKING CARD */
.small-service .trekking-card {
    display: none !important;
}

/* GLASS COMING SOON PANEL */
.small-service .coming-soon-panel {
    position: absolute;
    left: 3%;
    right: 3%;
    top: 17%;
    height: 72%;
    z-index: 50;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    padding: 25px 35px;

    border-radius: 30px;

    background: rgba(255, 255, 255, 0.60);
    border: 1px solid rgba(255, 255, 255, 0.94);

    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    pointer-events: none;
}

/* TRAVEL ILLUSTRATION */
.travel-illustration {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.travel-map {
    position: absolute;
    left: 50%;
    top: 43%;
    transform: translate(-50%, -50%) rotate(-4deg);
    z-index: 5;
    font-size: 96px;

    opacity: 0.95;

    filter:
        drop-shadow(0 8px 10px rgba(15, 23, 42, 0.12));
}

.travel-pin {
    position: absolute;
    left: 51%;
    top: 27%;
    transform: translate(-50%, -50%);
    z-index: 6;
    font-size: 66px;

    filter:
        drop-shadow(0 6px 8px rgba(15, 23, 42, 0.15));
}

.travel-camera {
    position: absolute;
    left: 27%;
    top: 48%;
    z-index: 6;
    font-size: 45px;
    transform: rotate(-12deg);
}

.travel-suitcase {
    position: absolute;
    right: 25%;
    top: 50%;
    z-index: 6;
    font-size: 45px;
    transform: rotate(8deg);
}

.travel-cloud {
    position: absolute;
    z-index: 4;
    font-size: 30px;
    opacity: 0.85;
}

.travel-illustration .cloud-one {
    left: 29%;
    top: 22%;
}

.travel-illustration .cloud-two {
    right: 27%;
    top: 25%;
}

.travel-spark {
    position: absolute;
    z-index: 6;
    color: #facc15;
    font-size: 28px;
    font-weight: 900;
}

.travel-illustration .spark-one {
    left: 27%;
    top: 39%;
}

.travel-illustration .spark-two {
    right: 27%;
    top: 39%;
}

/* DOTTED ROUTES */
.travel-illustration .route {
    position: absolute;
    width: 125px;
    height: 70px;
    border-top: 3px dashed rgba(59, 130, 246, 0.45);
    border-radius: 50%;
    z-index: 3;
}

.travel-illustration .route-left {
    left: 24%;
    top: 33%;
    transform: rotate(-18deg);
}

.travel-illustration .route-right {
    right: 23%;
    top: 35%;
    transform: rotate(18deg);
}

/* CENTER TEXT */
.small-service .coming-content {
    position: relative !important;
    z-index: 20 !important;

    width: 100% !important;

    margin-top: 150px !important;
    padding: 0 15px !important;

    text-align: center !important;
}

.small-service .coming-label {
    margin: 0 0 6px !important;

    color: #172033 !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    letter-spacing: 0.6px;
}

.small-service .coming-soon-panel h2 {
    margin: 0 !important;

    color: #101b31 !important;
    font-size: 48px !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
}

.small-service .coming-line {
    width: 255px;
    height: 6px;

    margin: 8px auto 15px;

    border-radius: 50px;
    background: #facc15;
}

.small-service .coming-soon-panel p {
    max-width: 560px;
    margin: 0 auto 10px;

    color: #64748b;
    font-size: 15px;
    line-height: 1.5;
}

.small-service .stay-tuned {
    margin-top: 8px;

    color: #7c3aed;
    font-size: 14px;
    font-weight: 800;
}

/* SERVICE CARDS */
.small-service .service-card {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 320px;
    padding: 30px 20px;

    text-align: center;

    border-radius: 28px;

    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.95);

    color: #172033;

    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.09);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

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

    overflow: hidden;
}

.small-service .service-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 38px rgba(15, 23, 42, 0.14);
}

.small-service .service-icon {
    position: relative;
    z-index: 2;

    font-size: 55px;
    line-height: 1;

    margin-bottom: 13px;
}

.small-service .service-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 7px;

    color: #172033;
    font-size: 21px;
    font-weight: 900;
}

.small-service .service-card p {
    position: relative;
    z-index: 5;

    margin: 6px 0 15px;

    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
}

.small-service .coming-card-btn {
    position: relative;
    z-index: 60;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: auto;

    min-width: 145px;
    height: 42px;

    padding: 0 24px;

    border-radius: 50px;

    background: linear-gradient(
        135deg,
        #8b5cf6,
        #7c3aed
    );

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(124, 58, 237, 0.25);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1150px) {

    .service-layout {
        grid-template-columns: 1fr;
    }

    .taxi-banner,
    .small-service {
        min-height: 680px;
    }
}

@media (max-width: 650px) {

    .small-service {
        min-height: auto;

        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(2, minmax(230px, 1fr));

        gap: 12px;
    }

    .small-service .service-card {
        min-height: 230px;
        padding: 26px 14px 18px;
    }

    .small-service .service-icon {
        font-size: 38px;
    }

    .small-service .service-card h3 {
        font-size: 19px;
    }

    .small-service .service-card p {
        font-size: 13px;
    }

    .small-service .coming-soon-panel {
        left: 1%;
        right: 1%;
        top: 16%;
        height: 68%;

        padding: 20px 14px;
    }

    .travel-map {
        font-size: 70px;
    }

    .travel-pin {
        font-size: 50px;
    }

    .travel-camera,
    .travel-suitcase {
        font-size: 34px;
    }

    .small-service .coming-content {
        margin-top: 105px !important;
    }

    .small-service .coming-label {
        font-size: 13px !important;
    }

    .small-service .coming-soon-panel h2 {
        font-size: 34px !important;
    }

    .small-service .coming-line {
        width: 180px;
        height: 5px;
    }

    .small-service .coming-soon-panel p {
        font-size: 12px;
    }

    .small-service .stay-tuned {
        font-size: 12px;
    }
}

@media (max-width: 430px) {

    .small-service {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, minmax(210px, auto));
    }

    .small-service .coming-soon-panel {
        display: none;
    }
}
/* =========================================================
   FINAL TAXI IMAGE FIX
========================================================= */

.taxi-banner {
    position: relative;
    overflow: hidden;

    min-height: 620px;

    background-image:
        linear-gradient(
            180deg,
            rgba(5, 20, 45, 0.05) 0%,
            rgba(5, 20, 45, 0.12) 35%,
            rgba(5, 20, 45, 0.78) 100%
        ),
        url("images/taxi.jpg") !important;

    background-size: cover !important;
    background-position: center center !important;

    display: flex;
    align-items: flex-end;

    padding: 50px;
}

/* PHOTO ELEMENT — because HTML now contains img */
.taxi-image-wrap {
    position: absolute;
    inset: 0;

    z-index: 0;

    overflow: hidden;
}

.taxi-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center center;

    position: absolute;
    inset: 0;

    z-index: 0;
}

/* DARK GRADIENT ABOVE PHOTO */
.taxi-banner::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(5, 20, 45, 0.03) 0%,
            rgba(5, 20, 45, 0.08) 35%,
            rgba(5, 20, 45, 0.82) 100%
        );
}

/* MOST BOOKED ABOVE PHOTO */
.taxi-banner .tag {
    z-index: 5;
}

/* TAXI TEXT ABOVE EVERYTHING */
.taxi-banner .taxi-left {
    position: relative;
    z-index: 5;
}

/* TAXI HEADING */
.taxi-banner .taxi-left h1 {
    color: #ffffff;
    text-shadow:
        0 3px 12px rgba(0, 0, 0, 0.45);
}

/* TAXI DESCRIPTION */
.taxi-banner .taxi-left p {
    color: #ffffff;
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.40);
}
/* =========================================================
   FINAL TAXI POSITION FIX
========================================================= */

.services .service-layout .taxi-banner > .taxi-left {
    position: absolute !important;

    top: 155px !important;
    left: 20px !important;
    right: auto !important;
    

    width: 55% !important;

    z-index: 100 !important;

    text-align: left !important;
}

/* TAXI HEADING */
.services .service-layout .taxi-banner > .taxi-left h1 {
    margin: 0 0 14px 0 !important;

    color: #ffffff !important;

    font-size: 48px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;

    white-space: nowrap !important;
}

/* TAXI DESCRIPTION */
.services .service-layout .taxi-banner > .taxi-left p {
    max-width: 550px !important;

    margin: 0 0 28px 0 !important;

    color: #ffffff !important;

    font-size: 18px !important;
    line-height: 1.6 !important;
}

/* TAXI BUTTON */
.services .service-layout .taxi-banner > .taxi-left .taxi-book-btn {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-width: 230px !important;
    height: 58px !important;

    margin: 0 !important;

    padding: 0 28px !important;

    border-radius: 14px !important;
}
/* =========================================================
   FINAL COMING SOON PANEL POSITION
========================================================= */

.services .small-service > .coming-soon-panel {
    position: absolute !important;

    top: 17% !important;
    left: 3% !important;
    right: 3% !important;

    height:72% !important;

    z-index: 20 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    box-sizing: border-box !important;
}
/* =========================================================
   FINAL SERVICES POSITION FIX
   ========================================================= */

/* ---------- LEFT TAXI BANNER ---------- */

.services .taxi-banner {
    position: relative !important;
    overflow: hidden !important;
}

.services .taxi-banner .taxi-left {
    position: absolute !important;

    top: 170px !important;
    left: 42px !important;

    width: 520px !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;

    z-index: 10 !important;
}

/* Taxi heading */

.services .taxi-banner .taxi-left h1 {
    margin: 0 0 14px 0 !important;

    display: flex !important;
    align-items: center !important;
    gap: 14px !important;

    font-size: 52px !important;
    line-height: 1.1 !important;

    color: #ffffff !important;

    white-space: nowrap !important;
}

/* Taxi description */

.services .taxi-banner .taxi-left p {
    margin: 0 0 28px 0 !important;

    max-width: 500px !important;

    font-size: 21px !important;
    line-height: 1.55 !important;

    color: #ffffff !important;

    text-align: left !important;
}

/* Taxi button */

.services .taxi-banner .taxi-left .taxi-book-btn {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 265px !important;

    padding: 18px 28px !important;

    margin: 0 !important;

    font-size: 20px !important;
    font-weight: 800 !important;

    text-decoration: none !important;

    border-radius: 14px !important;

    position: relative !important;
    z-index: 20 !important;
}


/* ---------- MOST BOOKED ---------- */

.services .taxi-banner .tag {
    position: absolute !important;

    top: 35px !important;
    left: 35px !important;

    z-index: 20 !important;
}


/* =========================================================
   RIGHT SIDE
   ========================================================= */

.services .small-service {
    position: relative !important;
}


/* ---------- BIG COMING SOON PANEL ---------- */

.services .coming-soon-panel {
    position: relative !important;

    z-index: 5 !important;

    width: calc(100% - 30px) !important;

    margin-left: 15px !important;
    margin-right: 15px !important;

    min-height: 570px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: flex-start !important;

    padding: 45px 35px 35px !important;

    box-sizing: border-box !important;
}


/* ---------- TRAVEL ART ---------- */

.services .coming-soon-panel .travel-map-art {
    position: relative !important;

    width: 100% !important;
    height: 220px !important;

    flex-shrink: 0 !important;

    margin: 0 !important;

    display: block !important;

    transform: none !important;
}


/* Map */

.services .coming-soon-panel .travel-map {
    position: absolute !important;

    left: 50% !important;
    top: 35px !important;

    transform: translateX(-50%) !important;

    z-index: 5 !important;
}


/* Location pin */

.services .coming-soon-panel .travel-location {
    position: absolute !important;

    left: 50% !important;
    top: 0 !important;

    transform: translateX(-50%) !important;

    z-index: 8 !important;
}


/* Camera */

.services .coming-soon-panel .travel-camera {
    position: absolute !important;

    left: 27% !important;
    top: 105px !important;

    z-index: 7 !important;
}


/* Suitcase */

.services .coming-soon-panel .travel-suitcase {
    position: absolute !important;

    right: 27% !important;
    top: 105px !important;

    z-index: 7 !important;
}


/* Clouds */

.services .coming-soon-panel .cloud-one {
    position: absolute !important;

    left: 25% !important;
    top: 55px !important;
}

.services .coming-soon-panel .cloud-two {
    position: absolute !important;

    right: 25% !important;
    top: 55px !important;
}


/* Sparks */

.services .coming-soon-panel .spark-one {
    position: absolute !important;

    left: 35% !important;
    top: 110px !important;
}

.services .coming-soon-panel .spark-two {
    position: absolute !important;

    right: 35% !important;
    top: 110px !important;
}


/* ---------- CENTER TEXT ---------- */

.services .coming-soon-panel .coming-content {
    position: relative !important;

    width: 100% !important;

    margin: -5px 0 0 0 !important;
    padding: 0 !important;

    text-align: center !important;

    z-index: 10 !important;
}


/* Label */

.services .coming-soon-panel .coming-label {
    margin: 0 0 8px 0 !important;

    font-size: 20px !important;
    font-weight: 800 !important;

    text-align: center !important;
}


/* Coming Soon heading */

.services .coming-soon-panel .coming-content h2 {
    margin: 0 !important;

    font-size: 52px !important;
    line-height: 1.1 !important;

    text-align: center !important;

    white-space: nowrap !important;
}


/* Yellow line */

.services .coming-soon-panel .coming-line {
    width: 280px !important;
    height: 6px !important;

    margin: 12px auto 18px !important;

    border-radius: 10px !important;
}


/* Description */

.services .coming-soon-panel .coming-content p {
    margin: 0 auto 12px !important;

    max-width: 650px !important;

    font-size: 18px !important;
    line-height: 1.5 !important;

    text-align: center !important;
}


/* Stay tuned */

.services .coming-soon-panel .stay-tuned {
    display: block !important;

    margin: 0 !important;

    text-align: center !important;

    font-size: 18px !important;
    font-weight: 800 !important;
}


/* =========================================================
   SERVICE CARDS
   ========================================================= */

.services .small-service .service-card {
    position: relative !important;

    z-index: 2 !important;
}


/* =========================================================
   DESKTOP ONLY
   ========================================================= */

@media (min-width: 1000px) {

    .services .service-layout {
        align-items: stretch !important;
    }

    .services .taxi-banner {
        min-height: 780px !important;
    }

    .services .small-service {
        min-height: 780px !important;
    }

}


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

@media (max-width: 999px) {

    .services .taxi-banner .taxi-left {
        position: absolute !important;

        top: 150px !important;
        left: 30px !important;

        width: calc(100% - 60px) !important;
    }

    .services .taxi-banner .taxi-left h1 {
        font-size: 40px !important;
        white-space: normal !important;
    }

    .services .taxi-banner .taxi-left p {
        font-size: 18px !important;
    }

    .services .coming-soon-panel .coming-content h2 {
        font-size: 42px !important;
        white-space: normal !important;
    }

}
/* =========================================================
   FINAL RIGHT SIDE - COMING SOON OVERLAY FIX
   ========================================================= */

.services .small-service {
    position: relative !important;
}

/* Coming Soon panel ko grid se nikaal kar
   4 cards ke upar overlay karo */

.services .small-service .coming-soon-panel {
    position: absolute !important;

    top: 45px !important;
    left: 15px !important;
    right: 15px !important;

    width: auto !important;
    height: 570px !important;
    min-height: 0 !important;

    margin: 0 !important;

    padding: 30px 30px 25px !important;

    box-sizing: border-box !important;

    z-index: 50 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Illustration */

.services .small-service .coming-soon-panel .travel-map-art {
    width: 100% !important;
    height: 230px !important;

    flex-shrink: 0 !important;

    margin: 0 !important;
    transform: none !important;
}

/* Map */

.services .small-service .coming-soon-panel .travel-map {
    left: 50% !important;
    top: 45px !important;

    transform: translateX(-50%) !important;
}

/* Pin */

.services .small-service .coming-soon-panel .travel-location {
    left: 50% !important;
    top: 5px !important;

    transform: translateX(-50%) !important;
}

/* Camera */

.services .small-service .coming-soon-panel .travel-camera {
    left: 28% !important;
    top: 115px !important;
}

/* Suitcase */

.services .small-service .coming-soon-panel .travel-suitcase {
    right: 28% !important;
    top: 115px !important;
}

/* Clouds */

.services .small-service .coming-soon-panel .cloud-one {
    left: 25% !important;
    top: 60px !important;
}

.services .small-service .coming-soon-panel .cloud-two {
    right: 25% !important;
    top: 60px !important;
}

/* Sparks */

.services .small-service .coming-soon-panel .spark-one {
    left: 36% !important;
    top: 120px !important;
}

.services .small-service .coming-soon-panel .spark-two {
    right: 36% !important;
    top: 120px !important;
}

/* Text */

.services .small-service .coming-soon-panel .coming-content {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
}

/* Exciting Features */

.services .small-service .coming-soon-panel .coming-label {
    margin: 0 0 8px 0 !important;

    text-align: center !important;
}

/* Coming Soon */

.services .small-service .coming-soon-panel .coming-content h2 {
    margin: 0 !important;

    font-size: 52px !important;
    line-height: 1.1 !important;

    text-align: center !important;
}

/* Yellow line */

.services .small-service .coming-soon-panel .coming-line {
    margin: 12px auto 18px !important;
}

/* Description */

.services .small-service .coming-soon-panel .coming-content p {
    margin: 0 auto 12px !important;

    text-align: center !important;
}

/* Stay tuned */

.services .small-service .coming-soon-panel .stay-tuned {
    display: block !important;

    text-align: center !important;
}
/* ================= PROFESSIONAL FOOTER ================= */

.site-footer{
    background:#0b1220;
    color:#fff;
    padding:70px 8% 25px;
    margin-top:70px;
}

.footer-container{
    max-width:1400px;
    margin:0 auto;

    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:60px;
}

.footer-brand{
    max-width:360px;
}

.footer-logo{
    display:inline-flex;
    align-items:center;
    gap:10px;

    color:#fff;
    text-decoration:none;

    font-size:28px;
    font-weight:800;

    margin-bottom:15px;
}

.footer-brand p{
    margin:0 0 12px;

    color:#60a5fa;
    font-size:17px;
    font-weight:600;
}

.footer-brand span{
    display:block;

    color:#94a3b8;
    font-size:14px;
    line-height:1.7;
}

.footer-column{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.footer-column h3{
    margin:0 0 10px;

    color:#fff;
    font-size:17px;
    font-weight:700;
}

.footer-column a{
    color:#94a3b8;
    text-decoration:none;

    font-size:14px;

    transition:.25s ease;
}

.footer-column a:hover{
    color:#60a5fa;
    transform:translateX(3px);
}

.footer-bottom{
    max-width:1400px;
    margin:55px auto 0;

    padding-top:22px;

    border-top:1px solid rgba(255,255,255,.10);

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;
}

.footer-bottom p{
    margin:0;

    color:#64748b;
    font-size:13px;
}

.footer-bottom-links{
    display:flex;
    gap:20px;
}

.footer-bottom-links a{
    color:#64748b;
    text-decoration:none;
    font-size:13px;

    transition:.25s ease;
}

.footer-bottom-links a:hover{
    color:#fff;
}


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

@media(max-width:900px){

    .footer-container{
        grid-template-columns:repeat(2,1fr);
        gap:45px;
    }

    .footer-brand{
        grid-column:1/-1;
        max-width:600px;
    }

}


@media(max-width:600px){

    .site-footer{
        padding:55px 25px 25px;
    }

    .footer-container{
        grid-template-columns:1fr;
        gap:35px;
    }

    .footer-brand{
        grid-column:auto;
    }

    .footer-logo{
        font-size:24px;
    }

    .footer-bottom{
        margin-top:40px;

        flex-direction:column;
        align-items:flex-start;
    }

    .footer-bottom-links{
        flex-wrap:wrap;
        gap:15px;
    }

}
/* =====================================================
   MYTRAVELBUDDY PREMIUM FOOTER
===================================================== */

.site-footer{
    position:relative;
    margin-top:80px;
    padding:55px 6% 25px;

    background:
        radial-gradient(circle at 20% 20%, rgba(37,99,235,.12), transparent 30%),
        radial-gradient(circle at 85% 20%, rgba(59,130,246,.10), transparent 30%),
        #020b18;

    color:#fff;
    overflow:hidden;
}


/* subtle background pattern */

.site-footer::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(rgba(59,130,246,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59,130,246,.035) 1px, transparent 1px);

    background-size:45px 45px;

    pointer-events:none;
}


/* blue glow */

.footer-glow{
    position:absolute;

    width:500px;
    height:250px;

    top:-180px;
    left:50%;

    transform:translateX(-50%);

    background:#2563eb;
    filter:blur(140px);

    opacity:.12;
}


/* MAIN */

.footer-main{
    position:relative;
    z-index:2;

    max-width:1450px;
    margin:auto;

    padding:38px;

    display:grid;

    grid-template-columns:
        1.6fr
        1fr
        1fr
        1.1fr
        1.6fr;

    gap:40px;

    background:rgba(7,20,38,.72);

    border:1px solid rgba(96,165,250,.18);

    border-radius:26px;

    backdrop-filter:blur(18px);

    box-shadow:
        0 25px 70px rgba(0,0,0,.35),
        inset 0 1px rgba(255,255,255,.04);
}


/* BRAND */

.footer-logo{
    display:flex;
    align-items:center;

    gap:10px;

    color:#fff;

    text-decoration:none;

    font-size:29px;

    font-weight:800;
}

.footer-logo > span:first-child{
    font-size:32px;
}

.blue-text{
    color:#3b82f6;
}

.footer-brand h3{
    margin:18px 0 8px;

    color:#3b82f6;

    font-size:17px;
}

.footer-brand p{
    max-width:310px;

    color:#94a3b8;

    line-height:1.7;

    font-size:14px;

    margin:0;
}


/* SOCIAL */

.footer-socials{
    display:flex;

    gap:14px;

    margin-top:25px;
}

.footer-socials a{
    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    background:rgba(37,99,235,.12);

    border:1px solid rgba(96,165,250,.15);

    color:#fff;

    text-decoration:none;

    font-size:18px;

    font-weight:700;

    transition:.25s ease;
}

.footer-socials a:hover{
    transform:translateY(-4px);

    background:#2563eb;

    box-shadow:0 8px 25px rgba(37,99,235,.35);
}


/* LINKS */

.footer-links{
    display:flex;

    flex-direction:column;

    gap:12px;
}

.footer-links h3{
    margin:2px 0 12px;

    font-size:17px;

    color:#fff;
}

.footer-links a{
    color:#94a3b8;

    text-decoration:none;

    font-size:14px;

    transition:.25s ease;
}

.footer-links a:hover{
    color:#60a5fa;

    transform:translateX(4px);
}


/* COMMUNITY CARD */

.footer-community{
    padding:25px;

    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(30,64,175,.20),
            rgba(15,23,42,.65)
        );

    border:1px solid rgba(96,165,250,.22);

    box-shadow:
        inset 0 1px rgba(255,255,255,.05);
}

.footer-community h3{
    margin:0 0 12px;

    font-size:18px;
}

.footer-community p{
    color:#94a3b8;

    font-size:14px;

    line-height:1.6;

    margin:0 0 20px;
}


/* EMAIL */

.footer-email-box{
    display:flex;

    background:#102747;

    border-radius:13px;

    padding:5px;

    border:1px solid rgba(96,165,250,.15);
}

.footer-email-box input{
    flex:1;

    min-width:0;

    border:none;

    outline:none;

    background:transparent;

    color:#fff;

    padding:12px;

    font-size:14px;
}

.footer-email-box input::placeholder{
    color:#7890ad;
}

.footer-email-box button{
    width:50px;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:#fff;

    font-size:25px;

    cursor:pointer;

    transition:.25s ease;
}

.footer-email-box button:hover{
    background:#3b82f6;

    transform:translateX(2px);
}


/* STATS */

.footer-stats{
    position:relative;
    z-index:2;

    max-width:1100px;

    margin:35px auto 0;

    padding:22px 30px;

    display:flex;

    justify-content:center;

    gap:80px;

    border-top:1px solid rgba(148,163,184,.15);

    border-bottom:1px solid rgba(148,163,184,.15);
}

.footer-stat{
    display:flex;

    align-items:center;

    gap:14px;

    min-width:180px;
}

.stat-icon{
    font-size:30px;
}

.footer-stat strong{
    display:block;

    font-size:22px;

    color:#fff;
}

.footer-stat small{
    display:block;

    margin-top:3px;

    color:#94a3b8;

    font-size:12px;
}


/* BOTTOM */

.footer-bottom{
    position:relative;
    z-index:2;

    max-width:1450px;

    margin:22px auto 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;
}

.footer-bottom p{
    margin:0;

    color:#64748b;

    font-size:13px;
}

.footer-bottom-links{
    display:flex;

    gap:25px;
}

.footer-bottom-links a{
    color:#64748b;

    text-decoration:none;

    font-size:13px;

    transition:.2s;
}

.footer-bottom-links a:hover{
    color:#fff;
}


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

@media(max-width:1100px) and (min-width:701px){

    .footer-main{
        grid-template-columns:1.5fr 1fr 1fr;
        gap:30px;
    }

    .footer-community{
        grid-column:1/-1;
    }

}

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

@media(max-width:700px){

    .site-footer{
        padding:40px 18px 20px;
    }

    .footer-main{
        grid-template-columns:1fr;

        padding:25px;

        gap:30px;

        border-radius:22px;
    }

    .footer-community{
        grid-column:auto;
    }

    .footer-logo{
        font-size:25px;
    }

    .footer-stats{
        flex-direction:column;

        gap:20px;

        padding:25px;

        align-items:center;
    }

    .footer-stat{
        width:190px;
    }

    .footer-bottom{
        flex-direction:column;

        align-items:center;

        text-align:center;

        margin-top:25px;
    }

    .footer-bottom-links{
        flex-wrap:wrap;

        justify-content:center;

        gap:15px;
    }

}
/* =========================================================
   MYTRAVELBUDDY — FINAL FOOTER
   Target: C DESIGN
========================================================= */

.mtb-footer{
    position:relative;

    width:100%;

    margin-top:70px;

    padding:55px 5% 25px;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(37,99,235,.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(37,99,235,.10),
            transparent 30%
        ),
        #020b18;

    color:#fff;

    overflow:hidden;
}


/* subtle map/grid feeling */

.mtb-footer::before{
    content:"";

    position:absolute;

    inset:0;

    background:
        repeating-radial-gradient(
            ellipse at 20% 20%,
            rgba(59,130,246,.035) 0,
            rgba(59,130,246,.035) 1px,
            transparent 2px,
            transparent 20px
        );

    opacity:.5;

    pointer-events:none;
}


/* =========================================================
   MAIN CARD
========================================================= */

.mtb-footer-card{
    position:relative;

    z-index:2;

    width:100%;

    max-width:1450px;

    margin:0 auto;

    padding:38px 45px;

    display:grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr
        1.5fr;

    gap:40px;

    background:rgba(5,18,35,.78);

    border:1px solid rgba(96,165,250,.22);

    border-radius:25px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.35),
        inset 0 1px rgba(255,255,255,.04);

    backdrop-filter:blur(18px);
}


/* =========================================================
   BRAND
========================================================= */

.mtb-footer-brand{
    min-width:0;
}

.mtb-footer-logo{
    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    text-decoration:none;

    font-size:28px;

    font-weight:800;
}

.mtb-plane{
    font-size:34px;
}

.mtb-footer-logo span span{
    color:#3b82f6;
}

.mtb-footer-brand h3{
    margin:18px 0 10px;

    color:#3b82f6;

    font-size:18px;

    font-weight:700;
}

.mtb-footer-brand p{
    max-width:330px;

    margin:0;

    color:#9db0c8;

    font-size:14px;

    line-height:1.7;
}


/* =========================================================
   INSTAGRAM
========================================================= */

.mtb-social{
    margin-top:25px;

    display:flex;
}

.mtb-social a{
    width:43px;
    height:43px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:rgba(37,99,235,.14);

    border:1px solid rgba(96,165,250,.22);

    color:#fff;

    text-decoration:none;

    font-size:25px;

    font-weight:600;

    transition:.25s ease;
}

.mtb-social a:hover{
    background:#2563eb;

    transform:translateY(-4px);

    box-shadow:
        0 8px 25px rgba(37,99,235,.35);
}


/* =========================================================
   LINK COLUMNS
========================================================= */

.mtb-footer-column{
    display:flex;

    flex-direction:column;

    gap:12px;
}

.mtb-footer-column h3{
    display:flex;

    align-items:center;

    gap:9px;

    margin:0 0 13px;

    color:#fff;

    font-size:17px;

    font-weight:700;
}

.mtb-footer-column h3 span{
    color:#3b82f6;

    font-size:20px;
}

.mtb-footer-column a{
    color:#9db0c8;

    text-decoration:none;

    font-size:14px;

    transition:.25s ease;
}

.mtb-footer-column a:hover{
    color:#60a5fa;

    transform:translateX(4px);
}


/* =========================================================
   COMMUNITY CARD
========================================================= */

.mtb-community{
    padding:25px;

    border-radius:21px;

    background:
        linear-gradient(
            145deg,
            rgba(30,64,175,.22),
            rgba(5,18,35,.72)
        );

    border:1px solid rgba(96,165,250,.25);

    box-shadow:
        0 12px 35px rgba(0,0,0,.18),
        inset 0 1px rgba(255,255,255,.05);
}

.mtb-community h3{
    margin:0 0 12px;

    color:#fff;

    font-size:18px;
}

.mtb-community p{
    margin:0 0 20px;

    color:#9db0c8;

    font-size:14px;

    line-height:1.6;
}


/* =========================================================
   EMAIL BOX
========================================================= */

.mtb-email{
    display:flex;

    width:100%;

    padding:5px;

    background:#102747;

    border:1px solid rgba(96,165,250,.16);

    border-radius:13px;
}

.mtb-email input{
    flex:1;

    min-width:0;

    padding:12px;

    border:none;

    outline:none;

    background:transparent;

    color:#fff;

    font-size:14px;
}

.mtb-email input::placeholder{
    color:#7890ad;
}

.mtb-email button{
    width:52px;

    height:45px;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:#fff;

    font-size:25px;

    cursor:pointer;

    transition:.25s ease;
}

.mtb-email button:hover{
    background:#3b82f6;

    transform:translateX(2px);
}


/* =========================================================
   STATS
========================================================= */

.mtb-stats{
    position:relative;

    z-index:2;

    width:100%;

    max-width:1050px;

    margin:28px auto 0;

    padding:22px 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:80px;

    border-top:1px solid rgba(148,163,184,.16);

    border-bottom:1px solid rgba(148,163,184,.16);
}

.mtb-stat{
    display:flex;

    align-items:center;

    gap:14px;

    min-width:190px;
}

.mtb-stat-icon{
    font-size:31px;
}

.mtb-stat strong{
    display:block;

    color:#fff;

    font-size:22px;

    line-height:1.2;
}

.mtb-stat span{
    display:block;

    margin-top:4px;

    color:#9db0c8;

    font-size:12px;
}


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

.mtb-footer-bottom{
    position:relative;

    z-index:2;

    width:100%;

    max-width:1450px;

    margin:20px auto 0;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;
}

.mtb-footer-bottom p{
    margin:0;

    color:#71839a;

    font-size:13px;
}

.mtb-footer-bottom div{
    display:flex;

    gap:28px;
}

.mtb-footer-bottom a{
    color:#71839a;

    text-decoration:none;

    font-size:13px;

    transition:.2s;
}

.mtb-footer-bottom a:hover{
    color:#fff;
}


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

@media(max-width:1100px) and (min-width:701px){

    .mtb-footer-card{
        grid-template-columns:
            1.4fr
            1fr
            1fr;

        gap:30px;
    }

    .mtb-community{
        grid-column:1/-1;
    }

}


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

@media(max-width:700px){

    .mtb-footer{
        padding:35px 15px 20px;
    }

    .mtb-footer-card{
        grid-template-columns:1fr;

        padding:25px;

        gap:30px;

        border-radius:21px;
    }

    .mtb-community{
        grid-column:auto;
    }

    .mtb-footer-logo{
        font-size:25px;
    }

    .mtb-stats{
        flex-direction:column;

        gap:20px;

        padding:25px;
    }

    .mtb-stat{
        width:190px;
    }

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

        text-align:center;

        gap:15px;
    }

    .mtb-footer-bottom div{
        flex-wrap:wrap;

        justify-content:center;

        gap:16px;
    }

}