/* =========================

REALTY REACH - BLUE, WHITE & GOLDEN THEME

Modified from original structure with Logo side alignment

========================= */

:root {

/* Primary Colors */

--primary-blue: #DC143C;

--secondary-blue: #DC143C;

--accent-blue: #DC143C;

--primary-golden: #f59e0b;

--secondary-golden: #d97706;

--light-golden: #fbbf24;

/* Neutral Colors */

--white: #ffffff;

--light-gray: #f8fafc;

--medium-gray: #e2e8f0;

--dark-gray: #64748b;

--text-dark: #1f2937;

--text-medium: #374151;

--text-light: #6b7280;

/* Gradients */

--gradient-primary: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));

--gradient-golden: linear-gradient(135deg, var(--primary-golden), var(--secondary-golden));

--gradient-hero: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 50%, var(--primary-golden) 100%);

/* Spacing and Typography */

--container-max-width: 1200px;

--section-padding: 4rem 0;

--card-padding: 2rem;

--font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

/* Shadows */

--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);

--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);

--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);

--shadow-golden: 0 4px 15px rgba(245, 158, 11, 0.3);

--radius-sm: 0.375rem;

--radius-md: 0.5rem;

--radius-lg: 0.75rem;

--radius-xl: 1rem;

}

/* Reset */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html {

scroll-behavior: smooth;

}

body {

font-family: var(--font-family);

line-height: 1.6;

color: var(--text-dark);

background-color: var(--white);

}

.container {

max-width: var(--container-max-width);

margin: 0 auto;

padding: 0 1rem;

}

/* Typography */

h1, h2, h3, h4, h5, h6 {

font-weight: 700;

line-height: 1.2;

color: var(--text-dark);

margin-bottom: 1rem;

}

h1 {

font-size: 3rem;

background: var(--gradient-primary);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

}

h2 {

font-size: 2rem;

color: var(--primary-blue);

}

h3 {

font-size: 1.5rem;

color: var(--text-dark);

}

p {

margin-bottom: 1rem;

color: var(--text-medium);

}

.section-subtitle {

font-size: 1.125rem;

color: var(--text-light);

text-align: center;

margin-bottom: 3rem;

}

/* Buttons */

.btn {

display: inline-block;

padding: 0.75rem 1.5rem;

border: none;

border-radius: var(--radius-md);

font-weight: 600;

text-decoration: none;

text-align: center;

cursor: pointer;

transition: all 0.3s ease;

font-size: 1rem;

line-height: 1;

}

.btn--primary {

background: var(--gradient-primary);

color: var(--white);

box-shadow: var(--shadow-md);

}

.btn--primary:hover {

background: var(--gradient-golden);

box-shadow: var(--shadow-golden);

transform: translateY(-2px);

}

.btn--outline {

background: transparent;

color: var(--primary-blue);

border: 2px solid var(--primary-blue);

}

.btn--outline:hover {

background: var(--primary-blue);

color: var(--white);

transform: translateY(-2px);

}

.btn--lg {

padding: 1rem 2rem;

font-size: 1.125rem;

}

.btn--full-width {

width: 100%;

}

/* Navigation with Logo side-by-side */

.navbar {

background: rgba(255, 255, 255, 0.95);

backdrop-filter: blur(10px);

position: fixed;

top: 0;

width: 100%;

z-index: 1000;

padding: 1rem 0;

box-shadow: var(--shadow-sm);

border-bottom: 1px solid var(--medium-gray);

}

.navbar .container {

display: flex;

justify-content: space-between;

align-items: center;

}

/* Logo and brand name side by side */

.nav-brand {

display: flex;

align-items: center;

gap: 0.75rem;

height: 35px;

cursor: pointer;

transition: transform 0.3s ease;

}

.nav-brand:hover {

transform: scale(1.02);

}

.brand-logo {

height: 80px;

width: auto;

object-fit: contain;

transition: all 0.3s ease;

}

.brand-logo:hover {

filter: brightness(1.1);

}

.nav-brand h2 {

color: var(--primary-blue);

margin: 0;

font-size: 1.75rem;

font-weight: 700;

transition: color 0.3s ease;

}

