/* ============================================
   REAL ESTATE COMPONENTS - COMBINED STYLES
   All Sections: Header + Hero + About + Services + Process + Testimonials + Footer
   ============================================ */

/* ============================================
   GLOBAL FONT
   ============================================ */

* {
  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ============================================
   HEADER STYLES
   ============================================ */

.reai-header-wrapper {
  position: relative;
}

/* Transparent state (default) */
#reaiHeader {
  background-color: transparent;
}

#reaiLogo {
  color: #ffffff;
}

#reaiLogo img {
  transition: opacity 0.3s ease;
}

#reaiLogo span {
  color: inherit;
}

.reai-nav-link {
  color: #ffffff;
}

.reai-nav-link:hover,
.reai-nav-link:active {
  color: #7a432d;
}

.reai-cta-btn {
  background-color: #7a432c;
  color: #ffffff;
}

.reai-cta-btn:hover {
  background-color: #5f3522;
}

#reaiMobileMenuBtn {
  color: #ffffff;
  --tw-ring-color: rgba(255, 255, 255, 0.5);
}

.reai-mobile-link {
  color: #ffffff;
}

.reai-mobile-link:hover,
.reai-mobile-link:active {
  color: #7a432d;
}

.reai-mobile-cta {
  background-color: #7a432c;
  color: #ffffff;
}

/* Scrolled state - applied via JS */
#reaiHeader.reai-scrolled {
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

#reaiHeader.reai-scrolled #reaiLogo {
  color: #54595f;
}

#reaiHeader.reai-scrolled .reai-nav-link {
  color: #54595f;
}

#reaiHeader.reai-scrolled .reai-nav-link:hover,
#reaiHeader.reai-scrolled .reai-nav-link:active {
  color: #7a432d;
}

#reaiHeader.reai-scrolled .reai-cta-btn {
  background-color: #7a432c;
  color: #ffffff;
}

#reaiHeader.reai-scrolled #reaiMobileMenuBtn {
  color: #54595f;
  --tw-ring-color: rgba(122, 67, 44, 0.3);
}

#reaiHeader.reai-scrolled .reai-mobile-link {
  color: #54595f;
}

#reaiHeader.reai-scrolled .reai-mobile-link:hover,
#reaiHeader.reai-scrolled .reai-mobile-link:active {
  color: #7a432d;
}

/* Mobile menu background when open and scrolled */
#reaiHeader.reai-scrolled #reaiMobileMenu {
  background-color: rgba(255, 255, 255, 0.98);
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}


/* ============================================
   HERO SECTION STYLES
   ============================================ */

.reai-hero-wrapper {
  position: relative;
}

/* Hero Section */
#reaiHero {
  position: relative;
  padding-top: 80px; /* Account for fixed header */
}

/* Background Image */
.reai-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.reai-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Primary CTA Button */
.reai-hero-btn-primary {
  background-color: #7a432c;
  color: #ffffff;
  border: 2px solid #7a432c;
}

.reai-hero-btn-primary:hover {
  background-color: #5f3522;
  border-color: #5f3522;
  transform: translateY(-2px);
}

/* Secondary CTA Button */
.reai-hero-btn-secondary {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
  backdrop-filter: blur(10px);
}

.reai-hero-btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
  transform: translateY(-2px);
}

