/* Theme Name: BrandingVN */

/* ===== CSS VARIABLES ===== */
:root {
	--primary: #F5821F;
	--primary-dark: #e0700f;
	--primary-light: #fff3e8;
	--dark: #1a1a1a;
	--text: #333333;
	--muted: #777777;
	--light-bg: #faf9f7;
	--border: #e8e8e8;
	--white: #ffffff;
	--card-radius: 12px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	font-family: 'Inter', sans-serif;
	color: var(--text);
	background: var(--white);
	overflow-x: hidden;
}
/* ===== SCROLL PROGRESS BAR ===== */
#scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 0%;
	height: 3px;
	background: linear-gradient(90deg, var(--primary), #ff9f45);
	z-index: 9999;
	transition: width 0.1s linear;
}

/* ===== NAVBAR ===== */
.navbar-custom {
	transition: box-shadow 0.3s ease;
}
.navbar-custom.scrolled {
	box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}
/*.nav-link-custom {
	color: var(--text) !important;
	font-size: 0.875rem;
	font-weight: 500;
	padding: 6px 14px !important;
	transition: color 0.2s;
}*/

/*.nav-link-custom:hover { color: var(--primary) !important; }*/
#navbarMain li.nav-item { margin: 0 .5rem; }

.btn-enquiry {
	background: var(--primary);
	color: #fff;
	border: none;
	border-radius: 20px;
	padding: 5px 10px;
	font-size: 0.85rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: background 0.2s, transform 0.2s;
}

.btn-enquiry:hover {
	background: var(--primary-dark);
	color: #fff;
	transform: translateY(-1px);
}

/* ===== HERO SLIDER ===== */
.hero-section {
	position: relative;
	overflow: hidden;
	background: var(--white);
}

.hero-swiper {
	width: 100%;
	height: 560px;
}

.hero-slide {
	position: relative;
	display: flex;
	align-items: center;
	height: 560px;
	overflow: hidden;
}

.hero-slide-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 6s ease;
	transform: scale(1.05);
}

.swiper-slide-active .hero-slide-bg {
	transform: scale(1);
}

.hero-slide-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, hsl(215 28% 17% / .5) , hsl(215 28% 17% / .3) , hsl(215 28% 17% / .1));
}

.hero-content {
	position: relative;
	z-index: 2;
	padding: 0 100px;
	max-width: 560px;
}

.hero-eyebrow {
	color: var(--primary);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.hero-title {
	font-size: clamp(1.2rem, 4vw, 2.2rem);
	font-weight: 800;
	line-height: 1.15;
	color: #fff;
	margin-bottom: 16px;
}

.hero-desc {
	font-size: 1.1rem;
	color: #fff;
	line-height: 1.6;
	margin-bottom: 28px;
	max-width: 400px;
}

.btn-primary-orange {
	background: var(--primary);
	color: #fff;
	border: none;
	border-radius: 28px;
	padding: 12px 28px;
	font-size: 0.9rem;
	font-weight: 600;
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.btn-primary-orange:hover {
	background: var(--primary-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(245,130,31,0.35);
}

.btn-outline-orange {
	background: transparent;
	color: #fff;
	border: 1.5px solid var(--border);
	border-radius: 28px;
	padding: 11px 26px;
	font-size: 0.9rem;
	font-weight: 600;
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.btn-outline-orange:hover {
	border-color: var(--primary);
	color: var(--primary);
}

/* Hero feature bar */
.hero-features-bar {
	background: var(--white);
	border-top: 1px solid var(--border);
	padding: 16px 60px;
	display: flex;
	align-items: center;
	gap: 0;
}

.hero-feature-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 32px 0 0;
	flex: 1;
}

.hero-feature-item:not(:last-child) {
	border-right: 1px solid var(--border);
	margin-right: 32px;
}

.hero-feature-icon {
	width: 38px;
	height: 38px;
	background: var(--primary-light);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary);
	font-size: 1rem;
	flex-shrink: 0;
}

.hero-feature-title {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--dark);
	margin: 0;
}

.hero-feature-sub {
	font-size: 0.8rem;
	color: var(--muted);
	margin: 0;
}

/* Featured property card in hero */
.hero-property-card {
	background: var(--white);
	border-radius: 14px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.12);
	padding: 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 320px;
}