.nav-brand:hover h2 {

color: var(--primary-golden);

}

.nav-menu {

display: flex;

gap: 2rem;

}

.nav-link {

color: var(--text-medium);

text-decoration: none;

font-weight: 500;

transition: color 0.3s ease;

position: relative;

}

.nav-link:hover {

color: var(--primary-blue);

}

.nav-link::after {

content: '';

position: absolute;

bottom: -5px;

left: 0;

width: 0;

height: 2px;

background: var(--gradient-golden);

transition: width 0.3s ease;

}

.nav-link:hover::after {

width: 100%;

}

.nav-toggle {

display: none;

flex-direction: column;

cursor: pointer;

}

.nav-toggle span {

width: 25px;

height: 3px;

background: var(--primary-blue);

margin: 3px 0;

transition: 0.3s;

}

/* Hero Section */

.hero {

background: var(--gradient-hero);

color: var(--white);

padding: 8rem 0 6rem;

margin-top: 80px;

position: relative;

overflow: hidden;

}

.hero::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: url('data:image/svg+xml,') no-repeat center center;

background-size: cover;

}

.hero-content {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 4rem;

align-items: center;

position: relative;

z-index: 1;

}

.hero-text h1 {

color: var(--white);

background: none;

-webkit-text-fill-color: var(--white);

margin-bottom: 1.5rem;

}

.hero-text p {

font-size: 1.125rem;

color: rgba(255, 255, 255, 0.9);

margin-bottom: 2rem;

}

.cta-main {

background: var(--gradient-golden);

font-size: 1.25rem;

padding: 1.25rem 2.5rem;

box-shadow: var(--shadow-golden);

}

.cta-main:hover {

background: var(--white);

color: var(--primary-blue);

transform: translateY(-3px);

}

/* Lead Form */

.hero-form-container {

display: flex;

justify-content: center;

}

.lead-form {

background: rgba(255, 255, 255, 0.95);

backdrop-filter: blur(10px);

padding: 2.5rem;

border-radius: var(--radius-xl);

box-shadow: var(--shadow-lg);

width: 100%;

max-width: 400px;

}

.lead-form h3 {

color: var(--primary-blue);

text-align: center;

margin-bottom: 1.5rem;

}

.google-signin-btn {

display: flex;

align-items: center;

justify-content: center;

gap: 0.5rem;

padding: 0.875rem;

border: 2px solid var(--medium-gray);

border-radius: var(--radius-md);

background: var(--white);

color: var(--text-medium);

cursor: pointer;

transition: all 0.3s ease;

margin-bottom: 1rem;

}

.google-signin-btn:hover {

border-color: var(--primary-blue);

color: var(--primary-blue);

box-shadow: var(--shadow-md);

}

.form-divider {

text-align: center;

color: var(--text-light);

margin: 1.5rem 0;

position: relative;

}

.form-divider::before {

content: '';

position: absolute;

top: 50%;

left: 0;

right: 0;

height: 1px;

background: var(--medium-gray);

}

.form-divider {

background: rgba(255, 255, 255, 0.95);

padding: 0 1rem;

position: relative;

z-index: 1;

}

.form-group {

margin-bottom: 1.5rem;

}

.form-label {

display: block;

margin-bottom: 0.5rem;

font-weight: 600;

color: var(--text-dark);

}

.form-control {

width: 100%;

padding: 0.875rem;

border: 2px solid var(--medium-gray);

border-radius: var(--radius-md);

font-size: 1rem;

transition: border-color 0.3s ease;

background: var(--white);

}

.form-control:focus {

outline: none;

border-color: var(--primary-blue);

box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

}

.error-message {

color: #ef4444;

font-size: 0.875rem;

margin-top: 0.25rem;

display: none;

}

.privacy-text {

display: flex;

align-items: center;

gap: 0.5rem;

font-size: 0.875rem;

color: var(--text-light);

margin-top: 1rem;

text-align: center;

justify-content: center;

}

.privacy-text svg {

color: var(--primary-golden);

}

/* Services Section */

.services {

padding: var(--section-padding);

background: var(--light-gray);

}

.services h2 {

text-align: center;

margin-bottom: 1rem;

}

