/* =========================================================
   PROP-KEYS — NOIDA CONNECTIVITY SECTION
   Bootstrap 5 + Custom CSS
   ========================================================= */

:root {
    --pk-blue: #071f58;
    --pk-blue-2: #123b82;
    --pk-bright: #126df3;
    --pk-gold: #d9a23a;
    --pk-soft: #eef5ff;
    --pk-border: #dce8f8;
}

* {
    box-sizing: border-box;
}

/* =========================================================
   GLOBAL RESET — REMOVE UNWANTED PAGE GAP
   ========================================================= */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--pk-blue);
}

/* =========================================================
   MAIN SECTION
   ========================================================= */

.pk-noida-section {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background: #fff;
}

/*
   If this section is placed inside Bootstrap
   .container / .container-fluid, this keeps the
   section full viewport width.
*/
.pk-noida-section.pk-full-width {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw) !important;
}

/* =========================================================
   BOOTSTRAP ROW / COLUMN RESET
   ========================================================= */

.pk-noida-section .row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
}

.pk-noida-section .row > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

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

.pk-map-column {
    position: relative;
    min-height: 440px;
    margin: 0 !important;
    padding: 0 !important;
}

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

.pk-map-panel {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 440px;
    margin: 0 !important;
    padding: 0 !important;

    background-image: url("../images/noida-map.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

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

.pk-map-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 72%,
        rgba(255, 255, 255, 0.22) 88%,
        rgba(255, 255, 255, 0.78) 100%
    );
}

/* =========================================================
   RIGHT CONTENT COLUMN
   ========================================================= */

.pk-content-column {
    position: relative;
    min-height: 440px;
    margin: 0 !important;
    padding: 0 !important;

    background:
        radial-gradient(
            circle at 92% 28%,
            rgba(220, 232, 248, 0.24),
            transparent 27%
        ),
        #fff;
}

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

.pk-content {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 790px;
    height: 100%;

    padding: 24px 6.5vw 26px 3.25vw;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* =========================================================
   ARCHITECTURAL WATERMARK
   ========================================================= */

.pk-content::after {
    content: "";

    position: absolute;
    z-index: 0;

    right: 1.5%;
    top: 3%;

    width: 190px;
    height: 225px;

    opacity: 0.08;

    background:
        linear-gradient(
            90deg,
            transparent 0 12%,
            var(--pk-blue) 12% 14%,
            transparent 14% 28%,
            var(--pk-blue) 28% 30%,
            transparent 30% 44%,
            var(--pk-blue) 44% 46%,
            transparent 46% 60%,
            var(--pk-blue) 60% 62%,
            transparent 62% 100%
        );

    clip-path: polygon(
        8% 100%,
        8% 25%,
        16% 25%,
        16% 10%,
        22% 10%,
        22% 0,
        28% 0,
        28% 100%,
        38% 100%,
        38% 34%,
        45% 34%,
        45% 16%,
        52% 16%,
        52% 100%,
        65% 100%,
        65% 27%,
        72% 27%,
        72% 7%,
        79% 7%,
        79% 100%
    );

    pointer-events: none;
}

/* =========================================================
   EYEBROW
   ========================================================= */

.pk-eyebrow {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 13px;
    margin-bottom: 10px;

    color: var(--pk-gold);

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

    letter-spacing: 2.2px;
    line-height: 1;
}

.pk-eyebrow span {
    display: inline-block;

    width: 32px;
    height: 2px;

    flex: 0 0 32px;

    background: var(--pk-gold);
}

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

.pk-title {
    position: relative;
    z-index: 2;

    margin: 0;

    max-width: 680px;

    color: var(--pk-blue);

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

    font-size: clamp(34px, 3vw, 48px);
    font-weight: 700;

    line-height: 1.02;
    letter-spacing: -1px;
}

.pk-title strong {
    font-weight: 700;
}

/* =========================================================
   INTRO TEXT
   ========================================================= */

.pk-intro {
    position: relative;
    z-index: 2;

    max-width: 720px;

    margin: 14px 0 24px;

    color: #294b7b;

    font-size: 18px;
    line-height: 1.45;
    font-weight: 500;
}

/* =========================================================
   FEATURE GRID
   ========================================================= */

.pk-feature-grid {
    position: relative;
    z-index: 2;

    --bs-gutter-x: 28px;
    --bs-gutter-y: 20px;
}

/* =========================================================
   FEATURE ITEM
   ========================================================= */

.pk-feature {
    display: flex;
    align-items: center;

    min-height: 76px;

    gap: 14px;
}

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

.pk-icon {
    width: 74px;
    height: 74px;

    flex: 0 0 74px;

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

    border-radius: 50%;

    background: linear-gradient(
        145deg,
        #eef5ff,
        #e2eeff
    );

    border: 1px solid #cfe0fb;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 5px 16px rgba(24, 91, 176, 0.08);

    color: var(--pk-bright);

    font-size: 34px;
}

/* =========================================================
   FEATURE HEADING
   ========================================================= */

.pk-feature-copy h2 {
    margin: 0 0 3px;

    color: var(--pk-blue);

    font-family: Arial, Helvetica, sans-serif;

    font-size: 18px;
    line-height: 1.2;

    font-weight: 800;
}

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

.pk-feature-copy p {
    margin: 0;

    color: #294b7b;

    font-size: 14px;
    line-height: 1.25;

    font-weight: 500;
}

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

@media (min-width: 1200px) {

    .pk-map-column,
    .pk-map-panel {
        min-height: 450px;
    }

    .pk-content {
        padding-left: 4vw;
        padding-right: 5vw;
    }
}

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

@media (max-width: 991.98px) {

    .pk-map-column,
    .pk-map-panel {
        min-height: 360px;
    }

    .pk-map-panel {
        background-size: cover;
        background-position: center center;
    }

    .pk-map-overlay {
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 72%,
            rgba(255, 255, 255, 0.7) 100%
        );
    }

    .pk-content-column {
        min-height: auto;
    }

    .pk-content {
        width: 100%;
        max-width: none;

        padding: 34px 7% 38px;
    }

    .pk-title {
        font-size: clamp(34px, 5vw, 46px);
    }

    .pk-intro {
        font-size: 17px;
    }
}

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