.hero-property-card-info h6 {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--dark);
	margin: 0 0 4px;
}

.hero-property-card-info p {
	font-size: 0.75rem;
	color: var(--muted);
	margin: 0;
}

.hero-property-thumbs {
	display: flex;
	gap: 4px;
}

.hero-property-thumbs img {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	object-fit: cover;
}

/* ===== SECTION COMMON ===== */
.section-eyebrow {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--primary);
	margin-bottom: 10px;
}

.section-title {
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 800;
	color: var(--dark);
	line-height: 1.25;
}

/* ===== ABOUT / LIFESTYLE SECTION ===== */
.lifestyle-section {
	padding: 80px 0;
	background: var(--white);
}

.lifestyle-img-wrap {
	position: relative;
}

.lifestyle-img-wrap img {
	width: 100%;
	border-radius: var(--card-radius);
	object-fit: cover;
	height: 380px;
	transition: transform 0.5s ease;
}

.lifestyle-img-wrap:hover img {
	transform: scale(1.03);
}

.lifestyle-badge {
	position: absolute;
	bottom: -16px;
	right: -16px;
	background: var(--white);
	border-radius: var(--card-radius);
	padding: 14px 20px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.12);
	text-align: center;
}

.lifestyle-badge .number {
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--primary);
	line-height: 1;
}

.lifestyle-badge .label {
	font-size: 0.75rem;
	color: var(--muted);
	line-height: 1.3;
}

.feature-icon-item {
	text-align: center;
	flex: 1;
}

.feature-icon-circle {
	width: 44px;
	height: 44px;
	background: var(--primary-light);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary);
	font-size: 1.1rem;
	margin: 0 auto 8px;
	transition: transform 0.2s, background 0.2s;
}

.feature-icon-item:hover .feature-icon-circle {
	transform: translateY(-3px);
	background: var(--primary);
	color: #fff;
}

.feature-icon-title {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--dark);
	margin-bottom: 4px;
}

.feature-icon-desc {
	font-size: 0.72rem;
	color: var(--muted);
	line-height: 1.4;
}

/* ===== CATEGORIES ===== */
.categories-section {
	padding: 70px 0;
	background: var(--light-bg);
}

.category-card {
	position: relative;
	border-radius: var(--card-radius);
	overflow: hidden;
	height: 210px;
	cursor: pointer;
}

.category-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.category-card:hover img {
	transform: scale(1.08);
}

.category-card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.1) 60%);
}

.category-card-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px;
	color: #fff;
}

.category-icon-badge {
	width: 36px;
	height: 36px;
	background: var(--primary);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 0.95rem;
	margin-bottom: 8px;
}

.category-card-content h5 {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 2px;
}

.category-card-content small {
	font-size: 0.75rem;
	opacity: 0.85;
}

.view-all-link {
	color: var(--dark);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 4px;
	transition: color 0.2s;
}

.view-all-link:hover { color: var(--primary); }

/* ===== STATS + TESTIMONIAL ===== */
.stats-section {
	padding: 70px 0;
	background: var(--white);
}

.stat-item {
	text-align: center;
}

.stat-icon {
	width: 48px;
	height: 48px;
	background: var(--primary-light);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary);
	font-size: 1.2rem;
	margin: 0 auto 10px;
}

.stat-number {
	font-size: 2rem;
	font-weight: 800;
	color: var(--dark);
	line-height: 1;
}

.stat-label {
	font-size: 0.8rem;
	color: var(--muted);
	margin-top: 4px;
}

.divider-orange {
	width: 40px;
	height: 3px;
	background: var(--primary);
	margin: 14px 0;
	border-radius: 2px;
}

.testimonial-card {
	background: var(--light-bg);
	border-radius: var(--card-radius);
	padding: 28px;
	position: relative;
}

.testimonial-quote {
	font-size: 2.5rem;
	color: var(--primary);
	line-height: 1;
	margin-bottom: 12px;
	font-family: Georgia, serif;
}

.testimonial-text {
	font-size: 0.9rem;
	color: #444;
	line-height: 1.7;
	margin-bottom: 20px;
}

.testimonial-author {
	display: flex;
	align-items: center;
	gap: 10px;
}

.testimonial-author img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.testimonial-author-name {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--dark);
}

.testimonial-author-role {
	font-size: 0.75rem;
	color: var(--muted);
}