.services-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

gap: 2rem;

margin-top: 3rem;

}

.service-card {

background: var(--white);

padding: var(--card-padding);

border-radius: var(--radius-lg);

box-shadow: var(--shadow-md);

transition: all 0.3s ease;

border-top: 4px solid var(--primary-blue);

position: relative;

overflow: hidden;

}

.service-card::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

height: 4px;

background: var(--gradient-golden);

transform: scaleX(0);

transition: transform 0.3s ease;

}

.service-card:hover::before {

transform: scaleX(1);

}

.service-card:hover {

transform: translateY(-5px);

box-shadow: var(--shadow-lg);

}

.service-icon {

display: inline-flex;

align-items: center;

justify-content: center;

width: 80px;

height: 80px;

background: var(--gradient-primary);

color: var(--white);

border-radius: 50%;

margin-bottom: 1.5rem;

}

.service-card h3 {

color: var(--primary-blue);

margin-bottom: 1rem;

}

.service-card ul {

list-style: none;

margin: 1.5rem 0;

}

.service-card ul li {

padding: 0.5rem 0;

color: var(--text-medium);

position: relative;

padding-left: 1.5rem;

}

.service-card ul li::before {

content: '✓';

position: absolute;

left: 0;

color: var(--primary-golden);

font-weight: bold;

}

/* TESTIMONIALS - GOOGLE REVIEWS STYLING */

.testimonials {

padding: var(--section-padding);

background: var(--light-gray);

}

.testimonials h2 {

text-align: center;

font-size: 2.5rem;

color: var(--primary-blue);

margin-bottom: 1rem;

}

.section-subtitle {

text-align: center;

font-size: 1.1rem;

color: var(--text-light);

margin-bottom: 3rem;

}

.testimonials-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

gap: 2rem;

margin-bottom: 3rem;

}

/* Google Review Cards */

.testimonial-card.google-review {

background: var(--white);

border-radius: 12px;

padding: 1.5rem;

box-shadow: var(--shadow-md);

transition: transform 0.3s ease, box-shadow 0.3s ease;

border: 1px solid var(--medium-gray);

position: relative;

}

.testimonial-card.google-review:hover {

transform: translateY(-5px);

box-shadow: var(--shadow-lg);

}

/* Review Header */

.testimonial-header {

display: flex;

justify-content: space-between;

align-items: flex-start;

margin-bottom: 1rem;

}

.reviewer-info {

display: flex;

align-items: center;

gap: 0.75rem;

}

.reviewer-avatar {

width: 40px;

height: 40px;

border-radius: 50%;

object-fit: cover;

border: 2px solid var(--medium-gray);

}

.reviewer-details h4 {

font-size: 1rem;

font-weight: 600;

color: var(--text-dark);

margin: 0 0 0.25rem 0;

}

.review-rating {

display: flex;

align-items: center;

gap: 0.5rem;

}

.stars {

display: flex;

gap: 2px;

}

.star {

color: #ddd;

font-size: 1rem;

}

.star.filled {

color: #ffc107;

}

.review-date {

font-size: 0.85rem;

color: var(--text-light);

}

.google-logo {

width: 20px;

height: 20px;

opacity: 0.7;

}

/* Review Content */

.testimonial-content {

margin-bottom: 1.5rem;

}

.testimonial-content p {

font-size: 1rem;

line-height: 1.6;

color: var(--text-medium);

margin: 0;

font-style: italic;

}

/* View on Google Button */

.view-on-google {

display: flex;

align-items: center;

gap: 0.5rem;

font-size: 0.9rem;

padding: 0.5rem 1rem;

border: 1px solid #4285f4;

color: #4285f4;

background: transparent;

border-radius: var(--radius-md);

transition: all 0.3s ease;

cursor: pointer;

text-decoration: none;

}

.view-on-google:hover {

background: #4285f4;

color: var(--white);

transform: translateY(-1px);

}

.view-on-google svg {

transition: transform 0.3s ease;

}

.view-on-google:hover svg {

transform: scale(1.1);

}

/* Google Profile CTA */

