: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
 }

 /* 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: 90vh;
   margin: 8px;
   border-radius: 24px;
 }

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

 section.first-banner .first-banner-content {
   max-width: 900px;
   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: all 1s ease;
   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;
 }

 /* 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;
 }

 /* 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%);
 }

 .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);
 }

 .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% */
 }

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

 .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;
 }

 .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: #fff;
 }

 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-content-end {
   max-width: 154px
 }

 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 .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-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;
 }



 /* End of Eight Section */

 /* Animations */


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

 @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: center;
   }


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

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

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

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

 @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;
   }
 }

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

   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;
   }

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

/* 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 */