.testimonial-dots {
	display: flex;
	gap: 6px;
	margin-top: 20px;
}

.t-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ddd;
}

.t-dot.active {
	background: var(--primary);
	width: 20px;
	border-radius: 4px;
}

/* ===== GUIDE SECTION ===== */
.guide-section {
	padding: 80px 0;
	background: var(--light-bg);
}

.guide-img-wrap {
	border-radius: var(--card-radius);
	overflow: hidden;
	height: 400px;
	position: relative;
}

.guide-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.guide-img-wrap:hover img {
	transform: scale(1.04);
}

.guide-floral {
	position: absolute;
	right: -30px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.08;
	font-size: 14rem;
	color: var(--primary);
	pointer-events: none;
	line-height: 1;
}

/* ===== PROPERTIES SECTION ===== */
.properties-section {
	padding: 70px 0;
	background: var(--white);
}

.property-card {
	border-radius: var(--card-radius);
	overflow: hidden;
	border: 1px solid var(--border);
	background: var(--white);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.property-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

.property-card-img-wrap {
	position: relative;
	overflow: hidden;
	height: 200px;
}

.property-card-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.property-card:hover .property-card-img-wrap img {
	transform: scale(1.06);
}

.property-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	border-radius: 6px;
	padding: 4px 10px;
	font-size: 0.72rem;
	font-weight: 700;
	color: #fff;
}

.badge-rent { background: #2563eb; }
.badge-sale { background: #16a34a; }

.property-heart {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	background: rgba(255,255,255,0.9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #aaa;
	font-size: 0.9rem;
	transition: color 0.2s;
	cursor: pointer;
}

.property-heart:hover { color: #ef4444; }

.property-card-body {
	padding: 16px;
}

.property-card-body h6 {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--dark);
	margin: 0 0 4px;
}

.property-location {
	font-size: 0.76rem;
	color: var(--muted);
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 10px;
}

.property-price {
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--primary);
}

.property-specs {
	display: flex;
	gap: 12px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--border);
}

.spec-item {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.74rem;
	color: var(--muted);
}

/* ===== FAQ ===== */
.faq-section {
	padding: 70px 0;
	background: var(--light-bg);
}

.accordion-item {
	border: 1px solid var(--border) !important;
	border-radius: var(--card-radius) !important;
	margin-bottom: 10px;
	overflow: hidden;
}

.accordion-button {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--dark) !important;
	background: var(--white) !important;
	padding: 16px 20px;
	box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
	color: var(--primary) !important;
	background: var(--white) !important;
}

.accordion-button::after {
	filter: none !important;
}

.accordion-body {
	font-size: 0.85rem;
	color: var(--muted);
	padding: 0 20px 16px;
	line-height: 1.6;
}

/* ===== FOOTER ===== */
.footer {
	background: var(--white);
	border-top: 1px solid var(--border);
	padding: 50px 0 24px;
}

.footer-brand {
	font-size: 1.25rem;
	font-weight: 800;
	margin-bottom: 12px;
}

.footer-brand span { color: var(--primary); }

.footer-desc {
	font-size: 0.82rem;
	color: var(--muted);
	line-height: 1.6;
	max-width: 220px;
}

.footer-social {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}

.social-icon {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	border: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--muted);
	font-size: 0.9rem;
	transition: all 0.2s;
	text-decoration: none;
}

.social-icon:hover {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}

.footer-heading {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--dark);
	margin-bottom: 14px;
}

.footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-links li {
	margin-bottom: 8px;
}

.footer-links a {
	color: var(--muted);
	text-decoration: none;
	font-size: 0.82rem;
	transition: color 0.2s;
}

.footer-links a:hover { color: var(--primary); }

.footer-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 0.82rem;
	color: var(--muted);
}

.footer-contact-item i {
	color: var(--primary);
	margin-top: 2px;
	flex-shrink: 0;
}

.footer-bottom {
	border-top: 1px solid var(--border);
	padding-top: 18px;
	margin-top: 30px;
}

/* ===== SCROLL REVEAL ANIMATION ===== */
.reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