/* Animation classes - removed by JS after animation */
.reai-hero-eyebrow,
.reai-hero-headline,
.reai-hero-subheadline,
.reai-hero-ctas,
.reai-hero-stats,
.reai-scroll-indicator {
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Animated state */
.reai-hero-eyebrow.reai-animate {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.reai-hero-headline.reai-animate {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.reai-hero-subheadline.reai-animate {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

.reai-hero-ctas.reai-animate {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.8s;
}

.reai-hero-stats.reai-animate {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1s;
}

.reai-scroll-indicator.reai-animate {
  opacity: 1;
  transition-delay: 1.2s;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .reai-hero-btn-primary,
  .reai-hero-btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* Parallax effect preparation */
.reai-hero-bg.reai-parallax {
  will-change: transform;
}

/* Improve text readability on different backgrounds */
.reai-hero-headline,
.reai-hero-subheadline {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Optional: Add a gradient overlay from bottom */
#reaiHero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
  z-index: 1;
  pointer-events: none;
}

/* Keep content above gradient */
#reaiHero > .relative {
  z-index: 10;
}


/* ============================================
   ABOUT SECTION STYLES
   ============================================ */

.reai-about-wrapper {
  position: relative;
}

#reaiAbout {
  background-color: #111827; /* Dark background */
}

/* Section Label - Light version for dark backgrounds */
.reai-section-label-dark {
  background-color: rgba(122, 67, 44, 0.2);
  color: #d4a88c;
  border: 1px solid rgba(122, 67, 44, 0.3);
}

/* Section Label - Original for light backgrounds */
.reai-section-label {
  background-color: rgba(122, 67, 44, 0.1);
  color: #7a432c;
  border: 1px solid rgba(122, 67, 44, 0.2);
}

/* Section Title - Dark version */
.reai-section-title-dark {
  color: #ffffff;
}

/* Section Title - Original */
.reai-section-title {
  color: #54595f;
}

/* About Content Text */
.reai-about-content {
  color: #d1d5db;
}

.reai-about-content h3 {
  color: #ffffff;
}

.reai-about-content p {
  color: #9ca3af;
}

/* Decorative Background Element */
.reai-about-decoration {
  background-color: #7a432c;
  opacity: 0.1;
}

/* Profile Image Container */
.reai-about-image-container {
  position: relative;
  background-color: #f5f5f5;
}

/* Achievement Badge */
.reai-badge {
  background-color: #ffffff;
}

.reai-badge-icon {
  color: #7a432c;
}

.reai-badge div:first-child {
  color: #7a432c;
}

/* Mission Box */
.reai-mission-box {
  background-color: rgba(122, 67, 44, 0.15);
  border-left: 4px solid #7a432c;
}

.reai-mission-icon {
  color: #d4a88c;
}

.reai-mission-box h4 {
  color: #ffffff;
}

.reai-mission-box p {
  color: #d1d5db;
}

/* Strength Items */
.reai-strength-item svg {
  color: #7a432c;
}

.reai-strength-item span {
  color: #d1d5db;
}

/* About CTA Button */
.reai-about-cta {
  background-color: #7a432c;
  color: #ffffff;
  border: 2px solid #7a432c;
}

.reai-about-cta:hover {
  background-color: #5f3522;
  border-color: #5f3522;
  transform: translateY(-2px);
}

/* Scroll Animation Classes */
.reai-about-image-wrapper,
.reai-about-content > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reai-about-image-wrapper.reai-fade-in,
.reai-about-content > *.reai-fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .reai-about-decoration {
    display: none;
  }
}

@media (max-width: 640px) {
  .reai-badge {
    bottom: 1rem;
    left: 1rem;
    padding: 0.75rem;
  }
  
  .reai-badge-icon svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}


/* ============================================
   SERVICES SECTION STYLES (3 Cards)
   ============================================ */

.reai-services-wrapper {
  position: relative;
}

#reaiServices {
  background-color: #111827;
}

/* Service Card */
.reai-service-card {
  background-color: #1f2937;
  border: 1px solid rgba(122, 67, 44, 0.1);
}

.reai-service-card:hover {
  border-color: rgba(122, 67, 44, 0.3);
}

/* Service Icon */
.reai-service-icon {
  background-color: #7a432c;
}

/* Card Link */
.reai-card-link {
  color: #d4a88c;
}

.reai-card-link:hover {
  color: #7a432c;
}

/* Animation for service cards */
.reai-service-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, border-color 0.3s ease;
}

.reai-service-card.reai-fade-in {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================
   PROCESS SECTION STYLES (3 Cards with Steps)
   ============================================ */

.reai-process-wrapper {
  position: relative;
}

#reaiProcess {
  background-color: #1f2937;
}

/* Step Badge */
.reai-step-badge {
  background: linear-gradient(135deg, #7a432c 0%, #5f3522 100%);
  color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Process Card */
.reai-process-card {
  position: relative;
}

.reai-process-card .bg-gray-900 {
  border: 1px solid rgba(122, 67, 44, 0.1);
}

.reai-process-card:hover .bg-gray-900 {
  border-color: #7a432c;
}

/* Process Icon */
.reai-process-icon {
  background-color: rgba(122, 67, 44, 0.2);
  color: #d4a88c;
}

/* Connector Line */
.reai-connector {
  top: 2rem;
  z-index: 0;
}

/* Animation for process cards */
.reai-process-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reai-process-card.reai-fade-in {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================
   TESTIMONIALS SECTION STYLES (2 Cards)
   ============================================ */

.reai-testimonials-wrapper {
  position: relative;
}

#reaiTestimonials {
  background-color: #111827;
}

/* Testimonial Card */
.reai-testimonial-card {
  background-color: #1f2937;
  border: 1px solid rgba(122, 67, 44, 0.1);
}

.reai-testimonial-card:hover {
  border-color: rgba(122, 67, 44, 0.3);
}

/* Quote Icon */
.reai-quote-icon {
  background-color: rgba(122, 67, 44, 0.2);
  color: #d4a88c;
}

/* Avatar */
.reai-avatar {
  border: 2px solid #7a432c;
}

/* Animation for testimonial cards */
.reai-testimonial-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, border-color 0.3s ease;
}

.reai-testimonial-card.reai-fade-in {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================
   FOOTER STYLES
   ============================================ */

.reai-footer-wrapper {
  position: relative;
}

#reaiFooter {
  background-color: #111827;
}

/* Social Icons */
.reai-social-icon {
  background-color: rgba(122, 67, 44, 0.2);
  color: #d4a88c;
}

.reai-social-icon:hover {
  background-color: #7a432c;
  color: #ffffff;
  transform: translateY(-2px);
}

/* Footer Links */
.reai-footer-link {
  position: relative;
}

.reai-footer-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #7a432c;
  transition: width 0.3s ease;
}

.reai-footer-link:hover::after {
  width: 100%;
}


/* ============================================
   RESPONSIVE ADJUSTMENTS FOR ALL SECTIONS
   ============================================ */

@media (max-width: 768px) {
  .reai-connector {
    display: none !important;
  }
}