/*
==================================
Advocate Theme Stylesheet
Built by WebLite
==================================

TABLE OF CONTENTS
---------------------------
1.  Setup & General Styles
    - Google Fonts Import
    - Base & Body Styles
    - Custom Colors & Utilities
    - Scroll Behavior & Indicator
2.  Header & Navigation
    - Header v2 (Text Logo Version)
    - Desktop & Mobile Navigation
3.  Page Sections
    - Hero Section (v2)
    - Section Titles
    - About Section
    - Services Section (v2 - Tabs)
    - Testimonials Section (v2 - Slider)
    - Contact Section
4.  Components
    - Buttons (General, Hero, Header CTA)
    - Footer Styles
5.  Animations
    - Keyframes
    - Helper Classes
6.  Misc
    - WebLite Teaser

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

/* 1. SETUP & GENERAL STYLES
----------------------------------*/

/* Base & Body Styles */
body {
    font-family: 'Rubik', sans-serif;
    background-color: #ffffff; /* Use a clean white instead of gray-50 */
}

h1, h2, h3, h4, h5, h6, .font-serif {
    font-family: 'Noto Serif Hebrew', serif;
}

/* Custom Colors */
.bg-charcoal-800 { background-color: #1F2937; }
.text-gold-100 { color: #FDE68A; }
.text-gold-300 { color: #FBBF24; }
.text-gold-500 { color: #ca8a04; }
.text-gold-600 { color: #a16207; }
.bg-gold-500 { background-color: #ca8a04; }
.border-gold-500 { border-color: #ca8a04; }

/* Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* Scroll Indicator */
.scroll-indicator {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background-color: #ca8a04;
    z-index: 100;
    transition: width 0.1s;
}

/* 2. HEADER & NAVIGATION
----------------------------------*/

/* Header v2 Styles (Text Logo Version) */
#main-header {
    background: transparent;
}
#main-header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
}
#main-header nav {
    transition: height 0.3s ease;
}
#main-header.scrolled nav {
    height: 5rem; /* 80px */
}

/* Text Logo Style */
.text-logo {
    font-family: 'Noto Serif Hebrew', serif;
    font-size: 1.75rem; /* text-2xl */
    font-weight: 700;
    color: white;
    transition: color 0.3s ease;
}
#main-header.scrolled .text-logo {
    color: #1F2937; /* charcoal-800 */
}

/* Desktop Navigation Links */
.nav-link {
    padding: 8px 16px;
    color: #E5E7EB; /* gray-200 */
    font-weight: 500;
    border-radius: 6px;
    position: relative;
    transition: all 0.3s ease;
}
#main-header.scrolled .nav-link {
    color: #374151; /* gray-700 */
}
.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}
#main-header.scrolled .nav-link:hover {
    background-color: #f3f4f6; /* gray-100 */
    color: #111827; /* gray-900 */
}

/* Mobile Menu Button (Hamburger) */
#mobile-menu-btn {
    transition: color 0.3s ease;
}
#main-header.scrolled #mobile-menu-btn {
    color: #1F2937; /* charcoal-800 */
}

/* Mobile Menu Content */
.nav-link-mobile {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700;
    color: #D1D5DB;
    transition: color 0.3s ease, transform 0.3s ease;
}
.nav-link-mobile:hover {
    color: #ca8a04;
    transform: scale(1.05);
}


/* 3. PAGE SECTIONS
----------------------------------*/

/* Hero Section v2 */
.hero-section {
    min-height: 95vh;
    display: flex;
    align-items: center;
    background-image: linear-gradient(to right, rgba(17, 24, 39, 0.95), rgba(17, 24, 39, 0.7)), url('../img/hero-background.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding-top: 100px;
    padding-bottom: 40px;
}
.text-highlight {
    color: #FBBF24; /* gold-300 */
}

/* General Section Title Styling */
.section-title .subtitle {
    display: block;
    color: #ca8a04;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}
.section-title .title {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700;
    color: #1F2937; /* charcoal-800 */
}
@media (min-width: 768px) {
    .section-title .title {
        font-size: 3rem; /* text-5xl */
    }
}

/* About Section */
.about-image-wrapper {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
}
.about-image-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0.5rem;
    border: 10px solid white;
    box-shadow: 0 0 0 2px #ca8a04;
    z-index: 1;
}

/* Services Section v2 */
.service-tab-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    text-align: right;
    font-size: 1.125rem;
    font-weight: 700;
    color: #374151;
    background-color: #f9fafb;
    border-radius: 0.5rem;
    border-right: 4px solid transparent;
    transition: all 0.3s ease;
}
.service-tab-item:hover {
    background-color: #f3f4f6;
    color: #1F2937;
}
.service-tab-item.active {
    background-color: #ca8a04;
    color: white;
    border-color: #a16207;
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.service-tab-item .tab-icon {
    transition: transform 0.3s ease;
}
.service-tab-item.active .tab-icon {
    transform: rotate(-10deg) scale(1.1);
}
.service-panel {
    display: none;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #f9fafb;
}
.service-panel.active {
    display: block;
}
.service-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
}
.service-content {
    padding: 2.5rem;
}
/* === Testimonials Section v3.1 Styles (FIXED) === */

