/*
=====================================================================================
Josh Flagg - Real Estate Website Stylesheet
Project: Josh Flagg Luxury Real Estate Website
Description: Custom CSS styles for a modern real estate website with advanced
animations, parallax effects, and responsive design
Developer: Aju Francis Anchanattu
Date Created: January 2026
Last Modified: January 30, 2026
Version: 1.0
Table of Contents:
1. Global Styles & Reset
2. Navigation Styles
3. Hero Section
4. About Carousel Section
5. Notable Transactions Section
6. Authority Section (Testimonials)
7. Exclusive Listings Section
8. Brand Carousel Section
9. Parallax Form Section
10. Parallax Hero Section
11. Expertise Section
12. Neighborhoods Section
13. Recent Posts Section
14. Work With Josh Section
15. Footer Section
16. Responsive Media Queries
17. Utility Classes
Color Palette:
- Primary Brand: #7c6d5c
- Text Dark: #222, #333
- Text Light: #666, #888
- Background: #fff, #f8f9fa
- Accent: rgba(0,0,0,0.4) for overlays
Typography:
- Headings: 'Cormorant Garamond', serif
- Body: 'Lato', sans-serif
Browser Support: Modern browsers (Chrome, Firefox, Safari, Edge)
Responsive: Mobile-first approach, fully responsive
=====================================================================================
*/
/* ===== 1. GLOBAL STYLES & RESET ===== */
body {
margin: 0;
font-family: 'Lato', sans-serif;
line-height: 1.6;
color: #333;
}
/* Global button border-radius reset for sharp edges */
.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
border-radius: 0 !important;
}
/* Global input field border-radius reset */
input,
select,
textarea {
border-radius: 0 !important;
}
/* Button hover styling */
.btn-outline-dark:hover {
background-color: #7e7361 !important;
border-color: #7e7361 !important;
color: white !important;
}
.parallax-form-button:hover {
background-color: #7e7361 !important;
border-color: #7e7361 !important;
color: white !important;
}
/* ===== 2. HERO SECTION STYLES ===== */
/* Main hero section with video background */
.hero-section {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
color: white;
margin-top: 0;
}
/* Video background styling */
.hero-bg-video {
position: absolute;
top: 0;
left: 0;
object-fit: cover;
width: 100%;
height: 100%;
z-index: -3;
}
/* Fallback image (hidden by default) */
.hero-fallback-img {
display: none;
}
/* Dark overlay for better text readability */
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
z-index: -2;
}
/* ===== 3. NAVIGATION STYLES ===== */
/* Fixed sticky navigation bar */
#global-navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 1rem 2rem;
z-index: 1000;
background-color: transparent;
color: white;
transition: all 0.3s ease;
border: none;
}
/* Navigation background when scrolled */
#global-navbar.scrolled {
background-color: rgba(0, 0, 0, 0.95);
backdrop-filter: blur(10px);
padding: 0.75rem 2rem;
}
/* Navigation link styles */
#global-navbar .navigation__link {
color: white !important;
font-weight: 500;
font-size: 0.875rem;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 1.2px;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
padding: 1rem 1.5rem;
margin: 0 0.25rem;
position: relative;
border-radius: 6px;
backdrop-filter: blur(8px);
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
}
/* Add subtle glow effect */
#global-navbar .navigation__link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
z-index: -1;
}
#global-navbar .navigation__link:hover::before {
left: 100%;
}
#global-navbar .navigation__link:hover {
text-decoration: none;
color: #ffffff !important;
background-color: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
#global-navbar .navigation__link:active {
transform: translateY(0);
transition-duration: 0.1s;
}
#global-navbar .logo-img {
height: 40px;
max-width: 140px;
}
/* Mobile navbar toggler */
#global-navbar .navbar-toggler {
border: 2px solid white;
padding: 0.4rem 0.6rem;
background: transparent;
}
#global-navbar .navbar-toggler:focus {
box-shadow: none;
border-color: white;
}
#global-navbar .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
width: 20px;
height: 20px;
}
/* Mobile navigation styles */
@media (max-width: 991.98px) {
#global-navbar {
padding: 0.75rem 1rem;
}
#global-navbar .navbar-collapse {
margin-top: 1rem;
background-color: rgba(0, 0, 0, 0.95);
border-radius: 8px;
padding: 1rem;
margin-left: -1rem;
margin-right: -1rem;
}
#global-navbar .navigation__link {
font-size: 1rem;
padding: 1rem 1.25rem;
margin: 0.25rem 0;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(6px);
}
#global-navbar .navigation__link:hover {
background-color: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.4);
transform: translateX(4px);
}
#global-navbar .logo-img {
height: 35px;
}
/* Mobile specific button */
#global-navbar .btn-sm {
font-size: 0.75rem;
padding: 0.4rem 0.8rem;
}
}
.hero-content {
position: absolute;
bottom: 80px;
left: 60px;
z-index: 5;
max-width: 600px;
}
.hero-subtitle {
font-size: 0.85rem;
letter-spacing: 1px;
font-weight: 300;
text-transform: uppercase;
}
/* Hero main heading */
.hero-title {
font-family: 'Cormorant Garamond', serif;
font-size: 2.8rem;
font-weight: 600;
line-height: 1.4;
margin-top: 1rem;
}
/* Hero call-to-action buttons */
.hero-buttons .btn {
font-weight: 400;
padding: 0.75rem 1.5rem;
font-size: 1rem;
}
/* Mobile hero responsiveness */
@media (max-width: 768px) {
.hero-content {
bottom: 60px;
left: 20px;
right: 20px;
max-width: calc(100% - 40px);
}
.hero-title {
font-size: 2.2rem;
line-height: 1.3;
}
.hero-subtitle {
font-size: 0.8rem;
}
.hero-buttons .btn {
padding: 0.6rem 1.2rem;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.hero-buttons {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.hero-buttons .btn:first-child {
margin-right: 0;
margin-bottom: 0;
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 1.9rem;
}
.hero-content {
bottom: 40px;
left: 15px;
right: 15px;
}
}
/* ===== 4. ABOUT CAROUSEL SECTION ===== */
/* Interactive carousel showcasing expertise and achievements */
.about-carousel-section {
font-family: 'Cormorant Garamond', serif;
background-color: #fff;
overflow: hidden;
}
/* Carousel container */
.carousel-inner {
width: 100%;
}
/* Carousel slide content layout */
.carousel-content {
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Responsive layout for tablets and desktop */
@media (min-width: 768px) {
.carousel-content {
flex-direction: row;
}
}
.carousel-image {
flex: 1;
background-size: cover;
background-position: center;
min-height: 300px;
order: 1;
}
.carousel-text {
flex: 1;
position: relative;
padding: 3rem 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
order: 2;
}
@media (min-width: 768px) {
.carousel-text {
padding: 6rem 5rem;
}
.carousel-image {
min-height: 400px;
}
}
.carousel-logo {
color: #e0ddd7;
font-size: 1.5rem;
letter-spacing: 4px;
margin-bottom: 1rem;
font-weight: bold;
}
@media (min-width: 768px) {
.carousel-logo {
font-size: 2rem;
letter-spacing: 6px;
margin-bottom: 1.5rem;
}
}
.carousel-subtitle {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.8px;
color: #7c6d5c;
text-transform: uppercase;
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.carousel-subtitle {
font-size: 0.8rem;
letter-spacing: 1px;
}
}
.carousel-title {
font-size: 2rem;
font-weight: 600;
line-height: 1.2;
margin-bottom: 1rem;
color: #222;
}
@media (min-width: 768px) {
.carousel-title {
font-size: 2.5rem;
line-height: 1.3;
margin-bottom: 1.2rem;
}
}
.carousel-description {
font-family: 'Lato', sans-serif;
font-size: 0.9rem;
color: #333;
line-height: 1.6;
margin-bottom: 1.5rem;
max-width: 500px;
}
@media (min-width: 768px) {
.carousel-description {
font-size: 1rem;
line-height: 1.8;
margin-bottom: 2rem;
}
}
/* Button Style */
.carousel-text .btn {
padding: 0.6rem 1rem;
border-radius: 0;
font-weight: 500;
font-family: 'Lato', sans-serif;
font-size: 0.85rem;
border: 1px solid #888;
color: #222;
background-color: transparent;
text-transform: uppercase;
width: 180px;
text-align: center;
transition: all 0.3s ease-in-out;
}
@media (min-width: 768px) {
.carousel-text .btn {
padding: 0.75rem 1rem;
font-size: 0.95rem;
width: 200px;
}
}
.carousel-text .btn:hover {
background-color: #222;
color: #fff;
border-color: #222;
}
/* Arrows & Indicators Wrapper */
.carousel-controls-wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
margin-top: 1.5rem;
}
@media (min-width: 768px) {
.carousel-controls-wrapper {
gap: 20px;
margin-top: 2rem;
}
}
/* Arrows inside text */
.carousel-arrow {
background: none;
border: none;
font-size: 1.2rem;
color: #000;
cursor: pointer;
transition: color 0.3s;
padding: 0.4rem;
min-width: 40px;
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 768px) {
.carousel-arrow {
font-size: 1.5rem;
padding: 0.5rem;
}
}
.carousel-arrow:hover {
color: #555;
}
/* Mobile specific styles */
@media (max-width: 767.98px) {
.about-carousel-section .carousel-content {
min-height: auto;
}
.carousel-image {
min-height: 250px;
}
.carousel-text {
padding: 2rem 1rem;
}
.carousel-logo-img {
height: 30px;
}
}
/* ===== 5. CUSTOM CAROUSEL INDICATORS ===== */
/* Custom line-shaped indicators for text-based carousel navigation */
.custom-indicators {
display: flex !important;
justify-content: center;
gap: 8px;
position: static !important;
margin: 0;
padding: 0;
}
@media (min-width: 768px) {
.custom-indicators {
gap: 10px;
}
}
/* Individual indicator styling */
.custom-indicators button {
width: 25px !important;
height: 2px !important;
border-radius: 0 !important;
background-color: #666666 !important;
border: none !important;
transition: all 0.3s ease !important;
opacity: 1 !important;
cursor: pointer !important;
text-indent: 0 !important;
margin: 0 !important;
padding: 0 !important;
min-height: auto !important;
outline: none !important;
}
@media (min-width: 768px) {
.custom-indicators button {
width: 30px !important;
height: 3px !important;
}
}
/* Indicator hover effect */
.custom-indicators button:hover {
background-color: #888888 !important;
}
/* Active indicator styling with scaling effect */
.custom-indicators .active,
.custom-indicators button.active {
background-color: #000000 !important;
transform: scaleX(1.3) !important;
}
/* ===== 6. NOTABLE TRANSACTIONS SECTION ===== */
/* Carousel gallery showcasing successful property transactions */
/* Main section container with serif typography */
#notable-transactions {
font-family: 'Cormorant Garamond', serif;
background-color: #fff;
}
/* Section heading eyebrow text */
#notable-transactions .small-text {
font-size: 0.85rem;
text-transform: uppercase;
color: #7c6d5c;
letter-spacing: 1px;
font-family: 'Lato', sans-serif;
margin-bottom: 0.5rem;
}
/* Main section title */
#notable-transactions .section-title {
font-size: 2.5rem;
font-weight: 600;
margin-top: 0;
margin-bottom: 3rem;
color: #222;
}
/* ===== 6.1. NOTABLE TRANSACTIONS CAROUSEL ===== */
/* Multi-slide preview carousel with 3D positioning */
/* Main carousel container with overflow for preview slides */
#notable-transactions #notableCarousel {
overflow: visible;
margin-bottom: 2rem;
padding: 0 4rem;
}
/* Carousel inner container with absolute positioning */
#notable-transactions .carousel-inner {
position: relative;
width: 100%;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
/* Individual carousel slide with 3D positioning effects */
#notable-transactions .carousel-item {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
transform: translateX(-50%) scale(0.7);
opacity: 0.3;
transition: all 1.9s ease-in-out;
z-index: 1;
pointer-events: none;
display: block !important;
}
/* Active slide - centered, full opacity, interactive */
#notable-transactions .carousel-item.active {
transform: translateX(-50%) scale(1);
opacity: 1;
z-index: 3;
pointer-events: auto;
width: 60%;
}
/* Previous slide preview - positioned left */
#notable-transactions .carousel-item.prev-preview {
transform: translateX(-85%) scale(0.75);
opacity: 0.5;
z-index: 2;
pointer-events: auto;
cursor: pointer;
width: 45%;
}
/* Next slide preview - positioned right */
#notable-transactions .carousel-item.next-preview {
transform: translateX(-15%) scale(0.75);
opacity: 0.5;
z-index: 2;
pointer-events: auto;
cursor: pointer;
width: 45%;
}
/* ===== 6.2. TRANSACTION CARD STYLING ===== */
/* Property transaction image cards with hover effects */
/* Main card container with shadow and transitions */
#notable-transactions .carousel-card {
position: relative;
width: 100%;
height: 100%;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
transition: all 0.4s ease;
}
/* Card hover effect - enhanced shadow and lift */
#notable-transactions .carousel-item:hover .carousel-card {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
transform: translateY(-5px);
}
/* Card image with zoom transition */
#notable-transactions .carousel-card img.card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
/* Image zoom on hover */
#notable-transactions .carousel-item:hover img.card-img {
transform: scale(1.05);
}
/* Property status label overlay */
#notable-transactions .status-label {
position: absolute;
top: 20px;
right: 20px;
background: rgba(34, 34, 34, 0.9);
color: #fff;
padding: 8px 16px;
font-size: 0.875rem;
border-radius: 20px;
font-family: 'Lato', sans-serif;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
backdrop-filter: blur(10px);
}
/* ===== 6.3. CAROUSEL NAVIGATION & FOOTER ===== */
/* Navigation controls and property information display */
/* Footer section with navigation and property details */
#notable-transactions .notable-footer {
padding-top: 2rem;
border-top: 1px solid #e9ecef;
flex-wrap: wrap;
gap: 1rem;
}
/* Circular navigation buttons */
#notable-transactions .carousel-nav-btn {
border: 2px solid #ddd;
background: #fff;
width: 48px;
height: 48px;
border-radius: 50%;
font-size: 1.2rem;
color: #666;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Navigation button hover effects */
#notable-transactions .carousel-nav-btn:hover {
background: #f8f9fa;
border-color: #999;
color: #333;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
/* Navigation button active state */
#notable-transactions .carousel-nav-btn:active {
transform: translateY(0);
}
/* ===== 6.4. PROPERTY INFORMATION DISPLAY ===== */
/* Property details and branding elements */
/* Flagg & Associates logo text */
#notable-transactions .ff-logo {
font-size: 2.2rem;
color: #e0ddd7;
font-weight: bold;
letter-spacing: 2px;
}
/* Visual separator line */
#notable-transactions .vertical-line {
width: 2px;
height: 48px;
background: #ddd;
border-radius: 1px;
}
/* Property price display */
#notable-transactions .text-details .detail-price {
font-size: 1.5rem;
font-weight: 600;
margin: 0 0 4px 0;
color: #222;
font-family: 'Cormorant Garamond', serif;
}
/* Property name/location */
#notable-transactions .text-details .detail-name {
font-size: 1rem;
color: #666;
margin: 0;
font-family: 'Lato', sans-serif;
font-weight: 400;
}
/* ===== 6.5. VIEW ALL BUTTON ===== */
/* Call-to-action button for viewing all transactions */
/* Primary action button */
#notable-transactions .btn-view-all {
font-size: 0.875rem;
padding: 0.875rem 1.75rem;
background: #7e7361;
color: #fff;
border: none;
border-radius: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 500;
font-family: 'Lato', sans-serif;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
/* Button hover effect with elevation */
#notable-transactions .btn-view-all:hover {
background: #665f53;
color: #fff;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(126, 115, 97, 0.3);
}
/* ===== 6.6. RESPONSIVE DESIGN - MOBILE & TABLET ===== */
/* Responsive adaptations for smaller screen sizes */
/* General mobile improvements */
@media (max-width: 991.98px) {
#notable-transactions .section-title {
font-size: 2.2rem;
}
#notable-transactions .ff-logo-img {
height: 35px;
}
#notable-transactions .carousel-nav-btn {
width: 44px;
height: 44px;
font-size: 1.1rem;
}
#notable-transactions .vertical-line {
height: 40px;
}
}
/* Tablet-specific adjustments */
@media (max-width: 1024px) {
/* Reduced padding for tablet screens */
#notable-transactions #notableCarousel {
padding: 0 2rem;
}
/* Slightly smaller slide widths */
#notable-transactions .carousel-item {
width: 55%;
}
/* Active slide adjustment */
#notable-transactions .carousel-item.active {
width: 65%;
}
/* Preview slides repositioning */
#notable-transactions .carousel-item.prev-preview {
transform: translateX(-90%) scale(0.7);
width: 50%;
}
#notable-transactions .carousel-item.next-preview {
transform: translateX(-10%) scale(0.7);
width: 50%;
}
}
/* Mobile-specific responsive design */
@media (max-width: 768px) {
/* Smaller section title */
#notable-transactions .section-title {
font-size: 2rem;
margin-bottom: 2rem;
}
#notable-transactions .small-text {
font-size: 0.85rem;
}
/* Minimal padding for mobile */
#notable-transactions #notableCarousel {
padding: 0 1rem;
margin-bottom: 3rem;
}
/* Reduced carousel height */
#notable-transactions .carousel-inner {
height: 300px;
}
/* Single slide view on mobile - simplified layout */
#notable-transactions .carousel-item {
width: 90%;
transform: translateX(-50%) scale(1);
opacity: 1;
}
#notable-transactions .carousel-item.active {
transform: translateX(-50%) scale(1);
}
#notable-transactions .carousel-item.prev-preview,
#notable-transactions .carousel-item.next-preview {
transform: translateX(-50%) scale(1);
opacity: 0;
pointer-events: none;
}
#notable-transactions .text-details .detail-price {
font-size: 1.25rem;
}
#notable-transactions .text-details .detail-name {
font-size: 0.9rem;
}
#notable-transactions .ff-logo-img {
height: 30px;
}
#notable-transactions .btn-view-all {
font-size: 0.8rem;
padding: 0.75rem 1.5rem;
}
#notable-transactions .carousel-nav-btn {
width: 40px;
height: 40px;
font-size: 1rem;
}
#notable-transactions .vertical-line {
height: 35px;
width: 1.5px;
}
#notable-transactions .status-label {
top: 15px;
right: 15px;
padding: 6px 12px;
font-size: 0.75rem;
}
}
@media (max-width: 576px) {
#notable-transactions {
padding: 3rem 0;
}
#notable-transactions .section-title {
font-size: 1.8rem;
}
#notable-transactions #notableCarousel {
margin: 0 0 2rem 0;
padding: 0;
}
#notable-transactions .carousel-inner {
height: 250px;
}
#notable-transactions .carousel-item {
width: 95%;
}
#notable-transactions .text-details .detail-price {
font-size: 1.1rem;
}
#notable-transactions .text-details .detail-name {
font-size: 0.85rem;
}
#notable-transactions .ff-logo-img {
height: 25px;
}
#notable-transactions .carousel-nav-btn {
width: 36px;
height: 36px;
font-size: 0.9rem;
}
#notable-transactions .vertical-line {
height: 30px;
}
#notable-transactions .btn-view-all {
font-size: 0.75rem;
padding: 0.6rem 1.2rem;
}
}
/* ===== 7. AUTHORITY / TESTIMONIAL SECTION ===== */
/* Client testimonials with rotating quotes and success statistics */
/* Main testimonial section with full viewport height */
#ft-authority-section {
min-height: 100vh;
background: #fff;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
font-family: 'Lato', sans-serif;
}
#ft-authority-section .ft-container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 5rem 2rem;
position: relative;
}
/* TOP */
.ft-top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
/* LEFT */
.ft-quote {
font-family: 'Cormorant Garamond', serif;
font-size: 3.2rem;
line-height: 1.15;
margin-bottom: 2rem;
color: #222;
}
.ft-nav {
display: flex;
gap: 1rem;
}
.ft-nav-btn {
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid #ddd;
background: transparent;
font-size: 1.4rem;
cursor: pointer;
color: #666;
transition: all 0.3s ease;
}
.ft-nav-btn:hover {
border-color: #999;
color: #000;
}
/* RIGHT */
.ft-text {
font-size: 1.05rem;
line-height: 1.9;
color: #444;
margin-bottom: 1.2rem;
}
.ft-author {
font-size: 0.85rem;
letter-spacing: 1px;
text-transform: uppercase;
color: #8b7e6b;
display: block;
margin-bottom: 2rem;
}
.ft-view-all {
display: inline-block;
background: #7e7361;
color: #fff;
padding: 0.8rem 1.6rem;
text-decoration: none;
font-size: 0.85rem;
letter-spacing: 1px;
}
/* SLIDES */
.ft-slide {
display: none;
}
.ft-slide.active {
display: block;
}
/* ===== 7.5. BACKGROUND BRANDING ELEMENT ===== */
/* Large monogram watermark for visual depth */
/* Background monogram positioning */
.ft-monogram {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Cormorant Garamond', serif;
font-size: 14rem;
color: rgba(220, 218, 210, 0.25);
pointer-events: none;
}
/* ===== 7.6. ANIMATED SUCCESS STATISTICS ===== */
/* Continuously scrolling statistics showcase */
/* Statistics section wrapper with overflow control */
.ft-stats-wrapper {
margin-top: 6rem;
overflow: hidden;
width: 100%;
position: relative;
}
/* Animated statistics container with infinite scroll */
.ft-stats {
display: flex;
animation: scrollStats 20s linear infinite;
width: calc(200%); /* Double width for seamless loop */
}
/* Keyframe animation for continuous horizontal scrolling */
@keyframes scrollStats {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%); /* Move by half width for seamless loop */
}
}
/* Pause animation on user hover for better readability */
.ft-stats-wrapper:hover .ft-stats {
animation-play-state: paused;
}
/* Individual statistic item styling */
.ft-stat {
position: relative;
text-align: center;
min-width: calc(100vw / 6); /* 6 stats total (3 original + 3 duplicates) */
padding: 0 2rem;
flex-shrink: 0;
}
/* Center stat with larger font size for emphasis */
.ft-stat.center .ft-number {
font-size: 9.75rem;
}
/* Large statistic numbers */
.ft-number {
font-family: 'Cormorant Garamond', serif;
font-size: 8.25rem;
color: #7e7361;
font-weight: 600;
line-height: 1.5;
}
/* Plus sign styling for number suffixes */
.plus {
font-family: 'Cormorant Garamond', serif;
font-size: 4.5rem;
margin-left: 4px;
font-weight: 600;
}
/* Decorative line separator under numbers */
.ft-line {
display: block;
width: 60px;
height: 2px;
background: #bbb;
margin: 1.2rem auto;
}
/* Statistic label/description text */
.ft-label {
font-size: 1.35rem;
letter-spacing: 2px;
color: #8b7e6b;
font-weight: 500;
line-height: 1.4;
}
/* ===== 8. EXCLUSIVE LISTINGS SECTION ===== */
/* Premium property showcase with image slider */
/* Main exclusive listings section container */
.ex-listing-section {
position: relative;
background: #fff;
font-family: 'Cormorant Garamond', serif;
overflow: hidden;
}
/* Section title area */
.ex-listing-title {
text-align: center;
padding: 3rem 1rem 1rem;
}
/* Main section heading */
.ex-listing-title h2 {
font-size: 2.4rem;
font-weight: 500;
color: #222;
}
/* Slider Wrapper */
.ex-listing-slider {
position: relative;
width: 100%;
height: 80vh;
overflow: hidden;
}
.ex-listing-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: opacity 0.6s ease;
opacity: 0;
z-index: 0;
}
.ex-listing-slide.active {
opacity: 1;
z-index: 1;
}
/* Overlay */
.ex-listing-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.5) 30%, transparent);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2rem 2rem;
color: white;
}
/* Bottom left */
.ex-bottom-content {
position: absolute;
bottom: 2rem;
left: 2rem;
text-align: left;
max-width: 60%;
z-index: 2;
}
.ex-bottom-content .ex-address {
font-size: 2.1rem;
margin-bottom: 0.3rem;
}
.ex-bottom-content .ex-location {
font-size: 1.26rem;
opacity: 0.9;
}
.ex-bottom-content .ex-price {
font-size: 1.4rem;
margin-top: 0.5rem;
}
/* Center content (hover reveal) */
.ex-listing-center-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.ex-listing-slide:hover .ex-listing-center-content {
opacity: 1;
}
.ex-line {
width: 120px;
height: 1px;
background: #fff;
margin: 0 auto 1rem;
}
.ex-monogram {
font-size: 4rem;
color: rgba(255, 255, 255, 0.3);
font-weight: bold;
margin-bottom: 1rem;
}
.ex-tag {
font-size: 1.05rem;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 0.6rem;
opacity: 0.8;
}
.ex-listing-center-content .ex-address {
font-size: 2.24rem;
margin-bottom: 0.3rem;
}
.ex-listing-center-content .ex-location {
font-size: 1.26rem;
margin-bottom: 0.5rem;
}
.ex-listing-center-content .ex-price {
font-size: 1.4rem;
}
/* Nav Arrows */
.ex-nav {
position: absolute;
bottom: 2rem;
right: 2rem;
display: flex;
gap: 1rem;
}
.ex-nav button {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.8);
background: transparent;
color: white;
font-size: 1.2rem;
cursor: pointer;
transition: background 0.3s ease;
}
.ex-nav button:hover {
background: rgba(255, 255, 255, 0.2);
}
/* ===== MOBILE RESPONSIVE: EXCLUSIVE LISTINGS SECTION ===== */
/* Mobile-first responsive design for exclusive listings */
@media (max-width: 768px) {
/* Exclusive Listings Mobile Container */
.ex-listing-section {
padding-bottom: 2rem;
}
/* Mobile Title */
.ex-listing-title {
padding: 2rem 1rem 1rem;
}
.ex-listing-title h2 {
font-size: 2rem;
line-height: 1.2;
}
/* Mobile Slider */
.ex-listing-slider {
height: 70vh;
min-height: 400px;
}
/* Mobile Slide Overlay */
.ex-listing-overlay {
padding: 1.5rem 1rem;
background: linear-gradient(to top, rgba(0,0,0,0.7) 40%, transparent);
}
/* Mobile Bottom Content */
.ex-bottom-content {
bottom: 1.5rem;
left: 1rem;
right: 1rem;
max-width: calc(100% - 2rem);
text-align: left;
}
.ex-bottom-content .ex-address {
font-size: 1.5rem;
line-height: 1.3;
margin-bottom: 0.5rem;
}
.ex-bottom-content .ex-location {
font-size: 1rem;
opacity: 0.9;
margin-bottom: 0.3rem;
}
.ex-bottom-content .ex-price {
font-size: 1.2rem;
font-weight: 600;
margin-top: 0.3rem;
}
/* Mobile Center Content (Always Visible on Mobile) */
.ex-listing-center-content {
display: none; /* Hide hover content on mobile */
}
/* Mobile Navigation - Repositioned */
.ex-nav {
position: absolute;
bottom: 1.5rem;
right: 1rem;
gap: 0.75rem;
z-index: 10;
}
.ex-nav button {
width: 40px;
height: 40px;
font-size: 1.1rem;
border: 2px solid rgba(255,255,255,0.9);
background: rgba(0,0,0,0.3);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.ex-nav button:hover,
.ex-nav button:active {
background: rgba(255,255,255,0.2);
border-color: white;
transform: scale(1.05);
}
/* Mobile Monogram */
.ex-monogram {
display: none; /* Hide decorative monogram on mobile */
}
.ex-line {
display: none; /* Hide decorative line on mobile */
}
}
/* Tablet Responsive */
@media (min-width: 769px) and (max-width: 1024px) {
.ex-listing-title h2 {
font-size: 2.2rem;
}
.ex-listing-slider {
height: 75vh;
}
.ex-bottom-content .ex-address {
font-size: 1.8rem;
}
.ex-bottom-content .ex-location {
font-size: 1.1rem;
}
.ex-bottom-content .ex-price {
font-size: 1.25rem;
}
.ex-listing-center-content .ex-address {
font-size: 2rem;
}
.ex-nav {
bottom: 1.8rem;
right: 1.8rem;
}
}
/* Small Mobile Responsive */
@media (max-width: 480px) {
.ex-listing-title h2 {
font-size: 1.8rem;
}
.ex-listing-slider {
height: 60vh;
min-height: 350px;
}
.ex-bottom-content .ex-address {
font-size: 1.3rem;
}
.ex-bottom-content .ex-location {
font-size: 0.9rem;
}
.ex-bottom-content .ex-price {
font-size: 1.1rem;
}
.ex-nav button {
width: 36px;
height: 36px;
font-size: 1rem;
}
}
.parallax-form-section {
background-size: cover;
background-position: center;
background-attachment: fixed;
padding: 6rem 1rem;
font-family: 'Lato', sans-serif;
position: relative;
z-index: 1;
}
.parallax-form-wrapper {
max-width: 1000px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.parallax-form-box {
background: white;
padding: 4rem 3rem;
position: relative;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
z-index: 3;
}
.parallax-form-logo {
position: absolute;
font-size: 12rem;
font-weight: bold;
color: #e0ddd7;
opacity: 0.5;
font-family: 'Cormorant Garamond', serif;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
pointer-events: none;
letter-spacing: 6px;
}
.parallax-form-heading {
font-family: 'Cormorant Garamond', serif;
font-size: 2.5rem;
font-weight: 600;
text-align: center;
margin-bottom: 1rem;
color: #222;
}
.parallax-form-subtitle {
font-family: 'Lato', sans-serif;
text-align: center;
font-size: 1rem;
margin-bottom: 3rem;
color: #333;
line-height: 1.6;
}
.parallax-form {
position: relative;
z-index: 2;
}
.parallax-form-fields {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-bottom: 2rem;
}
.parallax-form-group {
flex: 1 1 45%;
display: flex;
flex-direction: column;
}
.parallax-form-group-full {
flex: 1 1 100%;
width: 100%;
}
.parallax-form-group label {
font-family: 'Lato', sans-serif;
font-size: 0.75rem;
font-weight: 500;
color: #7c6d5c;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.5rem;
}
.parallax-form-group input {
font-family: 'Lato', sans-serif;
border: none;
border-bottom: 1px solid #ccc;
padding: 0.75rem 0.5rem;
font-size: 1rem;
background: transparent;
outline: none;
color: #222;
transition: border-color 0.3s ease;
}
.parallax-form-group input::placeholder {
color: #999;
}
.parallax-form-group input:focus {
border-color: #7c6d5c;
}
.parallax-form-consent {
font-family: 'Lato', sans-serif;
font-size: 0.75rem;
color: #555;
line-height: 1.6;
margin-top: 1.5rem;
}
.parallax-form-consent input {
margin-right: 0.5rem;
}
.parallax-form-consent a {
color: #7c6d5c;
text-decoration: underline;
}
.parallax-form-consent a:hover {
color: #222;
}
.parallax-form-button {
margin-top: 2rem;
padding: 0.75rem 2rem;
background-color: transparent;
color: #222;
font-family: 'Lato', sans-serif;
font-weight: 500;
border: 1px solid #888;
cursor: pointer;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease-in-out;
}
.parallax-form-button:hover {
background-color: #222;
color: white;
border-color: #222;
}
/* ===== PARALLAX FORM SECTION ===== */
/* Newsletter signup form with parallax background */
.parallax-form-section {
background-size: cover;
background-position: center;
background-attachment: fixed;
padding: 6rem 1rem;
font-family: 'Lato', sans-serif;
position: relative;
z-index: 1;
}
.parallax-form-wrapper {
max-width: 1000px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.parallax-form-box {
background: white;
padding: 4rem 3rem;
position: relative;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
z-index: 3;
}
.parallax-form-logo {
position: absolute;
font-size: 12rem;
font-weight: bold;
color: #e0ddd7;
opacity: 0.5;
font-family: 'Cormorant Garamond', serif;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
pointer-events: none;
letter-spacing: 6px;
}
.parallax-form-heading {
font-family: 'Cormorant Garamond', serif;
font-size: 2.5rem;
font-weight: 600;
text-align: center;
margin-bottom: 1rem;
color: #222;
}
.parallax-form-subtitle {
font-family: 'Lato', sans-serif;
text-align: center;
font-size: 1rem;
margin-bottom: 3rem;
color: #333;
line-height: 1.6;
}
.parallax-form {
position: relative;
z-index: 2;
}
.parallax-form-fields {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-bottom: 2rem;
}
.parallax-form-group {
flex: 1 1 45%;
display: flex;
flex-direction: column;
}
.parallax-form-group-full {
flex: 1 1 100%;
width: 100%;
}
.parallax-form-group label {
font-family: 'Lato', sans-serif;
font-size: 0.75rem;
font-weight: 500;
color: #7c6d5c;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.5rem;
}
.parallax-form-group input {
font-family: 'Lato', sans-serif;
border: none;
border-bottom: 1px solid #ccc;
padding: 0.75rem 0.5rem;
font-size: 1rem;
background: transparent;
outline: none;
color: #222;
transition: border-color 0.3s ease;
}
.parallax-form-group input::placeholder {
color: #999;
}
.parallax-form-group input:focus {
border-color: #7c6d5c;
}
.parallax-form-consent {
font-family: 'Lato', sans-serif;
font-size: 0.75rem;
color: #555;
line-height: 1.6;
margin-top: 1.5rem;
}
.parallax-form-consent input {
margin-right: 0.5rem;
}
.parallax-form-consent a {
color: #7c6d5c;
text-decoration: underline;
}
.parallax-form-consent a:hover {
color: #222;
}
.parallax-form-button {
margin-top: 2rem;
padding: 0.75rem 2rem;
background-color: transparent;
color: #222;
font-family: 'Lato', sans-serif;
font-weight: 500;
border: 1px solid #888;
cursor: pointer;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease-in-out;
}
.parallax-form-button:hover {
background-color: #222;
color: white;
border-color: #222;
}
/* ===== MOBILE RESPONSIVE: PARALLAX FORM SECTION ===== */
/* Mobile-first responsive design for newsletter form */
@media (max-width: 768px) {
/* Mobile Parallax Form Container */
.parallax-form-section {
padding: 3rem 1rem;
background-attachment: scroll; /* Fix parallax issues on mobile */
min-height: auto;
}
/* Mobile Form Wrapper */
.parallax-form-wrapper {
max-width: 100%;
}
/* Mobile Form Box */
.parallax-form-box {
padding: 2.5rem 1.5rem;
margin: 0 0.5rem;
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
border-radius: 8px;
}
/* Mobile Background Logo - Hidden for cleaner look */
.parallax-form-logo {
display: none; /* Hide background logo on mobile for better readability */
}
/* Mobile Heading */
.parallax-form-heading {
font-size: 2rem;
line-height: 1.2;
margin-bottom: 0.75rem;
}
/* Mobile Subtitle */
.parallax-form-subtitle {
font-size: 0.95rem;
margin-bottom: 2rem;
line-height: 1.5;
}
/* Mobile Form Fields - Stack Vertically */
.parallax-form-fields {
flex-direction: column;
gap: 1.25rem;
margin-bottom: 1.5rem;
}
.parallax-form-group {
flex: 1 1 100%;
}
/* Mobile Form Labels */
.parallax-form-group label {
font-size: 0.7rem;
margin-bottom: 0.4rem;
}
/* Mobile Form Inputs */
.parallax-form-group input {
padding: 0.9rem 0.6rem;
font-size: 1.05rem; /* Slightly larger for mobile typing */
border-bottom: 2px solid #ddd; /* Thicker border for touch */
}
.parallax-form-group input:focus {
border-color: #7c6d5c;
border-bottom-width: 2px;
}
/* Mobile Consent Text */
.parallax-form-consent {
font-size: 0.7rem;
line-height: 1.5;
margin-top: 1.25rem;
padding: 0.5rem;
background: #f8f9fa;
border-radius: 4px;
}
.parallax-form-consent input {
margin-right: 0.75rem;
transform: scale(1.2); /* Larger checkbox for touch */
}
/* Mobile Submit Button */
.parallax-form-button {
width: 100%;
padding: 1rem 2rem;
font-size: 1rem;
margin-top: 1.5rem;
border-radius: 4px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
}
}
/* Small Mobile Responsive */
@media (max-width: 480px) {
.parallax-form-section {
padding: 2rem 0.75rem;
}
.parallax-form-box {
padding: 2rem 1rem;
margin: 0;
}
.parallax-form-heading {
font-size: 1.75rem;
}
.parallax-form-subtitle {
font-size: 0.9rem;
}
.parallax-form-group input {
font-size: 1rem;
padding: 0.8rem 0.5rem;
}
.parallax-form-consent {
font-size: 0.65rem;
}
.parallax-form-button {
padding: 0.9rem 1.5rem;
font-size: 0.95rem;
}
}
/* Tablet Responsive */
@media (min-width: 769px) and (max-width: 1024px) {
.parallax-form-section {
padding: 4rem 1.5rem;
}
.parallax-form-box {
padding: 3rem 2.5rem;
}
.parallax-form-heading {
font-size: 2.25rem;
}
.parallax-form-logo {
font-size: 10rem;
}
}
/* Parallax Hero Section */
.parallax-hero-section {
position: relative;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.parallax-hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
}
.parallax-hero-content {
position: relative;
z-index: 2;
text-align: center;
color: white;
max-width: 800px;
padding: 0 2rem;
}
.parallax-hero-logo {
font-family: 'Cormorant Garamond', serif;
font-size: 4rem;
font-weight: bold;
letter-spacing: 8px;
color: white;
margin-bottom: 2rem;
opacity: 0.9;
}
.parallax-hero-title {
font-family: 'Cormorant Garamond', serif;
font-size: 3.5rem;
font-weight: 600;
line-height: 1.2;
margin-bottom: 1.5rem;
color: white;
}
.parallax-hero-subtitle {
font-family: 'Lato', sans-serif;
font-size: 1.2rem;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.9);
margin: 0;
}
/* ===== PARALLAX HERO SECTION ===== */
/* Inspirational hero section with parallax background */
.parallax-hero-section {
position: relative;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.parallax-hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
}
.parallax-hero-content {
position: relative;
z-index: 2;
text-align: center;
color: white;
max-width: 800px;
padding: 0 2rem;
}
.parallax-hero-logo {
font-family: 'Cormorant Garamond', serif;
font-size: 4rem;
font-weight: bold;
letter-spacing: 8px;
color: white;
margin-bottom: 2rem;
opacity: 0.9;
}
.parallax-hero-title {
font-family: 'Cormorant Garamond', serif;
font-size: 3.5rem;
font-weight: 600;
line-height: 1.2;
margin-bottom: 1.5rem;
color: white;
}
.parallax-hero-subtitle {
font-family: 'Lato', sans-serif;
font-size: 1.2rem;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.9);
margin: 0;
}
/* ===== MOBILE RESPONSIVE: PARALLAX HERO SECTION ===== */
/* Mobile-first responsive design for inspirational hero */
@media (max-width: 768px) {
/* Mobile Parallax Hero Container */
.parallax-hero-section {
background-attachment: scroll; /* Fix parallax issues on mobile */
height: 80vh;
min-height: 500px;
background-position: center center;
}
/* Mobile Hero Overlay - Stronger for text readability */
.parallax-hero-overlay {
background: rgba(0, 0, 0, 0.5); /* Darker overlay for better mobile readability */
}
/* Mobile Hero Content */
.parallax-hero-content {
padding: 0 1.5rem;
max-width: 100%;
text-align: center;
}
/* Mobile Logo */
.parallax-hero-logo {
font-size: 2.5rem;
letter-spacing: 3px;
margin-bottom: 1.5rem;
line-height: 1.1;
}
/* Mobile Title */
.parallax-hero-title {
font-size: 2rem;
line-height: 1.2;
margin-bottom: 1rem;
font-weight: 500;
}
/* Mobile Subtitle */
.parallax-hero-subtitle {
font-size: 0.9rem;
letter-spacing: 0.8px;
line-height: 1.4;
max-width: 90%;
margin: 0 auto;
}
}
/* Small Mobile Responsive */
@media (max-width: 480px) {
.parallax-hero-section {
height: 70vh;
min-height: 450px;
}
.parallax-hero-content {
padding: 0 1rem;
}
.parallax-hero-logo {
font-size: 2rem;
letter-spacing: 2px;
margin-bottom: 1.25rem;
}
.parallax-hero-title {
font-size: 1.75rem;
line-height: 1.25;
margin-bottom: 0.75rem;
}
.parallax-hero-subtitle {
font-size: 0.8rem;
letter-spacing: 0.5px;
max-width: 95%;
}
.parallax-hero-overlay {
background: rgba(0, 0, 0, 0.55); /* Even darker for small screens */
}
}
/* Tablet Responsive */
@media (min-width: 769px) and (max-width: 1024px) {
.parallax-hero-section {
height: 85vh;
background-attachment: scroll; /* Better performance on tablets */
}
.parallax-hero-logo {
font-size: 3rem;
letter-spacing: 5px;
}
.parallax-hero-title {
font-size: 2.75rem;
}
.parallax-hero-subtitle {
font-size: 1.05rem;
}
}
/* Large Desktop Enhancement */
@media (min-width: 1200px) {
.parallax-hero-section {
height: 100vh;
}
.parallax-hero-logo {
font-size: 4.5rem;
letter-spacing: 10px;
}
.parallax-hero-title {
font-size: 4rem;
}
.parallax-hero-subtitle {
font-size: 1.3rem;
letter-spacing: 1.2px;
}
}
/* Expertise Section */
.expertise-section {
background-color: #fff;
padding: 6rem 0;
position: relative;
overflow: hidden;
z-index: 1;
}
.full-bleed-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
}
.hoverable-image {
display: flex;
align-items: center;
gap: 4rem;
position: relative;
height: 500px;
}
.hoverable-image__img-col {
position: absolute;
left: calc(-50vw + 50%);
top: 0;
width: calc(50% + 50vw - 50% - 2rem);
height: 100%;
z-index: 1;
}
.full-bleed {
position: relative;
height: 100%;
}
.main-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
}
.hoverable-image__text-col {
flex: 1;
max-width: 50%;
margin-left: 50%;
position: relative;
z-index: 2;
height: 100%;
display: flex;
align-items: center;
}
.lp-container {
padding-left: 4rem;
max-width: 600px;
width: 100%;
}
.hoverable-image__text-wrap {
width: 100%;
}
.lp-a.lp-text--subtitle {
width: 100%;
}
.flagg-custom-titles h3 {
font-family: 'Lato', sans-serif;
font-size: 0.85rem;
text-transform: uppercase;
color: #7c6d5c;
letter-spacing: 1px;
font-weight: 500;
margin-bottom: 1rem;
margin-top: 0;
}
.flagg-custom-titles h2 {
font-family: 'Cormorant Garamond', serif;
font-size: 2.5rem;
font-weight: 600;
line-height: 1.3;
margin-bottom: 1.5rem;
margin-top: 0;
color: #222;
}
.lp-a.lp-text--subtitle p {
font-family: 'Lato', sans-serif;
font-size: 1rem;
color: #333;
line-height: 1.7;
margin: 0;
}
.lp-a.lp-text--subtitle p a {
color: #7c6d5c;
text-decoration: underline;
}
.lp-a.lp-text--subtitle p a:hover {
color: #222;
}
.buttons-wrapper {
margin-top: 2rem;
}
@media (max-width: 1200px) {
.hoverable-image__img-col {
position: static;
width: 50%;
margin-left: 0;
}
.hoverable-image__text-col {
margin-left: 0;
}
.hoverable-image {
min-height: auto;
}
.main-image {
height: auto;
}
.lp-container {
padding-left: 2rem;
}
}
@media (max-width: 768px) {
.expertise-section {
padding: 4rem 0;
}
.full-bleed-container {
padding: 0 1rem;
}
.hoverable-image {
flex-direction: column;
gap: 2rem;
}
.hoverable-image__img-col,
.hoverable-image__text-col {
max-width: 100%;
width: 100%;
position: static;
margin-left: 0;
}
.lp-container {
padding-left: 0;
text-align: center;
}
.flagg-custom-titles h2 {
font-size: 2rem;
}
}
/* ========== AREAS OF EXPERTISE SECTION ========== */
.expertise-section {
background-color: #ffffff;
padding: 6rem 2rem;
font-family: 'Lato', sans-serif;
}
.expertise-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 58% 42%;
gap: 4rem;
position: relative;
align-items: center;
}
/* Image */
.expertise-image img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* Text Content */
.expertise-content {
max-width: 420px;
}
.expertise-eyebrow {
display: block;
font-size: 0.75rem;
letter-spacing: 2px;
text-transform: uppercase;
color: #8a8173;
margin-bottom: 1rem;
}
.expertise-title {
font-family: 'Cormorant Garamond', serif;
font-size: 2.4rem;
font-weight: 500;
margin-bottom: 1.5rem;
color: #222;
}
.expertise-description {
font-size: 0.95rem;
line-height: 1.8;
color: #555;
}
.expertise-description a {
color: #555;
text-decoration: underline;
}
/* Navigation Arrows */
.expertise-nav {
position: absolute;
bottom: 0;
right: 0;
display: flex;
gap: 0.75rem;
}
.expertise-arrow {
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid #ddd;
background: transparent;
color: #444;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
}
.expertise-arrow:hover {
border-color: #999;
color: #000;
}
/* Responsive */
@media (max-width: 992px) {
.expertise-container {
grid-template-columns: 1fr;
gap: 3rem;
}
.expertise-nav {
position: static;
margin-top: 2rem;
}
}
/* ----------------------------
Neighborhoods Carousel
----------------------------- */
.neighborhoods-section {
padding: 5rem 0;
font-family: 'Lato', sans-serif;
position: relative;
overflow: hidden;
background-color: #fff;
z-index: 2;
}
.neighborhoods-container {
max-width: 1400px;
margin: 0 auto;
position: relative;
}
/* Slider */
.neighborhoods-slider {
display: flex;
gap: 2rem;
overflow-x: auto;
scroll-behavior: smooth;
padding-bottom: 1rem;
}
.neighborhood-card {
flex: 0 0 260px;
text-align: center;
cursor: pointer;
}
.neighborhood-card a {
text-decoration: none;
color: inherit;
}
/* Image Box */
.neighborhood-image {
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 6px;
}
.neighborhood-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.3s ease;
}
.neighborhood-card:hover .neighborhood-image img {
transform: scale(1.05);
}
/* Title with vertical line above */
.neighborhood-title {
margin-top: 1rem;
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
color: #222;
position: relative;
padding-top: 1.5rem;
}
.neighborhood-title .vertical-line {
position: absolute;
top: -56px;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 80px;
background-color: #8a8173;
}
/* Navigation arrows */
.neighborhoods-nav {
position: absolute;
top: -1.5rem;
right: 0;
display: flex;
gap: 1rem;
}
.neighborhoods-nav .arrow {
width: 44px;
height: 44px;
border: 1px solid #ddd;
border-radius: 50%;
background: #fff;
color: #444;
font-size: 1.25rem;
cursor: pointer;
transition: all 0.3s ease;
}
.neighborhoods-nav .arrow:hover {
background: #f7f7f7;
border-color: #aaa;
}
/* Hide scrollbar */
.neighborhoods-slider::-webkit-scrollbar {
display: none;
}
.neighborhoods-slider {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* ===== NEIGHBORHOODS SECTION ===== */
/* Dubai communities showcase with interactive slider */
.neighborhoods-section {
padding: 5rem 0;
font-family: 'Lato', sans-serif;
position: relative;
overflow: hidden;
background-color: #fff;
z-index: 2;
}
.neighborhoods-container {
max-width: 1400px;
margin: 0 auto;
position: relative;
}
/* Slider */
.neighborhoods-slider {
display: flex;
gap: 2rem;
overflow-x: auto;
scroll-behavior: smooth;
padding-bottom: 1rem;
}
.neighborhood-card {
flex: 0 0 260px;
text-align: center;
cursor: pointer;
}
.neighborhood-card a {
text-decoration: none;
color: inherit;
}
/* Image Box */
.neighborhood-image {
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 6px;
}
.neighborhood-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.3s ease;
}
.neighborhood-card:hover .neighborhood-image img {
transform: scale(1.05);
}
/* Title with vertical line above */
.neighborhood-title {
margin-top: 1rem;
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
color: #222;
position: relative;
padding-top: 1.5rem;
}
.neighborhood-title .vertical-line {
position: absolute;
top: -56px;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 80px;
background-color: #8a8173;
}
/* Navigation arrows */
.neighborhoods-nav {
position: absolute;
top: -1.5rem;
right: 0;
display: flex;
gap: 1rem;
}
.neighborhoods-nav .arrow {
width: 44px;
height: 44px;
border: 1px solid #ddd;
border-radius: 50%;
background: #fff;
color: #444;
font-size: 1.25rem;
cursor: pointer;
transition: all 0.3s ease;
}
.neighborhoods-nav .arrow:hover {
background: #f7f7f7;
border-color: #aaa;
}
/* Hide scrollbar */
.neighborhoods-slider::-webkit-scrollbar {
display: none;
}
.neighborhoods-slider {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* ===== MOBILE RESPONSIVE: NEIGHBORHOODS SECTION ===== */
/* Mobile-first responsive design for communities showcase */
@media (max-width: 768px) {
/* Mobile Neighborhoods Container */
.neighborhoods-section {
padding: 3rem 0;
}
.neighborhoods-container {
padding: 0 1rem;
max-width: 100%;
}
/* Mobile Slider */
.neighborhoods-slider {
gap: 1rem;
padding: 0 0.5rem 1rem;
scroll-snap-type: x mandatory;
}
/* Mobile Neighborhood Cards */
.neighborhood-card {
flex: 0 0 70%;
scroll-snap-align: start;
max-width: 250px;
}
.neighborhood-image {
height: 160px;
border-radius: 8px;
}
/* Mobile Title */
.neighborhood-title {
font-size: 1rem;
padding-top: 1.25rem;
margin-top: 0.75rem;
}
.neighborhood-title .vertical-line {
top: -42px;
height: 60px;
}
/* Mobile Navigation */
.neighborhoods-nav {
position: absolute;
top: -0.75rem;
right: 1rem;
gap: 0.75rem;
}
.neighborhoods-nav .arrow {
width: 36px;
height: 36px;
font-size: 1rem;
border: 2px solid #ddd;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.neighborhoods-nav .arrow:hover,
.neighborhoods-nav .arrow:active {
background: #7c6d5c;
color: white;
border-color: #7c6d5c;
transform: scale(1.05);
}
}
/* Small Mobile Responsive */
@media (max-width: 480px) {
.neighborhoods-section {
padding: 2.5rem 0;
}
.neighborhoods-container {
padding: 0 0.75rem;
}
.neighborhood-card {
flex: 0 0 80%;
max-width: 220px;
}
.neighborhood-image {
height: 140px;
border-radius: 6px;
}
.neighborhood-title {
font-size: 0.95rem;
padding-top: 1rem;
margin-top: 0.5rem;
}
.neighborhood-title .vertical-line {
top: -36px;
height: 50px;
}
.neighborhoods-nav {
top: -0.5rem;
right: 0.75rem;
gap: 0.5rem;
}
.neighborhoods-nav .arrow {
width: 32px;
height: 32px;
font-size: 0.9rem;
}
}
/* Tablet Responsive */
@media (min-width: 769px) and (max-width: 1024px) {
.neighborhoods-section {
padding: 4rem 0;
}
.neighborhoods-container {
padding: 0 2rem;
}
.neighborhoods-slider {
gap: 1.5rem;
}
.neighborhood-card {
flex: 0 0 200px;
}
.neighborhood-image {
height: 180px;
}
.neighborhood-title .vertical-line {
top: -50px;
height: 70px;
}
.neighborhoods-nav .arrow {
width: 40px;
height: 40px;
font-size: 1.1rem;
}
}
/* ========== RECENT BLOG POSTS SECTION ========== */
.recent-posts-section {
padding: 6rem 1.5rem;
background: #fff;
font-family: 'Lato', sans-serif;
}
.recent-posts-container {
max-width: 1200px;
margin: 0 auto;
}
/* Header */
.recent-posts-header {
text-align: center;
margin-bottom: 3rem;
}
.recent-eyebrow {
display: block;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #8a8173;
margin-bottom: 0.25rem;
}
.recent-title {
font-family: 'Cormorant Garamond', serif;
font-size: 2.4rem;
color: #222;
margin: 0;
}
/* Featured Post */
.recent-featured-post {
width: 100%;
margin-bottom: 2rem;
}
.recent-post-card {
position: relative;
display: block;
overflow: hidden;
border-radius: 6px;
}
.recent-post-card img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
transition: transform 0.3s ease;
}
.recent-post-card:hover img {
transform: scale(1.05);
}
.recent-post-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 1.25rem 1.5rem;
background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}
.post-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.25rem;
color: white;
margin: 0;
line-height: 1.3;
}
/* Featured size */
.recent-post-card.featured img {
height: 350px;
object-fit: cover;
}
/* Smaller post grid */
.recent-posts-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.75rem;
margin-bottom: 2.5rem;
}
.recent-post-card.small img {
height: 250px;
object-fit: cover;
}
/* View All Button */
.recent-view-all-wrap {
text-align: center;
margin-top: 2rem;
}
.btn.recent-view-all {
display: inline-block;
padding: 0.85rem 1.75rem;
background: #7e7361;
color: #fff;
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 1px;
text-decoration: none;
border: none;
transition: background 0.3s ease;
}
.btn.recent-view-all:hover {
background: #5f5645;
}
/* Responsiveness */
@media (max-width: 992px) {
.recent-posts-grid {
grid-template-columns: 1fr;
}
.recent-post-card.small img {
height: 220px;
}
}
@media (max-width: 600px) {
.recent-post-card.featured img {
height: 300px;
}
}
/* ============ WORK WITH JOSH SECTION ============ */
.work-with-josh-section {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 6rem 2rem;
font-family: 'Lato', sans-serif;
color: #fff;
min-height: 100vh;
}
.work-with-josh-overlay {
background: rgba(0,0,0,0.55);
padding: 4rem 1rem;
}
.work-with-josh-container {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
/* Header logo + divider */
.wwj-header {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.wwj-divider {
width: 1px;
height: 70px;
background: #ccc;
}
.wwj-logo {
font-size: 3rem;
font-family: 'Cormorant Garamond', serif;
color: #eee;
}
/* Title & Description */
.wwj-title {
font-family: 'Cormorant Garamond', serif;
font-size: 2.8rem;
font-weight: 500;
margin-bottom: 1rem;
}
.wwj-description {
font-size: 1.05rem;
line-height: 1.8;
margin-bottom: 2.5rem;
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
/* Form */
.wwj-form {
text-align: left;
}
.wwj-row {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.wwj-group {
flex: 1;
min-width: 160px;
display: flex;
flex-direction: column;
}
.wwj-group label {
font-size: 0.85rem;
margin-bottom: 0.35rem;
color: #ddd;
}
.wwj-group input,
.wwj-group textarea {
background: transparent;
border: none;
border-bottom: 1px solid #ccc;
padding: 0.65rem 0.5rem;
font-size: 1rem;
color: #fff;
outline: none;
}
.wwj-group input:focus,
.wwj-group textarea:focus {
border-color: #fff;
}
/* WWJ form phone picker overrides (dark theme) */
.wwj-phone-wrapper {
display: flex;
gap: 0;
align-items: stretch;
}
.wwj-phone-wrapper .country-picker-btn {
background: transparent;
border: none;
border-bottom: 1px solid #ccc;
border-radius: 0;
padding: 0.65rem 0.5rem;
min-width: 100px;
gap: 0.3rem;
transition: border-color 0.3s ease;
}
.wwj-phone-wrapper .country-picker-btn:hover {
background: rgba(255, 255, 255, 0.06);
}
.wwj-phone-wrapper .country-picker-btn:focus {
border-color: #fff;
box-shadow: none;
}
.wwj-phone-wrapper .cp-code {
color: #fff;
}
.wwj-phone-wrapper .cp-arrow {
color: #aaa;
}
.wwj-phone-wrapper input[type="tel"] {
flex: 1;
background: transparent;
border: none;
border-bottom: 1px solid #ccc;
padding: 0.65rem 0.5rem;
font-size: 1rem;
color: #fff;
outline: none;
transition: border-color 0.3s ease;
font-family: 'Lato', sans-serif;
}
.wwj-phone-wrapper input[type="tel"]::placeholder {
color: #999;
}
.wwj-phone-wrapper input[type="tel"]:focus {
border-color: #fff;
}
.wwj-message-group {
width: 100%;
margin-bottom: 1.5rem;
}
/* Consent */
.wwj-consent {
font-size: 0.75rem;
color: #ddd;
margin-bottom: 1.5rem;
}
.wwj-consent input {
margin-right: 0.5rem;
transform: scale(1.1);
}
/* Submit Button */
.wwj-submit-wrap {
text-align: center;
margin-top: 1rem;
}
.wwj-submit-btn {
padding: 0.85rem 2rem;
background: #fff;
color: #222;
border: none;
font-size: 1rem;
cursor: pointer;
font-weight: 500;
transition: background 0.3s ease;
}
.wwj-submit-btn:hover {
background: #ececec;
}
/* Responsive */
@media (max-width: 768px) {
.wwj-row {
flex-direction: column;
}
}
/* ===== FOOTER GLOBAL ===== */
.footer-full {
font-family: 'Lato', sans-serif;
color: #444;
background: #fff;
padding: 3rem 2rem;
}
/* TOP */
.footer-top {
text-align: center;
}
.footer-logo {
font-family: 'Cormorant Garamond', serif;
font-size: 2rem;
margin-bottom: 2rem;
color: #444;
}
.footer-logo small {
display: block;
font-size: 0.85rem;
color: #7c6d5c;
}
.footer-columns {
display: flex;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
margin-bottom: 3rem;
}
.footer-col h6 {
font-size: 0.85rem;
text-transform: uppercase;
color: #726557;
letter-spacing: 1px;
margin-bottom: 0.6rem;
}
.footer-col p {
font-size: 0.95rem;
line-height: 1.6;
}
.footer-input-label {
font-size: 0.75rem;
text-transform: uppercase;
color: #444;
display: block;
margin-top: 1rem;
margin-bottom: 0.3rem;
}
.footer-input {
width: 100%;
border: none;
border-bottom: 1px solid #ccc;
padding: 0.5rem 0;
font-size: 0.95rem;
margin-bottom: 0.8rem;
outline: none;
}
.footer-consent {
font-size: 0.7rem;
max-width: 300px;
text-align: left;
}
.footer-consent a {
text-decoration: underline;
color: #444;
}
/* Newsletter Subscribe Button */
.newsletter-submit-btn {
display: inline-block;
margin-top: 12px;
padding: 10px 32px;
font-family: 'Lato', sans-serif;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #fff;
background-color: #7c6d5c;
border: 1px solid #7c6d5c;
cursor: pointer;
transition: all 0.3s ease;
}
.newsletter-submit-btn:hover {
background-color: transparent;
color: #7c6d5c;
}
.newsletter-submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Newsletter Thank You */
.newsletter-thankyou {
animation: fadeInUp 0.5s ease forwards;
text-align: left;
}
.newsletter-thankyou-icon {
margin-bottom: 10px;
}
.newsletter-thankyou-text {
font-family: 'Lato', sans-serif;
font-size: 0.9rem;
color: #555;
line-height: 1.6;
}
/* MIDDLE */
.footer-middle {
position: relative;
padding: 2rem 0;
text-align: left;
}
.footer-watermark {
font-family: 'Cormorant Garamond', serif;
font-size: 13rem;
color: rgba(232,230,226,0.15);
position: absolute;
left: 50%;
top: 20%;
transform: translate(-50%, -20%);
pointer-events: none;
user-select: none;
}
.footer-license-wrap {
display: flex;
align-items: flex-start;
gap: 1rem;
position: relative;
z-index: 1;
}
.footer-compass-logo {
width: 150px;
}
.footer-license-text {
font-size: 0.85rem;
line-height: 1.6;
color: #555;
}
.footer-disclaimer a {
text-decoration: underline;
color: #555;
}
.footer-legal-icons {
margin-top: 1rem;
}
.footer-legal-icons img {
width: 36px;
margin-right: 1rem;
}
/* BOTTOM */
.footer-bottom {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid #e0dfdb;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
font-size: 0.85rem;
color: #555;
}
.footer-bottom-left {
display: flex;
gap: 2rem;
align-items: center;
}
.footer-lp-logo {
width: 28px;
}
.footer-credit a,
.footer-copy a {
text-decoration: underline;
color: #555;
}
.footer-social-icons {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.footer-social-icons a {
color: #666;
transition: all 0.3s ease;
text-decoration: none;
}
.footer-social-icons a:hover {
color: #7c6d5c;
transform: translateY(-2px);
}
.footer-social-icons .icon {
width: 32px;
height: 32px;
border: 1px solid #ccc;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #f8f9fa;
transition: all 0.3s ease;
font-size: 16px;
}
.footer-social-icons .icon:hover {
background-color: #7c6d5c;
border-color: #7c6d5c;
color: white;
}
.footer-social-icons .fb:before { content: '\f39e'; font-family: 'Font Awesome 6 Brands'; }
.footer-social-icons .ig:before { content: '\f16d'; font-family: 'Font Awesome 6 Brands'; }
.footer-social-icons .yt:before { content: '\f167'; font-family: 'Font Awesome 6 Brands'; }
.footer-social-icons .li:before { content: '\f08c'; font-family: 'Font Awesome 6 Brands'; }
/* ===== MOBILE RESPONSIVE: FOOTER SECTION ===== */
/* Mobile-first responsive design for footer */
@media (max-width: 768px) {
/* Mobile Footer Container */
.footer-full {
padding: 2rem 1rem;
}
/* Mobile Footer Top */
.footer-top {
text-align: center;
margin-bottom: 2rem;
}
.footer-logo {
font-size: 1.5rem;
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.footer-logo-mark {
order: 1;
}
.footer-logo-img {
width: 60px;
height: auto;
}
.footer-logo-text {
order: 2;
text-align: center;
line-height: 1.2;
}
.footer-logo small {
font-size: 0.8rem;
margin-top: 0.25rem;
}
/* Mobile Footer Columns - Stacked Layout */
.footer-columns {
flex-direction: column;
gap: 2rem;
margin-bottom: 2rem;
text-align: center;
}
.footer-col {
width: 100%;
}
.footer-col h6 {
font-size: 0.9rem;
margin-bottom: 0.75rem;
color: #7c6d5c;
}
.footer-col p {
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1rem;
}
/* Mobile Newsletter Section */
.footer-col-right {
max-width: 100%;
}
.footer-input-label {
font-size: 0.8rem;
margin-top: 1.25rem;
margin-bottom: 0.5rem;
text-align: left;
}
.footer-input {
font-size: 0.9rem;
padding: 0.75rem 0;
border-bottom: 2px solid #ddd;
margin-bottom: 1rem;
}
.footer-input:focus {
border-bottom-color: #7c6d5c;
}
.footer-consent {
font-size: 0.75rem;
max-width: 100%;
text-align: center;
line-height: 1.4;
}
.footer-consent label {
display: flex;
align-items: flex-start;
gap: 0.5rem;
text-align: left;
}
.footer-consent input[type="checkbox"] {
flex-shrink: 0;
margin-top: 0.2rem;
width: 16px;
height: 16px;
}
.newsletter-submit-btn {
width: 100%;
margin-top: 10px;
padding: 12px;
}
.newsletter-thankyou {
text-align: center;
}
/* Mobile Footer Middle */
.footer-middle {
padding: 1.5rem 0;
text-align: center;
}
.footer-watermark {
font-size: 6rem;
opacity: 0.8;
top: 50%;
transform: translate(-50%, -50%);
}
.footer-license-wrap {
flex-direction: column;
align-items: center;
gap: 1.5rem;
text-align: center;
}
.footer-compass-logo {
width: 120px;
order: 1;
}
.footer-license-text {
order: 2;
font-size: 0.8rem;
line-height: 1.5;
max-width: 100%;
}
.footer-license-text p {
margin-bottom: 0.75rem;
}
/* Mobile Footer Bottom */
.footer-bottom {
margin-top: 2rem;
padding-top: 1.25rem;
flex-direction: column;
gap: 1.5rem;
text-align: center;
align-items: center;
}
.footer-bottom-left {
flex-direction: column;
gap: 1rem;
order: 2;
}
.footer-credit,
.footer-copy {
font-size: 0.8rem;
line-height: 1.4;
text-align: center;
}
.footer-credit {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.footer-lp-logo {
width: 24px;
}
/* Mobile Social Icons */
.footer-social-icons {
order: 1;
justify-content: center;
gap: 1.25rem;
margin: 0;
}
.footer-social-icons .icon {
width: 40px;
height: 40px;
font-size: 18px;
border-width: 2px;
}
.footer-social-icons .icon:hover,
.footer-social-icons .icon:active {
background-color: #7c6d5c;
border-color: #7c6d5c;
color: white;
transform: scale(1.05);
}
}
/* Small Mobile Responsive */
@media (max-width: 480px) {
.footer-full {
padding: 1.5rem 0.75rem;
}
.footer-logo {
font-size: 1.3rem;
margin-bottom: 1.25rem;
}
.footer-logo-img {
width: 50px;
}
.footer-logo small {
font-size: 0.75rem;
}
.footer-columns {
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.footer-col h6 {
font-size: 0.85rem;
}
.footer-col p {
font-size: 0.85rem;
}
.footer-input-label {
font-size: 0.75rem;
}
.footer-input {
font-size: 0.85rem;
padding: 0.6rem 0;
}
.footer-consent {
font-size: 0.7rem;
}
.footer-consent input[type="checkbox"] {
width: 14px;
height: 14px;
}
.footer-watermark {
font-size: 4rem;
}
.footer-compass-logo {
width: 100px;
}
.footer-license-text {
font-size: 0.75rem;
}
.footer-bottom {
margin-top: 1.5rem;
padding-top: 1rem;
gap: 1.25rem;
}
.footer-credit,
.footer-copy {
font-size: 0.75rem;
}
.footer-lp-logo {
width: 20px;
}
.footer-social-icons {
gap: 1rem;
}
.footer-social-icons .icon {
width: 36px;
height: 36px;
font-size: 16px;
}
}
/* Responsive */
@media (max-width: 992px) {
.footer-columns {
flex-direction: column;
text-align: center;
}
.footer-consent {
margin: auto;
}
.footer-bottom {
flex-direction: column;
gap: 1rem;
}
.footer-bottom-left {
flex-direction: column;
gap: 0.5rem;
}
}
/* ===== 18. CONSULTATION MODAL ===== */
/* Custom modal for consultation scheduling with phone country codes */
/* Modal backdrop and container */
.consultation-modal {
font-family: 'Lato', sans-serif;
border: none;
border-radius: 0;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
overflow: visible;
}
.consultation-modal .modal-body {
overflow: visible;
}
/* ===== 19. PROJECTS MODAL ===== */
/* Full-screen modal for displaying all projects in elegant card layout */
/* Main modal styling */
.projects-modal {
font-family: 'Lato', sans-serif;
border: none;
border-radius: 0;
height: 100vh;
background: #fafafa;
}
/* Projects modal header */
.projects-header {
background: linear-gradient(135deg, #7c6d5c 0%, #8B5A3C 100%);
color: white;
border-bottom: none;
padding: 1.5rem 3rem;
position: sticky;
top: 0;
z-index: 1050;
}
.projects-header-content {
display: flex;
align-items: center;
gap: 1.5rem;
}
.projects-logo {
font-family: 'Cormorant Garamond', serif;
font-size: 2.5rem;
font-weight: bold;
color: rgba(255, 255, 255, 0.9);
letter-spacing: 2px;
flex-shrink: 0;
}
.projects-title-section {
flex-grow: 1;
}
.projects-title {
font-family: 'Cormorant Garamond', serif;
font-size: 2.2rem;
font-weight: 600;
margin: 0;
line-height: 1.2;
}
.projects-subtitle {
font-size: 1rem;
color: rgba(255, 255, 255, 0.85);
margin: 0.25rem 0 0 0;
font-weight: 300;
}
.projects-close {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: all 0.3s ease;
color: white !important;
font-size: 1.4rem;
font-weight: bold;
}
.projects-close::before {
content: '×';
color: white;
font-size: 1.6rem;
line-height: 1;
font-weight: bold;
}
.projects-close:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.4);
transform: scale(1.05);
color: white !important;
}
/* Projects modal body */
.projects-body {
padding: 0;
background: #fafafa;
height: calc(100vh - 140px);
overflow-y: auto;
}
/* Filter tabs styling */
.projects-filter-tabs {
display: flex;
gap: 0;
background: white;
padding: 0;
margin: 0;
border-bottom: 1px solid #e5e5e5;
position: sticky;
top: 0;
z-index: 10;
}
.filter-tab {
flex: 1;
padding: 1rem 1.5rem;
background: white;
border: none;
font-family: 'Lato', sans-serif;
font-size: 0.9rem;
font-weight: 500;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s ease;
border-bottom: 3px solid transparent;
}
.filter-tab:hover {
background: #f8f9fa;
color: #7c6d5c;
}
.filter-tab.active {
color: #7c6d5c;
background: #f8f9fa;
border-bottom-color: #7c6d5c;
}
/* Projects grid */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
padding: 2rem;
max-width: 1400px;
margin: 0 auto;
}
/* Individual project card */
.project-card {
background: white;
border-radius: 0;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
border: 1px solid #f0f0f0;
}
.project-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
/* Project image wrapper */
.project-image-wrapper {
position: relative;
height: 300px;
overflow: hidden;
}
.project-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.project-card:hover .project-image {
transform: scale(1.05);
}
/* Project overlay */
.project-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%);
opacity: 0;
transition: all 0.4s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1.5rem;
}
.project-card:hover .project-overlay {
opacity: 1;
}
/* Project status badge */
.project-status {
align-self: flex-start;
background: rgba(124, 109, 92, 0.9);
color: white;
padding: 0.4rem 0.8rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
backdrop-filter: blur(10px);
}
.project-status.sold {
background: rgba(200, 100, 100, 0.9);
}
/* Project hover content */
.project-hover-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.project-monogram {
font-family: 'Cormorant Garamond', serif;
font-size: 2.5rem;
font-weight: bold;
color: white;
letter-spacing: 2px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.project-view-btn {
background: rgba(255, 255, 255, 0.9);
color: #7c6d5c;
border: none;
padding: 0.75rem 1.5rem;
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.project-view-btn:hover {
background: white;
transform: scale(1.05);
}
/* Project info section */
.project-info {
padding: 1.5rem;
}
.project-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.4rem;
font-weight: 600;
color: #222;
margin: 0 0 0.5rem 0;
line-height: 1.3;
}
.project-location {
font-size: 0.9rem;
color: #7c6d5c;
margin: 0 0 1rem 0;
font-weight: 500;
}
.project-details {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #f0f0f0;
}
.project-price {
font-size: 1.1rem;
font-weight: 700;
color: #7c6d5c;
}
.project-type {
font-size: 0.85rem;
color: #666;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.project-description {
font-size: 0.95rem;
color: #555;
line-height: 1.6;
margin: 0;
}
/* Projects footer */
.projects-footer {
background: white;
border-top: 1px solid #e5e5e5;
padding: 1rem 3rem;
position: sticky;
bottom: 0;
z-index: 10;
display: block;
}
.projects-footer-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
gap: 1rem;
}
.footer-contact-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-left: 20px;
}
.contact-label {
font-size: 0.9rem;
color: #666;
font-weight: 500;
}
.contact-details {
font-size: 0.95rem;
color: #7c6d5c;
font-weight: 600;
}
.projects-close-btn {
background: #7c6d5c;
color: white;
border: none;
padding: 0.75rem 2rem;
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s ease;
}
.projects-close-btn:hover {
background: #8B5A3C;
transform: scale(1.05);
color: white;
}
/* Fade in animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive design for projects modal */
@media (max-width: 768px) {
.projects-header {
padding: 1rem 1.5rem;
}
.projects-title {
font-size: 1.6rem;
}
.projects-subtitle {
font-size: 0.9rem;
}
.projects-filter-tabs {
flex-wrap: wrap;
}
.filter-tab {
min-width: 50%;
flex: none;
padding: 0.75rem 1rem;
font-size: 0.8rem;
}
.projects-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 1rem;
}
.project-card {
margin: 0;
}
.project-image-wrapper {
height: 250px;
}
.projects-footer {
padding: 1rem 1.5rem;
}
.projects-footer-content {
flex-direction: column;
gap: 1rem;
text-align: center;
}
}
/* ===== 20. TESTIMONIALS MODAL ===== */
/* Elegant modal for displaying all client testimonials */
/* Main modal styling */
.testimonials-modal {
font-family: 'Lato', sans-serif;
border: none;
border-radius: 0;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
/* Testimonials modal header */
.testimonials-header {
background: linear-gradient(135deg, #7c6d5c 0%, #8B5A3C 100%);
color: white;
border-bottom: none;
padding: 2rem 2.5rem 1.5rem;
position: relative;
}
.testimonials-header-content {
display: flex;
align-items: center;
gap: 1.5rem;
}
.testimonials-logo {
font-family: 'Cormorant Garamond', serif;
font-size: 2.2rem;
font-weight: bold;
color: rgba(255, 255, 255, 0.95);
letter-spacing: 2px;
flex-shrink: 0;
}
.testimonials-title-section {
flex-grow: 1;
}
.testimonials-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.9rem;
font-weight: 600;
margin: 0;
line-height: 1.2;
}
.testimonials-subtitle {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.85);
margin: 0.25rem 0 0 0;
font-weight: 300;
}
.testimonials-close {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 0;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: all 0.3s ease;
color: white !important;
font-size: 1.3rem;
font-weight: bold;
}
.testimonials-close::before {
content: '×';
color: white;
font-size: 1.5rem;
line-height: 1;
font-weight: bold;
}
.testimonials-close:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.4);
transform: scale(1.05);
color: white !important;
}
/* Testimonials modal body */
.testimonials-body {
padding: 2.5rem;
background: #fafafa;
max-height: 70vh;
overflow-y: auto;
}
/* Testimonials grid layout */
.testimonials-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
max-width: 100%;
}
/* Individual testimonial card */
.testimonial-card {
background: white;
padding: 2rem;
border-radius: 0;
box-shadow: 0 4px 15px rgba(124, 109, 92, 0.08);
border: 1px solid rgba(124, 109, 92, 0.1);
transition: all 0.3s ease;
position: relative;
}
.testimonial-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(124, 109, 92, 0.15);
}
/* Quote icon styling */
.testimonial-quote-icon {
font-family: 'Cormorant Garamond', serif;
font-size: 3rem;
color: #7c6d5c;
line-height: 1;
margin-bottom: 1rem;
opacity: 0.3;
}
/* Testimonial text */
.testimonial-text {
font-size: 1.05rem;
line-height: 1.7;
color: #444;
margin: 0 0 1.5rem 0;
font-style: italic;
font-weight: 400;
}
/* Author name styling */
.testimonial-author {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
font-weight: 600;
color: #7c6d5c;
margin-bottom: 0.25rem;
}
/* Location styling */
.testimonial-location {
font-size: 0.85rem;
color: #888;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Testimonials footer */
.testimonials-footer {
background: white;
border-top: 1px solid #e5e5e5;
padding: 2rem 2.5rem;
position: relative;
}
.testimonials-footer-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 2rem;
}
.footer-experience-info {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
max-width: 65%;
}
.experience-highlight {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
font-weight: 600;
color: #7c6d5c;
line-height: 1.3;
}
.experience-detail {
font-size: 0.9rem;
color: #666;
line-height: 1.5;
margin-top: 0.25rem;
padding-right: 1rem;
}
.testimonials-close-btn {
background: #7c6d5c;
color: white;
border: none;
padding: 0.85rem 2rem;
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 0;
flex-shrink: 0;
min-width: 120px;
height: fit-content;
}
.testimonials-close-btn:hover {
background: #8B5A3C;
transform: scale(1.05);
color: white;
}
/* Responsive design for testimonials modal */
@media (max-width: 768px) {
.testimonials-header {
padding: 1.5rem;
}
.testimonials-title {
font-size: 1.5rem;
}
.testimonials-subtitle {
font-size: 0.85rem;
}
.testimonials-body {
padding: 1.5rem;
}
.testimonial-card {
padding: 1.5rem;
}
.testimonial-text {
font-size: 1rem;
}
.testimonials-footer {
padding: 1.5rem;
}
.testimonials-footer-content {
flex-direction: column;
gap: 1.5rem;
text-align: center;
align-items: center;
}
.footer-experience-info {
max-width: 100%;
text-align: center;
}
.experience-detail {
padding-right: 0;
}
.testimonials-close-btn {
width: 100%;
max-width: 200px;
}
}
/* Modal header with branding */
.consultation-header {
background: linear-gradient(135deg, #7c6d5c 0%, #8B5A3C 100%);
color: white;
border-bottom: none;
padding: 2rem 2.5rem 1.5rem;
position: relative;
}
.consultation-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.8rem;
font-weight: 600;
margin: 0;
display: flex;
align-items: center;
gap: 1rem;
}
.consultation-logo {
font-family: 'Cormorant Garamond', serif;
font-size: 2rem;
font-weight: bold;
color: rgba(255, 255, 255, 0.9);
letter-spacing: 2px;
}
.consultation-close {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 0;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: all 0.3s ease;
color: white !important;
font-size: 1.2rem;
font-weight: bold;
}
.consultation-close::before {
content: '×';
color: white;
font-size: 1.4rem;
line-height: 1;
font-weight: bold;
}
.consultation-close:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
transform: scale(1.05);
color: white !important;
}
/* Modal body styling */
.consultation-body {
padding: 2rem 2.5rem;
background: #fff;
overflow: visible;
}
.consultation-subtitle {
text-align: center;
font-size: 1.05rem;
color: #666;
margin-bottom: 2rem;
line-height: 1.6;
}
/* Form group styling */
.consultation-group {
margin-bottom: 1.5rem;
position: relative;
overflow: visible;
}
.consultation-label {
font-family: 'Lato', sans-serif;
font-size: 0.85rem;
font-weight: 500;
color: #7c6d5c;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.5rem;
display: block;
}
/* Input field styling */
.consultation-input {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #ddd;
border-radius: 0;
font-size: 1rem;
font-family: 'Lato', sans-serif;
background: #fff;
transition: all 0.3s ease;
outline: none;
}
.consultation-input:focus {
border-color: #7c6d5c;
box-shadow: 0 0 0 3px rgba(124, 109, 92, 0.1);
background: #fefefe;
}
.consultation-input::placeholder {
color: #999;
font-style: italic;
}
/* Phone input wrapper */
.phone-input-wrapper {
display: flex;
gap: 0;
align-items: stretch;
overflow: visible;
position: relative;
}
/* Phone input within wrapper - override consultation-input width */
.phone-input-wrapper .consultation-input.phone-input {
width: auto;
flex: 1;
min-width: 0;
}
/* ── Country Phone Picker ── */
.country-picker {
position: relative;
flex-shrink: 0;
}
.country-picker-btn {
display: flex;
align-items: center;
gap: 0.35rem;
height: 100%;
padding: 0.75rem 0.6rem;
border: 1px solid #ddd;
border-right: none;
border-radius: 0;
background: #fafafa;
cursor: pointer;
font-size: 0.95rem;
transition: all 0.25s ease;
white-space: nowrap;
min-width: 105px;
}
.country-picker-btn:hover {
background: #f0ede8;
}
.country-picker-btn:focus {
outline: none;
border-color: #7c6d5c;
box-shadow: 0 0 0 2px rgba(124, 109, 92, 0.15);
}
.cp-flag {
font-size: 1.25rem;
line-height: 1;
}
.cp-code {
font-size: 0.9rem;
font-weight: 500;
color: #333;
font-family: 'Lato', sans-serif;
}
.cp-arrow {
font-size: 0.6rem;
color: #888;
margin-left: auto;
transition: transform 0.2s ease;
}
.country-picker-btn[aria-expanded="true"] .cp-arrow {
transform: rotate(180deg);
}
/* Dropdown */
.country-picker-dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
width: 320px;
max-height: 0;
overflow: hidden;
background: #fff;
border-radius: 8px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
z-index: 9999;
opacity: 0;
transform: translateY(-8px);
transition: max-height 0.3s ease, opacity 0.2s ease, transform 0.2s ease;
}
.country-picker-dropdown.open {
max-height: 380px;
overflow: hidden;
opacity: 1;
transform: translateY(0);
}
/* Search */
.cp-search-wrap {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid #eee;
position: sticky;
top: 0;
background: #fff;
z-index: 2;
border-radius: 8px 8px 0 0;
}
.cp-search {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid #e0e0e0;
border-radius: 6px;
font-size: 0.875rem;
font-family: 'Lato', sans-serif;
outline: none;
transition: border-color 0.2s;
background: #fafafa;
}
.cp-search:focus {
border-color: #7c6d5c;
background: #fff;
box-shadow: 0 0 0 2px rgba(124, 109, 92, 0.1);
}
.cp-search::placeholder {
color: #aaa;
}
/* List */
.cp-list {
list-style: none;
margin: 0;
padding: 0.25rem 0;
max-height: 290px;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: #ccc transparent;
}
.cp-list::-webkit-scrollbar {
width: 5px;
}
.cp-list::-webkit-scrollbar-track {
background: transparent;
}
.cp-list::-webkit-scrollbar-thumb {
background: #d0d0d0;
border-radius: 10px;
}
/* Group headers */
.cp-group-header {
padding: 0.45rem 0.75rem 0.3rem;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #999;
background: #f8f8f8;
border-top: 1px solid #f0f0f0;
user-select: none;
}
.cp-group-header:first-child {
border-top: none;
}
/* Option rows */
.cp-option {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.75rem;
cursor: pointer;
transition: background 0.15s ease;
outline: none;
}
.cp-option:hover,
.cp-option:focus {
background: #f5f2ed;
}
.cp-opt-flag {
font-size: 1.15rem;
line-height: 1;
flex-shrink: 0;
}
.cp-opt-name {
flex: 1;
font-size: 0.85rem;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cp-opt-dial {
font-size: 0.8rem;
color: #888;
font-weight: 500;
flex-shrink: 0;
font-family: 'Lato', sans-serif;
}
.phone-input {
flex: 1;
border-radius: 0 !important;
width: auto;
}
/* ── Parallax form phone picker overrides ── */
.parallax-phone-wrapper {
display: flex;
gap: 0;
align-items: stretch;
}
.parallax-phone-wrapper .country-picker-btn {
background: transparent;
border: none;
border-bottom: 1px solid #ccc;
border-radius: 0;
padding: 0.75rem 0.5rem;
min-width: 100px;
gap: 0.3rem;
transition: border-color 0.3s ease;
}
.parallax-phone-wrapper .country-picker-btn:hover {
background: rgba(124, 109, 92, 0.08);
}
.parallax-phone-wrapper .country-picker-btn:focus {
border-color: #7c6d5c;
box-shadow: none;
}
.parallax-phone-wrapper .cp-code {
color: #222;
}
.parallax-phone-wrapper .cp-arrow {
color: #999;
}
.parallax-phone-wrapper input[type="tel"] {
flex: 1;
border: none;
border-bottom: 1px solid #ccc;
border-radius: 0;
padding: 0.75rem 0.5rem;
font-size: 1rem;
background: transparent;
outline: none;
color: #222;
transition: border-color 0.3s ease;
font-family: 'Lato', sans-serif;
}
.parallax-phone-wrapper input[type="tel"]::placeholder {
color: #999;
}
.parallax-phone-wrapper input[type="tel"]:focus {
border-color: #7c6d5c;
}
/* Textarea styling */
.consultation-textarea {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #ddd;
border-radius: 0;
font-size: 1rem;
font-family: 'Lato', sans-serif;
background: #fff;
transition: all 0.3s ease;
outline: none;
resize: vertical;
min-height: 100px;
}
.consultation-textarea:focus {
border-color: #7c6d5c;
box-shadow: 0 0 0 3px rgba(124, 109, 92, 0.1);
}
.consultation-textarea::placeholder {
color: #999;
font-style: italic;
}
/* Hint text */
.consultation-hint {
font-size: 0.8rem;
color: #888;
margin-top: 0.25rem;
font-style: italic;
}
/* Error styling */
.consultation-error {
font-size: 0.8rem;
color: #dc3545;
margin-top: 0.25rem;
display: none;
font-weight: 500;
}
/* Consent checkbox styling */
.consultation-consent {
margin-top: 1.5rem;
}
.consent-wrapper {
display: flex;
align-items: flex-start;
gap: 0.75rem;
cursor: pointer;
font-size: 0.9rem;
line-height: 1.5;
color: #555;
}
.consent-wrapper input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
}
.consent-checkmark {
width: 18px;
height: 18px;
border: 2px solid #ddd;
border-radius: 0;
background: #fff;
position: relative;
transition: all 0.3s ease;
flex-shrink: 0;
margin-top: 2px;
}
.consent-wrapper:hover .consent-checkmark {
border-color: #7c6d5c;
}
.consent-wrapper input:checked ~ .consent-checkmark {
background: #7c6d5c;
border-color: #7c6d5c;
}
.consent-wrapper input:checked ~ .consent-checkmark::after {
content: '';
position: absolute;
left: 5px;
top: 1px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.consent-text {
flex: 1;
}
.consent-link {
color: #7c6d5c;
text-decoration: underline;
transition: color 0.3s ease;
}
.consent-link:hover {
color: #5d4f42;
text-decoration: underline;
}
/* Modal footer styling */
.consultation-footer {
background: #f8f9fa;
border-top: 1px solid #eee;
padding: 1.5rem 2.5rem;
display: flex;
justify-content: flex-end;
gap: 1rem;
}
/* Button styling */
.consultation-cancel {
background: transparent;
border: 1px solid #ddd;
color: #666;
padding: 0.75rem 1.5rem;
border-radius: 0;
font-size: 0.95rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
}
.consultation-cancel:hover {
background: #f8f9fa;
border-color: #999;
color: #333;
}
.consultation-submit {
background: linear-gradient(135deg, #7c6d5c 0%, #8B5A3C 100%);
border: none;
color: white;
padding: 0.75rem 2rem;
border-radius: 0;
font-size: 0.95rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.consultation-submit:hover:not(:disabled) {
background: linear-gradient(135deg, #6a5a4a 0%, #7a4d32 100%);
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(124, 109, 92, 0.3);
}
.consultation-submit:disabled {
opacity: 0.7;
cursor: not-allowed;
}
/* Loading spinner */
.submit-loading .spinner-border {
width: 1rem;
height: 1rem;
border-width: 2px;
}
/* Responsive design */
@media (max-width: 768px) {
.consultation-modal .modal-dialog {
margin: 1rem;
}
.consultation-header,
.consultation-body,
.consultation-footer {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.consultation-title {
font-size: 1.5rem;
}
.consultation-logo {
font-size: 1.5rem;
}
.phone-input-wrapper {
flex-direction: row;
gap: 0;
}
.country-picker-btn {
min-width: 95px;
padding: 0.65rem 0.5rem;
}
.country-picker-dropdown {
width: calc(100vw - 3rem);
max-width: 320px;
left: 0;
}
.consultation-footer {
flex-direction: column-reverse;
gap: 0.75rem;
}
.consultation-cancel,
.consultation-submit {
width: 100%;
text-align: center;
}
}
/* Animation for modal appearance */
@keyframes modalFadeIn {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal.fade .modal-dialog {
animation: modalFadeIn 0.3s ease-out;
}
/* ===== BRAND CAROUSEL SECTION ===== */
/* Trusted partners logo showcase with continuous scroll animation */
.brand-carousel-section {
background: #fff;
padding: 2rem 0;
overflow: hidden;
}
.brand-carousel {
overflow: hidden;
position: relative;
}
.brand-carousel-track {
display: flex;
width: max-content;
animation: scroll-left 40s linear infinite;
gap: 4rem;
align-items: center;
}
.brand-carousel-track img {
height: 50px;
opacity: 0.6;
filter: grayscale(100%);
transition: opacity 0.3s;
}
.brand-carousel-track img:hover {
opacity: 1;
filter: grayscale(0%);
}
/* Keyframe animation for continuous scroll */
@keyframes scroll-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* ===== MOBILE RESPONSIVE: BRAND CAROUSEL SECTION ===== */
/* Mobile-first responsive design for trusted partners carousel */
@media (max-width: 768px) {
/* Mobile Brand Carousel Container */
.brand-carousel-section {
padding: 1.5rem 0;
background: #fafafa;
}
/* Mobile Brand Track */
.brand-carousel-track {
gap: 2rem;
animation: scroll-left 25s linear infinite; /* Faster scroll for mobile */
}
/* Mobile Brand Images */
.brand-carousel-track img {
height: 35px;
opacity: 0.7; /* Slightly higher opacity for better visibility */
filter: grayscale(80%); /* Less grayscale for better brand recognition */
transition: all 0.3s ease;
}
/* Mobile Hover/Touch Effects */
.brand-carousel-track img:hover,
.brand-carousel-track img:active {
opacity: 1;
filter: grayscale(0%);
transform: scale(1.05);
}
}
/* Small Mobile Responsive */
@media (max-width: 480px) {
.brand-carousel-section {
padding: 1rem 0;
}
.brand-carousel-track {
gap: 1.5rem;
animation: scroll-left 20s linear infinite; /* Even faster for small screens */
}
.brand-carousel-track img {
height: 30px;
opacity: 0.8;
filter: grayscale(60%);
}
}
/* Tablet Responsive */
@media (min-width: 769px) and (max-width: 1024px) {
.brand-carousel-track {
gap: 3rem;
animation: scroll-left 35s linear infinite;
}
.brand-carousel-track img {
height: 45px;
}
}
/* Pause animation on user interaction for accessibility */
@media (prefers-reduced-motion: reduce) {
.brand-carousel-track {
animation-play-state: paused;
}
}
/* Hover pause for desktop users */
@media (min-width: 1025px) {
.brand-carousel:hover .brand-carousel-track {
animation-play-state: paused;
}
}
/* ===== PROPERTIES MODAL STYLES ===== */
.properties-modal .modal-content {
background: #ffffff;
border: none;
border-radius: 0;
box-shadow: none;
}
/* Header Styling */
.properties-header {
background: linear-gradient(135deg, #7c6d5c 0%, #8B5A3C 100%);
color: white;
border-bottom: none;
padding: 2rem 3rem 1.5rem;
position: relative;
overflow: hidden;
}
.properties-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.6;
z-index: 1;
}
.properties-header-content {
display: flex;
align-items: center;
gap: 1.5rem;
position: relative;
z-index: 2;
}
.properties-logo {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.properties-logo-img {
width: 56px;
height: auto;
max-height: 56px;
object-fit: contain;
filter: brightness(0) invert(1);
}
.properties-title-section h2 {
font-family: 'Cormorant Garamond', serif;
font-size: 2.5rem;
font-weight: 600;
margin: 0;
color: white;
}
.properties-subtitle {
font-family: 'Lato', sans-serif;
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
margin: 0.5rem 0 0;
}
.properties-close {
position: relative;
z-index: 3;
filter: brightness(0) invert(1);
opacity: 0.8;
font-size: 1.5rem;
}
.properties-close:hover {
opacity: 1;
transform: scale(1.1);
}
/* Body Styling */
.properties-body {
padding: 3rem;
background: #fafafa;
}
.properties-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 2rem;
max-width: 1400px;
margin: 0 auto;
}
/* Community Properties Container */
.community-properties {
display: contents;
width: 100%;
}
/* Property Card Styling */
.property-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(124, 109, 92, 0.1);
transition: all 0.3s ease;
border: 1px solid rgba(124, 109, 92, 0.1);
}
.property-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(124, 109, 92, 0.2);
}
.property-image-wrapper {
position: relative;
height: 240px;
overflow: hidden;
}
.property-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.property-card:hover .property-image {
transform: scale(1.05);
}
.property-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 100%);
opacity: 0;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1rem;
}
.property-card:hover .property-overlay {
opacity: 1;
}
.property-status {
background: #28a745;
color: white;
padding: 0.4rem 1rem;
border-radius: 20px;
font-family: 'Lato', sans-serif;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
align-self: flex-start;
width: fit-content;
}
.property-status.sold {
background: #dc3545;
}
.property-hover-content {
display: flex;
justify-content: center;
align-items: flex-end;
}
/* Property Details Button - Now in overlay */
.property-details-btn {
background: linear-gradient(135deg, #7c6d5c 0%, #8B5A3C 100%);
color: white;
border: none;
padding: 0.75rem 2rem;
border-radius: 25px;
font-family: 'Lato', sans-serif;
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
transform: translateY(20px);
opacity: 0;
transition: all 0.4s ease;
}
.property-card:hover .property-details-btn {
transform: translateY(0);
opacity: 1;
}
.property-details-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.property-details-btn:hover::before {
left: 100%;
}
.property-details-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
/* Property Info */
.property-info {
padding: 1.5rem;
}
.property-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.8rem;
font-weight: 600;
color: #7c6d5c;
margin: 0 0 1rem;
}
.property-description {
font-family: 'Lato', sans-serif;
font-size: 0.95rem;
line-height: 1.6;
color: #666;
margin-bottom: 1.5rem;
}
/* Property Details Grid */
.property-details-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-bottom: 2rem;
}
.detail-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid rgba(124, 109, 92, 0.1);
transition: all 0.3s ease;
}
.detail-item:hover {
background: rgba(124, 109, 92, 0.05);
border-color: rgba(124, 109, 92, 0.2);
}
.detail-icon {
font-size: 1.2rem;
width: 24px;
text-align: center;
}
.detail-content {
flex: 1;
}
.detail-label {
display: block;
font-family: 'Lato', sans-serif;
font-size: 0.8rem;
color: #888;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.25rem;
}
.detail-value {
display: block;
font-family: 'Lato', sans-serif;
font-size: 0.95rem;
font-weight: 600;
color: #333;
}
/* Footer Styling */
.properties-footer {
background: #7c6d5c;
color: white;
border-top: none;
padding: 2rem 3rem;
}
.properties-footer-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
}
.footer-contact-info {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.contact-label {
font-family: 'Cormorant Garamond', serif;
font-size: 1.2rem;
font-weight: 600;
}
.contact-details {
font-family: 'Lato', sans-serif;
font-size: 0.95rem;
opacity: 0.9;
}
.properties-close-btn {
background: transparent;
color: white;
border: 2px solid white;
padding: 0.75rem 2rem;
border-radius: 8px;
font-family: 'Lato', sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
}
.properties-close-btn:hover {
background: white;
color: #7c6d5c;
transform: translateY(-2px);
}
/* ===== PROPERTIES MODAL STYLES ===== */
/* Comprehensive property showcase modal with responsive design */
.properties-modal .modal-content {
background: #ffffff;
border: none;
border-radius: 0;
box-shadow: none;
}
/* Header Styling */
.properties-header {
background: linear-gradient(135deg, #7c6d5c 0%, #8B5A3C 100%);
color: white;
border-bottom: none;
padding: 2rem 3rem 1.5rem;
position: relative;
overflow: hidden;
}
.properties-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.6;
z-index: 1;
}
.properties-header-content {
display: flex;
align-items: center;
gap: 1.5rem;
position: relative;
z-index: 2;
}
.properties-logo {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.properties-logo-img {
width: 56px;
height: auto;
max-height: 56px;
object-fit: contain;
filter: brightness(0) invert(1);
}
.properties-title-section h2 {
font-family: 'Cormorant Garamond', serif;
font-size: 2.5rem;
font-weight: 600;
margin: 0;
color: white;
}
.properties-subtitle {
font-family: 'Lato', sans-serif;
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
margin: 0.5rem 0 0;
}
.properties-close {
position: relative;
z-index: 3;
filter: brightness(0) invert(1);
opacity: 0.8;
font-size: 1.5rem;
}
.properties-close:hover {
opacity: 1;
transform: scale(1.1);
}
/* Body Styling */
.properties-body {
padding: 3rem;
background: #fafafa;
}
.properties-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 2rem;
max-width: 1400px;
margin: 0 auto;
}
/* Community Properties Container */
.community-properties {
display: contents;
width: 100%;
}
/* Property Card Styling */
.property-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(124, 109, 92, 0.1);
transition: all 0.3s ease;
border: 1px solid rgba(124, 109, 92, 0.1);
}
.property-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(124, 109, 92, 0.2);
}
.property-image-wrapper {
position: relative;
height: 240px;
overflow: hidden;
}
.property-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.property-card:hover .property-image {
transform: scale(1.05);
}
.property-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 100%);
opacity: 0;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1rem;
}
.property-card:hover .property-overlay {
opacity: 1;
}
.property-status {
background: #28a745;
color: white;
padding: 0.4rem 1rem;
border-radius: 20px;
font-family: 'Lato', sans-serif;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
align-self: flex-start;
width: fit-content;
}
.property-status.sold {
background: #dc3545;
}
.property-hover-content {
display: flex;
justify-content: center;
align-items: flex-end;
}
/* Property Details Button - Now in overlay */
.property-details-btn {
background: linear-gradient(135deg, #7c6d5c 0%, #8B5A3C 100%);
color: white;
border: none;
padding: 0.75rem 2rem;
border-radius: 25px;
font-family: 'Lato', sans-serif;
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
transform: translateY(20px);
opacity: 0;
transition: all 0.4s ease;
}
.property-card:hover .property-details-btn {
transform: translateY(0);
opacity: 1;
}
.property-details-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.property-details-btn:hover::before {
left: 100%;
}
.property-details-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
/* Property Info */
.property-info {
padding: 1.5rem;
}
.property-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.8rem;
font-weight: 600;
color: #7c6d5c;
margin: 0 0 1rem;
}
.property-description {
font-family: 'Lato', sans-serif;
font-size: 0.95rem;
line-height: 1.6;
color: #666;
margin-bottom: 1.5rem;
}
/* Property Details Grid */
.property-details-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-bottom: 2rem;
}
.detail-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid rgba(124, 109, 92, 0.1);
transition: all 0.3s ease;
}
.detail-item:hover {
background: rgba(124, 109, 92, 0.05);
border-color: rgba(124, 109, 92, 0.2);
}
.detail-icon {
font-size: 1.2rem;
width: 24px;
text-align: center;
}
.detail-content {
flex: 1;
}
.detail-label {
display: block;
font-family: 'Lato', sans-serif;
font-size: 0.8rem;
color: #888;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.25rem;
}
.detail-value {
display: block;
font-family: 'Lato', sans-serif;
font-size: 0.95rem;
font-weight: 600;
color: #333;
}
/* Footer Styling */
.properties-footer {
background: #7c6d5c;
color: white;
border-top: none;
padding: 2rem 3rem;
}
.properties-footer-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
}
.footer-contact-info {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.contact-label {
font-family: 'Cormorant Garamond', serif;
font-size: 1.2rem;
font-weight: 600;
}
.contact-details {
font-family: 'Lato', sans-serif;
font-size: 0.95rem;
opacity: 0.9;
}
.properties-close-btn {
background: transparent;
color: white;
border: 2px solid white;
padding: 0.75rem 2rem;
border-radius: 8px;
font-family: 'Lato', sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
}
.properties-close-btn:hover {
background: white;
color: #7c6d5c;
transform: translateY(-2px);
}
/* ===== MOBILE RESPONSIVE: PROPERTIES MODAL ===== */
/* Mobile-first responsive design for properties modal */
@media (max-width: 768px) {
/* Mobile Modal Container */
.properties-modal .modal-dialog {
max-width: 100%;
height: 100vh;
margin: 0;
}
.properties-modal .modal-content {
height: 100vh;
border-radius: 0;
display: flex;
flex-direction: column;
}
/* Mobile Header */
.properties-header {
padding: 1rem 1rem 1rem;
flex-shrink: 0;
}
.properties-header-content {
gap: 0.75rem;
flex-wrap: wrap;
}
.properties-logo {
width: 50px;
height: 50px;
order: 1;
}
.properties-logo-img {
width: 32px;
max-height: 32px;
}
.properties-title-section {
flex: 1;
order: 2;
}
.properties-title-section h2 {
font-size: 1.5rem;
line-height: 1.2;
margin-bottom: 0.25rem;
}
.properties-subtitle {
font-size: 0.85rem;
margin: 0;
}
.properties-close {
order: 3;
font-size: 1.2rem;
margin-left: auto;
}
/* Mobile Body - Scrollable */
.properties-body {
padding: 1.5rem 1rem;
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.properties-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
/* Mobile Property Cards */
.property-card {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(124, 109, 92, 0.1);
}
.property-card:hover {
transform: none; /* Disable hover transform on mobile */
box-shadow: 0 4px 20px rgba(124, 109, 92, 0.15);
}
.property-image-wrapper {
height: 200px;
}
/* Mobile Property Overlay - Always visible for touch */
.property-overlay {
opacity: 1;
background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.6) 100%);
}
.property-details-btn {
transform: translateY(0);
opacity: 1;
padding: 0.6rem 1.5rem;
font-size: 0.8rem;
border-radius: 20px;
}
.property-details-btn:hover {
transform: none;
}
/* Mobile Property Info */
.property-info {
padding: 1.25rem 1rem;
}
.property-name {
font-size: 1.5rem;
margin-bottom: 0.75rem;
}
.property-description {
font-size: 0.9rem;
margin-bottom: 1.25rem;
}
/* Mobile Property Details Grid */
.property-details-grid {
grid-template-columns: 1fr;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.detail-item {
padding: 0.6rem 0.75rem;
}
.detail-icon {
font-size: 1rem;
width: 20px;
}
.detail-label {
font-size: 0.75rem;
}
.detail-value {
font-size: 0.9rem;
}
/* Mobile Footer */
.properties-footer {
padding: 1.25rem 1rem;
flex-shrink: 0;
}
.properties-footer-content {
flex-direction: column;
gap: 1rem;
text-align: center;
align-items: center;
}
.contact-label {
font-size: 1.1rem;
}
.contact-details {
font-size: 0.9rem;
}
.properties-close-btn {
padding: 0.75rem 1.5rem;
font-size: 0.85rem;
border-radius: 6px;
width: 100%;
max-width: 200px;
}
}
/* Small Mobile Responsive */
@media (max-width: 480px) {
.properties-header {
padding: 0.75rem;
}
.properties-title-section h2 {
font-size: 1.3rem;
}
.properties-subtitle {
font-size: 0.8rem;
}
.properties-body {
padding: 1rem 0.75rem;
}
.properties-grid {
gap: 1.25rem;
}
.property-image-wrapper {
height: 180px;
}
.property-info {
padding: 1rem 0.75rem;
}
.property-name {
font-size: 1.3rem;
}
.property-description {
font-size: 0.85rem;
}
.properties-footer {
padding: 1rem 0.75rem;
}
}
/* ===== LOGO IMAGE STYLES ===== */
/* Common styling for logo images that replace FF text */
.parallax-logo-img,
.parallax-form-logo-img,
.ft-monogram-img,
.ex-monogram-img,
.wwj-logo-img,
.footer-logo-img,
.ff-logo-img,
.consultation-logo img,
.projects-logo img,
.testimonials-logo img,
.project-monogram img {
height: 56px; /* Increased from 40px (40% increase) */
width: auto;
object-fit: contain;
filter: brightness(0) invert(1); /* Makes logo white for dark backgrounds */
}
/* Specific adjustments for different sections */
.ft-monogram-img {
height: 151px; /* Increased by 80% from 84px */
filter: brightness(0) saturate(0) contrast(1000%); /* Makes logo black/dark */
opacity: 0.5; /* 50% transparency */
}
.footer-logo-img {
height: 49px; /* Increased from 35px (40% increase) */
filter: brightness(0) saturate(0) contrast(1000%); /* Makes logo black/dark */
}
.ff-logo-img {
height: 42px; /* Increased from 30px (40% increase) */
filter: brightness(0) saturate(0) contrast(1000%); /* Makes logo black/dark */
}
.parallax-form-logo-img {
height: 112px; /* Increased from 80px (40% increase) */
opacity: 0.1;
}
.ex-monogram-img {
height: 70px; /* Increased from 50px (40% increase) */
}
.wwj-logo-img {
height: 63px; /* Increased from 45px (40% increase) */
}
.project-monogram img {
height: 42px; /* Increased from 30px (40% increase) */
filter: brightness(0) invert(1); /* White for project cards */
}
/* Carousel logo images */
.carousel-logo-img {
height: 56px; /* Increased from 40px (40% increase) */
width: auto;
object-fit: contain;
filter: brightness(0) saturate(0) contrast(1000%); /* Makes logo black/dark */
}
.consultation-logo-img,
.projects-logo-img,
.testimonials-logo-img {
height: 49px; /* Increased from 35px (40% increase) */
width: auto;
object-fit: contain;
filter: brightness(0) saturate(0) contrast(1000%); /* Makes logo black/dark */
}
/* Responsive adjustments */
@media (max-width: 768px) {
.parallax-logo-img,
.ft-monogram-img,
.wwj-logo-img {
height: 49px; /* Increased from 35px (40% increase) */
}
.footer-logo-img {
height: 42px; /* Increased from 30px (40% increase) */
}
.parallax-form-logo-img {
height: 84px; /* Increased from 60px (40% increase) */
}
}
/* ===== MOBILE RESPONSIVE: FT-AUTHORITY SECTION ===== */
/* Mobile-first responsive design for testimonials section */
@media (max-width: 768px) {
/* Authority Section Mobile Container */
#ft-authority-section {
min-height: auto;
padding: 3rem 0;
}
#ft-authority-section .ft-container {
padding: 2rem 1rem;
max-width: 100%;
}
/* Mobile Top Section - Stack Vertically */
.ft-top {
display: block;
gap: 0;
}
/* Mobile Left Section - Quote */
.ft-quote {
font-size: 2rem;
line-height: 1.2;
margin-bottom: 1.5rem;
text-align: center;
padding: 0 1rem;
}
.ft-nav {
justify-content: center;
margin-bottom: 3rem;
gap: 0.75rem;
}
.ft-nav-btn {
width: 40px;
height: 40px;
font-size: 1.2rem;
}
/* Mobile Right Section - Testimonials */
.ft-slider {
margin-top: 0;
}
.ft-text {
font-size: 1rem;
line-height: 1.7;
text-align: center;
padding: 0 1rem;
margin-bottom: 1rem;
}
.ft-author {
text-align: center;
margin-bottom: 1.5rem;
font-size: 0.8rem;
}
.ft-view-all {
display: block;
text-align: center;
width: fit-content;
margin: 0 auto 3rem;
padding: 0.75rem 1.5rem;
font-size: 0.8rem;
}
/* Mobile Monogram - Smaller and Positioned */
.ft-monogram {
position: absolute;
top: 25%;
right: 1rem;
transform: translateY(-50%);
font-size: 8rem;
opacity: 0.15;
z-index: 1;
}
/* Mobile Statistics */
.ft-stats-wrapper {
margin-top: 3rem;
padding: 0 1rem;
}
.ft-stats {
animation-duration: 30s; /* Slower on mobile for readability */
}
.ft-stat {
min-width: calc(100vw / 3); /* Show 3 stats at a time on mobile */
padding: 0 1rem;
}
.ft-number {
font-size: 4rem;
}
.ft-stat.center .ft-number {
font-size: 4.5rem;
}
.plus {
font-size: 2.5rem;
margin-left: 2px;
}
.ft-line {
width: 40px;
margin: 0.8rem auto;
}
.ft-label {
font-size: 0.9rem;
letter-spacing: 1px;
line-height: 1.3;
}
}
/* Tablet Responsive */
@media (min-width: 769px) and (max-width: 1024px) {
.ft-quote {
font-size: 2.8rem;
}
.ft-text {
font-size: 1rem;
line-height: 1.8;
}
.ft-number {
font-size: 6rem;
}
.ft-stat.center .ft-number {
font-size: 7rem;
}
.plus {
font-size: 3.5rem;
}
.ft-stat {
min-width: calc(100vw / 4);
}
}
/* Animation for modal entrance */
@keyframes slideInFromTop {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.properties-modal.show .modal-content {
animation: slideInFromTop 0.4s ease-out;
}
/* ====== 3D SHORTS CAROUSEL (match your ref look) ====== */
.YouTubeShortsCarousel3D_root__viTF0{
position: relative;
max-width: 980px;
width: 100%;
outline: none;
padding: 10px 0 0;
}
.YouTubeShortsCarousel3D_track__vvfdl{
position: relative;
height: 520px; /* desktop height */
width: 100%;
perspective: 1200px;
transform-style: preserve-3d;
}
/* Card buttons (so it behaves like your ref HTML) */
.YouTubeShortsCarousel3D_card__I-Iof{
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 510px;
border: 0;
padding: 0;
background: transparent;
cursor: pointer;
border-radius: 18px;
outline: none;
transform-style: preserve-3d;
transition: transform 700ms cubic-bezier(.2,.8,.2,1), filter 700ms cubic-bezier(.2,.8,.2,1);
will-change: transform, filter;
}
.YouTubeShortsCarousel3D_cardInner__wwjg2{
width: 100%;
height: 100%;
border-radius: 18px;
overflow: hidden;
background: rgba(0,0,0,.25);
box-shadow: 0 18px 45px rgba(0,0,0,.45);
}
/* Active card */
.YouTubeShortsCarousel3D_active__gWM4X{
cursor: default;
}
/* Player wrapper */
.YouTubeShortsCarousel3D_player__HkofC{
width: 100%;
height: 100%;
background: #000;
}
/* The iframe itself */
.YouTubeShortsCarousel3D_iframe__JJd\+j{
width: 100%;
height: 100%;
border: 0;
display: block;
background: #000;
}
/* Dots */
.YouTubeShortsCarousel3D_dots__VJzWN{
gap: 10px;
}
.YouTubeShortsCarousel3D_dot__ifvL4{
width: 10px;
height: 10px;
border-radius: 999px;
border: 0;
background: rgba(255,255,255,.35);
transition: transform 250ms ease, background 250ms ease, opacity 250ms ease;
opacity: .9;
}
.YouTubeShortsCarousel3D_dot__ifvL4:hover{
transform: scale(1.15);
background: rgba(255,255,255,.6);
}
.YouTubeShortsCarousel3D_dotActive__QL06j{
background: rgba(255,255,255,.95);
transform: scale(1.2);
}
/* Responsive */
@media (max-width: 991.98px){
.YouTubeShortsCarousel3D_track__vvfdl{ height: 470px; }
.YouTubeShortsCarousel3D_card__I-Iof{ width: 270px; height: 460px; }
}
@media (max-width: 767.98px){
.YouTubeShortsCarousel3D_track__vvfdl{ height: 420px; }
.YouTubeShortsCarousel3D_card__I-Iof{ width: 240px; height: 410px; }
}