.reveal-left {
	opacity: 0;
	transform: translateX(-30px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-left.visible {
	opacity: 1;
	transform: translateX(0);
}

.reveal-right {
	opacity: 0;
	transform: translateX(30px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-right.visible {
	opacity: 1;
	transform: translateX(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ===== ANIMATED COUNTER ===== */
.counter-value {
	font-size: 2rem;
	font-weight: 800;
	color: var(--dark);
	line-height: 1;
}

/* ===== IMAGE ZOOM HOVER ===== */
.img-zoom-wrap {
	overflow: hidden;
	border-radius: var(--card-radius);
}

.img-zoom-wrap img {
	transition: transform 0.6s ease;
}

.img-zoom-wrap:hover img {
	transform: scale(1.06);
}

/* ===== HERO SWIPER PAGINATION ===== */
.hero-swiper-pagination {
	bottom: 20px !important;
}

.hero-swiper-pagination .swiper-pagination-bullet {
	background: var(--primary);
	opacity: 0.5;
}

.hero-swiper-pagination .swiper-pagination-bullet-active {
	opacity: 1;
	width: 20px;
	border-radius: 4px;
}

/* Testimonial swiper */
.testimonial-swiper { overflow: hidden; }

/* ===== GRADIENT ANIMATION on hero eyebrow ===== */
@keyframes gradientShift {
	0%, 100% { color: var(--primary); }
	50% { color: #ff6b00; }
}

.hero-eyebrow { animation: gradientShift 3s ease infinite; }

/* ===== GLASSMORPHISM on hero property card ===== */
.hero-glass-card {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* ===== CATEGORY CARD HOVER 3D TILT ===== */
.category-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ===== IMAGE PLACEHOLDER COLORS ===== */
.img-placeholder-hero1 {
	background: linear-gradient(135deg, #e8f4f8 0%, #b8d4e8 100%);
}

.img-placeholder-hero2 {
	background: linear-gradient(135deg, #e8f0e8 0%, #b8d4c8 100%);
}

.img-placeholder-hero3 {
	background: linear-gradient(135deg, #f8f0e8 0%, #e8d4b8 100%);
}

/* Swiper arrows */
.swiper-button-prev,
.swiper-button-next {
	color: var(--primary) !important;
	width: 40px !important;
	height: 40px !important;
	background: rgba(255,255,255,0.9);
	border-radius: 50%;
	box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.swiper-button-prev::after,
.swiper-button-next::after {
	font-size: 0.85rem !important;
	font-weight: 900;
}

/* FAQ two-column layout */
@media (max-width: 768px) {
	.hero-swiper { height: 480px; }
	.hero-content { padding: 0 60px; max-width: 80%; }
	.hero-features-bar { padding: 16px 24px; flex-wrap: wrap; gap: 12px; }
	.hero-feature-item { border-right: none !important; margin-right: 0 !important; flex: none; width: calc(50% - 6px); }
	.guide-floral { display: none; }
}

/* Sticky scroll effect */
.sticky-label {
	position: -webkit-sticky;
	position: sticky;
	top: 80px;
}

/* Badge pill */
.pill-tag {
	background: var(--primary-light);
	color: var(--primary);
	border-radius: 20px;
	padding: 4px 12px;
	font-size: 0.75rem;
	font-weight: 600;
	display: inline-block;
	margin-bottom: 12px;
}

 /* Infinite horizontal scroll (for a subtle brand strip if needed) */
    .brand-strip { overflow: hidden; padding: 1rem 0; background: var(--orange-light); border-top: 1px solid #ffe0c9; border-bottom: 1px solid #ffe0c9; }
    @keyframes scrollX {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .brand-strip-inner { display: flex; gap: 2.5rem; animation: scrollX 18s linear infinite; width: max-content; }
    .brand-strip-item { font-size: .78rem; font-weight: 700; color: var(--orange); white-space: nowrap; letter-spacing: 1px; text-transform: uppercase; }

    /* Infinite horizontal scroll (for a subtle brand strip if needed) */
    .brand-strip { overflow: hidden; padding: 1rem 0; background: var(--orange-light); border-top: 1px solid #ffe0c9; border-bottom: 1px solid #ffe0c9; }
    @keyframes scrollX {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .brand-strip-inner { display: flex; gap: 2.5rem; animation: scrollX 18s linear infinite; width: max-content; }
    .brand-strip-item { font-size: .78rem; font-weight: 700; color: var(--orange); white-space: nowrap; letter-spacing: 1px; text-transform: uppercase; }