@media (max-width: 575.98px) {

    .pk-map-column,
    .pk-map-panel {
        min-height: 265px;
    }

    .pk-map-panel {
        background-size: cover;
        background-position: center center;
    }

    .pk-map-overlay {
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 58%,
            rgba(255, 255, 255, 0.78) 100%
        );
    }

    .pk-content {
        width: 100%;
        max-width: none;

        padding: 28px 20px 32px;
    }

    .pk-content::after {
        width: 115px;
        height: 145px;

        right: -10px;
        top: 4px;
    }

    /* Eyebrow */

    .pk-eyebrow {
        gap: 8px;

        margin-bottom: 9px;

        font-size: 11px;

        letter-spacing: 1.6px;
    }

    .pk-eyebrow span {
        width: 22px;
        flex-basis: 22px;
    }

    /* Title */

    .pk-title {
        font-size: 34px;

        line-height: 1.04;

        letter-spacing: -0.7px;
    }

    /* Intro */

    .pk-intro {
        margin: 14px 0 22px;

        font-size: 15.5px;

        line-height: 1.45;
    }

    /* Feature grid */

    .pk-feature-grid {
        --bs-gutter-x: 14px;
        --bs-gutter-y: 17px;
    }

    .pk-feature {
        min-height: 64px;

        gap: 10px;
    }

    /* Icon */

    .pk-icon {
        width: 58px;
        height: 58px;

        flex-basis: 58px;

        font-size: 27px;
    }

    /* Heading */

    .pk-feature-copy h2 {
        font-size: 15px;

        line-height: 1.15;
    }

    /* Description */

    .pk-feature-copy p {
        font-size: 13px;

        line-height: 1.2;
    }
}

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

@media (max-width: 380px) {

    .pk-map-column,
    .pk-map-panel {
        min-height: 235px;
    }

    .pk-content {
        padding: 24px 16px 28px;
    }

    .pk-title {
        font-size: 30px;
    }

    .pk-intro {
        font-size: 14.5px;
    }

    .pk-icon {
        width: 54px;
        height: 54px;

        flex-basis: 54px;

        font-size: 25px;
    }

    .pk-feature-copy h2 {
        font-size: 14px;
    }

    .pk-feature-copy p {
        font-size: 12px;
    }
}