/* =========================================
   BRAND PAGE - CEMENT & STEEL SECTION
========================================= */

@font-face {
    font-family: 'PP Fragment';
    src: url(../font/PPFragment-SerifLight.otf);
    url(../font/PPFragment-SerifLight.eot);
    url(../font/PPFragment-SerifLight.ttf);
    url(../font/PPFragment-SerifLight.woff);
    url(../font/PPFragment-SerifLight.woff2)
}

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

body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

.brand-cement-steel-section {
    width: 100%;
    background: #FAEDD4;
    padding: 140px 0;
    position: relative;
    overflow: hidden;
}

/* MAIN CONTAINER */

.brand-cement-steel-container {
    width: 80%;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 0px;
    position: relative;
    z-index: 2;
}

/* =========================================
   COMMON HEADING
========================================= */

.brand-heading-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
}

.brand-left-heading h2,
.steel-heading h2 {
    font-family: 'PP Fragment';
    font-style: Serif Light;
    font-size: 48px;
    font-weight: 300;
    color: #AC0755;
    line-height: 1;
    margin-top: 10%;
    margin-bottom: 10px;
}

.brand-left-heading p,
.steel-heading p {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 2.62px;
    vertical-align: middle;
    color: #4A4A4A;
}

.brand-right-text {
    max-width: 420px;
}

.brand-right-text p {
    font-family: Manrope;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 3px;
    color: #AC0755;
}

/* =========================================
   CEMENT CARDS
========================================= */

.cement-cards-wrapper {
    width: 100%;
    display: flex;
    gap: 30px;
}

.cement-card {
    width: calc(33.33% - 20px);
    background: #FFFFFF;
    border: 1px solid#FFFFFF;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 248px;
}

.owl-carousel .cement-card {
    width: 100%;
}

.cement-logo {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
}

.cement-logo img {
    max-width: 180px;
    max-height: 60px;
    object-fit: contain;
}

.cement-card p {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #4A4A4A;
}

/* =========================================
   STEEL SECTION
========================================= */

