:root {
    --calcThumbNail: 80px;
    --calcFeaturedThumb:
}

body {
    word-break: break-word;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    overflow-x: hidden;
}

.pr-30 {
    padding-right: 30px;
}

section .learn__more {
    width: fit-content;
    font-family: "Roboto Condensed";
    font-size: 15px;
    font-style: normal;
    font-weight: 800;
    /* 166.667% */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    background: var(--Gold-2, linear-gradient(90deg, #DFBD69 0%, #E0AA3E 50%, #926F34 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-bottom: 1px solid #E0AA3E
}

section .learn__more {
    text-decoration:  none !important;
}

/* Revamped First Section */



.hero-carousel-bg {
    z-index: 4;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1576px;
    margin: 0 auto;
}

.hero-carousel-bg button {
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
    border: none;
    opacity: 1;
    transition: all 0.3s ease;
    padding: 0;
    display: inline-block;
}

.hero-carousel-bg button.active {
    background-color: #B57C00;
    ;
    opacity: 1;
    transform: scale(1.3);
}

.hero-carousel-bg button:hover {
    opacity: 1;
    cursor: pointer;
}

.direction-btn {
    display: flex;
    gap: 24px;
}

.pagination-dot {
    display: flex;
    align-items: center;
    gap: 8px;
}


.carousel {
    border-radius: 24px;
}

.carousel,
.carousel-inner,
.carousel-item {
    height: 100%;
    border-radius: 24px;
}

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

.first-banner .carousel-btn:hover {
    color: #fff;
    background: #000000;
    transition: 1s ease-in;
}


section.first-banner {
    max-height: 984px;
    height: 98vh;
    margin: 8px;
    border-radius: 24px;
}

section.first-banner .play-video {
    position: inherit;
}

section.first-banner .first-banner-content {
    max-width: 936px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 24px;
}


/* End of revamped */

/* second section */
.showcase-section {
    border-radius: 60px 60px 0px 0px;
    border-top: 1px solid #C5C5C5;
    background: #FFF;
}

section .wrapper {
    max-width: 1256px;
    width: 100%;
    margin: 0 auto;
}

section .contact-card-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* Base card */
.showcase-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 0 0;
    height: 100vh;
    max-height: 500px;
    padding: 24px;
    border-radius: 12px;
    border: 0.5px solid var(--Gold-1, #AE8625);
    background-color: var(--Blck, #141311);
    /* changed from shorthand */
    color: #fff;
    transition: .3s ease-in-out;
    z-index: 0;
}

/* Hover state for all cards */
.showcase-card:hover {
    z-index: 1;
    background-color: #AE8625;
    /* use color override only */
    background-image: linear-gradient(90deg, #AE8625 0%, #F7EF8A 25%, #D2AC47 75%, #EDC967 100%);
    color: #141311 !important;
    transition: .3s ease-in-out;
}

/* Hover text override */
.showcase-card:hover .showcase-card-title,
.showcase-card:hover .bottom-card p,
.showcase-card:hover .learn__more,
.showcase-card:hover span {
    color: #000 !important;
    -webkit-text-fill-color: initial;
    background: none !important;
}

/* Hover underline for link */
.showcase-card:hover .learn__more {
    text-decoration: none;
    border-bottom: 1px solid black;
}

/* Hover line */
.showcase-card:hover hr {
    background: black;
}

/* Card 3: Image background */
/* .row>div:nth-of-type(3) .showcase-card {
background-color: var(--Blck, #141311);
background-image: url('https://megaworld-bgc.com/wp-content/uploads/2025/07/card-bg-3.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
} */

.row>div:nth-of-type(3) .showcase-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    background-image: url('https://megaworld-bgc.com/wp-content/uploads/2025/07/Showcase-img-3.png');
    z-index: -1;
    pointer-events: none;
}

/* Keep pseudo-element visible on hover too */
.row>div:nth-of-type(3) .showcase-card:hover::before {
    /* optional, for stronger focus effect */
    z-index: -1;
}


/* Card 2: Pseudo-element overlay image */
.row>div:nth-of-type(2) .showcase-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    background: url('https://megaworld-bgc.com/wp-content/themes/DevBro/assets/images/cards/showcase-card-2.png') bottom right no-repeat;
    z-index: -1;
    pointer-events: none;
}

/* Keep pseudo-element visible on hover too */
.row>div:nth-of-type(2) .showcase-card:hover::before {
    opacity: 0.7;
    /* optional, for stronger focus effect */
    z-index: -1;
}


.card-wrap {
    max-height: 269px;
}

.showcase-card .bottom-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.showcase-card img {
    position: absolute;
    right: 0.333px;
    bottom: 0px;
    max-height: calc(100% - 50%);
    height: 100%;
    width: 100%;
    aspect-ratio: 201/125;
}

.showcase-card-title {
    color: #FFF;
    font-family: 'Roboto Condensed';
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 36px;
    /* 180% */
    text-transform: uppercase;
}

.showcase-section .downpayment-card {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 12px;
    border: 2px solid var(--Gold-2, #DFBD69);
    background: var(--Blck, #141311);
    backdrop-filter: blur(10px);
}

.showcase-section .downpayment-card:nth-of-type(2) {
    background-color: #fff;
}

.showcase-section .downpayment-c,
.showcase-section .reserve-now {
    margin: 0;
    font-family: "Roboto Condensed";
    color: var(--Brown, #432C07);
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 36px;
    text-transform: uppercase;
}

.showcase-section .price-c {
    color: #432C07;
    margin: 0;
    font-family: 'Roboto Condensed';
    font-size: 38px;
    font-style: normal;
    font-weight: 800;
    line-height: 50px;
    text-transform: uppercase;
}

.showcase-section img {
    z-index: -2;
    object-fit: cover;
    width: 100%;
    object-position: right;
    height: 100%;
    border-radius: 20px;
}

/* end of second section */
/* Start of Third Section */
.properties-section {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.90) 100%), linear-gradient(90deg, rgba(223, 189, 105, 0.40) 0%, rgba(224, 170, 62, 0.40) 50%, rgba(146, 111, 52, 0.40) 100%);
}

.banner.properties-section .wrapper {
    max-width: 1256px;
}

.properties-section .carousel-btn,
.first-banner .carousel-btn {
    display: flex;
    width: 48px;
    padding: 16px;
    justify-content: center;
    color: #B57C00;
    align-items: center;
    border-radius: 8px;
    background: #D9D9D9;
    transition: 1s ease-in;
}

.properties-section .card-carousel-container {
    border-radius: 12px;
    padding: 40px;
    align-items: flex-start;
    gap: 40px;
    border: 1px solid var(--Gold-1, #AE8625);
    background: #FFF;
    backdrop-filter: blur(10px);
    height: 100%;
}

.properties-section .available-title {
    margin: 0;
    color: var(--Brown, #432C07);
    font-family: "Roboto Condensed";
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 36px;
    text-transform: uppercase;

}

.properties-section .grid-container {
    justify-content: space-between;
    gap: 15px;
    display: flex;
    flex-wrap: wrap;
}

.properties-section .grid-container p {
    color: var(--Text-Color, #141311);
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    /* 185.714% */
}

.properties-section a {
    display: flex;
    padding: 11.5px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    background: var(--Gold-1, linear-gradient(90deg, #AE8625 0%, #F7EF8A 25%, #D2AC47 75%, #EDC967 100%));
    color: #59421C;
    text-align: center;
    max-width: 146px;
    /* CTA */
    font-family: 'Roboto Condensed';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 25px;
    /* 166.667% */
}

.properties-section .swiper-properties {
    height: 100%;
}

.properties-section .swiper-row {
    height: 100%;
}

.properties-section .swiper-col-height {
    height: 100%;
}

.properties-section .swiper-col-height img {
    object-fit: cover;
}

section .available-units p {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;
    color: #432C07;
    margin-bottom: 0;
}

.carousel-mask {
    -webkit-mask-image: url('../../assets/images/carousel-substract.png');
    -webkit-mask-size: 100% 100%;
    /* or contain / cover */
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('../../assets/images/carousel-substract.png');
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    height: 100%;
}

.over-flow-wrapper {
    max-width: 1920px;
    margin: 0 auto;
    overflow-x: hidden;
}

.swiper {
    overflow: visible !important;
}

.swiper-wrapper {
    overflow: visible !important;
}

.swiper-slide {
    max-width: 1256px;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.swiper-slide.swiper-slide-active {
    transform: scale(1);
    z-index: 10;
}

.swiper-slide {
    transition: transform 0.3s ease-in-out;
}

.swiper-slide.swiper-slide-active {
    transform: scale(1.02);
}

section.properties-section .my-prev[aria-disabled="true"],
section.properties-section .my-next[aria-disabled="true"] {
    background: rgba(255, 255, 255, 0.06);
    color: #797979;
}


/* End of Third Section */


/* Fourth Section */

section.about-us {
    padding-top: 160px;
    background-color: #FEFAED;
}

section.about-us .cta_btn {
    width: fit-content;
}

section .about-us-body img {
    object-fit: contain;
    width: 100%;
}

section .about-us-body {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 578px;
}

section.about-us .about-us-content p {
    margin-bottom: 40px !important;
}

section .about-us-content-end {
    max-width: 154px
}

section.about-us .about-us-row {
    row-gap: 40px;
}

section .feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Default 3 cols on large screens */
    gap: 60px;
}

section .feature-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}




/* End of Fourth Section */


/* Township Fifth Section */

section.township {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.90) 100%), linear-gradient(90deg, rgba(223, 189, 105, 0.40) 0%, rgba(224, 170, 62, 0.40) 50%, rgba(146, 111, 52, 0.40) 100%);
}

section.township .wrapper,
section.vlog .vlog-box,
section.articles-section .article-container {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

section.township .township-content .township-title {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 934px;
    margin: 0 auto;
}

section.township .township-card-bg {
    background: url('../../assets/images/homepage/township-card-1.jpg') no-repeat center center, linear-gradient(265deg, rgba(0, 0, 0, 0.00) 40.42%, rgba(0, 0, 0, 0.20) 65.43%), linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), url(<path-to-image>) lightgray -56.692px -16.187px / 109.042% 112.449% no-repeat;
    display: flex;
    padding: 60px;
    justify-content: flex-end;
    border-radius: 12px;
    border: 1px solid var(--Gold-1, #AE8625);
    backdrop-filter: blur(10px);
    background-size: cover;
}

section.township .township-card {
    max-width: 555px;
    padding: 60px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    border-radius: 12px;
    border: 1px solid var(--Gold-1, #AE8625);
}

section.township .township-card-content,
section.township .township-card-properties,
section.vlog .vlog-end,
section.articles-section .featured-article-cta {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

section.township li,
section.township ul {
    color: var(--Brown, #432C07);
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px;
    /* 185.714% */
    align-self: stretch;
    margin-bottom: 0;
}

section.township .residential-properties-wrapper p.small_text {
    color: var(--Brown, #432C07);
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px;
    text-transform: capitalize;
}

section.township .residential-properties-wrapper ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 40px;
}

section.township .residential-properties-wrapper ul:has(li:first-child:last-child) {
    grid-template-columns: 1fr;
}

section.township .township-card-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

section.township .township-card-properties p {
    margin: 0;
    color: var(--Brown, #432C07);
    font-family: "Roboto Condensed";
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 36px;
    text-transform: uppercase;
}


/* End of Fifth Section */

/* Sixth Section */

section.vlog {
    background: #fff;
}

section.vlog .vlog-title-container,
section.contact-information .contact-information-title,
section.articles-section .featured-article-content,
section .showcase-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;

}

section.vlog .vlog-title-container-2 {
    height: 100%;
    display: flex;
    align-items: center;
}

section.vlog .vlog-showcase,
section.vlog .featured-vlogs-showcase {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    /* important to keep gradient clipped to border-radius */
    border: 2px solid var(--Gold-1, #AE8625);
}

section.vlog .featured-vlog-item {
    flex: 1 1 232px;
    max-width: 232px;
    max-height: 160px;
    width: 100%;
}

section.vlog .featured-vlogs-container {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    flex-wrap: nowrap;
}

section.vlog .vlog-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

section.vlog .vlog-showcase::after,
section.vlog .featured-vlogs-showcase::after {
    content: '';
    position: absolute;
    inset: 0;
    /* shorthand for top/right/bottom/left: 0 */
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1;
    pointer-events: none;
}

/* End of Sixth Section */

/* Start of Seventh section */
.contact-information {
    background: #FEFAED;
}

.contact-information .contact-information-title {
    display: flex;
    flex-direction: column;
    max-width: 934px;
    gap: 24px;
    margin: 0 auto;
}

.contact-information .contact-container {
    display: flex;
    height: 100%;
    width: 100%;
    gap: 60px;
}

.contact-information .contact-cards-container {
    align-items: end;
    display: flex;
    gap: 24px;
    height: 100%;
}


.contact-information img {
    order: 0;
    width: 100%;
    height: 100%;
    max-height: 570px;
    object-fit: contain;
}

.contact-cards-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: end;

}

.contact-card-1 {
    order: 0;
    margin: 0 auto;
    max-width: 402.6666px;
    background: var(--Blck, #141311);
    color: white;
    padding: 40px;
    border-radius: 12px;
    border: 2px solid var(--Gold-2, #DFBD69);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    height: 100%;
    max-height: 501px;
}

.contact-card-2 {
    width: 100%;
    margin: 0 auto;
    max-width: 402.6666px;
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    border: 2px solid var(--Gold-2, #DFBD69);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    height: 100%;
    max-height: 501px;
}

.contact-card-2 .contact-card-items .email {
    white-space: nowrap;
}

.contact-card-image img {
    order: 0;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: contain;
}

.contact-card-items {
    display: flex;
    gap: 19.5px;
}

section .contact-card-items img {
    display: flex;
    align-self: center;
    width: 24px;
    object-fit: contain;
    aspect-ratio: 1/1;
}

/* End of Seventh Section */

/* Eight Section */

section.articles-section {
    background-color: #fff;
}

section.articles-section .featured-article {
    height: 100%;
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 12px;
    border: 2px solid var(--Gold-2, #DFBD69);
}

section.articles-section .featured-article-cta p {
    color: #59421C;
    text-align: center;
    font-family: "Roboto Condensed";
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
}

section.articles-section .featured-article img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    align-self: stretch;
    border-radius: 12px;
}

section.articles-section .other-featured {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    gap: 24px;
}

section.articles-section .contact-card {
    padding: 24px;
    border-radius: 12px;
    border: 2px solid var(--Gold-2, #DFBD69);
    background: var(--Blck, #141311);
    gap: 24px;
}

section.articles-section .circle-link-avatar {
    z-index: 2;
    margin-left: -15px;
    display: flex;
    border-radius: 1367.647px;
    border: 1.368px solid var(--Gold-2, #DFBD69);
    background: linear-gradient(rgba(238, 238, 238, 0.5), rgba(238, 238, 238, 0.5)), #EEE;
}

section.articles-section .circle-link-number {
    z-index: 3;
    display: flex;
    width: 60px;
    padding: 19px;
    /* justify-content: center; */
    align-items: center;
    border-radius: 1367.647px;
    border: 1.368px solid var(--Gold-2, #DFBD69);
    background: var(--Gold-1, linear-gradient(90deg, #AE8625 0%, #F7EF8A 25%, #D2AC47 75%, #EDC967 100%));
}

.circle-link-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

section.articles-section img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

section.articles-section .card-bottom .phone-number {
    margin: 0;
    color: var(--Brown, #432C07);
    font-family: "Roboto Condensed";
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 36px;
    text-transform: uppercase;
}

/* End of Eight Section */

/* Animations */


@media screen and (max-width: 1400px) {
    section.first-banner {
        padding: 200px 50px 100px 50px !important;
    }
}

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

    section.first-banner .play-video {
        margin-top: 36px;
    }
}

@media screen and (max-width: 1199px) {
    section.first-banner .play-video {
        margin-top: 6px;
    }

    section.index_banner {}

    .card-carousel-container h3 {
        margin-top: 24px !important;
    }

    .contact-card-1,
    .contact-card-2 {
        max-width: 80%;
    }

    .contact-cards-grid {
        grid-template-columns: 1fr;
        text-align: left;
    }


    .contact-card-image {
        order: -1;
    }

    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 cols on medium screens */
    }

    .properties-section .swiper-col-height {
        height: auto;
    }

    section.articles-section .row:not(.row__header) {
        flex-direction: column-reverse;
    }

    section.first-banner {
        padding: 200px 100px 100px 100px !important;
    }
}

@media screen and (max-width: 992px) {
    section.index_banner {}

    section .about-us-body {
        max-width: 100%;
        flex-direction: column-reverse;
    }

    section.township .township-card-bg {
        justify-content: center;
    }
}

@media screen and (max-width: 768px) {
    section.index_banner {}

    .feature-grid {
        grid-template-columns: 1fr;
        /* Stack on small screens */
    }

    .featured-vlog-item {
        flex: 1 1 100%;
        max-width: 100%;
    }

    section.vlog .play-video {
        top: calc(50% - 53px);
        left: calc(50% - 53px);
        font-size: 16px;
        width: 106px;
        padding: 30px;
        line-height: 20px;
        border-radius: 3647.059px;
    }

    section.first-banner .play-video {
        margin-top: 6px;
        width: 80px;
        font-size: 14px;
        padding: 18px;
        line-height: 20px;
    }

    section.township .residential-properties-wrapper ul {
        grid-template-columns: repeat(1, 1fr);
    }

    
}

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

    section.first-banner {
        height: auto;
        max-height: unset;
        padding-inline: 16px !important;
    }

    section.showcase-section .available-units {
        flex-direction: column !important;
        gap: 4px;
    }

    section.showcase-section .available-units .dotted-hr {
        display: none;
    }

    section .featured-article-cta {
        display: flex;
        flex-direction: column !important;
    }

    section h1 {
        font-size: 45px;
    }

    section.township .township-card-bg {

        padding: 60px 10px;

    }

    section.vlog .featured-vlogs-container {
        flex-direction: column;
    }

    .contact-card-1,
    .contact-card-2 {
        /* max-width: 403.6666px; */
        max-width: 100%;
    }

    section.vlog .featured-vlog-item {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
    }

    section.properties-section .available-units {
        flex-direction: column !important;
        gap: 8px;
    }

    section.properties-section .available-units .dotted-hr {
        display: none;
    }

    section .feature-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    section.township .township-card {
        padding: 30px;
    }

    .contact-card-2 {
        padding: 40px 20px;
    }

    .contact-card-2 .contact-card-items a {
        white-space: nowrap;
    }
}

/* Fix Overrides */
section.banner {
    &.contact-information {
        .contact-card-items {
            a {
                text-decoration: none;
                margin: 0;
                color: var(--Brown, #64635D);
                font-family: "Montserrat";
                font-size: 15px;
                font-style: normal;
                font-weight: 400;
                line-height: 26px;
            }
        }
    }
}

/* Fix Overrides - End */