/* ========================================================
           ROOT VARIABLES
           ======================================================== */

        :root {

            --br-primary: #087EA4;
            --br-primary-dark: #045A75;
            --br-primary-light: #EAF8FB;

            --br-white: #ffffff;
            --br-black: #10252d;

            --br-heading: #17313B;
            --br-text: #63757c;
            --br-muted: #8a999e;

            --br-border: #e6eef0;

            --br-bg: #f7fafb;
            --br-sand: #d7b98e;

            --br-radius-sm: 8px;
            --br-radius-md: 14px;
            --br-radius-lg: 22px;

            --br-shadow-sm:
                0 5px 20px rgba(15, 48, 60, 0.06);

            --br-shadow-md:
                0 15px 45px rgba(15, 48, 60, 0.10);

            --br-transition:
                all 0.3s ease;

        }


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

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {

            margin: 0;

            font-family:
                "DM Sans",
                sans-serif;

            color: var(--br-text);

            background: var(--br-white);

            line-height: 1.7;

        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {

            font-family:
                "Playfair Display",
                serif;

            color: var(--br-heading);

            font-weight: 600;

        }

        a {
            text-decoration: none;
        }

        img {
            max-width: 100%;
            display: block;
        }

        section {
            position: relative;
        }


        /* ========================================================
           CONTAINER
           ======================================================== */

        .br-container {

            width: 100%;

            max-width: 1240px;

            margin: 0 auto;

            padding-left: 20px;
            padding-right: 20px;

        }


        /* ========================================================
           TOP BAR
           ======================================================== */

        .br-topbar {

            background:
                var(--br-primary-dark);

            color:
                rgba(255,255,255,0.88);

            font-size: 13px;

            padding: 8px 0;

        }

        .br-topbar-inner {

            display: flex;

            justify-content: space-between;

            align-items: center;

            gap: 20px;

        }

        .br-topbar-left,
        .br-topbar-right {

            display: flex;

            align-items: center;

            gap: 18px;

        }

        .br-topbar a {

            color: #fff;

        }

        .br-topbar i {
            margin-right: 5px;
        }


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

        .br-navbar {

            position: sticky;

            top: 0;

            z-index: 1000;

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

            border-bottom:
                1px solid var(--br-border);

            box-shadow:
                0 2px 15px rgba(0,0,0,0.03);

        }

        .br-navbar-inner {

            min-height: 78px;

            display: flex;

            align-items: center;

            justify-content: space-between;

        }


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

        .br-logo {

            display: inline-flex;

            align-items: center;

            gap: 11px;

            color: var(--br-primary);

        }

        .br-logo:hover {
            color: var(--br-primary-dark);
        }

        .br-logo-icon {

            width: 43px;
            height: 43px;

            border-radius: 50%;

            display: flex;

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

            color: #fff;

            background:
                var(--br-primary);

            font-size: 19px;

        }

        .br-logo-text {

            display: flex;

            flex-direction: column;

            line-height: 1.1;

        }

        .br-logo-title {

            font-family:
                "Playfair Display",
                serif;

            font-size: 22px;

            font-weight: 700;

            letter-spacing: 0.3px;

        }

        .br-logo-subtitle {

            font-size: 9px;

            letter-spacing: 2px;

            text-transform: uppercase;

            color: var(--br-muted);

            margin-top: 4px;

        }


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

        .br-nav {

            display: flex;

            align-items: center;

            gap: 30px;

        }

        .br-nav-link {

            position: relative;

            color: var(--br-heading);

            font-size: 14px;

            font-weight: 600;

            padding: 28px 0;

            transition: var(--br-transition);

        }

        .br-nav-link:hover,
        .br-nav-link.active {

            color:
                var(--br-primary);

        }

        .br-nav-link.active::after {

            content: "";

            position: absolute;

            left: 0;
            right: 0;

            bottom: 17px;

            height: 2px;

            background:
                var(--br-primary);

        }


        /* ========================================================
           NAV CTA
           ======================================================== */

        .br-btn {

            border: 0;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 8px;

            min-height: 46px;

            padding:
                0 22px;

            border-radius:
                8px;

            font-size: 14px;

            font-weight: 600;

            transition:
                var(--br-transition);

        }

        .br-btn-primary {

            color: #fff;

            background:
                var(--br-primary);

            box-shadow:
                0 8px 20px rgba(8,126,164,0.18);

        }

        .br-btn-primary:hover {

            color: #fff;

            background:
                var(--br-primary-dark);

            transform:
                translateY(-2px);

        }

        .br-btn-outline {

            color:
                var(--br-primary);

            background:
                #fff;

            border:
                1px solid var(--br-primary);

        }

        .br-btn-outline:hover {

            color: #fff;

            background:
                var(--br-primary);

        }


        /* ========================================================
           MOBILE NAV TOGGLE
           ======================================================== */

        .br-mobile-toggle {

            display: none;

            width: 42px;
            height: 42px;

            border:
                1px solid var(--br-border);

            border-radius: 8px;

            background: #fff;

            color:
                var(--br-heading);

        }


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

        .br-hero {

            min-height:
                690px;

            display:
                flex;

            align-items:
                center;

            background:

                linear-gradient(
                    90deg,
                    rgba(5,43,56,0.82) 0%,
                    rgba(5,43,56,0.55) 45%,
                    rgba(5,43,56,0.12) 100%
                ),

                url(
                    "https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=2000&q=85"
                )
                center/cover no-repeat;

        }

        .br-hero-content {

            max-width:
                700px;

            padding:
                90px 0 160px;

        }

        .br-hero-eyebrow {

            display: inline-flex;

            align-items: center;

            gap: 9px;

            color: #fff;

            font-size: 12px;

            font-weight: 700;

            letter-spacing: 2px;

            text-transform: uppercase;

            margin-bottom: 20px;

        }

        .br-hero-eyebrow::before {

            content: "";

            width: 32px;

            height: 1px;

            background:
                #fff;

        }

        .br-hero h1 {

            color: #fff;

            font-size:
                clamp(42px, 6vw, 74px);

            line-height: 1.08;

            margin-bottom: 22px;

        }

        .br-hero h1 span {

            color:
                #bfeaf3;

        }

        .br-hero-description {

            color:
                rgba(255,255,255,0.88);

            font-size: 17px;

            max-width: 580px;

            margin-bottom: 30px;

        }

        .br-hero-actions {

            display: flex;

            gap: 12px;

            flex-wrap: wrap;

        }

        .br-hero-actions .br-btn {

            min-width: 145px;

        }


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

        .br-booking-wrap {

            position: absolute;

            left: 0;
            right: 0;

            bottom: -55px;

            z-index: 5;

        }

        .br-booking-box {

            background:
                #fff;

            border-radius:
                16px;

            padding:
                20px;

            box-shadow:
                var(--br-shadow-md);

            border:
                1px solid rgba(0,0,0,0.04);

        }

        .br-booking-grid {

            display: grid;

            grid-template-columns:
                1.4fr
                1fr
                1fr
                1fr
                auto;

            gap: 12px;

        }

        .br-booking-field {

            min-height: 64px;

            padding:
                9px 15px;

            border:
                1px solid var(--br-border);

            border-radius:
                9px;

            background:
                #fff;

        }

        .br-booking-label {

            display: block;

            color:
                var(--br-muted);

            font-size: 11px;

            text-transform:
                uppercase;

            letter-spacing:
                0.8px;

            font-weight:
                700;

            margin-bottom:
                2px;

        }

        .br-booking-value {

            color:
                var(--br-heading);

            font-size:
                14px;

            font-weight:
                600;

        }

        .br-booking-value i {

            color:
                var(--br-primary);

            margin-right:
                5px;

        }

        .br-booking-button {

            min-width:
                150px;

            border:
                0;

            border-radius:
                9px;

            color:
                #fff;

            background:
                var(--br-primary);

            font-weight:
                700;

        }


        /* ========================================================
           SECTION COMMON
           ======================================================== */

        .br-section {

            padding:
                105px 0;

        }

        .br-section-light {

            background:
                var(--br-bg);

        }

        .br-section-header {

            max-width:
                700px;

            margin:
                0 auto 48px;

            text-align:
                center;

        }

        .br-section-eyebrow {

            display:
                inline-flex;

            align-items:
                center;

            gap:
                8px;

            color:
                var(--br-primary);

            font-size:
                11px;

            font-weight:
                700;

            letter-spacing:
                2px;

            text-transform:
                uppercase;

            margin-bottom:
                12px;

        }

        .br-section-eyebrow::before,
        .br-section-eyebrow::after {

            content:
                "";

            width:
                25px;

            height:
                1px;

            background:
                var(--br-primary);

        }

        .br-section-title {

            font-size:
                clamp(32px, 4vw, 46px);

            line-height:
                1.2;

            margin-bottom:
                15px;

        }

        .br-section-description {

            max-width:
                600px;

            margin:
                0 auto;

            color:
                var(--br-text);

            font-size:
                15px;

        }


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

        .br-resort-card {

            height:
                100%;

            background:
                #fff;

            border:
                1px solid var(--br-border);

            border-radius:
                var(--br-radius-lg);

            overflow:
                hidden;

            transition:
                var(--br-transition);

        }

        .br-resort-card:hover {

            transform:
                translateY(-6px);

            box-shadow:
                var(--br-shadow-md);

        }

        .br-resort-image {

            position:
                relative;

            height:
                260px;

            overflow:
                hidden;

        }

        .br-resort-image img {

            width:
                100%;

            height:
                100%;

            object-fit:
                cover;

            transition:
                transform 0.6s ease;

        }

        .br-resort-card:hover
        .br-resort-image img {

            transform:
                scale(1.06);

        }

        .br-resort-badge {

            position:
                absolute;

            top:
                16px;

            left:
                16px;

            padding:
                6px 11px;

            border-radius:
                20px;

            color:
                #fff;

            background:
                var(--br-primary);

            font-size:
                11px;

            font-weight:
                700;

        }

        .br-resort-wishlist {

            position:
                absolute;

            top:
                14px;

            right:
                14px;

            width:
                38px;

            height:
                38px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            border:
                0;

            border-radius:
                50%;

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

            color:
                var(--br-heading);

        }

        .br-resort-content {

            padding:
                22px;

        }

        .br-resort-location {

            color:
                var(--br-primary);

            font-size:
                12px;

            font-weight:
                700;

            margin-bottom:
                7px;

        }

        .br-resort-title {

            font-size:
                23px;

            margin-bottom:
                9px;

        }

        .br-resort-title a {

            color:
                var(--br-heading);

        }

        .br-resort-description {

            font-size:
                13px;

            color:
                var(--br-text);

            margin-bottom:
                15px;

        }

        .br-resort-meta {

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            padding-top:
                15px;

            border-top:
                1px solid var(--br-border);

        }

        .br-rating {

            display:
                inline-flex;

            align-items:
                center;

            gap:
                6px;

            font-size:
                13px;

            font-weight:
                700;

            color:
                var(--br-heading);

        }

        .br-rating i {

            color:
                #f0b44d;

        }

        .br-price {

            color:
                var(--br-heading);

            font-weight:
                700;

        }

        .br-price small {

            color:
                var(--br-muted);

            font-size:
                11px;

            font-weight:
                400;

        }


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

        .br-destination-card {

            position:
                relative;

            height:
                360px;

            overflow:
                hidden;

            border-radius:
                var(--br-radius-lg);

        }

        .br-destination-card img {

            width:
                100%;

            height:
                100%;

            object-fit:
                cover;

            transition:
                transform 0.6s ease;

        }

        .br-destination-card::after {

            content:
                "";

            position:
                absolute;

            inset:
                0;

            background:
                linear-gradient(
                    to top,
                    rgba(5,33,43,0.78),
                    rgba(5,33,43,0.03) 65%
                );

        }

        .br-destination-card:hover img {

            transform:
                scale(1.07);

        }

        .br-destination-content {

            position:
                absolute;

            left:
                22px;

            right:
                22px;

            bottom:
                20px;

            z-index:
                2;

            color:
                #fff;

        }

        .br-destination-content h3 {

            color:
                #fff;

            font-size:
                25px;

            margin:
                0 0 3px;

        }

        .br-destination-content span {

            font-size:
                12px;

            color:
                rgba(255,255,255,0.82);

        }


        /* ========================================================
           WHY CHOOSE US
           ======================================================== */

        .br-feature-box {

            text-align:
                center;

            padding:
                25px 15px;

        }

        .br-feature-icon {

            width:
                66px;

            height:
                66px;

            margin:
                0 auto 18px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            border-radius:
                16px;

            background:
                var(--br-primary-light);

            color:
                var(--br-primary);

            font-size:
                25px;

        }

        .br-feature-box h4 {

            font-family:
                "DM Sans",
                sans-serif;

            font-size:
                17px;

            font-weight:
                700;

            margin-bottom:
                8px;

        }

        .br-feature-box p {

            max-width:
                250px;

            margin:
                0 auto;

            font-size:
                13px;

        }


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

        .br-room-card {

            background:
                #fff;

            border:
                1px solid var(--br-border);

            border-radius:
                var(--br-radius-lg);

            overflow:
                hidden;

            height:
                100%;

        }

        .br-room-image {

            height:
                250px;

            overflow:
                hidden;

        }

        .br-room-image img {

            width:
                100%;

            height:
                100%;

            object-fit:
                cover;

            transition:
                transform 0.5s ease;

        }

        .br-room-card:hover
        .br-room-image img {

            transform:
                scale(1.06);

        }

        .br-room-content {

            padding:
                22px;

        }

        .br-room-content h3 {

            font-size:
                22px;

            margin-bottom:
                9px;

        }

        .br-room-features {

            display:
                flex;

            flex-wrap:
                wrap;

            gap:
                8px 15px;

            margin:
                15px 0;

            font-size:
                12px;

        }

        .br-room-features span i {

            color:
                var(--br-primary);

            margin-right:
                4px;

        }


        /* ========================================================
           EXPERIENCE SECTION
           ======================================================== */

        .br-experience-image {

            height:
                520px;

            border-radius:
                22px;

            overflow:
                hidden;

        }

        .br-experience-image img {

            width:
                100%;

            height:
                100%;

            object-fit:
                cover;

        }

        .br-experience-content {

            padding:
                20px 15px 20px 45px;

        }

        .br-experience-content h2 {

            font-size:
                clamp(32px, 4vw, 48px);

            margin-bottom:
                18px;

        }

        .br-experience-list {

            list-style:
                none;

            padding:
                0;

            margin:
                28px 0;

        }

        .br-experience-list li {

            display:
                flex;

            align-items:
                flex-start;

            gap:
                12px;

            margin-bottom:
                17px;

            font-size:
                14px;

        }

        .br-experience-list i {

            width:
                25px;

            height:
                25px;

            flex:
                0 0 25px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            border-radius:
                50%;

            background:
                var(--br-primary-light);

            color:
                var(--br-primary);

            font-size:
                12px;

        }


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

        .br-offer-card {

            position:
                relative;

            min-height:
                300px;

            border-radius:
                var(--br-radius-lg);

            overflow:
                hidden;

        }

        .br-offer-card img {

            width:
                100%;

            height:
                100%;

            position:
                absolute;

            inset:
                0;

            object-fit:
                cover;

        }

        .br-offer-card::after {

            content:
                "";

            position:
                absolute;

            inset:
                0;

            background:
                linear-gradient(
                    90deg,
                    rgba(5,37,48,0.86),
                    rgba(5,37,48,0.15)
                );

        }

        .br-offer-content {

            position:
                relative;

            z-index:
                2;

            padding:
                42px;

            max-width:
                550px;

        }

        .br-offer-content .badge {

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

            color:
                #fff;

            padding:
                7px 12px;

            border-radius:
                20px;

            font-size:
                11px;

            letter-spacing:
                0.5px;

        }

        .br-offer-content h3 {

            color:
                #fff;

            font-size:
                34px;

            margin:
                15px 0 8px;

        }

        .br-offer-content p {

            color:
                rgba(255,255,255,0.83);

            font-size:
                14px;

        }


        /* ========================================================
           ABOUT
           ======================================================== */

        .br-about-images {

            position:
                relative;

            min-height:
                510px;

        }

        .br-about-main {

            width:
                78%;

            height:
                440px;

            object-fit:
                cover;

            border-radius:
                20px;

        }

        .br-about-small {

            position:
                absolute;

            right:
                0;

            bottom:
                0;

            width:
                42%;

            height:
                230px;

            object-fit:
                cover;

            border:
                8px solid #fff;

            border-radius:
                18px;

            box-shadow:
                var(--br-shadow-md);

        }

        .br-about-content {

            padding:
                20px 0 20px 45px;

        }

        .br-about-content h2 {

            font-size:
                clamp(32px, 4vw, 48px);

            margin-bottom:
                18px;

        }

        .br-about-stats {

            display:
                grid;

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

            gap:
                15px;

            margin-top:
                30px;

        }

        .br-about-stat {

            padding:
                17px;

            border:
                1px solid var(--br-border);

            border-radius:
                12px;

        }

        .br-about-stat strong {

            display:
                block;

            color:
                var(--br-primary);

            font-family:
                "Playfair Display",
                serif;

            font-size:
                27px;

        }

        .br-about-stat span {

            font-size:
                11px;

            color:
                var(--br-muted);

        }


        /* ========================================================
           GALLERY
           ======================================================== */

        .br-gallery-item {

            position:
                relative;

            height:
                270px;

            overflow:
                hidden;

            border-radius:
                14px;

        }

        .br-gallery-item.large {

            height:
                560px;

        }

        .br-gallery-item img {

            width:
                100%;

            height:
                100%;

            object-fit:
                cover;

            transition:
                transform 0.5s ease;

        }

        .br-gallery-item:hover img {

            transform:
                scale(1.06);

        }


        /* ========================================================
           TESTIMONIALS
           ======================================================== */

        .br-testimonial {

            height:
                100%;

            padding:
                32px;

            background:
                #fff;

            border:
                1px solid var(--br-border);

            border-radius:
                18px;

        }

        .br-testimonial-stars {

            color:
                #f0b44d;

            margin-bottom:
                18px;

            font-size:
                13px;

        }

        .br-testimonial p {

            font-family:
                "Playfair Display",
                serif;

            color:
                var(--br-heading);

            font-size:
                18px;

            line-height:
                1.65;

            margin-bottom:
                25px;

        }

        .br-guest {

            display:
                flex;

            align-items:
                center;

            gap:
                12px;

        }

        .br-guest-avatar {

            width:
                43px;

            height:
                43px;

            border-radius:
                50%;

            background:
                var(--br-primary-light);

            color:
                var(--br-primary);

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            font-weight:
                700;

        }

        .br-guest strong {

            display:
                block;

            color:
                var(--br-heading);

            font-size:
                13px;

        }

        .br-guest span {

            font-size:
                11px;

            color:
                var(--br-muted);

        }


        /* ========================================================
           BLOG
           ======================================================== */

        .br-blog-card {

            height:
                100%;

            background:
                #fff;

            border:
                1px solid var(--br-border);

            border-radius:
                17px;

            overflow:
                hidden;

        }

        .br-blog-image {

            height:
                230px;

            overflow:
                hidden;

        }

        .br-blog-image img {

            width:
                100%;

            height:
                100%;

            object-fit:
                cover;

            transition:
                transform 0.5s ease;

        }

        .br-blog-card:hover
        .br-blog-image img {

            transform:
                scale(1.05);

        }

        .br-blog-content {

            padding:
                22px;

        }

        .br-blog-meta {

            color:
                var(--br-primary);

            font-size:
                11px;

            font-weight:
                700;

            text-transform:
                uppercase;

            letter-spacing:
                0.8px;

            margin-bottom:
                8px;

        }

        .br-blog-content h3 {

            font-size:
                21px;

            line-height:
                1.35;

            margin-bottom:
                10px;

        }

        .br-blog-content h3 a {

            color:
                var(--br-heading);

        }

        .br-blog-content p {

            font-size:
                13px;

            margin-bottom:
                15px;

        }

        .br-read-more {

            color:
                var(--br-primary);

            font-size:
                12px;

            font-weight:
                700;

        }


        /* ========================================================
           NEWSLETTER
           ======================================================== */

        .br-newsletter {

            padding:
                55px;

            border-radius:
                22px;

            background:
                var(--br-primary);

            overflow:
                hidden;

            position:
                relative;

        }

        .br-newsletter::after {

            content:
                "";

            position:
                absolute;

            width:
                300px;

            height:
                300px;

            right:
                -100px;

            top:
                -150px;

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

            border-radius:
                50%;

        }

        .br-newsletter h2 {

            color:
                #fff;

            font-size:
                34px;

            margin-bottom:
                8px;

        }

        .br-newsletter p {

            color:
                rgba(255,255,255,0.82);

            margin:
                0;

            font-size:
                14px;

        }

        .br-newsletter-form {

            display:
                flex;

            gap:
                8px;

            margin-top:
                20px;

        }

        .br-newsletter-form input {

            flex:
                1;

            height:
                52px;

            border:
                0;

            border-radius:
                8px;

            padding:
                0 16px;

            outline:
                none;

        }

        .br-newsletter-form button {

            min-width:
                125px;

            border:
                0;

            border-radius:
                8px;

            background:
                #fff;

            color:
                var(--br-primary);

            font-weight:
                700;

        }


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

        .br-footer {

            color:
                rgba(255,255,255,0.68);

            background:
                #092A35;

        }

        .br-footer-main {

            padding:
                75px 0 55px;

        }

        .br-footer-brand {

            max-width:
                320px;

        }

        .br-footer-logo {

            color:
                #fff;

            display:
                inline-flex;

            align-items:
                center;

            gap:
                10px;

            margin-bottom:
                17px;

        }

        .br-footer-logo .br-logo-icon {

            background:
                var(--br-primary);

        }

        .br-footer-logo .br-logo-title {

            color:
                #fff;

        }

        .br-footer-brand p {

            font-size:
                13px;

            line-height:
                1.8;

        }

        .br-footer-social {

            display:
                flex;

            gap:
                8px;

            margin-top:
                20px;

        }

        .br-footer-social a {

            width:
                37px;

            height:
                37px;

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

            border-radius:
                50%;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            color:
                #fff;

            transition:
                var(--br-transition);

        }

        .br-footer-social a:hover {

            background:
                var(--br-primary);

            border-color:
                var(--br-primary);

        }

        .br-footer h4 {

            color:
                #fff;

            font-family:
                "DM Sans",
                sans-serif;

            font-size:
                14px;

            font-weight:
                700;

            margin-bottom:
                20px;

        }

        .br-footer-links {

            list-style:
                none;

            padding:
                0;

            margin:
                0;

        }

        .br-footer-links li {

            margin-bottom:
                10px;

        }

        .br-footer-links a {

            color:
                rgba(255,255,255,0.64);

            font-size:
                13px;

            transition:
                var(--br-transition);

        }

        .br-footer-links a:hover {

            color:
                #fff;

            padding-left:
                3px;

        }

        .br-footer-contact {

            display:
                flex;

            align-items:
                flex-start;

            gap:
                10px;

            margin-bottom:
                14px;

            font-size:
                13px;

        }

        .br-footer-contact i {

            color:
                #77d1e7;

            margin-top:
                3px;

        }

        .br-footer-bottom {

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

            padding:
                18px 0;

            font-size:
                11px;

        }

        .br-footer-bottom-inner {

            display:
                flex;

            justify-content:
                space-between;

            align-items:
                center;

            gap:
                20px;

        }

        .br-footer-bottom a {

            color:
                rgba(255,255,255,0.65);

        }


        /* ========================================================
           BACK TO TOP
           ======================================================== */

        .br-back-top {

            position:
                fixed;

            right:
                20px;

            bottom:
                20px;

            width:
                44px;

            height:
                44px;

            border:
                0;

            border-radius:
                50%;

            background:
                var(--br-primary);

            color:
                #fff;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            z-index:
                900;

            opacity:
                0;

            visibility:
                hidden;

            transition:
                var(--br-transition);

        }

        .br-back-top.show {

            opacity:
                1;

            visibility:
                visible;

        }


        /* ========================================================
           RESPONSIVE - TABLET
           ======================================================== */

        @media (max-width: 1100px) {

            .br-nav {
                gap: 18px;
            }

            .br-nav-link {
                font-size: 13px;
            }

            .br-booking-grid {

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

            }

            .br-booking-button {

                min-height:
                    58px;

                grid-column:
                    span 2;

            }

            .br-booking-wrap {

                bottom:
                    -120px;

            }

            .br-hero {

                min-height:
                    650px;

            }

            .br-hero-content {

                padding-bottom:
                    190px;

            }

        }


        /* ========================================================
           RESPONSIVE - MOBILE
           ======================================================== */

        @media (max-width: 991px) {

            .br-topbar {
                display:
                    none;
            }

            .br-navbar-inner {
                min-height:
                    70px;
            }

            .br-mobile-toggle {
                display:
                    flex;

                align-items:
                    center;

                justify-content:
                    center;
            }

            .br-nav {

                position:
                    absolute;

                top:
                    100%;

                left:
                    15px;

                right:
                    15px;

                display:
                    none;

                flex-direction:
                    column;

                align-items:
                    stretch;

                gap:
                    0;

                background:
                    #fff;

                border:
                    1px solid var(--br-border);

                border-radius:
                    12px;

                padding:
                    10px;

                box-shadow:
                    var(--br-shadow-md);

            }

            .br-nav.show {
                display:
                    flex;
            }

            .br-nav-link {

                padding:
                    12px;

            }

            .br-nav-link.active::after {
                display:
                    none;
            }

            .br-nav .br-btn {
                margin:
                    8px 0 2px;
            }

            .br-hero {

                min-height:
                    720px;

                align-items:
                    flex-start;

            }

            .br-hero-content {

                padding:
                    90px 0 190px;

            }

            .br-hero h1 {

                font-size:
                    48px;

            }

            .br-booking-wrap {

                bottom:
                    -190px;

            }

            .br-booking-grid {

                grid-template-columns:
                    1fr;

            }

            .br-booking-button {

                grid-column:
                    auto;

            }

            .br-section {

                padding:
                    85px 0;

            }

            .br-experience-content,
            .br-about-content {

                padding:
                    30px 0 0;

            }

            .br-experience-image {

                height:
                    400px;

            }

            .br-about-images {

                min-height:
                    430px;

            }

            .br-about-main {

                height:
                    370px;

            }

        }


        /* ========================================================
           RESPONSIVE - SMALL MOBILE
           ======================================================== */

        @media (max-width: 575px) {

            .br-container {

                padding-left:
                    15px;

                padding-right:
                    15px;

            }

            .br-logo-title {
                font-size:
                    19px;
            }

            .br-logo-subtitle {
                font-size:
                    8px;
            }

            .br-logo-icon {
                width:
                    39px;

                height:
                    39px;
            }

            .br-hero {

                min-height:
                    760px;

            }

            .br-hero-content {

                padding:
                    70px 0 220px;

            }

            .br-hero h1 {

                font-size:
                    42px;

            }

            .br-hero-description {

                font-size:
                    15px;

            }

            .br-hero-actions {

                flex-direction:
                    column;

                align-items:
                    stretch;

            }

            .br-hero-actions .br-btn {

                width:
                    100%;

            }

            .br-booking-wrap {

                bottom:
                    -270px;

            }

            .br-booking-box {

                padding:
                    13px;

            }

            .br-section {

                padding:
                    75px 0;

            }

            .br-section-title {

                font-size:
                    32px;

            }

            .br-destination-card {

                height:
                    300px;

            }

            .br-about-stats {

                grid-template-columns:
                    1fr;

            }

            .br-about-images {

                min-height:
                    350px;

            }

            .br-about-main {

                width:
                    85%;

                height:
                    310px;

            }

            .br-about-small {

                width:
                    45%;

                height:
                    160px;

            }

            .br-newsletter {

                padding:
                    30px 20px;

            }

            .br-newsletter-form {

                flex-direction:
                    column;

            }

            .br-newsletter-form button {

                height:
                    50px;

            }

            .br-footer-bottom-inner {

                flex-direction:
                    column;

                text-align:
                    center;

            }

        }


/* ============================================================
   EXTRA STYLES — dynamic Chirala Resorts functionality
   restyled to match the Bala Residency (br-) design system
   ============================================================ */

/* ---- image slider inside resort cards ---- */
.br-resort-image .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    opacity: 0;
    transition: opacity 0.7s ease;
}
.br-resort-image .slide.active { opacity: 1; }
.br-resort-image.contain-bg { background: #fff; }

/* ---- nav auth area (login button / user avatar menu) ---- */
.br-nav-auth {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 4px;
}
.br-user-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 14px 6px 6px;
    border-radius: 50px;
    border: 1px solid var(--br-border);
    transition: var(--br-transition);
    background: #fff;
}
.br-user-menu:hover { border-color: var(--br-primary); background: var(--br-primary-light); }
.br-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--br-primary-light);
}
.br-user-menu span { font-size: 14px; font-weight: 600; color: var(--br-heading); }
.br-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #fff;
    border-radius: var(--br-radius-md);
    box-shadow: var(--br-shadow-md);
    border: 1px solid var(--br-border);
    display: none;
    min-width: 200px;
    overflow: hidden;
    z-index: 1200;
}
.br-dropdown p {
    margin: 0;
    padding: 12px 18px;
    cursor: pointer;
    font-size: 14px;
    color: var(--br-heading);
    transition: var(--br-transition);
}
.br-dropdown p:hover { background: var(--br-primary-light); color: var(--br-primary); }
.br-dropdown hr { border: none; border-top: 1px solid var(--br-border); margin: 4px 0; }