.testimonials-bg {
    position: relative;
    background-color: #1F2937; /* charcoal-800 */
    overflow: hidden;
}
.testimonials-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39sbGxVVVVTU1NtbW1paWppampOTk5LS0tJSUl4eHghKsvxAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAKRJREFUOI3FkQkCwzAIBiV2sY67/wzZ+3cvA/AOFYphtxJk5dpr3t4vOaZqOd/vV+r1Lq9Qc+XWA/AD8CPwA/AD8APwA/AD8APwA/AD8APwA/AD8APwA/AD8CPwA/AD8APwA/AD8APwA/AD8APwA/AD8APwA/AD8APwA/AD8APwA/AD8APwA/AD8APwA/AD8APwA/AD8APwA/AD8APwA/AD8APwA/AD8APwA/AD8AL5/wA8dc9+XmBc7iAAAAAElFTSuQmCC');
    opacity: 0.04;
    pointer-events: none;
}

.testimonials-bg-quote {
    position: absolute;
    top: 50%;
    right: -80px; /* Adjusted position */
    transform: translateY(-50%) rotate(5deg);
    font-size: 20rem; /* 320px */
    color: rgba(255, 255, 255, 0.03);
    z-index: 0;
    line-height: 1;
}

.testimonials-slider {
    overflow: hidden; /* This is crucial for Swiper */
}

/* This makes the slides adjust their height to the content */
.swiper-slide {
    height: auto;
}

.testimonial-card-v2 {
    background-color: rgba(55, 65, 81, 0.6); /* gray-700 with opacity */
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 0.75rem; /* rounded-lg */
    height: 100%; /* Makes the card fill the slide's height */
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.testimonial-card-v2 .fa-star {
    margin-left: 0.25rem;
}

.testimonial-nav-btn {
    width: 45px;
    height: 45px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #D1D5DB; /* gray-300 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.testimonial-nav-btn:hover {
    background-color: #ca8a04;
    border-color: #ca8a04;
    color: white;
    transform: scale(1.1);
}
/* Contact Section */
.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #374151;
}
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: white;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    transition: border-color 0.3s ease;
}
.form-input:focus {
    outline: none;
    border-color: #ca8a04;
    box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.3);
}
.contact-info-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.contact-info-icon {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    background-color: #FBBF24;
    color: #a16207;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* 4. COMPONENTS
----------------------------------*/

/* Primary Button */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    background-color: #ca8a04;
    color: white;
    font-weight: 700;
    border-radius: 4px;
    border: 2px solid #ca8a04;
    transition: all 0.3s ease;
}
.btn-primary:hover {
    background-color: #a16207;
    border-color: #a16207;
    transform: translateY(-2px);
}

/* Hero Buttons */
.btn-primary-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    background-color: #ca8a04;
    color: white;
    font-weight: 700;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(202, 138, 4, 0.2);
}
.btn-primary-hero:hover {
    background-color: #a16207;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(202, 138, 4, 0.3);
}
.btn-secondary-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    background-color: transparent;
    color: white;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}
.btn-secondary-hero:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.8);
}

/* Header CTA Button */
.btn-header-cta {
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}
#main-header.scrolled .btn-header-cta {
    background-color: #ca8a04;
    color: white;
    border-color: #ca8a04;
}
.btn-header-cta:hover {
    background-color: white;
    color: #1F2937;
    border-color: white;
    transform: translateY(-2px);
}
#main-header.scrolled .btn-header-cta:hover {
    background-color: #a16207;
    border-color: #a16207;
}

