:root {
    --ft-primary: #FF6FA0;
    --ft-primary-dark: #E8548A;
    --ft-secondary: #4FC1E9;
    --ft-secondary-dark: #2FA8D6;
    --ft-accent: #B7E1F5;
    --ft-success: #2ECC71;
    --ft-bg: #FFF7FB;
    --ft-dark: #2B2B2E;
    --ft-radius: 22px;
}

html {
    font-size: 16px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: 'Nunito', sans-serif;
    background-color: var(--ft-bg);
    color: var(--ft-dark);
    overflow-x: hidden;
    line-height: 1.6;
}

img, svg, video, iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

section {
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

a { color: var(--ft-primary-dark); }

.btn-ft-primary {
    background: var(--ft-primary);
    border: none;
    color: #fff;
    font-weight: 700;
    padding: .85rem 2rem;
    border-radius: 50px;
    transition: transform .25s ease, box-shadow .25s ease, background .2s ease;
    box-shadow: 0 10px 25px rgba(255, 111, 160, .35);
}
.btn-ft-primary:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 16px 30px rgba(255, 111, 160, .45);
    color: #fff;
    background: var(--ft-primary-dark);
}

.btn-ft-secondary {
    background: var(--ft-secondary);
    border: none;
    color: #fff;
    font-weight: 700;
    padding: .85rem 2rem;
    border-radius: 50px;
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 10px 25px rgba(79, 193, 233, .35);
}
.btn-ft-secondary:hover { transform: translateY(-3px) scale(1.03); color: #fff; background: var(--ft-secondary-dark); }

.btn-ft-outline {
    background: rgba(255,255,255,.15);
    border: 2px solid #fff;
    color: #fff;
    font-weight: 700;
    padding: .8rem 2rem;
    border-radius: 50px;
    transition: all .25s ease;
    backdrop-filter: blur(4px);
}
.btn-ft-outline:hover { background: #fff; color: var(--ft-primary-dark); }

/* ---------- Navbar ---------- */
.ft-navbar {
    transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease;
    padding: 1.1rem 0;
}
.ft-navbar.scrolled {
    background-color: #fff !important;
    box-shadow: 0 4px 24px rgba(255, 111, 160, .12);
    padding: .5rem 0;
}
.ft-navbar .navbar-brand { display: flex; align-items: center; gap: .6rem; }
.ft-navbar .navbar-brand img { height: 128px; width: 128px; border-radius: 50%; object-fit: cover; transition: height .3s ease, width .3s ease; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.521); }
.ft-navbar.scrolled .navbar-brand img { height: 78px; width: 78px; }
.ft-navbar .nav-link {
    font-weight: 700;
    color: var(--ft-dark);
    position: relative;
    margin: 0 .5rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.ft-navbar .nav-link:hover::after,
.ft-navbar .nav-link.active::after,
.ft-navbar .nav-link.show::after { width: 100%; }

/* Navbar links */
.ft-navbar .nav-link,
.ft-navbar .dropdown-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Underline */
.ft-navbar .nav-link::after,
.ft-navbar .dropdown-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #FF6FA0, #4FC1E9);
    border-radius: 50px;
    transform: translateX(-50%);
    transition: width .3s ease;
}

/* Hover & Active */
.ft-navbar .nav-link:hover::after,
.ft-navbar .dropdown:hover > .dropdown-toggle::after,
.ft-navbar .nav-link.active::after,
.ft-navbar .dropdown-toggle.active::after {
    width: 100%;
}

/* ---------- Hero (split layout with real photo) ---------- */
.ft-hero {
    position: relative;
    padding: 150px 0 90px;
    overflow: hidden;
    background: linear-gradient(180deg, #FFE3EF 0%, var(--ft-bg) 100%);
}
.ft-hero .shape {
    position: absolute;
    border-radius: 50%;
    opacity: .35;
}
.ft-hero-heading {
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
    line-height: 1.12;
    color: var(--ft-dark);
}
.ft-hero-heading .accent { color: var(--ft-primary); }
.ft-hero-heading .accent-blue { color: var(--ft-secondary-dark); }
.ft-hero-photo-wrap { position: relative; z-index: 2; }
.ft-hero-photo-wrap img {
    border-radius: 32px;
    box-shadow: 0 30px 60px rgba(255, 111, 160, .25);
    width: 100%;
    height: 420px;
    object-fit: cover;
}
.ft-hero-blob { position: absolute; border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%; z-index: 1; }
.ft-hero-badge {
    position: absolute;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(0,0,0,.12);
    padding: .8rem 1.1rem;
    z-index: 3;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.ft-wave-divider { position: absolute; bottom: -1px; left: 0; width: 100%; line-height: 0; }

/* ---------- Cards ---------- */
.ft-card {
    background: #fff;
    border-radius: var(--ft-radius);
    box-shadow: 0 10px 30px rgba(255, 111, 160, .08);
    transition: transform .3s ease, box-shadow .3s ease;
    overflow: hidden;
    height: 100%;
}
.ft-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(255, 111, 160, .16); }
.ft-icon-circle {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(255,111,160,.14), rgba(79,193,233,.14));
    color: var(--ft-primary);
    font-size: 1.6rem;
}

.ft-badge-tier-silver { background: #D9DEE3; color: #4a4a4a; }
.ft-badge-tier-gold { background: var(--ft-secondary); color: #06405a; }
.ft-badge-tier-platinum { background: linear-gradient(90deg, var(--ft-primary), var(--ft-secondary)); color: #fff; }

.ft-section-title { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.ft-section-title .highlight { color: var(--ft-primary); }

.ft-legend-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 6px; }

/* ---------- Fully responsive layout ---------- */
@media (max-width: 1200px) {
    .ft-hero-photo-wrap img {
        height: 370px;
    }
    .ft-hero-badge {
        font-size: .95rem;
    }
}

@media (max-width: 991px) {
    .ft-navbar .navbar-collapse {
        background: #fff;
        border-radius: 18px;
        padding: 1rem;
        margin-top: .75rem;
        box-shadow: 0 12px 28px rgba(0,0,0,.08);
    }
    .ft-navbar .nav-link {
        margin: .2rem 0;
    }
    .ft-hero {
        padding: 120px 0 70px;
    }
    .ft-hero-heading {
        font-size: clamp(1.9rem, 4.2vw, 2.7rem);
        text-align: center;
    }
    .ft-hero-photo-wrap img {
        height: 320px;
    }
    .ft-offer-card img {
        height: 220px;
    }
    .ft-package-card {
        padding: 1.5rem;
    }
    .ft-footer .row > div {
        margin-bottom: 1rem;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 15px;
    }
    .container,
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    .my-5 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }
    .ft-navbar {
        padding: .75rem 0;
    }
    .ft-navbar .navbar-toggler {
        border: 0;
        padding: .35rem .5rem;
    }
    .ft-navbar .navbar-brand img {
        height: 72px;
        width: 72px;
    }
    .ft-hero {
        padding: 100px 0 50px;
    }
    .ft-hero-heading {
        font-size: clamp(1.7rem, 7vw, 2.3rem);
        text-align: center;
    }
    .ft-hero-photo-wrap img {
        height: 260px;
    }
    .ft-hero-badge {
        position: static;
        display: inline-flex;
        margin-top: 1rem;
        width: fit-content;
    }
    .ft-section-title {
        font-size: clamp(1.6rem, 7vw, 2.1rem);
    }
    .ft-offer-card img {
        height: 200px;
    }
    .ft-offer-card-body {
        padding: 1rem 1rem 1.2rem;
    }
    .ft-form-section,
    .ft-form-help {
        padding: 1rem;
    }
    .ft-package-card {
        padding: 1.2rem;
    }
    .ft-counter {
        font-size: 2rem;
    }
    .btn-ft-primary,
    .btn-ft-secondary,
    .btn-ft-outline {
        width: 100%;
        display: inline-flex;
        justify-content: center;
    }
    .ft-theme-toggle {
        width: 50px;
        height: 50px;
        bottom: 18px;
        right: 18px;
    }
    .ft-theme-panel {
        width: calc(100% - 32px);
        right: 16px;
        left: 16px;
    }
}

@media (max-width: 575px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .ft-hero {
        padding: 94px 0 42px;
    }
    .ft-hero .shape {
        display: none;
    }
    .ft-hero-photo-wrap img {
        height: 220px;
    }
    .ft-offer-card img {
        height: 180px;
    }
    .ft-offer-card-body h4 {
        font-size: 1.1rem;
    }
    .ft-package-card {
        padding: 1rem;
    }
}

/* ---------- Footer ---------- */
.ft-footer { background: var(--ft-dark); color: #cfcfcf; }
.ft-footer a { color: #cfcfcf; text-decoration: none; }
.ft-footer a:hover { color: var(--ft-secondary); }
.ft-footer .navbar-brand img { height: 44px; width: 44px; border-radius: 50%; object-fit: cover; }

/* ---------- Gallery ---------- */
.ft-masonry { column-count: 3; column-gap: 1rem; }
.ft-masonry img { width: 100%; border-radius: 16px; margin-bottom: 1rem; cursor: pointer; transition: transform .3s ease; }
.ft-masonry img:hover { transform: scale(1.02); }
@media (max-width: 768px) { .ft-masonry { column-count: 1; } }

/* ---------- Counters ---------- */
.ft-counter { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 2.5rem; color: var(--ft-primary); }

/* ---------- Coffee lounge photo strip ---------- */
.ft-photo-strip img { border-radius: 20px; object-fit: cover; height: 100%; width: 100%; }

/* ---------- Theme switcher ---------- */
.ft-theme-toggle {
    position: fixed;
    bottom: 24px; right: 24px;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ft-primary), var(--ft-secondary));
    color: #fff;
    border: none;
    box-shadow: 0 10px 26px rgba(0,0,0,.25);
    z-index: 1050;
    font-size: 1.3rem;
    display: flex; align-items: center; justify-content: center;
    animation: ft-pulse 2.4s ease-in-out infinite;
}
@keyframes ft-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.ft-theme-panel {
    position: fixed;
    bottom: 92px; right: 24px;
    width: 280px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,.2);
    padding: 1.2rem;
    z-index: 1050;
    display: none;
}
.ft-theme-panel.open { display: block; }
.ft-theme-swatch {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    overflow: hidden;
}
.ft-theme-swatch span { flex: 1; }
.ft-theme-swatch.active { border-color: var(--ft-dark); }
.ft-theme-color-input { width: 100%; height: 38px; border: none; border-radius: 8px; padding: 0; cursor: pointer; }

/* ---------- Booking form enhancements ---------- */
.ft-form-section {
    background: linear-gradient(135deg, rgba(255,111,160,.05), rgba(79,193,233,.05));
    border: 1px solid rgba(255,111,160,.12);
    border-radius: 20px;
    padding: 1.25rem;
}
.ft-form-highlight {
    background: var(--ft-bg);
    border-left: 4px solid var(--ft-primary);
    border-radius: 14px;
    padding: .9rem 1rem;
    font-weight: 700;
    color: var(--ft-dark);
}
.ft-form-help {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(79,193,233,.2);
    padding: 1rem 1.1rem;
}

/* ---------- Testimonials slider ---------- */
.ft-testimonial-marquee {
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.ft-testimonial-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: ft-testimonial-scroll 24s linear infinite;
}
.ft-testimonial-track:hover {
    animation-play-state: paused;
}
.ft-testimonial-slide {
    width: min(320px, 82vw);
    flex: 0 0 auto;
}
.ft-testimonial-card {
    background: linear-gradient(135deg, #fff 0%, #fffafc 100%);
    border: 1px solid rgba(255,111,160,.12);
    border-radius: 24px;
    padding: 1.4rem;
    box-shadow: 0 16px 40px rgba(255,111,160,.08);
    height: 100%;
}
.ft-testimonial-card:nth-child(3n+1) {
    background: linear-gradient(135deg, #fff3f7 0%, #ffe8f1 100%);
}
.ft-testimonial-card:nth-child(3n+2) {
    background: linear-gradient(135deg, #f4fbff 0%, #e8f7ff 100%);
}
.ft-testimonial-card:nth-child(3n+3) {
    background: linear-gradient(135deg, #faf5ff 0%, #f0e8ff 100%);
}
.ft-testimonial-top {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: .9rem;
}
.ft-testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ft-primary), var(--ft-secondary));
    color: #fff;
    font-size: 1.1rem;
}
.ft-testimonial-stars {
    color: var(--ft-secondary);
    margin-bottom: .7rem;
    letter-spacing: .08em;
}
.ft-testimonial-message {
    font-size: 1rem;
    line-height: 1.7;
    color: #5f5f67;
    margin-bottom: 0;
    font-style: italic;
}

/* ---------- Offer cards ---------- */
.ft-offer-card {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(255,111,160,.12);
    transition: transform .35s ease, box-shadow .35s ease;
    height: 100%;
    border: 1px solid rgba(255,111,160,.12);
}
.ft-offer-card-pink {
    background: linear-gradient(135deg, #fff3f7 0%, #ffe8f1 100%);
    border-color: rgba(255,111,160,.18);
}
.ft-offer-card-blue {
    background: linear-gradient(135deg, #f3fbff 0%, #e8f7ff 100%);
    border-color: rgba(79,193,233,.18);
}
.ft-offer-card-lilac {
    background: linear-gradient(135deg, #faf6ff 0%, #f1e8ff 100%);
    border-color: rgba(180,140,224,.2);
}
.ft-offer-card:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 28px 70px rgba(79,193,233,.18);
}
.ft-offer-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,111,160,.08), rgba(79,193,233,.08));
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.ft-offer-card:hover::before {
    opacity: 1;
}
.ft-offer-card-image-wrap {
    position: relative;
}
.ft-offer-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}
.ft-offer-card:hover img {
    transform: scale(1.06);
}
.ft-offer-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: .45rem .8rem;
    border-radius: 999px;
    background: rgba(255,255,255,.95);
    color: var(--ft-primary-dark);
    font-size: .8rem;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.ft-offer-badge.badge-party { color: var(--ft-secondary-dark); }
.ft-offer-badge.badge-event { color: #8a4f99; }
.ft-offer-card-body {
    padding: 1.25rem 1.2rem 1.35rem;
    position: relative;
    z-index: 1;
}
.ft-offer-card-body h4 {
    color: var(--ft-dark);
    transition: color .25s ease;
}
.ft-offer-card:hover .ft-offer-card-body h4 {
    color: var(--ft-primary-dark);
}
.ft-offer-card-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 800;
    color: var(--ft-primary-dark);
    transition: transform .25s ease, gap .25s ease;
}
.ft-offer-card:hover .ft-offer-card-link {
    transform: translateX(3px);
    gap: .6rem;
}

.ft-package-card {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 2rem;
    height: 100%;
    box-shadow: 0 18px 45px rgba(0,0,0,.08);
    border: 1px solid rgba(255,111,160,.12);
    transition: transform .3s ease, box-shadow .3s ease;
}
.ft-package-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 55px rgba(79,193,233,.16);
}
.ft-package-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,111,160,.08), rgba(79,193,233,.08));
    pointer-events: none;
}
.ft-package-card > * {
    position: relative;
    z-index: 1;
}
.ft-package-card-primary {
    background: linear-gradient(135deg, #fff8fc 0%, #ffffff 100%);
}
.ft-package-card-secondary {
    background: linear-gradient(135deg, #f5fbff 0%, #ffffff 100%);
}
.ft-package-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ft-primary), var(--ft-secondary));
    color: #fff;
    font-size: 1.35rem;
    margin-bottom: 1rem;
}
.ft-package-badge {
    display: inline-block;
    margin-bottom: 1rem;
    padding: .45rem .8rem;
    border-radius: 999px;
    background: rgba(255,255,255,.75);
    color: var(--ft-primary-dark);
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ft-package-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ft-package-list li {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .7rem;
    color: var(--ft-dark);
}
.ft-package-list li i {
    color: var(--ft-success);
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 991px) {
    .ft-hero { padding: 130px 0 60px; }
    .ft-hero-photo-wrap img { height: 300px; margin-top: 2rem; }
}
@media (max-width: 575px) {
    .ft-theme-panel { right: 12px; left: 12px; width: auto; }
    .ft-theme-toggle { right: 16px; bottom: 16px; }
}

/* ---------- Beautiful booking calendar ---------- */
.ft-calendar-section { background: linear-gradient(180deg, rgba(255,111,160,.05), rgba(79,193,233,.04)); }
.ft-calendar-card { border-radius: 28px; background: linear-gradient(135deg, #fff, #fffafc); }
.ft-calendar-weekdays { font-size: .8rem; font-weight: 700; text-transform: uppercase; color: #7c7c86; }
.ft-calendar-weekdays .col { text-align: center; padding: .4rem 0; }
.ft-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .7rem; }
.ft-calendar-day {
    border: none;
    border-radius: 18px;
    min-height: 95px;
    padding: .7rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,.05);
    transition: transform .2s ease, box-shadow .2s ease;
    color: var(--ft-dark);
}
.ft-calendar-day:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,.1); }
.ft-calendar-day.current-month { opacity: 1; cursor: pointer; }
.ft-calendar-day.current-month:disabled { cursor: not-allowed; }
.ft-calendar-day.other-month { opacity: .45; background: #f7f4f8; }
.ft-calendar-day.today { outline: 2px solid rgba(255,111,160,.35); }
.ft-calendar-day.past { opacity: .55; cursor: not-allowed; }
.ft-day-number { font-weight: 800; font-size: 1rem; }
.ft-day-badge {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .3rem .5rem;
    border-radius: 999px;
    width: fit-content;
    background: rgba(0,0,0,.05);
}
.ft-day-subtext {
    font-size: .72rem;
    color: #6f6f75;
    margin-top: .2rem;
}
.ft-calendar-day.available .ft-day-badge { background: rgba(46,204,113,.12); color: #1f8d49; }
.ft-calendar-day.limited .ft-day-badge { background: rgba(255,183,3,.16); color: #9c6800; }
.ft-calendar-day.full .ft-day-badge { background: rgba(226,75,74,.14); color: #b43a39; }
.ft-calendar-day.blocked .ft-day-badge { background: rgba(68,68,65,.14); color: #5b5b58; }
.ft-calendar-day.full .ft-day-subtext, .ft-calendar-day.blocked .ft-day-subtext { color: #8b4d4d; }

@media (max-width: 768px) {
    .ft-calendar-grid { gap: .45rem; }
    .ft-calendar-day { min-height: 80px; padding: .55rem; border-radius: 14px; }
}

@keyframes ft-testimonial-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 576px) {
    .ft-testimonial-slide {
        width: min(300px, 88vw);
    }
    .ft-calendar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .4rem;
    }
    .ft-calendar-weekdays {
        display: none;
    }
    .ft-calendar-day {
        min-height: 72px;
        font-size: .9rem;
    }
    .ft-day-number {
        font-size: .9rem;
    }
}

/* ---------- Admin (unchanged palette hooks) ---------- */
.admin-sidebar { width: 260px; min-height: 100vh; background: var(--ft-dark); color: #eee; }
.admin-sidebar .nav-link { color: #cfcfcf; border-radius: 10px; padding: .65rem 1rem; margin-bottom: .25rem; }
.admin-sidebar .nav-link:hover, .admin-sidebar .nav-link.active { background: var(--ft-primary); color: #fff; }
.admin-stat-card { border-radius: 16px; border: none; box-shadow: 0 6px 18px rgba(0,0,0,.06); }

/* ============================================================
   Sky / animated clouds background (Welcome + What We Offer)
   ============================================================ */
.ft-sky-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #BEE7FB 0%, #E4F5FD 55%, #FBFEFF 100%);
}
.ft-sky-section > .container,
.ft-sky-section > .container-fluid { position: relative; z-index: 2; padding-top: 50px; }

.ft-clouds { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }

.ft-cloud-border-top {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 2;
    pointer-events: none;
}
.ft-cloud-border-top svg {
    display: block;
    width: 100%;
    height: 90px;
}
@media (max-width: 768px) {
    .ft-cloud-border-top svg { height: 54px; }
}

.ft-cloud {
    position: absolute;
    background: #fff;
    border-radius: 100px;
    opacity: .9;
    filter: blur(.5px);
    box-shadow: 0 10px 25px rgba(79, 193, 233, .12);
    animation-name: ft-cloud-drift;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.ft-cloud::before,
.ft-cloud::after {
    content: '';
    position: absolute;
    background: #fff;
    border-radius: 50%;
}
.ft-cloud::before { width: 55%; height: 140%; top: -55%; left: 8%; }
.ft-cloud::after { width: 42%; height: 110%; top: -40%; right: 12%; }

.ft-cloud-1 { width: 140px; height: 46px; top: 8%;  left: -180px; animation-duration: 38s; }
.ft-cloud-2 { width: 90px;  height: 30px; top: 22%; left: -140px; animation-duration: 26s; animation-delay: -6s; opacity: .8; }
.ft-cloud-3 { width: 180px; height: 56px; top: 55%; left: -220px; animation-duration: 46s; animation-delay: -18s; opacity: .7; }
.ft-cloud-4 { width: 110px; height: 36px; top: 70%; left: -160px; animation-duration: 30s; animation-delay: -12s; opacity: .85; }
.ft-cloud-5 { width: 70px;  height: 24px; top: 38%; left: -110px; animation-duration: 22s; animation-delay: -3s;  opacity: .65; }

@keyframes ft-cloud-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 260px)); }
}

@media (prefers-reduced-motion: reduce) {
    .ft-cloud { animation: none; }
}

/* ============================================================
   Upcoming Events — colorful section + cards
   ============================================================ */
.ft-events-section {
    background: linear-gradient(135deg, #FFF1D6 0%, #FFE3EF 55%, #E6F7FF 100%);
    border-radius: 30px;
    margin-left: 1rem;
    margin-right: 1rem;
}
.ft-event-card {
    border-radius: var(--ft-radius);
    background: #fff;
    border: none;
    border-top: 6px solid var(--ft-primary);
    box-shadow: 0 14px 30px rgba(0,0,0,.07);
    transition: transform .2s ease, box-shadow .2s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ft-event-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(0,0,0,.1); }
.ft-event-card:nth-of-type(3n+2) { border-top-color: var(--ft-secondary); }
.ft-event-card:nth-of-type(3n)   { border-top-color: #FFB703; }
.ft-event-card-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f4f3ef;
}
.ft-event-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.ft-event-card:hover .ft-event-card-image img { transform: scale(1.06); }
.ft-event-date-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .75rem;
    border-radius: 50px;
    background: rgba(255,111,160,.12);
    color: var(--ft-primary-dark);
    font-weight: 700;
    font-size: .78rem;
}

/* ============================================================
   Multi-step booking form
   ============================================================ */
.ft-steps-nav {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.ft-step-pill {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
    color: #9a9a9a;
    font-weight: 700;
    font-size: .85rem;
}
.ft-step-pill .ft-step-num {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #e9e9e9;
    color: #999;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem;
}
.ft-step-pill.active { color: var(--ft-primary-dark); box-shadow: 0 6px 18px rgba(255,111,160,.22); }
.ft-step-pill.active .ft-step-num { background: var(--ft-primary); color: #fff; }
.ft-step-pill.done { color: var(--ft-success); }
.ft-step-pill.done .ft-step-num { background: var(--ft-success); color: #fff; }

.ft-form-step { display: none; }
.ft-form-step.active { display: block; animation: ft-step-in .35s ease; }
@keyframes ft-step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }