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

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


        html,
        body {
            width: 100%;
            min-height: 100%;
        }


        body {
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            font-family: Arial, Helvetica, sans-serif;
            background: #07182a;
        }


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

        .location-city-hero {

            position: relative;

            width: 100%;

            min-height: 533px;

            overflow: hidden;

            color: #ffffff;

            isolation: isolate;
        }


        /* =========================================================
           BACKGROUND IMAGE

           IMPORTANT:
           Picture is used instead of CSS background-image.

           Desktop:
           img/locationwisecity.png

           Mobile:
           img/locationwisecitymob.png
        ========================================================= */

        .location-city-background {

            position: absolute;

            inset: 0;

            z-index: -3;

            width: 100%;

            height: 100%;
        }


        .location-city-background picture {

            display: block;

            width: 100%;

            height: 100%;
        }


        .location-city-background img {

            display: block;

            width: 100%;

            height: 100%;

            object-fit: cover;

            object-position: center center;
        }


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

        .location-city-hero::after {

            content: "";

            position: absolute;

            inset: 0;

            z-index: -2;

            pointer-events: none;

            background:
                linear-gradient(
                    90deg,
                    rgba(2, 18, 35, 0.96) 0%,
                    rgba(2, 18, 35, 0.91) 18%,
                    rgba(2, 18, 35, 0.70) 34%,
                    rgba(2, 18, 35, 0.35) 50%,
                    rgba(2, 18, 35, 0.08) 72%,
                    rgba(2, 18, 35, 0) 100%
                );
        }


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

        .location-city-inner {

            position: relative;

            z-index: 2;

            width: 100%;

            min-height: 533px;
        }


        .location-city-container {

            width: 100%;

            max-width: 1900px;

            margin: 0 auto;

            padding:

                34px

                4.3%

                30px;
        }


        /* =========================================================
           BREADCRUMB
        ========================================================= */

        .location-breadcrumb {

            display: flex;

            align-items: center;

            flex-wrap: wrap;

            gap: 10px;

            margin-bottom: 17px;

            color: #ffffff;

            font-size: 18px;

            line-height: 1.2;
        }


        .location-breadcrumb span {

            white-space: nowrap;
        }


        .location-breadcrumb i {

            font-size: 14px;

            opacity: 0.85;
        }


        .location-breadcrumb .active {

            font-weight: 400;
        }


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

        .location-title {

            margin: 0;

            max-width: 1000px;

            color: #ffffff;

            font-family:
                Georgia,
                "Times New Roman",
                serif;

            font-size: clamp(
                58px,
                5.3vw,
                88px
            );

            font-weight: 700;

            line-height: 0.95;

            letter-spacing: -2px;
        }


        .location-title .gold {

            color: #ffc518;
        }


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

        .location-subtitle {

            margin-top: 18px;

            margin-bottom: 29px;

            color: #ffffff;

            font-size: clamp(
                24px,
                2vw,
                35px
            );

            font-weight: 700;

            line-height: 1.12;
        }


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

        .location-description {

            max-width: 850px;

            margin-bottom: 37px;

            color: #ffffff;

            font-size: clamp(
                18px,
                1.35vw,
                25px
            );

            font-weight: 400;

            line-height: 1.48;
        }


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

        .location-features {

            width: 100%;

            display: flex;

            align-items: center;

            gap: 0;
        }


        .location-feature {

            min-height: 80px;

            display: flex;

            align-items: center;

            padding-right: 28px;

            margin-right: 28px;

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


        .location-feature:last-child {

            border-right: none;

            padding-right: 0;

            margin-right: 0;
        }


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

        .location-feature-icon {

            width: 76px;

            height: 76px;

            min-width: 76px;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-right: 17px;

            border:
                3px solid
                #ffc400;

            border-radius: 50%;

            color: #ffc400;

            font-size: 37px;

            line-height: 1;
        }


        /* =========================================================
           FEATURE TEXT
        ========================================================= */

        .location-feature-text {

            color: #ffffff;

            font-size: 19px;

            font-weight: 500;

            line-height: 1.25;

            white-space: nowrap;
        }


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

        @media (max-width: 1399px) {

            .location-city-hero {

                min-height: 500px;
            }


            .location-city-inner {

                min-height: 500px;
            }


            .location-title {

                font-size: 68px;
            }


            .location-subtitle {

                font-size: 27px;

                margin-top: 14px;

                margin-bottom: 20px;
            }


            .location-description {

                max-width: 740px;

                font-size: 19px;

                margin-bottom: 28px;
            }


            .location-feature {

                padding-right: 20px;

                margin-right: 20px;
            }


            .location-feature-icon {

                width: 64px;

                height: 64px;

                min-width: 64px;

                margin-right: 12px;

                font-size: 30px;
            }


            .location-feature-text {

                font-size: 16px;
            }
        }


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

        @media (max-width: 991px) {

            .location-city-hero {

                min-height: 700px;
            }


            .location-city-inner {

                min-height: 700px;
            }


            .location-city-container {

                padding:

                    30px

                    30px

                    35px;
            }


            .location-city-background img {

                /*
                    Mobile/tablet image.
                    Keep the complete composition visible.
                */

                object-position: center center;
            }


            .location-city-hero::after {

                background:
                    linear-gradient(
                        90deg,
                        rgba(2,18,35,0.96) 0%,
                        rgba(2,18,35,0.87) 35%,
                        rgba(2,18,35,0.55) 58%,
                        rgba(2,18,35,0.18) 82%,
                        rgba(2,18,35,0.04) 100%
                    );
            }


            .location-breadcrumb {

                font-size: 16px;

                margin-bottom: 20px;
            }


            .location-title {

                max-width: 500px;

                font-size: 58px;
            }


            .location-subtitle {

                max-width: 500px;

                font-size: 24px;
            }


            .location-description {

                max-width: 570px;

                font-size: 17px;
            }


            .location-features {

                max-width: 650px;
            }


            .location-feature {

                padding-right: 14px;

                margin-right: 14px;
            }


            .location-feature-icon {

                width: 54px;

                height: 54px;

                min-width: 54px;

                font-size: 25px;

                margin-right: 9px;
            }


            .location-feature-text {

                font-size: 14px;

                white-space: normal;
            }
        }


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

        @media (max-width: 767px) {

            .location-city-hero {

                /*
                    Height based on your mobile reference.
                */

                min-height: 847px;
            }


            .location-city-inner {

                min-height: 847px;
            }


            /*
                Mobile overlay.
                Left side dark for readable text.
                Right side image remains visible.
            */

            .location-city-hero::after {

                background:
                    linear-gradient(
                        90deg,
                        rgba(2,18,35,0.96) 0%,
                        rgba(2,18,35,0.90) 28%,
                        rgba(2,18,35,0.68) 50%,
                        rgba(2,18,35,0.32) 72%,
                        rgba(2,18,35,0.08) 100%
                    );
            }


            .location-city-container {

                padding:

                    29px

                    10px

                    35px;
            }


            /* =====================================================
               BREADCRUMB
            ===================================================== */

            .location-breadcrumb {

                gap: 6px;

                margin-bottom: 24px;

                font-size: 12px;
            }


            .location-breadcrumb i {

                font-size: 9px;
            }


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

            .location-title {

                max-width: 255px;

                font-size: 47px;

                line-height: 0.90;

                letter-spacing: -1px;
            }


            /*
                Mobile:

                Noida
                Properties
            */

            .location-title .gold {

                display: block;
            }


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

            .location-subtitle {

                max-width: 275px;

                margin-top: 18px;

                margin-bottom: 20px;

                font-size: 22px;

                line-height: 1.13;
            }


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

            .location-description {

                max-width: 292px;

                margin-bottom: 45px;

                font-size: 15px;

                line-height: 1.48;
            }


            /*
                Remove desktop forced breaks on mobile.
            */

            .desktop-only-break {

                display: none;
            }


            /* =====================================================
               FEATURES - 2 X 2
            ===================================================== */

            .location-features {

                width: 100%;

                max-width: 440px;

                display: grid;

                grid-template-columns:
                    1fr 1fr;

                column-gap: 0;

                row-gap: 0;

                align-items: stretch;
            }


            .location-feature {

                width: 100%;

                min-height: 76px;

                display: flex;

                align-items: center;

                padding:

                    0

                    9px

                    0

                    0;

                margin: 0;

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


            /*
                Right side features.
            */

            .location-feature:nth-child(2),

            .location-feature:nth-child(4) {

                border-right: none;

                padding-left: 10px;

                padding-right: 0;
            }


            /*
                Second row separator.
            */

            .location-feature:nth-child(3),

            .location-feature:nth-child(4) {

                margin-top: 17px;

                padding-top: 17px;

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


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

            .location-feature-icon {

                width: 56px;

                height: 56px;

                min-width: 56px;

                margin-right: 9px;

                border-width: 2px;

                font-size: 26px;
            }


            /* =====================================================
               MOBILE FEATURE TEXT
            ===================================================== */

            .location-feature-text {

                font-size: 12px;

                line-height: 1.25;

                white-space: normal;
            }
        }


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

        @media (max-width: 400px) {

            .location-city-hero {

                min-height: 820px;
            }


            .location-city-inner {

                min-height: 820px;
            }


            .location-city-container {

                padding:

                    27px

                    9px

                    30px;
            }


            .location-breadcrumb {

                font-size: 11px;

                margin-bottom: 21px;
            }


            .location-title {

                max-width: 230px;

                font-size: 43px;
            }


            .location-subtitle {

                max-width: 250px;

                font-size: 20px;

                margin-top: 15px;

                margin-bottom: 18px;
            }


            .location-description {

                max-width: 260px;

                font-size: 14px;

                margin-bottom: 38px;
            }


            .location-feature-icon {

                width: 50px;

                height: 50px;

                min-width: 50px;

                font-size: 23px;
            }


            .location-feature-text {

                font-size: 11px;
            }
        }


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

        @media (max-width: 350px) {

            .location-title {

                font-size: 39px;
            }


            .location-subtitle {

                font-size: 18px;
            }


            .location-description {

                max-width: 235px;

                font-size: 13px;
            }


            .location-feature-icon {

                width: 46px;

                height: 46px;

                min-width: 46px;

                font-size: 21px;
            }


            .location-feature-text {

                font-size: 10px;
            }
        }