/* Footer Styles */
.footer-link {
    color: #9CA3AF;
    transition: color 0.3s ease;
}
.footer-link:hover {
    color: white;
}
.social-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #4B5563;
    color: #9CA3AF;
    transition: all 0.3s ease;
}
.social-icon:hover {
    background-color: #ca8a04;
    border-color: #ca8a04;
    color: white;
}

/* 5. ANIMATIONS
----------------------------------*/

/* Keyframes */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }

/* Helper Classes */
.animate-fade-in, .animate-fade-in-up, .animate-fade-in-down, .animate-fade-in-left, .animate-fade-in-right {
    opacity: 0;
}
.animate-fade-in.visible {
    opacity: 1;
    animation: fadeIn 0.6s ease-out forwards;
}
.animate-fade-in-down.visible {
    animation: fadeInDown 0.6s ease-out forwards;
}
.animate-fade-in-up.visible {
    animation: fadeInUp 0.6s ease-out forwards;
}
.animate-fade-in-right.visible {
    animation: fadeInRight 0.6s ease-out forwards;
}
.animate-fade-in-left.visible {
    animation: fadeInLeft 0.6s ease-out forwards;
}

/* 6. MISC
----------------------------------*/

/* WebLite Teaser */
.btn-teaser {
  display: inline-flex;
  align-items: center;
  background-color: #fef3c7;
  color: #92400e;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.25rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.btn-teaser:hover {
  background-color: #ffffff;
  color: #78350f;
  box-shadow: 0 4px 10px rgba(251, 191, 36, 0.2);
  transform: scale(1.05);
}
/* === Contact Section v2 Styles === */

.contact-section-v2 {
    background-image: linear-gradient(rgba(249, 250, 251, 0.8), rgba(249, 250, 251, 0.8)), url('https://images.unsplash.com/photo-1516455590571-18256e5bb9ff?q=80&w=2070&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.contact-info-item-v2 {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.contact-section-v2 {
    background-image: linear-gradient(rgba(249, 250, 251, 0.85), rgba(249, 250, 251, 0.85)), url('../img/contact-background.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.contact-info-item-v2.group:hover .contact-info-icon-v2 {
    background-color: #ca8a04;
    color: white;
    transform: scale(1.1);
}

.btn-submit-v2 {
    padding: 0.875rem; /* 14px */
    background-image: linear-gradient(to right, #ca8a04 0%, #FBBF24 50%, #ca8a04 100%);
    background-size: 200% auto;
    color: white;
    font-weight: 700;
    border-radius: 6px;
    transition: all 0.4s ease;
}

.btn-submit-v2:hover {
    background-position: right center; /* change the direction of the change here */
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(202, 138, 4, 0.3);
}

.map-iframe {
    filter: grayscale(1) invert(0.9);
    transition: filter 0.3s ease;
}

.map-iframe:hover {
    filter: grayscale(0) invert(0);
}
/* === WebLite Showcase Section Styles === */

#weblite-showcase {
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.weblite-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-image: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%); /* yellow-50 to yellow-100 */
    border-radius: 1rem; /* rounded-2xl */
    padding: 2.5rem;
    border: 1px solid #fde047; /* yellow-300 */
    box-shadow: 0 10px 25px -5px rgba(202, 138, 4, 0.05);
}

@media (min-width: 768px) {
    .weblite-card {
        flex-direction: row;
        text-align: right;
        align-items: center;
    }
}

.weblite-icon {
    width: 60px;
    height: 60px;
    background-color: #ca8a04; /* gold-500 */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 1rem;
    margin-left: 1.5rem;
}

@media (min-width: 768px) {
    .weblite-icon {
        margin-bottom: 0;
    }
}

.btn-weblite-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.875rem 1.75rem;
    background-color: #a16207; /* gold-600 */
    color: white;
    font-weight: 700;
    border-radius: 0.5rem;
    white-space: nowrap; /*
    transition: all 0.3s ease;
}

.btn-weblite-cta:hover {
    background-color: #1F2937; /* charcoal-800 */
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
/* ===== FIX: Testimonials Title Color ===== */

#testimonials .section-title .title {
    color: #ffffff; /* Sets the title color to white specifically inside the testimonials section */
}