.google-profile-cta {

text-align: center;

padding: 2rem;

background: var(--white);

border-radius: 12px;

box-shadow: var(--shadow-md);

border: 2px solid #4285f4;

}

.google-profile-cta p {

font-size: 1.1rem;

color: var(--text-dark);

margin-bottom: 1rem;

font-weight: 500;

}

.google-profile-cta .btn {

display: inline-flex;

align-items: center;

gap: 0.5rem;

font-size: 1rem;

padding: 0.75rem 1.5rem;

}

.testimonial-card {

background: var(--light-gray);

padding: var(--card-padding);

border-radius: var(--radius-lg);

position: relative;

box-shadow: var(--shadow-sm);

transition: all 0.3s ease;

}

.testimonial-card:hover {

box-shadow: var(--shadow-md);

transform: translateY(-3px);

}

.quote-icon {

color: var(--primary-golden);

margin-bottom: 1rem;

}

.testimonial-content p {

font-style: italic;

font-size: 1.125rem;

color: var(--text-dark);

margin-bottom: 1.5rem;

}

.testimonial-author {

color: var(--primary-blue);

font-weight: 600;

}

/* Blog Section */

.blog {

padding: var(--section-padding);

background: var(--light-gray);

}

.blog h2 {

text-align: center;

margin-bottom: 3rem;

}

.blog-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

gap: 2rem;

}

.blog-card {

background: var(--white);

border-radius: var(--radius-lg);

overflow: hidden;

box-shadow: var(--shadow-md);

transition: all 0.3s ease;

}

.blog-card:hover {

transform: translateY(-5px);

box-shadow: var(--shadow-lg);

}

.blog-content {

padding: var(--card-padding);

}

.blog-content h3 {

color: var(--primary-blue);

margin-bottom: 1rem;

}

.blog-content p {

margin-bottom: 1.5rem;

}

/* Contact Section */

.contact {

padding: var(--section-padding);

background: var(--white);

}

.contact h2 {

text-align: center;

margin-bottom: 3rem;

}

.contact-content {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 4rem;

align-items: start;

}

.contact-info h3 {

color: var(--primary-blue);

margin-bottom: 1.5rem;

}

.contact-item {

display: flex;

align-items: center;

gap: 1rem;

margin-bottom: 1rem;

color: var(--text-medium);

}

.contact-item svg {

color: var(--primary-golden);

}

.contact-form {

background: var(--light-gray);

padding: var(--card-padding);

border-radius: var(--radius-lg);

}

/* Floating Elements */

.whatsapp-btn {

position: fixed;

bottom: 2rem;

right: 2rem;

z-index: 999;

}

.whatsapp-link {

display: flex;

align-items: center;

justify-content: center;

width: 60px;

height: 60px;

background: #25d366;

color: var(--white);

border-radius: 50%;

box-shadow: var(--shadow-lg);

transition: all 0.3s ease;

text-decoration: none;

}

.whatsapp-link:hover {

background: #20b358;

transform: scale(1.1);

box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);

}

/* Chatbot */

.chatbot-toggle {

position: fixed;

bottom: 2rem;

left: 2rem;

z-index: 999;

width: 60px;

height: 60px;

background: var(--gradient-primary);

color: var(--white);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

cursor: pointer;

box-shadow: var(--shadow-lg);

transition: all 0.3s ease;

}

.chatbot-toggle:hover {

background: var(--gradient-golden);

transform: scale(1.1);

}

.chatbot-widget {

position: fixed;

bottom: 5rem;

left: 2rem;

width: 350px;

height: 500px;

background: var(--white);

border-radius: var(--radius-lg);

box-shadow: var(--shadow-lg);

z-index: 998;

display: none;

flex-direction: column;

overflow: hidden;

}

.chatbot-widget.active {

display: flex;

}

.chatbot-header {

background: var(--gradient-primary);

color: var(--white);

padding: 1rem;

display: flex;

justify-content: space-between;

align-items: center;

font-weight: 600;

}

.chatbot-close {

background: none;

border: none;

color: var(--white);

font-size: 1.5rem;

cursor: pointer;

}

.chatbot-messages {

flex: 1;

padding: 1rem;

overflow-y: auto;

background: var(--light-gray);

}