/* ---- back button ---- */
.br-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--br-primary);
    border: 1.5px solid var(--br-primary);
    padding: 9px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 24px;
    transition: var(--br-transition);
}
.br-back-btn:hover { background: var(--br-primary); color: #fff; }

/* ---- user home / bookings / profile ---- */
.br-user-cards { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.br-user-card {
    background: #fff;
    border: 1.5px solid var(--br-border);
    border-radius: var(--br-radius-lg);
    padding: 24px 32px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--br-heading);
    transition: var(--br-transition);
    box-shadow: var(--br-shadow-sm);
}
.br-user-card:hover { background: var(--br-primary); color: #fff; transform: translateY(-3px); box-shadow: var(--br-shadow-md); }

.br-booking-grid-list { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.br-booking-item {
    background: #fff;
    border: 1px solid var(--br-border);
    border-radius: var(--br-radius-lg);
    padding: 20px 24px;
    box-shadow: var(--br-shadow-sm);
}
.br-booking-item h3 { font-size: 18px; margin-bottom: 6px; }
.br-booking-item p { margin: 3px 0; font-size: 14px; }

.br-profile-card {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    padding: 36px;
    border-radius: var(--br-radius-lg);
    display: flex;
    gap: 40px;
    box-shadow: var(--br-shadow-sm);
    border: 1px solid var(--br-border);
}
.br-profile-image-box { width: 220px; text-align: center; flex-shrink: 0; }
.br-profile-image {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--br-primary);
    margin-bottom: 16px;
    box-shadow: var(--br-shadow-sm);
}
.br-profile-details { flex: 1; }
.br-profile-field { margin-bottom: 18px; }
.br-profile-field label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 13px; color: var(--br-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.br-profile-field input {
    width: 100%;
    padding: 11px 15px;
    border: 1.5px solid var(--br-border);
    border-radius: 9px;
    font-size: 14px;
    font-family: "DM Sans", sans-serif;
    color: var(--br-heading);
    outline: none;
    transition: var(--br-transition);
}
.br-profile-field input:focus { border-color: var(--br-primary); box-shadow: 0 0 0 3px rgba(8,126,164,0.1); }

@media (max-width: 768px) {
    .br-profile-card { flex-direction: column; padding: 20px; }
    .br-profile-image-box { width: 100%; }
}

/* ---- resort details banner ---- */
.br-details-banner {
    display: flex;
    gap: 30px;
    background: #fff;
    border-radius: var(--br-radius-lg);
    padding: 26px;
    box-shadow: var(--br-shadow-sm);
    border: 1px solid var(--br-border);
    margin-bottom: 40px;
    align-items: flex-start;
}
.br-details-image { width: 380px; flex-shrink: 0; }
.br-details-image img {
    width: 100%;
    height: 270px;
    object-fit: contain;
    background: #fff;
    border-radius: var(--br-radius-md);
    border: 1px solid var(--br-border);
}
.br-details-info { flex: 1; }
.br-details-info h2 { font-size: 32px; margin-bottom: 8px; }
.br-details-info > p.br-detail-location { color: var(--br-muted); margin-bottom: 14px; font-size: 14px; }
.br-details-rating {
    color: #f5a623;
    font-size: 15px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.br-details-rating span {
    color: var(--br-primary);
    font-weight: 700;
    font-size: 13px;
    background: var(--br-primary-light);
    padding: 3px 12px;
    border-radius: 50px;
}
.br-details-desc { font-size: 15px; color: var(--br-text); margin-bottom: 20px; }
.br-amenities-preview { display: flex; gap: 8px; flex-wrap: wrap; }
.br-amenities-preview span {
    background: var(--br-primary-light);
    color: var(--br-primary);
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
}
.br-price-side { width: 230px; text-align: right; flex-shrink: 0; }
.br-rating-box {
    background: linear-gradient(135deg, var(--br-primary), var(--br-primary-dark));
    color: #fff;
    display: inline-block;
    padding: 12px 22px;
    border-radius: var(--br-radius-md);
    margin-bottom: 20px;
    box-shadow: 0 8px 20px rgba(8,126,164,0.25);
}
.br-rating-box h3 { color: #fff; font-size: 28px; margin: 0; }
.br-rating-box p { color: rgba(255,255,255,0.85); font-size: 12px; margin: 0; }
.br-price-box { margin-bottom: 8px; }
.br-price-box small { font-size: 12px; color: var(--br-muted); display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.br-price-box h2 { color: var(--br-primary-dark); font-size: 34px; margin: 0; }
.br-price-box p { font-size: 13px; color: var(--br-muted); margin-top: 4px; }

@media (max-width: 900px) {
    .br-details-banner { flex-direction: column; }
    .br-details-image { width: 100%; }
    .br-price-side { width: 100%; text-align: left; }
}

/* ---- room cards inside details page ---- */
.br-detail-rooms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 24px; }
.br-detail-room-card {
    background: #fff;
    border-radius: var(--br-radius-lg);
    overflow: hidden;
    box-shadow: var(--br-shadow-sm);
    border: 1px solid var(--br-border);
    transition: var(--br-transition);
    display: flex;
    flex-direction: column;
}
.br-detail-room-card:hover { transform: translateY(-6px); box-shadow: var(--br-shadow-md); }
.br-detail-room-card img { width: 100%; height: 170px; object-fit: cover; cursor: pointer; }
.br-detail-room-body { padding: 16px; }
.br-detail-room-body h4 { font-size: 16px; margin-bottom: 6px; }
.br-detail-room-body p { font-size: 13px; color: var(--br-muted); margin: 2px 0; }

@media (max-width: 1100px) { .br-detail-rooms { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .br-detail-rooms { grid-template-columns: 1fr; } }

/* ---- generic modal (booking / destination) ---- */
.br-modal {
    position: fixed;
    inset: 0;
    background: rgba(10,30,40,0.55);
    backdrop-filter: blur(6px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
}
.br-modal-box {
    background: #fff;
    padding: 30px;
    border-radius: var(--br-radius-lg);
    width: 100%;
    max-width: 440px;
    position: relative;
    box-shadow: var(--br-shadow-md);
    border: 1px solid var(--br-border);
    max-height: 90vh;
    overflow-y: auto;
}
.br-modal-box h3, .br-modal-box h2 { margin-bottom: 16px; }
.br-modal-box input,
.br-modal-box select {
    width: 100%;
    margin-top: 10px;
    padding: 12px 16px;
    border: 1.5px solid var(--br-border);
    border-radius: 9px;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    color: var(--br-heading);
    outline: none;
    transition: var(--br-transition);
}
.br-modal-box input:focus { border-color: var(--br-primary); box-shadow: 0 0 0 3px rgba(8,126,164,0.1); }
.br-modal-box button.br-btn { margin-top: 12px; width: 100%; }
.br-modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 24px;
    cursor: pointer;
    color: var(--br-muted);
    line-height: 1;
    transition: var(--br-transition);
}
.br-modal-close:hover { color: var(--br-primary-dark); }
.br-modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.br-modal-actions .br-btn { margin-top: 0; flex: 1; }
.br-btn-danger { background: #e05c3a; color: #fff; }
.br-btn-danger:hover { background: #c74a2b; color: #fff; }
.br-booking-type-row { display: flex; gap: 16px; margin-top: 14px; }
.br-radio-option { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--br-heading); cursor: pointer; }
.br-radio-option input { width: auto; margin: 0; }
#brSelectedRoomText { color: var(--br-primary); font-weight: 700; font-size: 14px; margin-bottom: 4px; }

/* ---- room selection modal ---- */
.br-room-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,30,40,0.6);
    backdrop-filter: blur(6px);
    z-index: 99998;
    overflow-y: auto;
    padding: 40px 20px;
}
.br-room-modal-box {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    background: #fff;
    border-radius: var(--br-radius-lg);
    padding: 28px;
    box-shadow: var(--br-shadow-md);
}
.br-room-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
    position: sticky;
    top: 0;
    background: #fff;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--br-border);
}
.br-room-modal-header h2 { margin: 0; font-size: 24px; }
.br-modal-close-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--br-heading);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--br-transition);
}
.br-modal-close-btn:hover { background: #e05c3a; }
.br-room-variants-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.br-room-variant-card {
    background: #fff;
    border-radius: var(--br-radius-lg);
    overflow: hidden;
    box-shadow: var(--br-shadow-sm);
    border: 1px solid var(--br-border);
}
.br-room-variant-card img { width: 100%; height: 210px; object-fit: cover; }
.br-room-variant-body { padding: 20px; }
.br-room-variant-body h3 { font-size: 19px; margin-bottom: 10px; }
.br-room-variant-body p { margin: 6px 0; font-size: 14px; color: var(--br-text); }

/* ---- gallery lightbox ---- */
.br-gallery-modal {
    position: fixed;
    inset: 0;
    background: rgba(5,10,15,0.94);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999999;
}
.br-gallery-modal img { width: 70%; max-height: 80%; object-fit: contain; border-radius: var(--br-radius-md); }
.br-gallery-close { position: absolute; top: 26px; right: 34px; color: #fff; font-size: 32px; cursor: pointer; opacity: 0.85; }
.br-gallery-close:hover { opacity: 1; }
.br-gallery-nav-btn {
    width: 50px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    border: 1.5px solid rgba(255,255,255,0.25);
    position: absolute;
}
.br-gallery-nav-btn:hover { background: rgba(255,255,255,0.28); }
.br-gallery-prev { left: 24px; }
.br-gallery-next { right: 24px; }

@media (max-width: 600px) {
    .br-gallery-modal img { width: 92%; }
    .br-gallery-nav-btn { width: 40px; height: 40px; font-size: 18px; }
    .br-gallery-prev { left: 10px; }
    .br-gallery-next { right: 10px; }
}

/* ---- business partners tabs + cards ---- */
.br-partner-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.br-partner-tab {
    border: 1.5px solid var(--br-border);
    padding: 10px 26px;
    border-radius: 50px;
    background: transparent;
    color: var(--br-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--br-transition);
    font-family: "DM Sans", sans-serif;
}
.br-partner-tab:hover { border-color: var(--br-primary); color: var(--br-primary); background: var(--br-primary-light); }
.br-partner-tab.active { background: var(--br-primary); color: #fff; border-color: var(--br-primary); }
.br-partner-section { display: none; }
.br-partner-section.active-section { display: block; }
.br-partner-card {
    background: #fff;
    border-radius: var(--br-radius-lg);
    overflow: hidden;
    box-shadow: var(--br-shadow-sm);
    border: 1px solid var(--br-border);
    transition: var(--br-transition);
    height: 100%;
}
.br-partner-card:hover { transform: translateY(-5px); box-shadow: var(--br-shadow-md); }
.br-partner-card img { width: 100%; height: 180px; object-fit: cover; }
.br-partner-body { padding: 18px; }
.br-partner-body h3 { font-size: 17px; margin-bottom: 6px; }
.br-partner-body p { font-size: 13px; color: var(--br-muted); }
.br-partner-info { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; font-size: 13px; color: var(--br-muted); }
.br-no-data { text-align: center; color: var(--br-muted); padding: 30px; grid-column: 1 / -1; }

/* ---- destination / event cards (reuses grid pattern) ---- */
.br-event-card {
    background: #fff;
    border-radius: var(--br-radius-lg);
    overflow: hidden;
    box-shadow: var(--br-shadow-sm);
    border: 1px solid var(--br-border);
    transition: var(--br-transition);
    height: 100%;
}
.br-event-card:hover { transform: translateY(-6px); box-shadow: var(--br-shadow-md); }
.br-event-card img { width: 100%; height: 190px; object-fit: cover; }
.br-event-body { padding: 20px; }
.br-event-body h3 { font-size: 19px; margin-bottom: 8px; }
.br-event-body p { font-size: 13.5px; color: var(--br-text); margin-bottom: 16px; }

/* ---- functional booking search fields (override display-only look) ---- */
.br-booking-field input,
.br-booking-field select {
    border: none;
    background: transparent;
    padding: 0;
    width: 100%;
    color: var(--br-heading);
    font-size: 14px;
    font-weight: 600;
    font-family: "DM Sans", sans-serif;
    outline: none;
}
.br-booking-field input::placeholder { color: var(--br-muted); font-weight: 500; }

/* ---- section utility ---- */
.br-hidden-section { display: none; padding: 60px 0 30px; }

/* ---- auth / login page ---- */
.br-auth-wrap {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: var(--br-bg);
}
.br-auth-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: var(--br-radius-lg);
    padding: 40px 36px;
    box-shadow: var(--br-shadow-md);
    border: 1px solid var(--br-border);
}
.br-auth-card h2 { text-align: center; margin-bottom: 6px; }
.br-auth-card p.br-auth-sub { text-align: center; color: var(--br-muted); font-size: 13.5px; margin-bottom: 26px; }
.br-auth-field { margin-bottom: 16px; }
.br-auth-field label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 13px; color: var(--br-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.br-auth-field input {
    width: 100%;
    padding: 12px 15px;
    border: 1.5px solid var(--br-border);
    border-radius: 9px;
    font-size: 14px;
    font-family: "DM Sans", sans-serif;
    color: var(--br-heading);
    outline: none;
    transition: var(--br-transition);
}
.br-auth-field input:focus { border-color: var(--br-primary); box-shadow: 0 0 0 3px rgba(8,126,164,0.1); }
.br-auth-toggle { text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--br-muted); }
.br-auth-toggle a { color: var(--br-primary); font-weight: 600; cursor: pointer; }
.br-auth-error { color: #d84a2f; font-size: 13px; margin-top: 8px; display: none; }

/* ---- simple page hero (for inner pages without full hero image) ---- */
.br-page-hero {
    background: linear-gradient(135deg, var(--br-primary-dark), var(--br-primary));
    color: #fff;
    padding: 70px 0 50px;
    text-align: center;
}
.br-page-hero h1 { color: #fff; font-size: clamp(28px, 4vw, 40px); margin-bottom: 8px; }
.br-page-hero p { color: rgba(255,255,255,0.85); max-width: 560px; margin: 0 auto; }