.steel-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.steel-brand-box {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid#FFFFFF;
    padding: 48px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.steel-logos-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.steel-logo {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.steel-logo img {
    max-width: 180px;
    max-height: 70px;
    object-fit: contain;
}

.steel-description {
    width: 100%;
}

.steel-description p {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #4A4A4A;
}

/* =========================================
   STEEL IMAGE
========================================= */

.steel-image-wrapper {
    width: 100%;
    height: 339px;
    overflow: hidden;
}

.steel-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   BACKGROUND SHAPE
========================================= */

.brand-bg-shape {
    width: 600px;
    height: 600px;
    border-radius: 50%;
    border: 80px solid #D8A3AF;
    position: absolute;
    right: -250px;
    bottom: 120px;
    opacity: 0.9;
}

.brand-bg-shape::after {
    content: "";
    width: 180px;
    height: 180px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* =========================================
   WATERPROOFING SECTION
========================================= */

.waterproofing-section {
    width: 100%;
    background: #FFFFFF;
    padding: 90px 0;
    position: relative;
}

/* MAIN CONTAINER */

.waterproofing-container {
    width: 80%;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 126px;
}

/* =========================================
   LEFT CONTENT
========================================= */

.waterproofing-content {
    width: 51%;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* HEADING */

.waterproofing-heading {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.waterproofing-heading h2 {
    font-family: 'PP Fragment';
    font-style: Serif Light;
    font-size: 52px;
    font-weight: 300;
    line-height: 1;
    color: #AC0755;
}

.waterproofing-heading p {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 2.62px;
    vertical-align: middle;
    color: #4A4A4A;
}

/* DESCRIPTION */

.waterproofing-description {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 470px;
}

.waterproofing-line {
    width: 2px;
    height: 24px;
    background: #B89243;
    margin-top: 3px;
}

.waterproofing-description p {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #4A4A4A;
}

/* =========================================
   LOGOS GRID
========================================= */

.waterproofing-logos {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 60px;
    max-width: 380px;
}

.waterproofing-logo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.waterproofing-logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* =========================================
   RIGHT IMAGE
========================================= */

.waterproofing-image-wrapper {
    width: 620px;
    height: 545px;
    border: 1px solid #DDDDDD;
    overflow: hidden;
    background: #FFFFFF;
}

.waterproofing-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================
   FLOOR TILES SECTION
========================================= */

.floor-tiles-section {
    width: 100%;
    background: #FAEDD4;
    padding: 90px 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* MAIN CONTAINER */

.floor-tiles-container {
    width: 80%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

/* =========================================
   LEFT IMAGE
========================================= */
.floor-tiles-image-wrapper {
    width: 620px;
    flex-shrink: 0;
    padding-top: 15%;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    overflow: hidden;
}

.floor-tiles-image-wrapper img {
    width: auto;
    height: auto;
    display: block;
    object-fit: unset;
}

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

.floor-tiles-content {
    width: 620px;
    padding-left: 48px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.floor-tiles-heading {
    width: 100%;
    padding-bottom: 18px;
    border-bottom: 1px solid #D8CCB4;
}

.floor-tiles-heading h2 {
    margin: 0 0 14px 0;
    font-family: 'PP Fragment';
    font-style: Serif Light;
    font-size: 48px;
    font-weight: 300;
    line-height: 1;

    color: #AC0755;

}

.floor-tiles-heading p {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 2.62px;
    vertical-align: middle;
    color: #6A6A6A;
}

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

.tiles-brand-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 22px;
    border-bottom: 1px solid #D8CCB4;
}

/* LOGO */

.tiles-brand-logo {
    width: 100%;
    display: flex;
    align-items: center;
}

.tiles-brand-logo img {
    width: auto;
    object-fit: contain;
    display: block;
    height: auto;
}


/* TEXT */

.tiles-brand-item p {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #4A4A4A;
}

/* =========================================
   PIPES & PLUMBING SECTION
========================================= */

.pipes-plumbing-section {
    width: 100%;
    background: #FAEDD4;
    padding: 90px 0;
    display: flex;
    justify-content: center;
}

/* MAIN CONTAINER */

.pipes-plumbing-container {
    width: 80%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* =========================================
   LEFT CONTENT
========================================= */

.pipes-plumbing-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pipes-block {
    padding-bottom: 40px;
    border-bottom: 1px solid #D8CCB4;
    margin-bottom: 40px;
}

/* =========================================
   HEADINGS
========================================= */

.pipes-heading,
.plumbing-heading {
    margin-bottom: 30px;
}

.pipes-heading h2,
.plumbing-heading h2 {
    margin: 0 0 14px 0;

    font-size: 48px;
    font-weight: 300;
    line-height: 1;
    color: #AC0755;
    font-family: 'PP Fragment';
    font-family: Serif Light;
}

.pipes-heading p,
.plumbing-heading p {
    margin: 0;

    font-size: 14px;
    letter-spacing: 3px;
    line-height: 1.5;

    color: #6A6A6A;
    font-family: Manrope;
}

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

.pipes-brand-item {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-bottom: 28px;
}

/* LOGOS */

.pipes-brand-logo {
    width: 100%;

    display: flex;
    align-items: center;
}

.pipes-brand-logo img {
    width: auto;
    height: auto;
    /* adding max-height to ensure logos don't get too big */
    display: block;
}

/* TEXT */

.pipes-brand-item p {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #4A4A4A;
}

/* =========================================
   RIGHT IMAGE
========================================= */

.pipes-plumbing-image-wrapper {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    overflow: hidden;
}

.pipes-plumbing-image-wrapper img {
    width: 100%;
    max-width: 600px;
    height: auto;
    display: block;
}

/* =========================================
   ELECTRICAL & LED SECTION
========================================= */

.electrical-led-section {
    width: 100%;
    background: #B1005A;
    padding: 100px 0;
    display: flex;
    justify-content: center;
}

/* MAIN CONTAINER */

.electrical-led-container {
    width: 80%;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* =========================================
   COMMON HEADINGS
========================================= */

.electrical-heading,
.led-heading {
    text-align: center;
}

.electrical-heading h2,
.led-heading h2 {
    margin: 0 0 18px 0;
    color: #FFFFFF;
    font-size: 48px;
    font-weight: 300;
    line-height: 1;
    font-family: 'PP Fragment';
    font-style: Serif Light;
}

.electrical-heading p,
.led-heading p {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 2.62px;
    vertical-align: middle;
    color: #FFFFFF;
}

/* =========================================
   TOP SECTION
========================================= */

.electrical-top-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* TOP CARDS */

.electrical-cards-wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 2%;
}

/* SINGLE CARD */

.electrical-card {
    width: 50%;
    height: 247px;
    background: #FFFFFF;
    border: 1px solid #D8D8D8;
    padding: 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* LOGO */

.electrical-logo {
    width: 100%;
}

.electrical-logo img {
    width: auto;
    height: auto;

    display: block;
}

/* TEXT */

.electrical-card p {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #444444;
}

/* ELECTRICAL PRODUCT IMAGE */
.electrical-product-image {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 50px;
}

.electrical-product-image img {
    width: auto;
    height: auto;
    display: block;
    object-fit: cover;
}

/* =========================================
   LED SECTION
========================================= */

.led-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* BOTTOM CARDS */

.led-cards-wrapper {
    width: 1280px;

    display: flex;
    justify-content: space-between;
}

/* SINGLE LED CARD */

.led-card {
    width: 236.8px;
    height: 207px;

    background: #FFFFFF;
    border: 1px solid #D8D8D8;

    padding-top: 24px;
    padding-right: 24px;
    padding-bottom: 40px;
    padding-left: 24px;

    box-sizing: border-box;

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

    gap: 20px;

    text-align: center;
}

.owl-carousel .led-card {
    width: 100%;
}

/* LOGO */

.led-logo {
    width: 69%;

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

.led-logo img {
    width: auto;
    height: auto;

    display: block;
}

/* TEXT */

.led-card p {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0px;
    text-align: center;
    vertical-align: middle;
    color: #444444;
}

/* LED PRODUCT IMAGES */
.led-product-images {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 50px;
}

.led-product-images img {
    width: auto;
    height: auto;
    display: block;
    object-fit: cover;
}

@media only screen and (max-width: 768px) {
    .led-product-images {
        flex-direction: column;
        gap: 30px;
    }

    .led-product-images img {
        width: 100%;
    }
}

/* SECTION */
.switch-lock-section {
    width: 100%;
    float: left;
    background: #FAEDD4;
    position: relative;
    overflow: hidden;
    padding: 120px 0;
}

/* LEFT SHAPE */
.left-shape {
    position: absolute;
    left: -120px;
    top: 260px;
    width: 300px;
    height: 480px;
    border-radius: 0 220px 220px 0;
    opacity: 0.9;
}

/* MAIN CONTAINER */
.switch-lock-container {
    width: 80%;
    height: auto;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* IMAGES CONTAINER */
.switch-lock-images {
    width: 600px;
    height: 900px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* IMAGE BOX */
.switch-img {
    width: 600px;
    overflow: hidden;
}

/* ORIGINAL IMAGE SIZE */
.switch-img img {
    display: block;
    margin-top: 8%;
}

/* TOP IMAGE */
.top-img {
    height: auto;
}

/* BOTTOM IMAGE */
.bottom-img {
    height: auto;
}

/* TEXT CONTAINER */
.switch-lock-text {
    width: 600px;
    height: 1058.894px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding-bottom: 0%;
}

/* COMMON TEXT BOX */
.text-box {
    width: 600px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* TOP BOX */
.switching-box {
    height: 650.744px;
}

/* BOTTOM BOX */
.locking-box {
    height: 432.150px;
    padding-top: 40px;
    border-top: 1px solid #C8BBA5;
}

/* HEADINGS */
.text-box h2 {
    font-size: 48px;
    line-height: 44px;
    font-weight: 300;
    color: #AC0755;
    font-family: 'PP Fragment';
    font-style: Serif Light;
    letter-spacing: 2px;
}

/* SUBTITLE */
.subtitle {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 2.62px;
    vertical-align: middle;
    color: #4A4A4A;
    margin-bottom: 18px;
}

/* BRAND ITEM */
.brand-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

/* BRAND LOGOS */
.brand-item img {
    width: fit-content;
    display: block;
}

/* DESCRIPTION */
.brand-item p {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #3D3D3D;
}

.emulsion-section {
    width: 100%;
    background-color: #FAEDD4;
    padding: 130px 0;
    font-family: Arial, Helvetica, sans-serif;
}

.emulsion-wrapper {
    width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8%;
}

.emulsion-left {
    width: 42%;
}

.emulsion-right {
    width: 50%;
    overflow: hidden;
}

.emulsion-left h2 {
    font-family: 'PP Fragment';
    font-style: Serif Light;
    font-size: 48px;
    line-height: 1;
    font-weight: 300;
    color: #AC0755;
    margin-bottom: 22px;
}

.emulsion-tagline {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 2.62px;
    vertical-align: middle;
    color: #222;
    margin-bottom: 25px;
}

.brand-content {
    width: 100%;
    margin-bottom: 22px;
}

.asian-logo {
    width: fit-content;
    height: auto;
    display: block;
    margin-bottom: 14px;
}

.dulux-logo {
    width: fit-content;
    height: auto;
    display: block;
    margin-bottom: 12px;
}

.brand-content p {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #1d1d1d;
    margin-bottom: 10px;
}

.emulsion-right img {
    width: 100%;
    height: auto;
    display: block;
}

.elevators-section {
    width: 100%;
    background-color: #FAEDD4;
    padding: 100px 0;
    font-family: Arial, Helvetica, sans-serif;
}

.elevators-wrapper {
    width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 267px;
}

.elevators-image {
    width: 563px;
    overflow: hidden;
}

.elevators-image img {
    width: 100%;
    height: auto;
    display: block;
}

.elevators-content {
    width: 563px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.elevators-content h2 {
    font-family: 'PP Fragment';
    font-style: Serif Light;
    font-size: 48px;
    line-height: 1;
    font-weight: 300;
    color: #AC0755;
    margin-bottom: 34px;
}

.elevators-tagline {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 2.62px;
    vertical-align: middle;
    color: #222;
    margin-bottom: 35px;
}

.elevator-brand {
    width: 100%;
    margin-bottom: 24px;
}

.elevator-brand img {
    width: fit-content;
    height: auto;
    display: block;
    margin-bottom: 6px;
}

.elevator-brand .otis-logo {
    width: auto;
}

.elevator-brand .thyssen-logo {
    width: auto;
}

.elevator-brand .kone-logo {
    width: auto;
}

.elevator-brand .mitsubishi-logo {
    width: auto;
}

.elevator-brand p {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #1d1d1d;

}

.foyer-parking-section {
    width: 100%;
    background-color: #ffffff;
    padding: 128px 0;
    font-family: Arial, Helvetica, sans-serif;
}

.foyer-parking-wrapper {
    width: 80%;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 128px;
}

.foyer-row {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    gap: 30px;
}

.foyer-text {
    width: 50%;
}

.foyer-image {
    width: 50%;
    overflow: hidden;
}

.foyer-image img {
    width: 100%;
    height: auto;
    display: block;
}

.parking-row {
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
    gap: 50px;
    padding-top: 0;
}

.parking-image {
    width: 50%;
    overflow: hidden;
}

.parking-image img {
    width: 100%;
    height: auto;
    display: block;
}

.parking-text {
    width: 46%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.foyer-text h2,
.parking-text h2 {
    font-family: 'PP Fragment';
    font-style: Serif Light;
    font-size: 48px;
    line-height: 1.2;
    font-weight: 300;
    color: #bd0f5b;
    letter-spacing: 0.5px;
    margin: 0;
}

.small-title {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 2.62px;
    vertical-align: middle;
    color: #222222;
}

.description {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #1d1d1d;
}

.foyer-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.parking-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0;
    margin: 8px 0 0;
}

.parking-features li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.parking-features img {
    width: 28px;
    height: auto;
    display: block;
}

.parking-features span {
    font-family: 'PP Fragment';
    font-weight: 400;
    font-style: Glare Regular;
    font-size: 20px;
    line-height: 19px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #AC0755;
}

.gym-yoga-main {
    width: 100%;
    height: 800px;
    background-color: #FAEDD4;
    position: relative;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    align-items: center;
}

.gym-yoga-section {
    width: 80%;
    height: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.gym-yoga-content {
    width: 45%;
    padding-left: 0;
}

.gym-yoga-content h2 {
    font-family: 'PP Fragment';
    font-style: Serif Light;
    font-size: 48px;
    line-height: 1;
    font-weight: 300;
    color: #AC0755;
    margin: 0 0 34px 0;
    letter-spacing: 0.5px;
}

.gym-yoga-desc {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 26px;
    letter-spacing: 2.62px;
    vertical-align: middle;
    color: #4a4a4a;
}

.gym-yoga-small {
    font-size: 14px;
    line-height: 3.5;
    letter-spacing: 3px;
    color: #4a4a4a;
    margin: 0 0 24px 0;
}

.gym-yoga-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gym-yoga-list li {
    font-family: 'PP Fragment';
    font-weight: 400;
    font-style: Glare Regular;
    font-size: 20px;
    line-height: 35px;
    letter-spacing: 1px;
    vertical-align: middle;
    color: #AC0755;
    margin: 0;
}

.gym-yoga-image {
    width: 50%;
    height: 640px;
    overflow: hidden;
}

.gym-yoga-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Right side pink graphic */
.gym-yoga-shape {
    position: absolute;
    width: 430px;
    height: 430px;
    right: -160px;
    top: 55px;
    border-radius: 50%;
    z-index: 1;
}

.gym-yoga-shape::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    background-color: #FAEDD4;
    border-radius: 50%;
    top: 0;
    left: 0;
}

.play_section {
    width: 100%;
    background-color: #FAEDD4;
    padding: 95px 0 120px;
    font-family: Arial, Helvetica, sans-serif;
}

.play_wrapper {
    width: 80%;
    margin: 0 auto;
}

.play_heading {
    font-family: 'PP Fragment';
    font-family: Serif Light;
    font-size: 48px;
    line-height: 1;
    font-weight: 300;
    color: #AC0755;
    margin: 0 0 55px;
    letter-spacing: 0.5px;
    text-align: center;
}

.play_content {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 65px;
}

.play_images {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.play-img {
    width: 100%;
    overflow: hidden;
}

.play_images img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.play_text {
    width: 43%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.play_text_block h3 {
    font-family: 'PP Fragment';
    font-weight: 400;
    font-style: Glare Regular;
    font-size: 20px;
    line-height: 19px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #AC0755;
    margin: 0 0 10px;

}

.play_text_block p {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 1px;
    vertical-align: middle;

    color: #4a4a4a;
}

.admin-suite-main {
    width: 100%;
    background-color: #FAEDD4;
    padding: 120px 0;
    font-family: Arial, Helvetica, sans-serif;
}

.admin-suite-wrapper {
    width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 220px;
}

.admin-suite-card {
    width: 40%;
    height: 505px;
    background-color: #AC0755;
    padding: 50px 38px;
    color: #ffffff;
}

.admin-suite-card h2 {
    font-family: 'PP Fragment';
    font-weight: 300;
    font-style: Serif Light;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: 0%;
    color: #ffffff;
    margin: 0 0 28px;
    letter-spacing: 0.5px;
}

.admin-suite-card p {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #ffffff;
    margin: 0 0 28px;
}

.admin-suite-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-suite-list li {
    font-family: PP Fragment;
    font-weight: 400;
    font-style: Glare Regular;
    font-size: 20px;
    line-height: 19px;
    letter-spacing: 0px;
    vertical-align: middle;
    gap: 14px;
    display: flex;
    align-items: center;
    color: #ffffff;
    margin-bottom: 18px;
}

.admin-icon {
    width: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-icon img {
    width: 24px;
    height: auto;
    display: block;
}

.admin-suite-images {
    width: 60%;
    height: 505px;
    position: relative;
}

.security-cabin-img {
    width: 330px;
    height: 296px;
    object-fit: cover;
    display: block;
    position: absolute;
    right: 90px;
    top: 0;
    z-index: 2;
}

.cctv-camera-img {
    width: 390px;
    height: 320px;
    object-fit: cover;
    display: block;
    position: absolute;
    left: 58px;
    bottom: 0;
    z-index: 1;
}

.redevelopment-main {
    width: 100%;
    background-color: #FAEDD4;
    padding: 140px 0 160px;
    font-family: Arial, Helvetica, sans-serif;
}

.redevelopment-wrapper {
    width: 80%;
    margin: 0 auto;
}

.redevelopment-wrapper h2 {
    font-family: 'PP Fragment';
    font-style: Serif Light;
    font-size: 48px;
    line-height: 1;
    font-weight: 300;
    color: #AC0755;
    text-align: center;
    margin: 0 0 78px;
    letter-spacing: 0.5px;
}

.redevelopment-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 105px;
    row-gap: 92px;
}

.redevelopment-card {
    width: 100%;
}

.redevelopment-card h3 {
    font-family: 'PP Fragment';
    font-style: Serif Light;
    font-size: 28px;
    line-height: 0.9;
    font-weight: 300;
    color: #AC0755;
    margin: 0 0 18px;
    letter-spacing: 0.2px;
}

.redevelopment-card p {
    font-family: Manrope;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: #1d1d1d;
    margin: 0;
}

/* =========================================
   RESPONSIVE DESIGN - FIXED WHITE SPACE
========================================= */

/* Global Fixes for White Space */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* Large Desktop (1200px - 1400px) */
@media only screen and (max-width: 1400px) {
    .led-section {
        width: 100%;
        max-width: 100%;
    }

    .led-cards-wrapper {
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .led-card {
        width: calc(25% - 20px);
        min-width: 200px;
    }

    .electrical-led-container {
        width: 85%;
    }
}

@media only screen and (max-width: 1200px) {

    /* Container width adjustments */
    .brand-cement-steel-container,
    .waterproofing-container,
    .floor-tiles-container,
    .pipes-plumbing-container,
    .electrical-led-container,
    .switch-lock-container,
    .emulsion-wrapper,
    .elevators-wrapper,
    .foyer-parking-wrapper,
    .gym-yoga-section,
    .play_wrapper,
    .admin-suite-wrapper,
    .redevelopment-wrapper {
        width: 90%;
    }

    /* LED Section Fixes */
    .led-section {
        width: 100%;
    }

    .led-cards-wrapper {
        width: 100%;
        gap: 20px;
        justify-content: center;
    }

    .led-card {
        width: calc(33.33% - 20px);
        min-width: 200px;
    }

    /* Waterproofing */
    .waterproofing-container {
        gap: 50px;
    }

    .waterproofing-image-wrapper {
        width: 100%;
        max-width: 620px;
        height: auto;
        aspect-ratio: 620 / 545;
    }

    /* Elevators */
    .elevators-wrapper {
        gap: 50px;
    }

    /* Admin Suite */
    .admin-suite-wrapper {
        gap: 50px;
    }

    /* Hide decorative shapes on smaller screens */
    .gym-yoga-shape {
        display: none;
    }

    .left-shape {
        display: none;
    }

    .brand-bg-shape {
        display: none;
    }

    /* Admin Suite Images */
    .security-cabin-img {
        right: 0;
    }

    .cctv-camera-img {
        left: 0;
    }

    /* Floor Tiles */
    .floor-tiles-image-wrapper {
        width: 50%;
    }

    .floor-tiles-image-wrapper img {
        width: 100%;
        height: auto;
    }

    /* Pipes & Plumbing */
    .pipes-plumbing-image-wrapper img {
        max-width: 100%;
    }
}

/* Tablet (768px - 992px) */
@media only screen and (max-width: 992px) {

    /* Headings */
    .brand-heading-row {
        flex-direction: column;
        gap: 20px;
    }

    /* Cement Cards */
    .cement-cards-wrapper {
        flex-direction: column;
    }

    .cement-card {
        width: 100%;
    }

    /* Steel Section */
    .steel-logos-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .steel-logo {
        flex: 1 1 40%;
        min-width: 150px;
    }

    .steel-brand-box {
        padding: 30px;
    }

    /* Waterproofing */
    .waterproofing-container {
        flex-direction: column;
    }

    .waterproofing-content {
        width: 100%;
    }

    .waterproofing-image-wrapper {
        width: 100%;
        height: auto;
    }

    /* Floor Tiles */
    .floor-tiles-container {
        flex-direction: column-reverse;
    }

    .floor-tiles-content {
        width: 100%;
        padding-left: 0;
    }

    .floor-tiles-image-wrapper {
        width: 100%;
        padding-top: 20px;
    }

    /* Pipes & Plumbing */
    .pipes-plumbing-container {
        flex-direction: column;
    }

    .pipes-plumbing-content {
        width: 100%;
    }

    .pipes-plumbing-image-wrapper {
        width: 100%;
        justify-content: center;
    }

    /* Electrical Section */
    .electrical-led-section {
        padding: 100px 0;
    }

    .electrical-led-container {
        gap: 60px;
    }

    .electrical-cards-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .electrical-card {
        width: 100%;
        height: auto;
        min-height: 200px;
    }

    /* LED Cards - Tablet */
    .led-card {
        width: calc(50% - 20px);
    }

    /* Switch & Lock */
    .switch-lock-container {
        flex-direction: column;
        gap: 40px;
    }

    .switch-lock-images {
        width: 100%;
        height: auto;
    }

    .switch-img {
        width: 100%;
    }

    .switch-img img {
        width: 100%;
        height: auto;
        margin-top: 0;
    }

    .switch-lock-text {
        width: 100%;
        height: auto;
    }

    .text-box {
        width: 100%;
    }

    .switching-box,
    .locking-box {
        height: auto;
        padding-bottom: 20px;
    }

    /* Emulsion */
    .emulsion-wrapper {
        flex-direction: column;
        gap: 40px;
    }

    .emulsion-left,
    .emulsion-right {
        width: 100%;
    }

    /* Elevators */
    .elevators-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .elevators-image,
    .elevators-content {
        width: 100%;
        max-width: 563px;
    }

    /* Foyer & Parking */
    .foyer-parking-wrapper {
        gap: 60px;
    }

    .foyer-row,
    .parking-row {
        flex-direction: column;
    }

    .foyer-text,
    .foyer-image,
    .parking-image,
    .parking-text {
        width: 100%;
    }

    .parking-row {
        flex-direction: column-reverse;
    }

    /* Gym Yoga */
    .gym-yoga-main {
        height: auto;
        padding: 60px 0;
    }

    .gym-yoga-section {
        height: auto;
        flex-direction: column;
        gap: 40px;
    }

    .gym-yoga-content,
    .gym-yoga-image {
        width: 100%;
    }

    .gym-yoga-image {
        height: auto;
        max-height: 400px;
    }

    /* Play Section */
    .play_content {
        flex-direction: column;
        gap: 40px;
    }

    .play_images,
    .play_text {
        width: 100%;
    }

    /* Admin Suite */
    .admin-suite-wrapper {
        flex-direction: column;
    }

    .admin-suite-card,
    .admin-suite-images {
        width: 100%;
        height: auto;
    }

    .admin-suite-card {
        min-height: auto;
        padding: 40px 30px;
    }

    .admin-suite-images {
        display: flex;
        flex-direction: column;
        gap: 20px;
        position: relative;
        min-height: 400px;
    }

    .security-cabin-img,
    .cctv-camera-img {
        position: relative;
        width: 100%;
        max-width: 350px;
        height: auto;
        right: auto;
        left: auto;
        margin: 0 auto;
    }

    /* Redevelopment */
    .redevelopment-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 40px;
        row-gap: 40px;
    }
}

/* Mobile (up to 767px) */
@media only screen and (max-width: 767px) {

    /* Typography */
    .brand-left-heading h2,
    .steel-heading h2,
    .waterproofing-heading h2,
    .floor-tiles-heading h2,
    .pipes-heading h2,
    .plumbing-heading h2,
    .electrical-heading h2,
    .led-heading h2,
    .text-box h2,
    .emulsion-left h2,
    .elevators-content h2,
    .foyer-text h2,
    .parking-text h2,
    .gym-yoga-content h2,
    .play_heading,
    .admin-suite-card h2,
    .redevelopment-wrapper h2 {
        font-size: 32px;
        line-height: 1.2;
    }

    .waterproofing-heading h2 {
        font-size: 36px;
    }

    /* Section Padding */
    .brand-cement-steel-section,
    .waterproofing-section,
    .floor-tiles-section,
    .pipes-plumbing-section,
    .electrical-led-section,
    .switch-lock-section,
    .emulsion-section,
    .elevators-section,
    .foyer-parking-section,
    .play_section,
    .admin-suite-main,
    .redevelopment-main {
        padding: 50px 0;
    }

    /* Steel Section */
    .steel-brand-box {
        padding: 20px;
    }

    .steel-logos-row {
        flex-direction: column;
        gap: 20px;
    }

    .steel-logo {
        width: 100%;
        justify-content: center;
    }

    .steel-image-wrapper {
        height: auto;
    }

    .steel-image-wrapper img {
        height: auto;
    }

    /* Waterproofing Logos */
    .waterproofing-logos {
        grid-template-columns: 1fr;
        gap: 25px;
        max-width: 100%;
    }

    .waterproofing-logo img {
        width: auto;
        max-width: 150px;
    }

    /* LED Cards - Mobile */
    .led-card {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }

    .led-cards-wrapper {
        justify-content: center;
    }

    /* Electrical Section */
    .electrical-led-container {
        gap: 40px;
    }

    .electrical-top-section {
        gap: 30px;
    }

    /* Redevelopment Grid */
    .redevelopment-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Admin Suite Card */
    .admin-suite-card {
        padding: 30px 20px;
    }

    .admin-suite-card h2 {
        font-size: 36px;
        line-height: 1.2;
    }

    .admin-suite-list li {
        font-size: 16px;
    }

    /* Gym Yoga */
    .gym-yoga-content h2 {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .gym-yoga-list li {
        font-size: 16px;
        line-height: 28px;
    }

    /* Play Section */
    .play_heading {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .play_text_block h3 {
        font-size: 18px;
    }

    /* Foyer & Parking */
    .foyer-parking-section {
        padding: 60px 0;
    }

    .foyer-parking-wrapper {
        gap: 40px;
    }

    /* Redevelopment Cards */
    .redevelopment-card h3 {
        font-size: 24px;
    }

    /* Switch & Lock */
    .switch-lock-section {
        padding: 60px 0;
    }

    .text-box h2 {
        font-size: 28px;
        line-height: 1.2;
    }

    /* Brand Items */
    .brand-item img {
        max-width: 100%;
        height: auto;
    }

    /* Elevators */
    .elevators-section {
        padding: 60px 0;
    }

    .elevators-content h2 {
        font-size: 32px;
        margin-bottom: 20px;
    }

    /* Container width for smallest screens */
    .brand-cement-steel-container,
    .waterproofing-container,
    .floor-tiles-container,
    .pipes-plumbing-container,
    .electrical-led-container,
    .switch-lock-container,
    .emulsion-wrapper,
    .elevators-wrapper,
    .foyer-parking-wrapper,
    .gym-yoga-section,
    .play_wrapper,
    .admin-suite-wrapper,
    .redevelopment-wrapper {
        width: 92%;
    }
}

/* Small Mobile (up to 480px) */
@media only screen and (max-width: 480px) {

    /* Further typography adjustments */
    .brand-left-heading h2,
    .steel-heading h2,
    .floor-tiles-heading h2,
    .pipes-heading h2,
    .plumbing-heading h2,
    .emulsion-left h2,
    .elevators-content h2 {
        font-size: 28px;
    }

    .waterproofing-heading h2 {
        font-size: 30px;
    }

    .text-box h2 {
        font-size: 24px;
    }

    /* Card padding */
    .cement-card,
    .electrical-card,
    .steel-brand-box {
        padding: 20px 15px;
    }

    /* Logo images */
    .cement-logo img,
    .steel-logo img {
        max-width: 140px;
    }

    .waterproofing-logos {
        gap: 20px;
    }

    /* Admin Suite */
    .admin-suite-card {
        padding: 25px 20px;
    }

    .admin-suite-card h2 {
        font-size: 28px;
        line-height: 1.3;
    }

    .admin-suite-card p {
        font-size: 13px;
        line-height: 20px;
    }

    /* Parking features */
    .parking-features span {
        font-size: 16px;
    }

    .parking-features img {
        width: 22px;
    }

    /* Section padding */
    .brand-cement-steel-section,
    .waterproofing-section,
    .floor-tiles-section,
    .pipes-plumbing-section,
    .electrical-led-section,
    .switch-lock-section,
    .emulsion-section,
    .elevators-section,
    .play_section,
    .admin-suite-main,
    .redevelopment-main {
        padding: 40px 0;
    }

    /* Gym Yoga */
    .gym-yoga-main {
        padding: 40px 0;
    }

    .gym-yoga-image {
        max-height: 300px;
    }

    /* Play section */
    .play_section {
        padding: 50px 0;
    }

    /* Subtitle text */
    .subtitle,
    .small-title,
    .description,
    .brand-right-text p,
    .waterproofing-description p,
    .cement-card p,
    .steel-description p,
    .tiles-brand-item p,
    .pipes-brand-item p,
    .electrical-card p,
    .led-card p,
    .brand-item p,
    .brand-content p,
    .elevator-brand p,
    .redevelopment-card p {
        font-size: 12px;
        line-height: 18px;
    }

    /* Headings with small text */
    .brand-left-heading p,
    .steel-heading p,
    .waterproofing-heading p,
    .floor-tiles-heading p,
    .pipes-heading p,
    .plumbing-heading p,
    .electrical-heading p,
    .led-heading p,
    .emulsion-tagline,
    .elevators-tagline,
    .gym-yoga-small,
    .gym-yoga-desc {
        font-size: 11px;
        letter-spacing: 2px;
    }

    /* Adjust line heights */
    .gym-yoga-desc {
        line-height: 22px;
    }

    /* Container width for very small devices */
    .brand-cement-steel-container,
    .waterproofing-container,
    .floor-tiles-container,
    .pipes-plumbing-container,
    .electrical-led-container,
    .switch-lock-container,
    .emulsion-wrapper,
    .elevators-wrapper,
    .foyer-parking-wrapper,
    .gym-yoga-section,
    .play_wrapper,
    .admin-suite-wrapper,
    .redevelopment-wrapper {
        width: 95%;
    }
}

/* Handle very large screens */
@media only screen and (min-width: 1921px) {

    .brand-cement-steel-container,
    .waterproofing-container,
    .floor-tiles-container,
    .pipes-plumbing-container,
    .electrical-led-container,
    .switch-lock-container,
    .emulsion-wrapper,
    .elevators-wrapper,
    .foyer-parking-wrapper,
    .gym-yoga-section,
    .play_wrapper,
    .admin-suite-wrapper,
    .redevelopment-wrapper {
        width: 70%;
        max-width: 1600px;
    }
}


@media only screen and (min-width: 1001px) and (max-width: 1100px) {
    .switch-lock-container {
        width: 80% !important;
        gap: 30px !important;
    }

    .switch-img {
        width: 100%;
        overflow: hidden;
    }

    .switch-lock-images {
        width: 50%;
        height: 900px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .text-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 28px;
    }
}

@media only screen and (min-width: 1101px) and (max-width: 1200px) {
    .switch-lock-container {
        width: 90% !important;
        gap: 30px !important;
    }

    .switch-img {
        width: 100%;
        overflow: hidden;
    }

    .switch-lock-images {
        width: 50%;
        height: 900px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .text-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 28px;
    }
}


@media only screen and (min-width: 1201px) and (max-width: 1300px) {
    .switch-lock-container {
        width: 90% !important;
        gap: 30px !important;
    }

    .switch-img {
        width: 100%;
        overflow: hidden;
    }

    .switch-lock-images {
        width: 50%;
        height: 900px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .text-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 28px;
    }
}

@media only screen and (min-width: 1301px) and (max-width: 1400px) {
    .switch-lock-container {
        width: 90% !important;
        gap: 30px !important;
    }

    .switch-img {
        width: 100%;
        overflow: hidden;
    }

    .switch-lock-images {
        width: 50%;
        height: 900px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .text-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 28px;
    }
}

@media only screen and (min-width: 1401px) and (max-width: 1500px) {
    .switch-lock-container {
        width: 90% !important;
        gap: 30px !important;
    }

    .switch-img {
        width: 100%;
        overflow: hidden;
    }

    .switch-lock-images {
        width: 50%;
        height: 900px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .text-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 28px;
    }
}