.bot-message {

background: var(--white);

padding: 0.75rem;

border-radius: var(--radius-md);

margin-bottom: 1rem;

box-shadow: var(--shadow-sm);

}

.chatbot-input {

display: flex;

padding: 1rem;

border-top: 1px solid var(--medium-gray);

}

.chatbot-input input {

flex: 1;

padding: 0.75rem;

border: 1px solid var(--medium-gray);

border-radius: var(--radius-md);

margin-right: 0.5rem;

}

.chatbot-input button {

background: var(--gradient-primary);

color: var(--white);

border: none;

padding: 0.75rem 1rem;

border-radius: var(--radius-md);

cursor: pointer;

}

/* Modals */

.modal {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.5);

z-index: 2000;

display: flex;

align-items: center;

justify-content: center;

backdrop-filter: blur(5px);

opacity: 0;

visibility: hidden;

transition: all 0.3s ease;

}

.modal:not(.hidden) {

opacity: 1;

visibility: visible;

}

.modal-content {

background: var(--white);

border-radius: var(--radius-lg);

box-shadow: var(--shadow-lg);

max-width: 600px;

width: 90%;

max-height: 80vh;

overflow-y: auto;

transform: translateY(20px);

transition: transform 0.3s ease;

}

.modal:not(.hidden) .modal-content {

transform: translateY(0);

}

.modal-header {

padding: 1.5rem;

border-bottom: 1px solid var(--medium-gray);

display: flex;

justify-content: space-between;

align-items: center;

}

.modal-header h3 {

color: var(--primary-blue);

margin: 0;

}

.modal-close {

background: none;

border: none;

font-size: 1.5rem;

cursor: pointer;

color: var(--text-light);

}

.modal-body {

padding: 1.5rem;

}

.modal-footer {

padding: 1.5rem;

border-top: 1px solid var(--medium-gray);

text-align: right;

}

/* Utility Classes */

.hidden {

display: none !important;

}

.text-center {

text-align: center;

}

/* Responsive Design */

@media (max-width: 968px) {

.hero-content {

grid-template-columns: 1fr;

gap: 2rem;

text-align: center;

}

.contact-content {

grid-template-columns: 1fr;

gap: 2rem;

}

.services-grid {

grid-template-columns: 1fr;

}

.hero {

padding: 6rem 0 4rem;

}

h1 {

font-size: 2.5rem;

}

}

@media (max-width: 768px) {

.nav-menu {

display: none;

position: fixed;

top: 80px;

left: 0;

width: 100%;

background: var(--white);

flex-direction: column;

padding: 2rem;

box-shadow: var(--shadow-lg);

}

.nav-menu.active {

display: flex;

}

.nav-toggle {

display: flex;

}

/* Mobile logo adjustments */

.brand-logo {

height: 40px;

}

.nav-brand h2 {

font-size: 1.5rem;

}

.nav-brand {

gap: 0.5rem;

}

.hero {

padding: 4rem 0 3rem;

}

h1 {

font-size: 2rem;

}

.lead-form {

padding: 1.5rem;

}

.services-grid {

grid-template-columns: 1fr;

}

.blog-grid {

grid-template-columns: 1fr;

}

.testimonials-grid {

grid-template-columns: 1fr;

gap: 1.5rem;

}

.testimonial-card.google-review {

padding: 1.25rem;

}

.google-profile-cta {

padding: 1.5rem;

}

.chatbot-widget {

width: calc(100vw - 2rem);

left: 1rem;

right: 1rem;

}

:root {

--section-padding: 3rem 0;

--card-padding: 1.5rem;

}

}

@media (max-width: 480px) {

.testimonial-header {

flex-direction: column;

gap: 1rem;

}

.google-logo {

align-self: flex-end;

}

.view-on-google {

width: 100%;

justify-content: center;

}

.reviewer-info {

width: 100%;

}

}

/* Print Styles */

@media print {

.navbar,

.whatsapp-btn,

.chatbot-toggle,

.chatbot-widget,

.modal {

display: none !important;

}

body {

background: white !important;

color: black !important;

}

.hero {

background: white !important;

color: black !important;

}

}