/* ===== main.css ===== */
/**
 * Main Styles - Avraham Theme
 *
 * @package Avraham_Theme
 */

/* ========================================
   CSS Variables
   ======================================== */
   :root {
    /* Colors */
    --color-primary: #153C6D !important;
    --color-primary-dark: #0e2a4d;
    --color-primary-light: #1e4f8a;
    --color-secondary: #D6885B !important;
    --color-secondary-dark: #c06f42;
    --color-secondary-light: #e4a57d;

    /* Neutrals */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    /* Accent Colors */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;

    /* Typography */
    --font-primary: 'Noto Sans Hebrew', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-secondary: 'Noto Sans Hebrew', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Font Sizes - Fluid Typography */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
    --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
    --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
    --text-5xl: clamp(3rem, 2.25rem + 3.75vw, 4rem);

    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Container */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1400px;
    --container-3xl: 1600px;
    --container-padding: clamp(1rem, 3vw, 2rem);

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    --transition-slower: 500ms ease;

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;

    /* Header */
    --header-height: 80px;
    --header-height-mobile: 70px;
}

/* ========================================
   Reset & Base Styles
   ======================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Remove the grey/blue tap-highlight box browsers draw on touch around
       links/buttons (the "frame" seen around the menu icon and the submenu
       toggles). */
    -webkit-tap-highlight-color: transparent;
}

/* Hide the focus ring for mouse/touch interaction, but keep it for keyboard
   users (accessibility) via :focus-visible. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
    outline: none;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: clip; /* clip (not hidden) so position:sticky still works */
    width: 100%;
    max-width: 100vw;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    color: var(--color-gray-800);
    background-color: #fff;
    direction: rtl;
    text-align: right;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip; /* clip (not hidden) so position:sticky still works */
    width: 100%;
    max-width: 100vw;
    position: relative;
}

/* RTL Support */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* Focus Styles — no visible focus ring on links/buttons/toggles. iOS Safari
   applies :focus-visible after tapping JS toggles (e.g. the mobile-menu
   "תחומי עיסוק" item), which showed an orange frame that looked like a bug.
   Form fields keep their own focus styling (see contact-form-section.css). */
:focus-visible {
    outline: none;
}

/* Prevent iOS zoom on input focus */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Links */
a {
    color: var(--color-gray-800, #1f2937);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-secondary);
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Lists */
ul, ol {
    list-style: none;
}

/* Buttons */
button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* ========================================
   Typography
   ======================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--color-gray-900);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
    margin-bottom: var(--space-4);
}

p:last-child {
    margin-bottom: 0;
}

/* ========================================
   Layout
   ======================================== */
.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    /* flex: 1; */
    margin-top: var(--header-height);
}

@media (max-width: 768px) {
    .site-main {
        margin-top: var(--header-height-mobile);
    }
}

.container {
    width: 100%;
    max-width: var(--container-2xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }
.container-xl { max-width: var(--container-xl); }

/* ========================================
   Buttons
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: var(--leading-none);
    text-decoration: none;
    border-radius: var(--radius-lg);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.btn:focus-visible {
    outline: none;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-white);
    border-color: var(--color-secondary);
}

.btn-secondary:hover {
    background-color: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
    color: var(--color-white);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
}

.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
}

.btn-block {
    display: flex;
    width: 100%;
}

/* ========================================
   Icons
   ======================================== */
.icon {
    display: inline-block;
    width: auto;
    height: auto;
    vertical-align: middle;
    fill: currentColor;
}

/* ========================================
   Utility Classes
   ======================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.hidden { display: none !important; }
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* ========================================
   Animations
   ======================================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Sticky quick actions
   -------------------------------------------------------------- */
.sticky-actions {
    position: fixed;
    left: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
    pointer-events: auto;
}

.sticky-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    max-width: 117px;
    padding: 10px 7px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    text-decoration: none;
    color: inherit;
    gap: 8px;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.sticky-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

.sticky-action-icon {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.sticky-action-label {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    text-align: center;
}

@media (max-width: 768px) {
    .sticky-actions {
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: row;
        gap: 0;
        background: #fff;
        /* padding: 6px 0 env(safe-area-inset-bottom); */
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12);
    }

    .sticky-action {
        flex: 1 1 0;
        border-radius: 0;
        min-width: 0;
        box-shadow: none;
        padding: 4px 6px;
        gap: 8px;
        border-right: none;
    }

    .sticky-action:last-child {
        border-right: none;
    }

    .sticky-action-icon {
        width: 30px;
        height: 30px;
    }

    .sticky-action-label {
        font-size: 13px;
    }
}

.animate-fadeIn { animation: fadeIn var(--transition-base) ease forwards; }
.animate-fadeInUp { animation: fadeInUp var(--transition-slow) ease forwards; }
.animate-fadeInDown { animation: fadeInDown var(--transition-slow) ease forwards; }

/* Entry/scroll reveal animations are disabled — every section's content shows
   instantly and uniformly. The fade/slide-in reveal made the page appear to
   load in stages ("uneven loading"), so these elements are forced visible. */
.about-content,
.about-extended-description,
.about-image-desktop,
.blog-section-header,
.blog-tabs-wrapper,
.blog-content-wrapper,
.feature-item,
.faq-section-content,
.faq-section-accordion,
.services-grid-header,
.services-grid-item,
.reviews-section-header,
.reviews-tabs-wrapper,
.reviews-content-wrapper,
.stats-header,
.stat-item,
.stats-cta,
.success-stories-header,
.success-stories-tabs-wrapper,
.success-stories-content-wrapper,
.success-stories-cta,
.team-section-title,
.team-slider,
.video-section-title,
.video-section-description,
.video-section-button-wrapper,
.video-section-embed,
.why-choose-title,
.why-choose-feature,
.why-choose-button-wrapper,
.contact-form-content,
.contact-form-image {
    opacity: 1 !important;
    transform: none !important;
}

/* Re-enable animation only after JS marks the body as ready */
body.animations-ready .about-content,
body.animations-ready .about-image-desktop,
body.animations-ready .blog-section-header,
body.animations-ready .blog-tabs-wrapper,
body.animations-ready .blog-content-wrapper,
body.animations-ready .feature-item,
body.animations-ready .faq-section-content,
body.animations-ready .faq-section-accordion,
body.animations-ready .services-grid-header,
body.animations-ready .services-grid-item,
body.animations-ready .reviews-section-header,
body.animations-ready .reviews-tabs-wrapper,
body.animations-ready .reviews-content-wrapper,
body.animations-ready .stats-header,
body.animations-ready .stat-item,
body.animations-ready .stats-cta,
body.animations-ready .success-stories-header,
body.animations-ready .success-stories-tabs-wrapper,
body.animations-ready .success-stories-content-wrapper,
body.animations-ready .success-stories-cta,
body.animations-ready .team-section-title,
body.animations-ready .team-slider,
body.animations-ready .video-section-title,
body.animations-ready .video-section-description,
body.animations-ready .video-section-button-wrapper,
body.animations-ready .video-section-embed,
body.animations-ready .why-choose-title,
body.animations-ready .why-choose-feature,
body.animations-ready .why-choose-button-wrapper,
body.animations-ready .contact-form-content,
body.animations-ready .contact-form-image {
    opacity: 1 !important;
    transform: none !important;
}

/* ========================================
   Service Category Archive
   ======================================== */
.service-archive {
    background: transparent;
    color: #1b1b1b;
}

.service-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(0, 3vw, 32px) var(--container-padding, 24px);
}

.service-archive-hero {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(32px, 5vw, 64px);
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
}

.service-archive-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 75%);
}

.service-hero-overlay { display: none; }

.service-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 780px;
}

.service-hero-text {
    max-width: 720px;
}

.service-hero-title {
    font-size: clamp(32px, 4vw, 46px);
    margin: 0 0 10px;
    font-weight: 800;
    color: #fff;
}

.service-hero-desc {
    margin: 0;
    font-size: clamp(15px, 2vw, 18px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}

.service-archive-intro {
    padding: clamp(28px, 4vw, 48px) 0;
    padding-bottom: 0;
}

.service-intro-inner {
    text-align: center;
    margin-bottom: 2rem;
}

.service-intro-title {
    font-size: clamp(26px, 3.5vw, 34px);
    margin: 0 0 12px;
    color: var(--color-gray-800, #1f2937);
}

.service-intro-desc {
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    color: #4c4c4c;
}

.service-archive-grid {
    padding: clamp(0, 4vw, 64px) 0;
}

.service-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: clamp(20px, 3vw, 32px);
}

.service-archive-empty {
    padding: clamp(48px, 6vw, 96px) 0;
    text-align: center;
}

.service-archive-empty p {
    font-size: 18px;
    color: #666;
    margin: 0;
}

.service-archive-slider {
    padding: clamp(12px, 3vw, 28px) 0 clamp(32px, 4vw, 48px);
}

.service-slider {
    position: relative;
    /* clip horizontally (hide off-screen slides) but let card shadows/lift show vertically */
    overflow-x: clip;
    overflow-y: visible;
}

.service-slider-track {
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;
    transition: transform 0.4s ease;
    will-change: transform;
}

.service-card {
    min-width: min(263px, 100%);
    position: relative;
    display: block;
    /* border-radius: 16px; */
    overflow: hidden;
    box-shadow: 0 18px 34px rgba(0,0,0,0.08);
    /* border: 1px solid rgba(0,0,0,0.04); */
    color: white;
    text-decoration: none;
    background: #000;
}

.service-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f0f0f0;
    overflow: hidden;
    min-height: 19rem;
}

.service-card-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.service-card-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, #f7f2ec 0%, #e7dfd3 100%);
}

.service-card-line {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, #F6B38D 0%, #F9B26B 100%);
    z-index: 100;
}

.service-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px;
    /* background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.55) 70%); */
    color: #fff;
    gap: 8px;
    background: linear-gradient(180deg, rgba(33, 56, 68, 0.00) 0%, rgba(33, 56, 68, 0.90) 100%);
}

.service-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    color: white;
    text-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

.service-card-excerpt {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255,255,255,0.9);
}

.service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    padding: 8px 0;
}

.service-card:hover .service-card-image img {
    transform: scale(1.05);
}

.service-slider-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.service-nav-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid #1f1f1f;
    background: transparent;
    color: #1f1f1f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.2s ease;
    /* The ❮ / ❯ glyphs point the wrong way in RTL — mirror them. */
    transform: scaleX(-1);
}

.service-nav-btn:hover:not(.disabled):not(:disabled) {
    background: #1f1f1f;
    color: #fff;
}

.service-nav-btn.disabled,
.service-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.service-archive-content {
    /* padding: clamp(24px, 4vw, 48px) 0 clamp(40px, 6vw, 72px); */
}

.service-term-content {
    /* background: #fff; */
    border-radius: 16px;
    padding: clamp(20px, 3vw, 32px);
    /* box-shadow: 0 18px 36px rgba(0,0,0,0.07); */
    line-height: 1.8;
}

.service-term-content h2,
.service-term-content h3,
.service-term-content h4 {
    margin: 24px 0 12px;
    color: var(--color-gray-800, #1f2937);
}

.service-term-empty {
    margin: 0;
    color: #666;
}

@media (max-width: 1024px) {
    .service-archive-hero {
        min-height: 320px;
    }
}
.archive  .contact-form-section {

    margin-top: 3rem;
}
@media (max-width: 768px) {
    .service-archive-hero {
        background-image: var(--hero-image-mobile, var(--hero-image));
        padding: 32px 20px 40px;
    }

    .service-hero-title {
        font-size: clamp(26px, 6vw, 32px);
    }

    .service-hero-text {
        max-width: none;
    }

    .service-slider-track {
        gap: 16px;
    }

    .service-card {
        min-width: 58vw;
    }

    .service-grid-wrapper {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .service-archive-grid {
        padding: 32px 0;
    }
}
/* Cream pages: homepage, about (521), blog (523), team (844), contact (526) */
body.home,
body.page-id-521,
body.page-id-523,
body.page-id-844,
body.page-id-526 {
    background-color: #FAF2ED;
}

body.home .faq-section,
body.home .video-section,
body.home .about-section.about-bg-cream,
body.home .features-section.features-bg-cream,
body.home .blog-section,
body.home .team-section,
body.home .reviews-section,
body.page-id-521 .faq-section,
body.page-id-521 .video-section,
body.page-id-521 .about-section.about-bg-cream,
body.page-id-521 .features-section.features-bg-cream,
body.page-id-521 .blog-section,
body.page-id-521 .team-section,
body.page-id-521 .reviews-section,
body.page-id-523 .faq-section,
body.page-id-523 .video-section,
body.page-id-523 .about-section.about-bg-cream,
body.page-id-523 .features-section.features-bg-cream,
body.page-id-523 .blog-section,
body.page-id-523 .team-section,
body.page-id-523 .reviews-section {
    background: #FAF2ED !important;
}

section.page-intro {
   background: transparent;
}

/* Contact page (526): the page now has a unified page-intro title ("יצירת קשר"),
   so hide the in-section header that used to duplicate it. */
body.page-id-526 .contact-map-header {
   display: none;
}

.flexible-page {
   background: transparent;
   position: relative;
}

section.page-intro {
   text-align: center;
   /* Uniform across every page (matches the מאמרים reference) so the main title sits
      the same on contact / about / team / blog. */
   padding: 90px var(--container-padding) 0;
}

@media (max-width: 768px) {
   section.page-intro {
      padding: 48px var(--container-padding) 0;
   }
}

/* ========================================
   Unified Breadcrumb (single source of truth)
   Used on all page / single / taxonomy templates.
   ======================================== */
.page-breadcrumb {
    position: static;
    max-width: var(--container-3xl, 1600px);
    margin: 0 auto;
    padding: 16px var(--container-padding, 24px);
    font-size: 0.9rem;
    z-index: 1;
}

.page-breadcrumb-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.page-breadcrumb .breadcrumb-link,
.page-breadcrumb a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease;
}

.page-breadcrumb .breadcrumb-link:hover,
.page-breadcrumb a:hover {
    color: var(--color-secondary, #D6885B);
}

.page-breadcrumb .breadcrumb-separator {
    display: inline-flex;
    align-items: center;
    color: rgba(0, 0, 0, 0.45);
}

.page-breadcrumb .breadcrumb-current {
    color: rgba(0, 0, 0, 0.55);
}
.page-id-514 .story-card{
  visibility: visible;
}
@media (min-width: 768px) {
  .tax-service-category .service-archive-hero {
    min-height: 150px !important;
    padding-bottom: unset !important;
}
  .tax-service-category .service-archive-slider {
    margin-top: 5rem !important;
}
.tax-service-category    .service-archive-slider {
        margin-top: 1rem !important;
    }
.service-term-content {

    max-width: 940px;
    margin: 0 auto;
}
}
.single-content ul {

    list-style: disc;
}
/* ========================================
   Sample Text Page (Accessibility Statement)
   ======================================== */
.sample-text-page {
    background: transparent;
    min-height: 100vh;
    padding: clamp(80px, 10vw, 120px) 0 clamp(48px, 6vw, 80px);
    position: relative;
}

.sample-text-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--container-padding, 24px);
}

.sample-text-title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800;
    color: var(--color-gray-800, #1f2937);
    margin: 0 0 clamp(24px, 4vw, 40px);
    text-align: center;
}

.sample-text-content {
    background: transparent;
    line-height: 1.9;
    font-size: clamp(15px, 1.8vw, 17px);
    color: #333;
}

.sample-text-content p {
    margin-bottom: 1.25em;
}

.sample-text-content h4 {
    font-size: clamp(18px, 2.5vw, 22px);
    font-weight: 700;
    color: var(--color-gray-800, #1f2937);
    margin: 2em 0 0.75em;
}

.sample-text-content h4:first-child {
    margin-top: 0;
}

.sample-text-content ul {
    list-style: disc;
    padding-right: 1.5em;
    margin: 1em 0 1.5em;
}

.sample-text-content ul li {
    margin-bottom: 0.5em;
}

.sample-text-content ul li p {
    margin: 0;
}

.sample-text-content strong {
    font-weight: 700;
    color: #1a1a1a;
}

.sample-text-content a {
    color: var(--color-gray-800, #1f2937);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sample-text-content a:hover {
    color: var(--color-secondary, #D6885B);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .contact-map-form-title {
    font-size: clamp(24px, 1.4vw, 26px) !important;

}
    .sample-text-page {
        padding-top: clamp(30px, 8vw, 80px);
    }

    .sample-text-inner {
        padding-top: 0;
    }

    .sample-text-title {
        text-align: right;
    }

    .sample-text-content ul {
        padding-right: 1.25em;
    }
}
.single-service .single-date{
  display: none;
}
.sticky-actions {
    /* Slide fully off-screen — translateY(100%) alone left ~16px peeking on
       desktop because the bar sits at bottom:16px, so we add that offset. */
    transform: translateY(calc(100% + 32px));
    transition: transform 0.35s ease;
}

.sticky-actions.visible {
    transform: translateY(0);
}

body.mobile-menu-open .sticky-actions {
    transform: translateY(100%) !important;
}

@media (max-width: 768px) {
  .header-actions .header-social{
    display: flex !important;
    gap: unset !important;
  }
  .header-cta{
    display: none;
  }
  .sticky-actions {
    flex-direction: row;
    justify-content: space-around;
  }
}

/* ============================================================
   Mobile: inner-pages carousel — tighter hero gap, full-bleed
   (no side margins), smaller cards (see .service-card 58vw).
   ============================================================ */
@media (max-width: 768px) {
    .service-archive-hero {
        min-height: 240px;
        padding-bottom: 24px;
    }

    .tax-service-category .service-archive-slider {
        margin-top: 0.25rem !important;
    }

    .service-archive-slider {
        padding-top: 8px;
        /* Full-bleed: span the whole viewport, no side margins. */
        width: 100vw;
        max-width: none;
        margin-inline: calc(50% - 50vw);
    }

    .service-archive-slider .service-container {
        padding-inline: 0;
    }
}

/* (Desktop hero-bullets spacing moved to hero.css — it loads after main.css,
   so a rule here was overridden by hero.css's own list styles.) */

/* ===== header.css ===== */
/**
 * Header Styles - Avraham Theme
 *
 * @package Avraham_Theme
 */

/* ========================================
   Site Header
   ======================================== */
   .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    background-color: var(--color-white);
    transition: all var(--transition-base);
}

.site-header.scrolled {
    box-shadow: var(--shadow-lg);
}

.header-wrapper {
    position: relative;
    /* Keep dropdown panels anchored to the header */
    overflow: visible;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    max-width: var(--container-3xl);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* ========================================
   Logo (Right side in RTL)
   ======================================== */
.header-logo {
    flex-shrink: 0;
    order: 1;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-image {
    height: 55px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

.logo-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: var(--color-primary);
}

.logo-name {
    font-family: var(--font-primary);
    font-size: 1.75rem;
    font-weight: var(--font-bold);
    letter-spacing: 0.2em;
    line-height: 1;
    color: var(--color-primary);
}

.logo-tagline {
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
    color: var(--color-primary);
    margin-top: var(--space-1);
}

/* ========================================
   Desktop Navigation (Center)
   ======================================== */
.header-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    order: 2;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu > li {
    position: relative;
    flex: 0 0 auto;
}

.nav-menu > li > a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-gray-700);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.nav-menu > li > a:hover,
.nav-menu > li.current-menu-item > a{
    color: var(--color-primary);
    background-color: var(--color-gray-100);
}

/* Menu Arrow - plain chevron (no disc) */
.menu-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Hug the label and pull the item's edge in a touch — the arrow made the gap to
       the next menu item ("דיני-תעבורה") look larger than the others. */
    margin-inline-start: -2px;
    margin-inline-end: -6px;
    color: currentColor;
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.menu-arrow svg {
    width: 14px;
    height: 14px;
}

.nav-menu > li:hover > a .menu-arrow,
.nav-menu > li:focus-within > a .menu-arrow {
    transform: rotate(180deg);
    color: var(--color-primary);
}

/* Dropdown Menu - Simple Design */
.nav-menu .sub-menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 50%;
    transform: translate(-50%, 10px);
    min-width: 200px;
    width: max-content;
    padding: var(--space-2) 0;
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-gray-200);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
    z-index: var(--z-dropdown);
    display: block;
    list-style: none;
    margin: 0;
}

.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu,
.nav-menu .sub-menu.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.nav-menu .sub-menu .sub-menu {
    position: absolute;
    top: 0;
    right: 100%;
    margin-right: var(--space-2);
    min-width: 180px;
    width: max-content;
    padding: var(--space-2) 0;
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-gray-200);
    display: block;
}

.nav-menu .sub-menu li {
    margin: 0;
    padding: 0;
}

.nav-menu .sub-menu li a {
    display: block;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-medium, 500);
    color: var(--color-gray-700);
    text-decoration: none;
    transition: all var(--transition-fast);
    border: none;
    background: transparent;
    box-shadow: none;
}

.nav-menu .sub-menu li a:hover {
    color: var(--color-primary);
    background-color: var(--color-gray-50);
}

.nav-menu .sub-menu .sub-menu li a {
    padding: var(--space-2) var(--space-4);
    color: var(--color-gray-600);
}

.nav-menu .sub-menu .sub-menu li a:hover {
    color: var(--color-primary);
    background-color: var(--color-gray-50);
}

/* ========================================
   Header Actions (Left side - Social + CTA)
   ======================================== */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
    order: 3;
}

/* Social Icons */
.header-social {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

/* Keep the social icon at its original 20px size. An inline <svg> in a flex
   parent ignores its width/height attributes and stretches to fill the link,
   so it (and the <img> fallback) is constrained explicitly here. */
.social-link svg,
.social-link img {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.social-link.social-whatsapp {
    color: #25d366;
    background-color: transparent;
}

.social-link.social-whatsapp:hover {
    /* background-color: #25d366; */
    color: var(--color-white);
    transform: translateY(-2px);
}

.social-link.social-facebook {
    color: #1877f2;
    background-color: transparent;
}

.social-link.social-facebook:hover {
    /* background-color: #1877f2; */
    color: var(--color-white);
    transform: translateY(-2px);
}

.social-link.social-instagram {
    color: #e4405f;
    background-color: transparent;
}

.social-link.social-instagram:hover {
    /* background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); */
    color: var(--color-white);
    transform: translateY(-2px);
}

.social-link.social-tiktok {
    color: #000000;
    background-color: transparent;
}

.social-link.social-tiktok:hover {
    /* background-color: #000000; */
    color: var(--color-white);
    transform: translateY(-2px);
}

.social-link.social-linkedin {
    color: #0a66c2;
    background-color: transparent;
}

.social-link.social-linkedin:hover {
    background-color: #0a66c2;
    color: var(--color-white);
    transform: translateY(-2px);
}

.social-link.social-youtube {
    color: #ff0000;
    background-color: transparent;
}

.social-link.social-youtube:hover {
    background-color: #ff0000;
    color: var(--color-white);
    transform: translateY(-2px);
}

/* Header CTA Button */
.header-cta {
    padding: 1rem 2rem;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 3rem;
    transition: all var(--transition-fast);
}

a.header-cta.btn.btn-primary {}

.header-cta:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ========================================
   Mobile Menu Toggle
   ======================================== */
.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    z-index: calc(var(--z-modal) + 1);
}

.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    position: relative;
}

.hamburger-line {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-primary);
    border-radius: 2px;
    transition: all var(--transition-fast);
}

.hamburger-line:nth-child(1) {
    position: absolute;
    top: 5px;
}

.hamburger-line:nth-child(2) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.hamburger-line:nth-child(3) {
    position: absolute;
    bottom: 5px;
}

/* Hamburger Active State */
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

/* ========================================
   Mobile Menu
   ======================================== */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 320px;
    height: 100vh;
    background-color: var(--color-white);
    z-index: var(--z-modal);
    overflow-y: auto;
    transition: right var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-2xl);
}

.mobile-menu.is-active {
    right: 0;
}

.mobile-menu-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: var(--space-4) var(--space-6) var(--space-6);
}

.mobile-menu-header {
    display: flex;
    justify-content: flex-start;
    margin-bottom: var(--space-3);
}

.mobile-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--color-primary);
    background-color: transparent;
    border: none;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.mobile-menu-close:hover {
    background-color: var(--color-gray-100);
}

/* Mobile Navigation */
.mobile-nav {
    /* flex: 1; */
}

.mobile-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav-menu li {
    border-bottom: 1px solid var(--color-gray-200);
    position: relative;
    padding: 0 var(--space-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.mobile-nav-menu li:last-child {
    border-bottom: none;
}

.mobile-nav-menu li a {
    display: block;
    padding: var(--space-4) 0;
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    color: var(--color-gray-800);
    text-decoration: none;
    transition: color var(--transition-fast);
}

/* Top-level link fills the row so the dropdown arrow sits at the far edge */
.mobile-nav-menu > li > a {
    flex: 1 1 auto;
}

.mobile-nav-menu li a:hover,
.mobile-nav-menu li.current-menu-item a {
    color: var(--color-primary);
}

/* Mobile Sub Menu */
.mobile-nav-menu .sub-menu {
    display: none;
    flex: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    border-radius: 0;
    flex-wrap: wrap;
}

.mobile-nav-menu li.open > .sub-menu {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.mobile-nav-menu .sub-menu li {
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
    border-bottom: none;
    padding: 0;
}

.mobile-nav-menu .sub-menu li a {
    font-size: var(--text-base);
    padding: unset;
    color: var(--color-gray-600);
    /* margin-bottom: 1rem; */
}

.mobile-sub-toggle {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
}

.mobile-sub-toggle::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--color-gray-700);
    border-bottom: 2px solid var(--color-gray-700);
    transform: rotate(45deg);
    transition: transform var(--transition-fast);
}

.mobile-nav-menu li.open > .mobile-sub-toggle::after {
    transform: rotate(-135deg);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile Social */
.mobile-social {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-6) 0;
    border-top: 1px solid var(--color-gray-200);
    margin-top: unset;
}

.mobile-social .social-link {
    width: 48px;
    height: 48px;
    background-color: var(--color-gray-100);
}

/* Mobile CTA */
.mobile-cta {
    padding-top: var(--space-4);
}

.mobile-cta .btn {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--text-base);
    border-radius: 100px;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    z-index: calc(var(--z-modal) - 1);
    transition: all var(--transition-base);
}

.mobile-menu-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   Responsive - Tablet
   ======================================== */
@media (max-width: 1024px) {
    .header-nav {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
        order: 4;
    }

    .header-social {
        display: none;
    }
}

/* ========================================
   Responsive - Mobile
   ======================================== */
@media (max-width: 768px) {
    .mobile-nav {
        flex: unset !important;
    }
    .header-container {
        height: var(--header-height-mobile);
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    /* Burger menu back on the right */
    .mobile-menu-toggle {
        order: 0;
    }

    /* Logo centred-right as a normal flex item — it can no longer overlap the
       social links because flex items never overlap each other. */
    .header-logo {
        order: 1;
        position: static;
        left: auto;
        right: auto;
        transform: none;
    }

    /* Social links on the left */
    .header-actions {
        order: 2;
    }

    .logo-image {
        height: 38px;
    }

    .logo-name {
        font-size: 1.25rem;
    }

    .logo-tagline {
        display: none;
    }

    .header-cta {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-xs);
    }
}

@media (max-width: 480px) {
    .header-cta {
        padding: var(--space-2) var(--space-3);
    }

    .mobile-menu {
        max-width: 100%;
    }

    .logo-image {
        height: 34px;
        margin-top: 0.3rem;
    }
}

/* ========================================
   Body Lock (when mobile menu is open)
   ======================================== */
body.mobile-menu-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/* When the drawer is open, hide the burger toggle so the only visible close
   control is the X inside the drawer (otherwise the burger-turned-X plus the
   drawer X show two X buttons). */
body.mobile-menu-open .mobile-menu-toggle {
    opacity: 0;
    pointer-events: none;
}

/* ===== footer.css ===== */
/* Footer Styles */
.site-footer {
    background-color: #153C6D; /* Dark blue background */
    color: #ffffff;
    padding: 60px 0 30px;
    font-family: var(--font-primary); /* match the rest of the site (Heebo wasn't loaded) */
}

.footer-container {
    /* max-width: 1305px; */
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    max-width: 100%;
    max-width: 1400px;
}

/* Footer Top Section - Menu Left, Logo & Social Right (Column) */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 50px;
    gap: 60px;
    width: 100%;
}

/* Logo and Social Column (Right side, stacked vertically) */
.footer-logo-social-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    /* flex-shrink: 0; */
    flex: 0 0 24%;
}

/* Logo Section */
.footer-logo-section {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-direction: row-reverse; /* RTL: Logo image on right, text on left */
}

.footer-logo-wrapper {
    flex-shrink: 0;
}

.footer-logo {
    max-width: 234px;
    height: auto;
}

/* Fallback Logo */
.footer-logo-fallback {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
}

.logo-a {
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    color: #153C6D;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 24px;
    border-radius: 4px;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-jan {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
}

.logo-office {
    font-size: 10px;
    color: #ffffff;
    margin-top: 2px;
}

.footer-office-name {
    display: flex;
    flex-direction: column;
}

.footer-office-title {
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 5px 0;
    color: #ffffff;
}

.footer-attorney-name {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
}

/* Social Media Section */
.footer-social-section {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.footer-social-section .social-link {
    width: 48px;
    height: 48px;
}

.footer-social-section .social-link img,
.footer-social-section .social-link svg {
    width: 28px;
    height: 28px;
}

.social-media-icons {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-direction: row; /* Icons in a row */
}

.social-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: transform 0.3s ease, opacity 0.3s ease;
    text-decoration: none;
}

.social-icon:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.social-icon svg {
    width: 28px;
    height: 28px;
}

.social-tiktok {
    /* background-color: #000000; */
    color: #ffffff;
}

.social-instagram {
    /* background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); */
    color: #ffffff;
}

.social-facebook {
    /* background-color: #1877f2; */
    color: #ffffff;
}

.social-whatsapp {
    /* background-color: #25d366; */
    color: #ffffff;
}

/* Menu Section */
.footer-menu-section {
    flex: 1; /* Take remaining space on left */
}

.footer-top .footer-menu-section {
    margin-bottom: 0; /* No margin when inside footer-top */
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.footer-menu-grid {
    display: flex;
    flex-direction: row;
    gap: 40px;
    flex: 1;
    width: 100%;
}

.footer-menu-column {
    display: flex;
    flex-direction: column;
}

.footer-menu-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 20px 0;
    color: #ffffff;
}

.footer-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: clamp(44px, 4vw, 72px);
}

.footer-menu-list li {
    margin-bottom: 0;
}

.footer-menu-list a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    transition: opacity 0.3s ease;
    display: block;
}

.footer-menu-list a:hover {
    opacity: 0.7;
}

/* WordPress Menu Support */
.footer-menu-column ul.menu,
.footer-menu-column .menu,
.footer-menu-column .footer-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: clamp(44px, 4vw, 72px);
}

.footer-menu-column ul.menu li,
.footer-menu-column .menu li,
.footer-menu-column .footer-menu-list li {
    margin-bottom: 0;
}

.footer-menu-column ul.menu li a,
.footer-menu-column .menu li a,
.footer-menu-column .footer-menu-list li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: opacity 0.3s ease;
    display: block;
}

.footer-menu-column ul.menu li a:hover,
.footer-menu-column .menu li a:hover,
.footer-menu-column .footer-menu-list li a:hover {
    opacity: 0.7;
}

/* Sub-menu styles */
.footer-menu-column ul.menu > li > .sub-menu,
.footer-menu-column .menu > li > .sub-menu,
.footer-menu-column .footer-menu-list > li > .sub-menu {
    margin-top: 8px;
    /* margin-right: 15px; */
    /* padding-right: 15px; */
    /* border-right: 1px solid rgba(255, 255, 255, 0.2); */
    list-style: none;
}

.footer-menu-column ul.menu > li > .sub-menu li,
.footer-menu-column .menu > li > .sub-menu li,
.footer-menu-column .footer-menu-list > li > .sub-menu li {
    margin-bottom: 8px;
}

.footer-menu-column ul.menu > li > .sub-menu a,
.footer-menu-column .menu > li > .sub-menu a,
.footer-menu-column .footer-menu-list > li > .sub-menu a {
    font-size: 15px;
    opacity: 1;
    font-weight: 300;
}

/* Copyright Section */
.footer-bottom {
    padding-top: 20px;
    text-align: center;
}

.footer-copyright {
    margin: 0;
}

.copyright-text {
    font-size: 14px;
    color: #ffffff;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.copyright-separator {
    opacity: 0.5;
}

.footer-credit-link {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(255, 255, 255, 0.4);
    transition: text-decoration-color 0.2s ease;
}

.footer-credit-link:hover {
    color: #ffffff;
    text-decoration-color: rgba(255, 255, 255, 0.8);
}

/* Mobile Styles */
@media (max-width: 768px) {
    .site-footer {
        padding: 40px 0 20px;
    }

    .footer-container {
        padding: 0 20px;
    }

    /* Mobile: Logo first, then social, then menu */
    .footer-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 30px;
        gap: 25px;
    }

    .footer-logo-social-column {
        align-items: center;
        width: 100%;
        gap: 0;
        margin-bottom: 2rem;
    }

    .footer-logo-section {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .footer-social-section {
        justify-content: center;
    }

    .footer-logo-wrapper {
        margin-bottom: 15px;
    }

    .footer-office-name {
        align-items: center;
    }

    .footer-social-section {
        order: 2;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .social-media-icons {
        justify-content: center;
    }

    /* Menu Accordion on mobile */
    .footer-menu-section {
        margin-bottom: 30px;
        flex-direction: column;
        width: 100%;
    }

    .footer-top .footer-menu-section {
        display: block;
    }

    .footer-menu-grid {
        display: block;
        width: 100%;
    }

    .footer-menu-column {
        text-align: right;
        width: 100%;
    }

    .footer-menu-column .footer-menu-list {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .footer-menu-column .footer-menu-list > li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .footer-menu-column .footer-menu-list > li:last-child {
        border-bottom: none;
    }

    .footer-menu-column .footer-menu-list > li > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 0;
        font-size: 16px;
        font-weight: 600;
        width: 100%;
    }

    .footer-menu-column .footer-menu-list > li.menu-item-has-children > a::after {
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        border-left: 2px solid rgba(255, 255, 255, 0.7);
        border-bottom: 2px solid rgba(255, 255, 255, 0.7);
        transform: rotate(-45deg);
        transition: transform 0.3s ease;
        flex-shrink: 0;
    }

    .footer-menu-column .footer-menu-list > li.menu-item-has-children.footer-accordion-open > a::after {
        transform: rotate(135deg);
    }

    .footer-menu-column ul.menu > li > .sub-menu,
    .footer-menu-column .footer-menu-list > li > .sub-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }

    .footer-menu-column ul.menu > li.footer-accordion-open > .sub-menu,
    .footer-menu-column .footer-menu-list > li.footer-accordion-open > .sub-menu {
        max-height: 600px;
        padding-bottom: 10px !important;
    }

    .footer-menu-column ul.menu > li > .sub-menu li,
    .footer-menu-column .footer-menu-list > li > .sub-menu li {
        margin-bottom: 0;
    }

    .footer-menu-column ul.menu > li > .sub-menu a,
    .footer-menu-column .footer-menu-list > li > .sub-menu a {
        padding: 8px 0;
        font-size: 14px;
        font-weight: 400;
        display: block;
        text-align: right;
    }

    .footer-menu-title {
        margin-bottom: 15px;
    }

    /* Copyright */
    .footer-bottom {
        padding-top: 15px;
    }

    .copyright-text {
        flex-direction: column;
        gap: 5px;
    }

    .copyright-separator {
        display: none;
    }
}

/* Tablet Styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .footer-menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .footer-top {
        flex-wrap: wrap;
    }
}


/* ===== hero.css ===== */
/**
 * Hero Section Styles
 *
 * @package Avraham_Theme
 */

/* ==========================================================================
   Hero Section Base
   ========================================================================== */

   .hero-section {
    position: relative;
    min-height: 684px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background-color: var(--color-primary);
}

/* Background */
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.hero-bg-picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* object-position: center; */
}

/* Container */
.hero-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    justify-content: space-between;
    width: 100%;
    max-width: var(--container-3xl);
    margin: 0 auto;
    padding: 3rem var(--container-padding);
    gap: var(--space-8);
}

/* ==========================================================================
   Hero Content (Right Side in RTL)
   ========================================================================== */

.hero-content {
    flex: 1;
    max-width: 600px;
    padding: 0;
}

/* Small Text */
.hero-small-text {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: var(--space-3);
    opacity: 0.9;
    letter-spacing: 0.02em;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.20);
    padding: 0.5rem 1rem;
}

/* Title */
.hero-title {
    font-size: clamp(1.2rem, 5vw, 3.1rem);
    font-weight: 300;
    line-height: 1.2;
    color: var(--color-white);
    margin-bottom: var(--space-6);
}

.hero-title span.highlight,
.hero-title strong {
    color: var(--color-secondary);
}

/* Features List */
.hero-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    align-items: flex-start;
}

.hero-feature-item {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: var(--space-2);
    color: var(--color-white);
    font-size: var(--text-base);
}

.hero-feature-item .feature-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-feature-item .feature-icon svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.hero-feature-item .feature-text {
    font-weight: 400;
}

.hero-feature-item .feature-text b,
.hero-feature-item .feature-text strong {
    font-weight: 700;
}

/* CTA Button */
.hero-cta-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background-color: var(--color-white);
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition-base);
    /* flex: 0 0 100%; */
    margin-bottom: 5rem;
}

.hero-cta-button:hover {
    background-color: #F6B38D;
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

/* .hero-cta-button svg {
    transition: transform var(--transition-base);
    transform: scaleX(-1);
} */

.hero-cta-button:hover svg {
    /* transform: scaleX(-1) translateX(-4px); */
    color: white;
    fill: white;
}

/* Google Reviews */
.hero-google-reviews {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    /* background-color: var(--color-white); */
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    border-radius: 18px;
    border: 1px solid #FFF;
    border-radius: 18px;
    border: 1px solid #FFF;
}

.google-stars-image {
    height: 15px;
    width: auto;
}

.google-stars {
    display: flex;
    flex-direction: row;
    gap: 2px;
}

.google-stars svg {
    width: 16px;
    height: 16px;
}

.google-info {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: var(--space-2);
    color: var(--color-gray-700);
    font-size: var(--text-sm);
    margin-bottom: 0.3rem;
}

.google-rating {
    font-weight: 700;
    color: var(--color-gray-900);
    font-size: var(--text-base);
}

.google-text {
    color: white;
    font-size: var(--text-sm);
}

.google-icon {
    width: 45px;
    height: auto;
}

/* ==========================================================================
   Services Panel (Left Side)
   ========================================================================== */

.hero-services-panel {
    flex-shrink: 0;
    width: 410px;
    background-color: var(--color-white);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-height: calc(100vh - var(--header-height) - var(--space-16));
    overflow-y: auto;
}

/* Mobile Services Panel - Hidden on desktop, shown on mobile */
.hero-services-panel-mobile {
    display: none;
    width: 100%;
    background-color: var(--color-white);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    padding: var(--space-6);
    flex-direction: column;
    gap: var(--space-5);
    margin: 0 auto;
    max-width: var(--container-3xl);
}

/* Panel Title */
.panel-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-gray-800, #1f2937);
    margin: 0;
    padding-bottom: var(--space-4);
    /* border-bottom: 1px solid var(--color-gray-200); */
}

/* Panel Categories */
.panel-categories {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.panel-category {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.category-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-gray-800, #1f2937);
    margin: 0;
}

.category-view-all {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.category-view-all:hover {
    color: var(--color-secondary-dark);
}

.category-view-all svg {
    transition: transform var(--transition-fast);
}

.category-view-all:hover svg {
    transform: translateX(-3px);
}

/* Category Items Grid */
.category-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background-color: var(--color-gray-50);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition-fast);
    text-align: center;
    background: rgba(231, 202, 186, 0.24);
}

.category-item:hover {
    background-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.category-item .item-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    transition: filter var(--transition-fast);
}

.category-item:hover .item-icon {
    filter: brightness(0) invert(1);
}

.category-item .item-text {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-gray-700);
    line-height: 1.3;
    transition: color var(--transition-fast);
}

.category-item:hover .item-text {
    color: var(--color-white);
}

/* Panel Bottom Links */
.panel-bottom-links {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-gray-200);
}

.bottom-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.bottom-link:hover {
    transform: translateY(-2px);
}

.bottom-link-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    padding: var(--space-2);
    background-color: var(--color-gray-100);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.bottom-link:hover .bottom-link-icon {
    background-color: var(--color-primary);
    filter: brightness(0) invert(1);
}

.bottom-link-text {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-gray-600);
    transition: color var(--transition-fast);
}

.bottom-link:hover .bottom-link-text {
    color: var(--color-primary);
}

/* Panel Contact Button */
.panel-contact-button {
    border-radius: 100px !important;
    background: #153C6D;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.panel-contact-button:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.panel-contact-button svg {
    transition: transform var(--transition-fast);
}

.panel-contact-button:hover svg {
    transform: translateX(-3px);
}

/* Quick Actions */
.panel-quick-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: auto;
}

.quick-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    text-decoration: none;
    font-size: var(--text-xs);
    font-weight: 600;
    transition: all var(--transition-base);
}

.quick-action.whatsapp-action {
    background-color: #25D366;
    color: var(--color-white);
}

.quick-action.whatsapp-action:hover {
    background-color: #128C7E;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.quick-action.phone-action {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.quick-action.phone-action:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Tablet Landscape */
@media (max-width: 1200px) {
    .hero-container {
        padding: 3rem var(--space-6);
    }
    
    .hero-services-panel {
        width: 340px;
        padding: var(--space-5);
    }
    
    .hero-content {
        max-width: 500px;
    }
    
    .hero-title {
        font-size: clamp(1.75rem, 4vw, 2.75rem);
    }
}

/* Tablet Portrait */
@media (max-width: 992px) {
    .hero-section {
        min-height: 700px;
        position: relative;
    }
    
    .hero-container {
        flex-direction: column;
        padding: calc(var(--header-height) + var(--space-6)) var(--space-6) calc(var(--space-16) + var(--space-8));
        gap: var(--space-6);
    }
    
    .hero-content {
        max-width: 100%;
        text-align: center;
        padding: var(--space-6) 0;
        align-items: center;
    }
    
    .hero-features-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: var(--space-4);
    }
    
    .hero-feature-item {
        flex-direction: column;
        text-align: center;
        gap: var(--space-1);
    }
    
    .hero-feature-item .feature-icon {
        order: 0;
    }
    
    .hero-feature-item .feature-text {
        font-size: var(--text-xs);
    }
    
    .hero-cta-button {
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Hide services panel on tablet/mobile */
    .hero-services-panel {
        display: none;
    }
    
    /* Hide mobile services panel on tablet */
    .hero-services-panel-mobile {
        display: none;
    }
    
    /* Google reviews - absolute position at bottom */
    .hero-google-reviews {
        position: absolute;
        bottom: var(--space-6);
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .hero-content {
   
        align-items: center !important;
    }
    
    .hero-section {
        min-height: 82vh;
        /* padding-bottom: var(--space-20); */
    }
    
    .hero-container {
        padding: calc(var(--header-height-mobile) + var(--space-4)) var(--space-4) var(--space-4);
        gap: var(--space-4);
    }
    
    .hero-content {
        padding: var(--space-4) 0;
        align-items: center;
    }
    
    .hero-small-text {
        font-size: var(--text-xs);
    }
    
    .hero-title {
        font-size: clamp(1.5rem, 6vw, 2rem);
        margin-bottom: var(--space-4);
        text-align: center;
    }
    
    .hero-features-list {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: var(--space-3);
        margin-bottom: var(--space-4);
        width: 100%;
    }
    
    .hero-feature-item {
        flex-direction: column;
        text-align: center;
        font-size: 1.1rem;
        gap: var(--space-1);
        /* flex: 1; */
        max-width: 120px;
    }
    
    .hero-feature-item .feature-icon {
        order: 0;
    }
    
    .hero-feature-item .feature-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .hero-feature-item .feature-text {
        font-size: 11px;
        line-height: 1.3;
    }
    
    .hero-cta-button {
        padding: var(--space-3) var(--space-10);
        font-size: var(--text-sm);
        margin-bottom: 0;
        margin-top: 1rem;
    }
    
    /* Google reviews - absolute at bottom */
    .hero-google-reviews {
        position: absolute;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        flex-wrap: nowrap;
        padding: var(--space-2) var(--space-4);
        gap: var(--space-2);
        /* white-space: nowrap; */
        width: max-content;
    }
    
    .google-icon {
        width: 40px;
        height: 40px;
    }
    
    .google-info {
        font-size: var(--text-xs);
    }
    
    .google-rating {
        font-size: var(--text-sm);
    }
    
    .google-stars svg {
        width: 14px;
        height: 14px;
    }
    
    /* Services Panel - Hidden on mobile */
    .hero-services-panel {
        display: none;
    }
    
    /* Mobile Services Panel - Show on mobile */
    .hero-services-panel-mobile {
        /* background: red; */
        padding: 1rem !important;
        display: flex;
        padding: var(--space-4);
        margin: var(--space-4) auto;
        width: 94%;
        margin-bottom: 1rem;
        box-shadow: unset !important;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .hero-container {
        padding: 1rem 1rem;
        /* height: 81vh; */
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-features-list {
        gap: unset !important;
    }
    
    .hero-feature-item {
        max-width: 100px;
        width: 100%;
        flex: 0 0 37.3% !important;
        min-width: 7rem;
    }
    
    .hero-feature-item .feature-text {
        font-size: 11px;
        order: 1;
        line-height: 1.5;
    }
    
    .hero-google-reviews {
        padding: var(--space-2) var(--space-4);
        background: #FFFFFF;
    }
    
    .google-text {
        font-size: 14px;
        color: #000;
    }
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-content {
    /* entry animation removed — hero shows instantly (no staged fade-in) */
    display: flex;
    flex-direction: column;
    align-items: start;
}

.hero-services-panel {
    /* entry animation removed — was opacity:0 then fade-in (looked like a load glitch) */
    animation: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-content,
    .hero-services-panel {
        animation: none;
    }
    
    .hero-cta-button:hover,
    .category-item:hover,
    .bottom-link:hover,
    .quick-action:hover {
        transform: none;
    }
}

.hero-cta-button:hover svg path {
    color: white;
    fill: white;
}
/* ============================================================
   Desktop: tighter spacing between the three hero bullets.
   Lives HERE (not main.css) because hero.css loads later and its
   base .hero-features-list rule would override anything earlier.
   ============================================================ */
@media (min-width: 993px) {
    .hero-features-list {
        gap: 0;
    }

    .hero-feature-item {
        line-height: 1.35;
    }
}

/* ===== features.css ===== */
/**
 * Features Section Styles
 *
 * @package Avraham_Theme
 */

/* ==========================================================================
   Features Section Base
   ========================================================================== */

   .features-section {
    position: relative;
    padding: var(--space-6) 0;
    background-color: #FEF6F0;
}

/* Background Color Variants */
.features-section.features-bg-white {
    background-color: var(--color-white);
}

.features-section.features-bg-light {
    background-color: var(--color-gray-50);
}

.features-section.features-bg-cream {
    background-color: unset;
}

.features-section.features-bg-primary {
    background-color: #153C6D;
}

.features-section.features-bg-primary .feature-title,
.features-section.features-bg-primary .feature-description {
    color: var(--color-white);
}

.features-section.features-bg-primary .feature-item:not(:last-child)::after {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Container - No horizontal padding */
.features-container {
    width: 100%;
    max-width: var(--container-3xl);
    margin: 0 auto;
    padding: 0;
}

/* ==========================================================================
   Features Grid - Desktop (4 columns)
   ========================================================================== */

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

/* ==========================================================================
   Feature Item
   ========================================================================== */

.feature-item {
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.feature-item.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Vertical divider line between items (not after last) */
.feature-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 70%;
    background-color: #DEDEDE;
}

.feature-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    height: 100%;
    transition: transform var(--transition-base);
}

.feature-item.animate-in:hover .feature-content {
    transform: translateY(-2px);
}

/* ==========================================================================
   Feature Icon
   ========================================================================== */

.feature-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-radius: var(--radius-lg);
}

.feature-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================================================================
   Feature Text
   ========================================================================== */

.feature-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.feature-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0;
    line-height: var(--leading-tight);
}

.feature-description {
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--color-black);
    margin: 0;
    line-height: var(--leading-relaxed);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Tablet Landscape */
@media (max-width: 1200px) {
    .feature-content {
        padding: var(--space-4);
        gap: var(--space-3);
    }
    
    .feature-icon {
        width: 48px;
        height: 48px;
    }
    
    .feature-title {
        font-size: var(--text-sm);
    }
    
    .feature-description {
        font-size: var(--text-xs);
    }
}

/* Tablet Portrait */
@media (max-width: 992px) {
    .features-section {
        padding: var(--space-8) 0;
    }
    
    .features-container {
        padding: 0 var(--container-padding);
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
    
    /* Hide dividers on mobile grid */
    .feature-item:not(:last-child)::after {
        display: none;
    }
    
    .feature-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--space-5);
        gap: var(--space-3);
    }
    
    .feature-icon {
        width: 56px;
        height: 56px;
    }
    
    .feature-text {
        align-items: center;
    }
    
    .feature-title {
        font-size: var(--text-base);
    }
    
    .feature-description {
        font-size: var(--text-sm);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .features-section {
        padding: var(--space-6) 0;
    }
    
    .features-container {
        padding: 0 var(--space-4);
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
    
    .feature-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--space-4);
        gap: var(--space-2);
        background-color: rgba(255, 255, 255, 0.6);
        border-radius: var(--radius-xl);
    }
    
    .feature-icon {
        width: 48px;
        height: 48px;
    }
    
    .feature-title {
        font-size: var(--text-sm);
        font-weight: 700;
    }
    
    .feature-description {
        font-size: var(--text-xs);
        line-height: 1.5;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .features-section {
        padding: var(--space-5) 0;
    }
    
    .features-container {
        padding: 0 var(--space-3);
    }
    
    .features-grid {
        gap: var(--space-2);
    }
    
    .feature-content {
        padding: var(--space-3);
    }
    
    .feature-icon {
        width: 40px;
        height: 40px;
    }
    
    .feature-title {
        font-size: 13px;
    }
    
    .feature-description {
        font-size: 11px;
    }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .feature-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
    
    .feature-item.animate-in:hover .feature-content {
        transform: none;
    }
}

/* ===== about.css ===== */
/**
 * About Section Styles
 *
 * @package Avraham_Theme
 */

/* ==========================================================================
   About Section Base
   ========================================================================== */

   .about-section {
    position: relative;
    padding: var(--space-16) 0;
    background-color: #FEF6F0;
}

/* Background Color Variants */
.about-section.about-bg-white {
    background-color: var(--color-white);
}

.about-section.about-bg-light {
    background-color: var(--color-gray-50);
}

.about-section.about-bg-cream {
    background-color: #FAF2ED;
}

.about-section.about-bg-primary {
    background-color: #153C6D;
}

.about-section.about-bg-primary .about-title,
.about-section.about-bg-primary .about-subtitle,
.about-section.about-bg-primary .about-description {
    color: var(--color-white);
}

/* Container - Two columns 50/50 */
.about-container {
    width: 100%;
    max-width: var(--container-3xl);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6rem;
}

/* ==========================================================================
   About Content (Right Side in RTL) - 50% width
   ========================================================================== */

.about-content {
    flex: 0 0 47%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.about-content.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Title - Black color */
.about-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-black);
    margin: 0;
    line-height: var(--leading-tight);
}

/* Subtitle */
.about-subtitle {
    display: block;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-gray-600);
    margin-bottom: var(--space-2);
}

/* Description */
.about-description {
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--color-gray-800);
    line-height: var(--leading-relaxed);
}

.about-description p {
    margin-bottom: var(--space-4);
}

.about-description p:last-child {
    margin-bottom: 0;
}

/* Extended Description (Hidden by default) */
.about-extended-description {
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--color-gray-800);
    line-height: var(--leading-relaxed);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
    margin-top: 0;
}

.about-extended-description p {
    margin-bottom: var(--space-4);
}

.about-extended-description p:last-child {
    margin-bottom: 0;
}

/* Expanded State */
.about-section.expanded .about-extended-description {
    max-height: 1000px;
    opacity: 1;
    margin-top: var(--space-4);
}

/* ==========================================================================
   Read More Button / Link - border-radius 100px
   ========================================================================== */

.about-read-more-btn,
.about-read-more-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background-color: #153C6D;
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    margin-top: var(--space-4);
    width: fit-content;
}

.about-read-more-btn:hover,
.about-read-more-link:hover {
    background-color: #0e2a4d;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--color-white);
}

/* Read More/Less Text Toggle */
.about-read-more-btn .read-less-text {
    display: none;
}

.about-section.expanded .about-read-more-btn .read-more-text {
    display: none;
}

.about-section.expanded .about-read-more-btn .read-less-text {
    display: inline;
}

/* Icon rotation on expand */
.about-read-more-btn .read-more-icon {
    transition: transform var(--transition-base);
}

.about-section.expanded .about-read-more-btn .read-more-icon {
    transform: rotate(180deg);
}

/* Link icon (arrow) */
.about-read-more-link .read-more-icon {
    transform: scaleX(-1); /* RTL flip */
}

/* ==========================================================================
   About Image - 50% width, bigger
   ========================================================================== */

/* Desktop Image (Left Side) - 50% */
.about-image-desktop {
    flex: 0 0 50%;
    max-width: 42%;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.about-image-desktop.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.about-image-desktop img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Mobile Image (Hidden on Desktop) */
.about-image-mobile {
    display: none;
    order: 2;
}

.about-image-mobile img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Tablet Landscape */
@media (max-width: 1200px) {
    .about-section {
        padding: var(--space-12) 0;
    }
    
    .about-container {
        gap: var(--space-6);
    }
    
    .about-title {
        font-size: var(--text-2xl);
    }
}

/* Tablet Portrait */
@media (max-width: 992px) {
    .about-section {
        padding: var(--space-10) 0;
    }
    
    .about-container {
        flex-direction: column;
        gap: var(--space-6);
    }
    
    /* Hide desktop image */
    .about-image-desktop {
        display: none;
    }
    
    /* Show mobile image - bigger */
    .about-image-mobile {
        display: flex;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
    
    .about-content {
        flex: 1;
        max-width: 100%;
        text-align: center;
        align-items: center;
    }
    
    /* Reorder for mobile: Title (1) -> Image (2) -> Subtitle (3) -> Description (4) -> Extended (5) -> Button (6) */
    .about-title {
        order: 1;
        font-size: var(--text-2xl);
    }
    
    .about-image-mobile {
        order: 2;
        margin-top: var(--space-4);
        margin-bottom: var(--space-4);
    }
    
    .about-subtitle {
        order: 3;
        margin-bottom: 0;
    }
    
    .about-description {
        order: 4;
    }
    
    .about-extended-description {
        order: 5;
    }
    
    .about-read-more-btn,
    .about-read-more-link {
        order: 6;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .about-section {
        padding: var(--space-8) 0;
    }
    
    .about-container {
        padding: 0 var(--space-4);
    }
    
    .about-title {
        font-size: var(--text-xl);
    }
    
    .about-subtitle {
        font-size: var(--text-sm);
    }
    
    .about-description,
    .about-extended-description {
        font-size: var(--text-sm);
    }
    
    .about-image-mobile {
        max-width: 100%;
    }
    
    .about-read-more-btn,
    .about-read-more-link {
        padding: var(--space-3) var(--space-5);
        font-size: var(--text-sm);
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .about-section {
        padding: var(--space-6) 0;
    }
    
    .about-container {
        padding: 0 var(--space-3);
    }
    
    .about-title {
        font-size: var(--text-lg);
    }
    
    .about-image-mobile {
        max-width: 100%;
    }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .about-content,
    .about-image-desktop {
        opacity: 1;
        transform: none;
        transition: none;
    }
    
    .about-extended-description {
        transition: none;
    }
    
    .about-read-more-btn:hover,
    .about-read-more-link:hover {
        transform: none;
    }
}
.page-id-521 .about-container {

    flex-direction: row-reverse;
}
.page-id-521  .about-title {
    display: none;;
}
.about-section.about-bg-cream {
    background-color: #FEF6F0;
}
@media (max-width: 1024px) {
.page-id-521 .page-intro {
    text-align: center;
    padding: 55px var(--container-padding) 23px;
}
}
.page-template-page-blog-php  #blog-page{
    background: #FEF6F0;
}
/* ===== stats.css ===== */
/**
 * Stats Section Styles
 *
 * @package Avraham_Theme
 */

/* ==========================================================================
   Stats Section Base
   ========================================================================== */

   .stats-section {
    position: relative;
    padding: var(--space-16) 0;
    padding-top: calc(var(--space-16) + 8px);
    padding-bottom: calc(var(--space-16) + 8px);
    background-color: #153C6D;
}

/* Top and Bottom Lines */
.stats-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 8px;
    background-color: #F6B38D;
}

.stats-line-top {
    top: 0;
}

.stats-line-bottom {
    bottom: 0;
}

/* Container */
.stats-container {
    width: 100%;
    max-width: var(--container-3xl);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-10);
}

/* ==========================================================================
   Stats Header
   ========================================================================== */

.stats-header {
    text-align: center;
    max-width: 900px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.stats-header.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.stats-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 var(--space-4) 0;
    line-height: var(--leading-tight);
}

.stats-description {
    font-size: var(--text-base);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    line-height: var(--leading-relaxed);
}

.stats-description p {
    margin: 0;
}

/* ==========================================================================
   Stats Grid - 4 columns on desktop
   ========================================================================== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
    width: 100%;
}

/* ==========================================================================
   Stat Item
   ========================================================================== */

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.stat-item.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Stat Number */
.stat-number {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #F6B38D;
    line-height: 1;
    margin-bottom: var(--space-1);
}

/* Stat Label */
.stat-label {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-white);
    line-height: var(--leading-tight);
}

/* Stat Description */
.stat-description {
    font-size: var(--text-sm);
    font-weight: 400;
    color: white;
    line-height: var(--leading-relaxed);
    margin: 0;
    margin-top: var(--space-2);
}

/* ==========================================================================
   CTA Button
   ========================================================================== */

.stats-cta {
    margin-top: var(--space-4);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.stats-cta.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.stats-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-8);
    background-color: var(--color-white);
    color: #153C6D;
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    min-width: 160px;
}

.stats-cta-button:hover {
    background-color: #F6B38D;
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Tablet Landscape */
@media (max-width: 1200px) {
    .stats-section {
        padding: var(--space-12) 0;
        padding-top: calc(var(--space-12) + 8px);
        padding-bottom: calc(var(--space-12) + 8px);
    }
    
    .stats-grid {
        gap: var(--space-6);
    }
    
    .stats-title {
        font-size: var(--text-2xl);
    }
    
    .stat-number {
        font-size: clamp(2rem, 4vw, 3rem);
    }
}

/* Tablet Portrait - 2x2 grid */
@media (max-width: 992px) {
    .stats-section {
        padding: var(--space-10) 0;
        padding-top: calc(var(--space-10) + 8px);
        padding-bottom: calc(var(--space-10) + 8px);
    }
    
    .stats-container {
        gap: var(--space-8);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8) var(--space-6);
    }
    
    .stats-title {
        font-size: var(--text-2xl);
    }
    
    .stats-description {
        font-size: var(--text-sm);
    }
    
    /* Right align text on mobile */
    .stat-item {
        text-align: right;
        align-items: flex-start;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .stats-section {
        padding: var(--space-10) 0;
        padding-top: calc(var(--space-10) + 6px);
        padding-bottom: calc(var(--space-10) + 6px);
    }
    
    .stats-line {
        height: 6px;
    }
    
    .stats-container {
        padding: 0 var(--space-4);
        gap: var(--space-6);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6) var(--space-4);
    }
    
    /* Bigger title on mobile */
    .stats-title {
        font-size: var(--text-2xl);
    }
    
    .stats-description {
        font-size: var(--text-sm);
    }
    
    .stat-number {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }
    
    .stat-label {
        font-size: var(--text-sm);
    }
    
    .stat-description {
        font-size: var(--text-xs);
    }
    
    .stats-cta-button {
        padding: var(--space-3) var(--space-6);
        font-size: var(--text-sm);
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .stats-section {
        padding: var(--space-8) 0;
        padding-top: calc(var(--space-8) + 5px);
        padding-bottom: calc(var(--space-8) + 5px);
    }
    
    .stats-line {
        height: 5px;
    }
    
    .stats-container {
        padding: 0 var(--space-3);
    }
    
    .stats-grid {
        gap: var(--space-5) var(--space-3);
    }
    
    /* Keep title bigger on small mobile */
    .stats-title {
        font-size: var(--text-xl);
    }
    
    .stat-number {
        font-size: 1.75rem;
    }
    
    .stat-label {
        font-size: var(--text-xs);
    }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .stat-item,
    .stats-header,
    .stats-cta {
        opacity: 1;
        transform: none;
        transition: none;
    }
    
    .stats-cta-button:hover {
        transform: none;
    }
}

/* ===== services-grid.css ===== */
/**
 * Services Grid Section Styles
 *
 * @package Avraham_Theme
 */

/* ==========================================================================
   Services Grid Section Base
   ========================================================================== */

   .services-grid-section {
    position: relative;
    background-color: #FEF6F0;
}

/* ==========================================================================
   Header - With Container Padding, More top padding
   ========================================================================== */

.services-grid-header {
    padding: var(--space-24) var(--container-padding) var(--space-12);
    max-width: var(--container-3xl);
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.services-grid-header.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.services-grid-header-content {
    max-width: 800px;
    margin: 0 auto;
}

.services-grid-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-black);
    margin: 0 0 var(--space-4) 0;
    line-height: var(--leading-tight);
}

.services-grid-description {
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--color-gray-700);
    line-height: var(--leading-relaxed);
}

.services-grid-description p {
    margin: 0;
}

/* ==========================================================================
   Services List - Full Width, No Container
   ========================================================================== */

.services-grid-list {
    display: flex;
    flex-direction: row;
    width: 100%;
}

/* ==========================================================================
   Service Item - Image as background, text overlay
   ========================================================================== */

.services-grid-item {
    flex: 1;
    position: relative;
    min-height: 579px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    overflow: hidden;
}

.services-grid-item.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Service Image - Full height background */
.services-grid-item-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.services-grid-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.services-grid-item:hover .services-grid-item-image img {
    transform: scale(1.05);
}

/* Dark overlay for better text readability */
.services-grid-item-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Dark only at the bottom (behind the text); the top half stays clear — no overlay. */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0) 70%);
    z-index: 2;
}

/* Service Content - Overlay on image */
.services-grid-item-content {
    position: relative;
    z-index: 3;
    padding: var(--space-5) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-align: right;
    height: 100%;
    justify-content: flex-end;
    align-items: start;
}

/* Service Title with Orange Rectangle - White text */
.services-grid-item-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-white);
    margin: 0;
    line-height: var(--leading-tight);
    /* flex-direction: row-reverse; */
    justify-content: flex-start;
}

.title-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #F6B38D;
    flex-shrink: 0;
}

/* Service Text - White */
.services-grid-item-text {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-white);
    line-height: var(--leading-relaxed);
    margin: 0;
}

/* Service Link - White */
.services-grid-item-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-white);
    text-decoration: none;
    transition: color var(--transition-fast);
    margin-top: var(--space-2);
}

.services-grid-item-link:hover {
    color: #F6B38D;
}

.services-grid-item-link svg {
    transition: transform var(--transition-fast);
}

.services-grid-item-link:hover svg {
    transform: translateX(-3px);
}

/* ==========================================================================
   Bottom Line - Full Width, No Padding
   ========================================================================== */

.services-grid-bottom-line {
    width: 100%;
    height: 8px;
    background-color: #F6B38D;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Tablet Landscape */
@media (max-width: 1200px) {
    .services-grid-header {
        padding: var(--space-20) var(--container-padding) var(--space-10);
    }
    
    .services-grid-title {
        font-size: var(--text-2xl);
    }
    
    .services-grid-item {
        min-height: 380px;
    }
    
    .services-grid-item-content {
        padding: var(--space-4) var(--space-3);
    }
    
    .services-grid-item-title {
        font-size: var(--text-sm);
    }
    
    .services-grid-item-text {
        font-size: var(--text-xs);
    }
}

/* Tablet Portrait - Stack to column */
@media (max-width: 992px) {
    .services-grid-header {
        padding: var(--space-16) var(--container-padding) var(--space-8);
    }
    
    .services-grid-list {
        flex-direction: column;
    }
    
    .services-grid-item {
        min-height: 300px;
    }
    
    .services-grid-item-content {
        padding: var(--space-4);
        text-align: right;
    }
    
    .services-grid-item-title {
        justify-content: flex-start;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .services-grid-header {
        padding: var(--space-12) var(--space-4) var(--space-6);
    }
    
    .services-grid-title {
        font-size: var(--text-2xl);
    }
    
    .services-grid-description {
        font-size: var(--text-sm);
    }
    
    .services-grid-item {
        min-height: 280px;
    גןד: כךקס;
        display: flex;
    }
    
    .services-grid-item-content {
        padding: var(--space-4);
        text-align: right;
        width: 100%;
        margin-top: auto;
    }
    
    .services-grid-item-title {
        justify-content: flex-start;
        font-size: var(--text-base);
    }
    
    .services-grid-item-text {
        font-size: var(--text-sm);
    }
    
    .services-grid-item-link {
        justify-content: flex-start;
    }
    
    .services-grid-bottom-line {
        height: 8px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .services-grid-header {
        padding: var(--space-10) var(--space-3) var(--space-5);
    }
    
    .services-grid-title {
        font-size: var(--text-xl);
    }
    
    .services-grid-item {
        min-height: 250px;
        display: flex;
    }
    
    .services-grid-item-content {
        padding: var(--space-3);
        margin-top: auto;
        width: 100%;
    }
    
    .services-grid-item-title {
        font-size: var(--text-base);
    }
    
    .services-grid-item-text {
        font-size: var(--text-s);
    }
    
    .services-grid-bottom-line {
        height: 8px;
    }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .services-grid-header,
    .services-grid-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
    
    .services-grid-item:hover .services-grid-item-image img {
        transform: none;
    }
}

/* ============================================================
   Mobile: main practice-areas cards restyled like the inner-page
   carousel cards — white card, image on top, title below (no
   description). 2 per row; an odd last card is centered.
   ============================================================ */
@media (max-width: 768px) {
    .services-grid-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        padding: 0 16px;
    }

    .services-grid-item {
        min-height: 0;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
    }

    .services-grid-item-image {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        flex: 0 0 auto;
    }

    .services-grid-item-image::after {
        display: none;
    }

    .services-grid-item-content {
        position: static;
        margin: 0;
        padding: 12px 10px 16px;
        height: auto;
        background: #fff;
        text-align: center;
        justify-content: flex-start;
        align-items: center;
        gap: 0;
    }

    .services-grid-item-title {
        color: #1a1a1a;
        justify-content: center;
        text-align: center;
        font-size: 15px;
        line-height: 1.35;
        /* Balance multi-line titles: when a title wraps, the break lands at the
           natural mid-point ("תאונות דרכים / ונזקי גוף") — without forcing
           extra lines on titles that already wrap fine ("מכון רפואי..."). */
        text-wrap: balance;
    }

    .title-indicator,
    .services-grid-item-text,
    .services-grid-item-link {
        display: none;
    }

    /* No orange strip under the section on mobile. */
    .services-grid-bottom-line {
        display: none;
    }

    /* Odd last card (the 5th) — full row, centered, single-column width. */
    .services-grid-item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: calc(50% - 7px);
        justify-self: center;
    }
}

/* Mobile: drop the section's own cream (#FEF6F0) so it sits on the same body
   background (#FAF2ED) as the success-stories section — uniform between the two. */
@media (max-width: 768px) {
    .services-grid-section {
        background-color: transparent;
    }
}

/* ===== success-stories.css ===== */
/* ==========================================================================
   Success Stories Section
   ========================================================================== */

   .success-stories-section {
    position: relative;
    background-color: #FEF6F0;
    overflow: hidden;
}

/* Background */
.success-stories-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
}

.success-stories-bg-picture {
    display: block;
    width: 100%;
}

.success-stories-bg-image {
    width: 100%;
    height: auto;
}

/* Container */
.success-stories-container {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 80px 24px;
}

/* Header */
.success-stories-header {
    text-align: center;
    margin-bottom: 48px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.success-stories-header.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.success-stories-icon {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.success-stories-icon img {
    height: 60px;
    width: auto;
}

.success-stories-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-gray-800, #1f2937);
    margin: 0 0 16px;
    line-height: 1.2;
}

.success-stories-description {
    font-size: 18px;
    color: #666;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Tabs */
.success-stories-tabs-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.success-stories-tabs-wrapper.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Tabs styled to match the "articles" (blog) tabs exactly */
.success-stories-tabs {
    display: inline-flex;
    background: white;
    border-radius: 100px;
    padding: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    gap: 4px;
}

.success-stories-tab {
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 500;
    color: #666;
    background: transparent;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.success-stories-tab:hover {
    color: #C97E53;
}

.success-stories-tab.active {
    background: #F6B38D;
    color: white;
}


/* Content Wrapper */
.success-stories-content-wrapper {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.success-stories-content-wrapper.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.success-stories-tab-content {
    display: none;
}

.success-stories-tab-content.active {
    display: block;
}

/* ==========================================================================
   Slider
   ========================================================================== */

.stories-slider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    direction: ltr;
    padding: 0 72px;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    border: 1px solid #E5E5E5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #666;
    z-index: 10;
}

.slider-arrow:hover:not(.disabled) {
    background: var(--color-primary, #153C6D);
    border-color: var(--color-primary, #153C6D);
    color: white;
}

.slider-arrow.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.slider-arrow svg {
    width: 20px;
    height: 20px;
}

.slider-arrow-left svg {
    transform: none;
}

.slider-arrow-left {
    left: 16px;
}

.slider-arrow-right {
    right: 16px;
}

.slider-arrow-right svg {
    /* transform: rotate(180deg); */
}

.slider-container {
    flex: 1;
    /* Clip horizontally (hide off-screen cards) but let the card shadow show above
       and below — plain overflow:hidden was cutting the shadow off. */
    overflow-x: clip;
    overflow-y: visible;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    padding: 20px 0;
}

.slider-track {
    display: flex;
    gap: 32px;
    transition: transform 0.4s ease-out;
}

.stories-slider.slider-static {
    justify-content: center;
}

.stories-slider.slider-static .slider-arrow {
    display: none;
}

/* ==========================================================================
   Grid (No Slider)
   ========================================================================== */

.stories-grid {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.stories-grid-inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.stories-grid .story-card {
    width: 100%;
    max-width: none;
    opacity: 1;
    transform: none !important;
}

.stories-grid .story-card:not(.active) {
    opacity: 1;
    transform: none;
}

.stories-grid .story-card.active {
    transform: none;
}

.stories-grid .story-card-inner {
    height: 100%;
}

.grid-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.grid-page-btn {
    transform: rotate(180deg);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #E5E5E5;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}

.grid-page-btn:hover:not(.disabled):not(:disabled) {
    background: var(--color-primary, #153C6D);
    color: #fff;
    border-color: var(--color-primary, #153C6D);
}

.grid-page-btn:disabled,
.grid-page-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.grid-page-btn-next svg {
    transform: rotate(180deg);
}

.grid-page-indicator {
    font-weight: 700;
    color: var(--color-primary, #153C6D);
}

.grid-single-page .grid-pagination,
.grid-pagination[data-single-page="1"] {
    display: none;
}

/* ==========================================================================
   Story Cards
   ========================================================================== */

.story-card {
    flex-shrink: 0;
    width: 320px;
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    visibility: hidden;
    /* The whole card is clickable (opens the story popup), not just the button. */
    cursor: pointer;
}

.story-card.visible {
    opacity: 0.5;
    visibility: visible;
}

.story-card.active {
    opacity: 1;
    transform: scale(1.12);
    z-index: 5;
}

.story-card-inner {
    background: white;
    border-radius: 20px;
    padding: 32px 24px;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Subtle shadow on the success / press cards. */
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.story-card-icon {
    margin-bottom: 16px;
}

.story-card-icon svg {
    width: 32px;
    height: 32px;
}

.story-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 16px;
    line-height: 1.4;
    direction: rtl; /* card text reads RTL even though the slider track is LTR */
}

.story-card-text {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.6;
    flex: 1;
    direction: rtl;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    overflow-wrap: break-word;
    min-height: 0;
}

.story-card-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 500;
    color: #C97E53;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease;
    margin-top: auto;

}
.page-id-514 .story-card-read-more {
  flex-direction: row !important;
  }

.story-card-read-more:hover {
    color: var(--color-primary, #153C6D);
}

.story-card-read-more svg {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   CTA & Bottom Line
   ========================================================================== */

.success-stories-cta {
    text-align: center;
    padding: 48px 0 64px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.success-stories-cta.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.success-stories-cta-button {
    display: inline-block;
    padding: 16px 40px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    background: var(--color-primary, #153C6D);
    border-radius: 100px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.success-stories-cta-button:hover {
    background: #0f2d52;
    transform: translateY(-2px);
}

.success-stories-bottom-line {
    height: 8px;
    background: #F6B38D;
}

.no-stories {
    text-align: center;
    padding: 64px;
    color: #999;
    font-size: 18px;
}

/* ==========================================================================
   Popup Modal
   ========================================================================== */

.story-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.story-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.story-popup {
    background: white;
    border-radius: 24px;
    max-width: 700px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    position: relative;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s ease;
}

.story-popup-overlay.active .story-popup {
    transform: translateY(0) scale(1);
}

.story-popup-close {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f5f5f5;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #666;
    z-index: 10;
}

.story-popup-close:hover {
    background: #e5e5e5;
    color: #333;
}

.story-popup-header {
    padding: 32px 32px 16px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}

.story-popup-icon {
    margin-bottom: 16px;
}

.story-popup-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-gray-800, #1f2937);
    margin: 0;
    line-height: 1.4;
    direction: rtl;
    text-align: right;
}

.story-popup-content {
    padding: 24px 32px 32px;
    max-height: calc(85vh - 150px);
    overflow-y: auto;
}

.story-popup-loading {
    text-align: center;
    padding: 32px;
    color: #999;
}

.story-popup-body {
    font-size: 16px;
    color: #444;
    line-height: 1.8;
    direction: rtl;
    text-align: right;
}

.story-popup-body p {
    margin: 0 0 16px;
}

.story-popup-body a {
    color: var(--color-gray-800, #1f2937);
    text-decoration: underline;
}

/* Post content often opens with a heading that repeats the title. Without this
   it inherited the global h1/h2 sizes (text-5xl/4xl) and rendered huge inside
   the popup — scope headings down to readable, in-panel sizes. */
.story-popup-body h1,
.story-popup-body h2 {
    font-size: 22px;
    line-height: 1.35;
    margin: 0 0 12px;
    font-weight: 700;
}

.story-popup-body h3 {
    font-size: 19px;
    line-height: 1.4;
    margin: 0 0 10px;
    font-weight: 700;
}

.story-popup-body h4,
.story-popup-body h5,
.story-popup-body h6 {
    font-size: 17px;
    line-height: 1.4;
    margin: 0 0 8px;
    font-weight: 700;
}

.story-popup-body img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .success-stories-container {
        padding: 60px 16px;
    }

    .slider-container {
        max-width: 100%;
    }

    .story-card {
        width: 300px;
    }

    .stories-grid-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .success-stories-title {
        font-size: 30px;
    }

    .slider-track {
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .success-stories-container {
        padding: 40px 16px;
    }

    .success-stories-header {
        margin-bottom: 28px;
    }

    .success-stories-icon img {
        height: 40px;
    }

    .success-stories-title {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .success-stories-description {
        font-size: 14px;
        line-height: 1.6;
    }

    .success-stories-tabs-wrapper {
        margin-bottom: 16px;
    }

    /* Match the blog tabs on mobile: individual white pills, no container */
    .success-stories-tabs {
        background: transparent;
        box-shadow: none;
        padding: 0;
        flex-wrap: wrap;
        gap: 8px;
    }

    .success-stories-tab {
        padding: 10px 20px;
        font-size: 14px;
        background: white;
        border: none;
    }

    .success-stories-tab.active {
        background: #F6B38D;
        color: black;
    }

    /* Mobile slider layout */
    .stories-slider {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 0 56px 0;
        position: relative;
    }

    .slider-container {
        width: 100%;
        max-width: 100%;
        overflow: visible;
        position: relative;
        padding: 0 12px;
    }

    .slider-track {
        gap: 16px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .story-card {
        width: calc(100% - 24px);
        max-width: 100%;
        min-width: calc(100% - 24px);
        flex-shrink: 0;
    }

    .story-card.active {
        opacity: 1 !important;
        transform: scale(1) !important;
        z-index: 5;
    }

    .story-card:not(.active) {
        opacity: 0.5;
        transform: scale(0.92);
    }

    .stories-grid-inner {
        grid-template-columns: 1fr;
    }

    .story-card-inner {
        min-height: 44rem;
        padding: 28px 20px;
        min-height: auto;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        border-radius: 16px;
    }

    .story-card-icon {
        margin-bottom: 12px;
    }

    .story-card-icon svg {
        width: 28px;
        height: 28px;
    }

    .story-card-title {
        font-size: 17px;
        margin-bottom: 14px;
        line-height: 1.3;
    }

    .story-card-text {
        font-size: 14px;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-line-clamp: 6;
        line-clamp: 6;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
        min-height: 0;
        margin-bottom: 8px;
    }

    .story-card-read-more {
        margin-top: 12px;
        font-size: 14px;
        padding: 6px 0;
    }

    .slider-arrow {
        width: 44px;
        height: 44px;
        position: absolute;
        top: auto;
        bottom: -42px;
        transform: translateX(-50%);
        z-index: 10;
        background: white;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
        border: 1px solid #E5E5E5;
    }

    .slider-arrow svg {
        width: 18px;
        height: 18px;
    }

    .slider-arrow-left {
        left: calc(50% - 28px);
    }

    .slider-arrow-right {
        right: auto;
        left: calc(50% + 28px);
    }


    .success-stories-cta-button {
        padding: 12px 32px;
        font-size: 14px;
    }

    /* Mobile popup */
    .story-popup {
        max-height: 90vh;
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
    }

    .story-popup-header {
        padding: 24px;
    }

    .story-popup-title {
        font-size: 18px;
    }

    .story-popup-content {
        padding: 16px 24px 24px;
        max-height: calc(90vh - 130px);
    }

    .story-popup-body {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .success-stories-container {
        padding: 40px 12px;
    }

    .success-stories-title {
        font-size: 20px;
    }

    .stories-slider {
        padding: 0 0 70px 0;
    }

    .slider-container {
        padding: 0 10px;
    }

    .slider-track {
        gap: 14px;
    }

    .story-card {
        /* min-height: 18rem; */
        width: calc(100% - 20px);
        max-width: 100%;
        min-width: calc(100% - 20px);
    }

    .story-card-inner {
        padding: 24px 18px;
        min-height: auto;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        border-radius: 14px;
    }

    .story-card-icon {
        margin-bottom: 10px;
    }

    .story-card-icon svg {
        width: 26px;
        height: 26px;
    }

    .story-card-title {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .story-card-text {
        font-size: 13px;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
        min-height: 0;
    }

    .slider-arrow {
        width: 40px;
        height: 40px;
        top: auto;
        bottom: 0;
        transform: translateX(-50%);
    }

    .slider-arrow svg {
        width: 16px;
        height: 16px;
    }

    .slider-arrow-left {
        left: calc(50% - 26px);
    }

    .slider-arrow-right {
        right: auto;
        left: calc(50% + 26px);
    }
}
.stories-slider .story-card:not(.active) {
    transform: scale(0.95);
}

/* ============================================================
   Mobile: no section background (colour +背景 image) for the
   success-stories / מן-התקשורת section.
   ============================================================ */
@media (max-width: 768px) {
    .success-stories-section {
        background-color: transparent;
    }

    .success-stories-background {
        display: none;
    }
}

/* ===== why-choose.css ===== */
/* ==========================================================================
   Why Choose Us Section
   ========================================================================== */

   .why-choose-section {
    position: relative;
    background: var(--color-primary, #153C6D);
}

.why-choose-wrapper {
    display: flex;
    flex-direction: row-reverse; /* RTL: Image on left, content on right */
    min-height: 600px;
}

/* Image - Left Side (appears on left in RTL) */
.why-choose-image {
    flex: 0 0 52%;
    max-width: 45%;
    position: relative;
    overflow: hidden;
}

.why-choose-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Content - Right Side (appears on right in RTL) */
.why-choose-content {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 60px 0;
}

.why-choose-content-inner {
    max-width: 972px;
    width: 100%;
    padding: 0 80px 0 60px;
    margin-left: auto;
}

/* Title */
.why-choose-title {
    font-size: 42px;
    font-weight: 700;
    color: white;
    margin: 0 0 40px;
    line-height: 1.2;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.why-choose-section.animate-in .why-choose-title {
    opacity: 1;
    transform: translateY(0);
}

/* Features Grid */
.why-choose-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 40px;
}

/* Single Feature */
.why-choose-feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.why-choose-section.animate-in .why-choose-feature {
    opacity: 1;
    transform: translateY(0);
}

.why-choose-feature-icon {
    flex-shrink: 0;
}

.why-choose-feature-icon svg {
    width: 40px;
    height: 40px;
}

.why-choose-feature-content {
    flex: 1;
}

.why-choose-feature-title {
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin: 0 0 8px;
    line-height: 1.4;
}

.why-choose-feature-description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.7;
}

/* Button */
.why-choose-button-wrapper {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
}

.why-choose-section.animate-in .why-choose-button-wrapper {
    opacity: 1;
    transform: translateY(0);
}

.why-choose-button {
    display: inline-block;
    padding: 14px 40px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary, #153C6D);
    background: white;
    border: 2px solid white;
    border-radius: 100px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.why-choose-button:hover {
    background: transparent;
    color: white;
}

/* Bottom Line */
.why-choose-bottom-line {
    height: 8px;
    background: #F6B38D;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
    .why-choose-content-inner {
        padding: 0 60px 0 40px;
        max-width: 700px;
    }
    
    .why-choose-title {
        font-size: 36px;
    }
}

@media (max-width: 1024px) {
    .why-choose-image {
        flex: 0 0 35%;
        max-width: 35%;
    }
    
    .why-choose-content-inner {
        padding: 0 48px 0 32px;
    }
    
    .why-choose-title {
        font-size: 32px;
        margin-bottom: 32px;
    }
    
    .why-choose-features {
        gap: 24px;
    }
    
    .why-choose-feature-title {
        font-size: 16px;
    }
    
    .why-choose-feature-description {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .why-choose-wrapper {
        flex-direction: column;
        min-height: auto;
    }
    
    .why-choose-image {
        flex: none;
        max-width: 100%;
        width: 100%;
        height: 300px;
        order: -1;
    }
    
    .why-choose-content {
        padding: 40px 0;
    }
    
    .why-choose-content-inner {
        padding: 0 24px;
        max-width: 100%;
    }
    
    .why-choose-title {
        font-size: 28px;
        margin-bottom: 28px;
        text-align: center;
    }
    
    .why-choose-features {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 32px;
    }
    
    .why-choose-feature {
        text-align: right;
    }
    
    .why-choose-feature-icon svg {
        width: 36px;
        height: 36px;
    }
    
    .why-choose-feature-title {
        font-size: 16px;
    }
    
    .why-choose-feature-description {
        font-size: 14px;
    }
    
    .why-choose-button-wrapper {
        text-align: center;
    }
    
    .why-choose-button {
        padding: 12px 32px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .why-choose-image {
        height: 250px;
    }
    
    .why-choose-content {
        padding: 32px 0;
    }
    
    .why-choose-content-inner {
        padding: 0 16px;
    }
    
    .why-choose-title {
        font-size: 24px;
        margin-bottom: 24px;
    }
    
    .why-choose-features {
        gap: 20px;
        margin-bottom: 28px;
    }
    
    .why-choose-feature {
        gap: 12px;
    }
    
    .why-choose-feature-icon svg {
        width: 32px;
        height: 32px;
    }
    
    .why-choose-feature-title {
        font-size: 15px;
    }
    
    .why-choose-feature-description {
        font-size: 13px;
    }
    
    .why-choose-button {
        padding: 10px 28px;
        font-size: 14px;
    }
}


/* ===== video-slider-section.css ===== */
/**
 * Video Slider Section Styles - Swiper Version
 */

.video-slider-section {
    padding: 3rem 0;
    overflow: hidden;
}

.video-slider-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: #000;
    margin: 0 0 2.5rem;
}

/* Swiper container - full width for overflow effect */
.video-swiper-wrapper {
    position: relative;
    width: 100%;
}

.video-swiper {
    width: 100%;
    overflow: visible;
    padding: 20px 0;
}

.video-swiper .swiper-wrapper {
    align-items: center;
}

/* Slides - big size, sides will be cut off at edges */
.video-swiper .swiper-slide {
    width: 300px; /* vertical TikTok format (9:16) */
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0.6;
    transform: scale(0.85);
}

.video-swiper .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
    z-index: 10;
}

.video-swiper .swiper-slide-prev,
.video-swiper .swiper-slide-next {
    opacity: 0.6;
    transform: scale(0.85);
}

.video-slide-inner {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.4s ease;
}

.video-swiper .swiper-slide-active .video-slide-inner {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Video embed */
.video-embed {
    position: relative;
    width: 100%;
    padding-bottom: 177.78%; /* 9:16 vertical (TikTok format) */
    background: #000;
}

.video-embed iframe,
.video-embed video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* TikTok click-to-load facade: only a poster image loads on page load; the
   heavy TikTok player iframe is injected by JS on click (keeps the page light). */
.tiktok-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: #000;
    cursor: pointer;
    display: block;
    overflow: hidden;
}

.tiktok-facade img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tiktok-facade .tiktok-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, transform 0.25s ease;
    z-index: 2;
}

.tiktok-facade:hover .tiktok-play {
    background: var(--color-secondary, #F6B38D);
    transform: translate(-50%, -50%) scale(1.08);
}

.tiktok-facade .tiktok-play svg {
    width: 26px;
    height: 26px;
    margin-left: 3px;
    color: #fff;
}

.video-caption {
    padding: 1rem 1.25rem;
    text-align: center;
    font-size: 0.95rem;
    color: #333;
    border-top: 1px solid #eee;
}

/* Navigation - Bottom Center */
.video-slider-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 2rem;
}

.video-nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary, #153C6D);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
}

.video-nav-btn:hover {
    background: #0f2d52;
    transform: scale(1.05);
}

/* Large screens */
@media (min-width: 1400px) {
    .video-swiper .swiper-slide {
        width: 332px;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .video-swiper .swiper-slide {
        width: 264px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .video-slider-section {
        padding: 2rem 0;
    }

    .video-slider-title {
        font-size: 1.75rem;
        margin-bottom: 1.5rem;
        padding: 0 1rem;
    }

    .video-swiper .swiper-slide {
        width: min(66vw, 286px);
    }

    .video-swiper .swiper-slide,
    .video-swiper .swiper-slide-prev,
    .video-swiper .swiper-slide-next {
        transform: scale(0.92);
    }

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

    .video-slide-inner {
        border-radius: 12px;
    }

    .video-nav-btn {
        width: 44px;
        height: 44px;
    }

    .video-slider-nav {
        margin-top: 1.5rem;
    }
}

@media (max-width: 480px) {
    .video-slider-title {
        font-size: 1.5rem;
    }

    .video-swiper .swiper-slide {
        width: min(74vw, 268px);
    }

    .video-nav-btn {
        width: 40px;
        height: 40px;
    }

    .video-nav-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* ===== video-section.css ===== */
/* ==========================================================================
   Video Section
   ========================================================================== */

   .video-section {
    background: #FEF6F0;
    padding: 80px 0;
}

.video-section-wrapper {
    display: flex;
    flex-direction: row-reverse; /* RTL: Video on right, content on left */
    align-items: center;
    gap: 80px;
    max-width: var(--container-3xl);
    margin: 0 auto;
    padding: unset; /* No padding on right - video goes to edge */
    justify-content: space-between;
}

/* Content - Left Side */
.video-section-content {
    flex: 1;
    max-width: 681px;
    padding-left: 40px;
}

.video-section-title {
    font-size: 42px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 24px;
    line-height: 1.2;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.video-section.animate-in .video-section-title {
    opacity: 1;
    transform: translateY(0);
}

.video-section-description {
    font-size: 16px;
    color: #444;
    line-height: 1.8;
    margin-bottom: 32px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
}

.video-section.animate-in .video-section-description {
    opacity: 1;
    transform: translateY(0);
}

.video-section-description p {
    margin: 0 0 16px;
}

.video-section-description p:last-child {
    margin-bottom: 0;
}

/* Button */
.video-section-button-wrapper {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

.video-section.animate-in .video-section-button-wrapper {
    opacity: 1;
    transform: translateY(0);
}

.video-section-button {
    display: inline-block;
    padding: 14px 40px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    background: var(--color-primary, #153C6D);
    border-radius: 100px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.video-section-button:hover {
    background: #0f2d52;
    transform: translateY(-2px);
}

/* Video Embed - Right Side (bigger) */
.video-section-embed {
    flex: 0 0 55%;
    max-width: 746px;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

.video-section.animate-in .video-section-embed {
    opacity: 1;
    transform: translateX(0);
}

.video-embed-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

.video-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Mobile embed - hidden on desktop */
.video-section-embed-mobile {
    display: none;
}

/* Desktop embed - shown on desktop */
.video-section-embed-desktop {
    display: block;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
    .video-section-wrapper {
        gap: 60px;
        padding: 0 40px 0 0;
    }
    
    .video-section-content {
        padding-left: 32px;
    }
    
    .video-section-title {
        font-size: 36px;
    }
    
    .video-section-embed {
        flex: 0 0 50%;
        max-width: 600px;
    }
}

@media (max-width: 1024px) {
    .video-section {
        padding: 60px 0;
    }
    
    .video-section-wrapper {
        gap: 40px;
        padding: 0 24px;
    }
    
    .video-section-content {
        padding-left: 0;
    }
    
    .video-section-title {
        font-size: 32px;
    }
    
    .video-section-description {
        font-size: 15px;
    }
    
    .video-section-embed {
        flex: 0 0 48%;
        max-width: 500px;
    }
    
    .video-embed-container {
        border-radius: 12px;
    }
}

@media (max-width: 768px) {
    .video-section {
        padding: 48px 0;
    }
    
    .video-section-wrapper {
        flex-direction: column;
        gap: 0;
        padding: 0 24px;
    }
    
    .video-section-content {
        max-width: 100%;
        text-align: center;
    }
    
    .video-section-title {
        font-size: 28px;
        margin-bottom: 24px;
    }
    
    /* Mobile: Show mobile embed, hide desktop embed */
    .video-section-embed-mobile {
        display: block;
        flex: none;
        max-width: 100%;
        width: 100%;
        margin-bottom: 24px;
    }
    
    .video-section-embed-desktop {
        display: none;
    }
    
    .video-section-description {
        font-size: 15px;
        margin-bottom: 28px;
        text-align: right;
    }
    
    .video-embed-container {
        border-radius: 10px;
    }
    
    .video-section-button {
        padding: 12px 32px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .video-section {
        padding: 40px 0;
    }
    
    .video-section-wrapper {
        padding: 0 16px;
    }
    
    .video-section-title {
        /* font-size: 36px; */
        font-size: 24px;
        margin-bottom: 20px;
    }
    
    .video-section-description {
        font-size: 14px;
        margin-bottom: 24px;
    }
    
    .video-embed-container {
        border-radius: 8px;
    }
    
    .video-section-button {
        padding: 10px 28px;
        font-size: 14px;
    }
}


/* ===== team-section.css ===== */
/* ==========================================================================
   Team Section
   ========================================================================== */

.team-section {
    background: #FEF6F0;
    padding: 80px 0 100px;
}

.team-section-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Title */
.team-section-title {
    font-size: 42px;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin: 0 0 60px;
    line-height: 1.2;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.team-section.animate-in .team-section-title {
    opacity: 1;
    transform: translateY(0);
}

/* Slider */
.team-slider {
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
    padding: 20px; /* Padding to show shadow */
    margin: -20px; /* Compensate for padding */
}

.team-section.animate-in .team-slider {
    opacity: 1;
    transform: translateY(0);
}

.team-slider-wrapper {
    position: relative;
    overflow: visible;
}

/* Slide */
.team-slide {
    display: none;
}

.team-slide.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Team Card */
.team-card {
    display: flex;
    flex-direction: row-reverse; /* RTL: Image on right, content on left */
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
    min-height: 28rem;
    padding: 32px; /* Inner padding */
    gap: 40px;
    align-items: stretch;
}

.team-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 0;
}

.team-card-name {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 24px;
    line-height: 1.3;
}

.team-card-bio {
    font-size: 15px;
    color: #444;
    line-height: 1.8;
    flex: 1;
}

.team-card-bio p {
    margin: 0 0 16px;
}

.team-card-bio p:last-child {
    margin-bottom: 0;
}

/* Team Image - Fixed height */
.team-card-image {
    flex: 0 0 380px;
    width: 380px;
    height: 480px;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.team-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Navigation Arrows */
.team-slider-nav {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 60px 0 20px;
}

.team-nav-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary, #153C6D);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
}

.team-nav-arrow:hover {
    background: #0f2d52;
    transform: scale(1.05);
}

.team-nav-arrow svg {
    width: 20px;
    height: 20px;
}

/* Rotate arrows for RTL */
.team-nav-prev {
    transform: rotate(180deg);
}

.team-nav-prev:hover {
    transform: rotate(180deg) scale(1.05);
}

.team-nav-next {
    transform: rotate(180deg);
}

.team-nav-next:hover {
    transform: rotate(180deg) scale(1.05);
}

/* No bottom line */
.team-section-bottom-line {
    display: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
    .team-card {
        padding: 28px;
        gap: 32px;
    }
    
    .team-card-image {
        flex: 0 0 340px;
        width: 340px;
        height: 440px;
    }
}

@media (max-width: 1024px) {
    .team-section {
        padding: 60px 0 80px;
    }
    
    .team-section-container {
        padding: 0 32px;
    }
    
    .team-section-title {
        font-size: 36px;
        margin-bottom: 48px;
    }
    
    .team-card {
        min-height: 22rem;
        padding: 24px;
        gap: 28px;
    }
    
    .team-card-content {
        padding: 12px 0;
    }
    
    .team-card-name {
        font-size: 24px;
    }
    
    .team-card-bio {
        font-size: 14px;
    }
    
    .team-card-image {
        flex: 0 0 300px;
        width: 300px;
        height: 400px;
    }
    
    .team-slider-nav {
        padding: 48px 0 16px;
    }
}

@media (max-width: 768px) {
    .team-section {
        padding: 48px 0 80px;
    }
    
    .team-section-container {
        padding: 0 24px;
    }
    
    .team-section-title {
        font-size: 28px;
        margin-bottom: 32px;
    }
    
    .team-slider {
        padding: 10px;
        margin: -10px;
    }
    
    .team-card {
        flex-direction: column;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        min-height: auto;
        padding: 0;
        gap: 24px;
    }
    
    .team-card-image {
        display: block;
        flex: none;
        width: 100%;
        height: 320px;
        order: -1; /* Image first */
        border-radius: 12px;
    }
    
    .team-card-content {
        padding: 0;
        order: 1;
    }
    
    .team-card-name {
        font-size: 22px;
        margin-bottom: 16px;
        text-align: center;
    }
    
    .team-card-bio {
        font-size: 14px;
        text-align: right;
    }
    
    .team-slider-nav {
        padding: 40px 0 20px;
    }
    
    .team-nav-arrow {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 480px) {
    .team-section {
        padding: 40px 0 70px;
    }
    
    .team-section-container {
        padding: 0 16px;
    }
    
    .team-section-title {
        font-size: 24px;
        margin-bottom: 24px;
    }
    
    .team-card-image {
        height: 280px;
    }
    
    .team-card-name {
        font-size: 20px;
    }
    
    .team-card-bio {
        font-size: 13px;
    }
    
    .team-slider-nav {
        padding: 32px 0 16px;
    }
    
    .team-nav-arrow {
        width: 40px;
        height: 40px;
    }
}

/* ===== reviews-section.css ===== */
/* ==========================================================================
   Reviews Section
   ========================================================================== */

.reviews-section {
    background: #FEF6F0;
    padding: 80px 0 100px;
}

/* Header */
.reviews-section-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 0 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reviews-section.animate-in .reviews-section-header {
    opacity: 1;
    transform: translateY(0);
}

.reviews-section-title {
    font-size: 42px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 16px;
    line-height: 1.2;
}

.reviews-section-description {
    font-size: 18px;
    color: #666;
    max-width: 700px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

/* Google Summary Badge */
.reviews-google-summary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: white;
    padding: 12px 24px;
    border-radius: 100px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.reviews-summary-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reviews-summary-score {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
}

.reviews-summary-stars {
    display: flex;
    gap: 2px;
}

.reviews-summary-count {
    font-size: 14px;
    color: #666;
}

/* Content Wrapper */
.reviews-content-wrapper {
    padding: 0 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

.reviews-section.animate-in .reviews-content-wrapper {
    opacity: 1;
    transform: translateY(0);
}

/* Swiper overrides */
.reviews-swiper {
    overflow: hidden;
    padding: 10px 0 20px;
}

/* Pre-init layout: before Swiper's CDN stylesheet loads, lay the slides out in a
   clipped row instead of letting them stack vertically (which flashed as a messy
   pile of reviews for a moment on load). Scoped to :not(.swiper-initialized) so it
   stops applying the instant Swiper takes over its own sizing — no conflict. */
.reviews-swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
}
.reviews-swiper:not(.swiper-initialized) .swiper-slide {
    flex: 0 0 100%;
}
@media (min-width: 640px) {
    .reviews-swiper:not(.swiper-initialized) .swiper-slide { flex-basis: 50%; }
}
@media (min-width: 1024px) {
    .reviews-swiper:not(.swiper-initialized) .swiper-slide { flex-basis: 33.333%; }
}

/* Review Card */
.review-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.review-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
    direction: rtl;
}

.review-card-google-icon {
    flex-shrink: 0;
    opacity: 0.8;
}

.review-card-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.review-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.review-card-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary, #153C6D);
    color: white;
    font-size: 18px;
    font-weight: 600;
}

.review-card-info {
    text-align: right;
}

.review-card-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.review-card-date {
    font-size: 13px;
    color: #999;
}

/* Stars */
.review-card-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 12px;
    direction: ltr;
    justify-content: flex-end;
}

/* Review Text */
.review-card-text {
    font-size: 14px;
    color: #444;
    line-height: 1.7;
    direction: rtl;
    text-align: right;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

/* Navigation */
.reviews-slider-nav {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
    padding: 0 40px;
}

.reviews-nav-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary, #153C6D);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
}

.reviews-nav-arrow:hover {
    background: #0f2d52;
    transform: scale(1.05);
}

.reviews-nav-arrow.swiper-button-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.reviews-nav-arrow svg {
    width: 20px;
    height: 20px;
}

/* No reviews message */
.no-reviews {
    text-align: center;
    padding: 48px;
    color: #999;
    font-size: 16px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .reviews-section {
        padding: 60px 0 80px;
    }

    .reviews-section-title {
        font-size: 36px;
    }

    .reviews-section-description {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .reviews-section {
        padding: 48px 0 70px;
    }

    .reviews-section-header {
        padding: 0 24px;
    }

    .reviews-section-title {
        font-size: 28px;
    }

    .reviews-section-description {
        font-size: 15px;
    }

    .reviews-content-wrapper {
        padding: 0 24px;
    }

    .reviews-slider-nav {
        padding: 0 24px;
        margin-top: 24px;
    }

    .reviews-nav-arrow {
        width: 44px;
        height: 44px;
        background: transparent;
        border: 2px solid #1a1a1a;
        color: #1a1a1a;
    }

    .reviews-nav-arrow:hover {
        background: #1a1a1a;
        color: white;
    }

    .review-card {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .reviews-section {
        padding: 40px 0 60px;
    }

    .reviews-section-header {
        padding: 0 16px;
    }

    .reviews-section-title {
        font-size: 24px;
    }

    .reviews-content-wrapper {
        padding: 0 16px;
    }

    .reviews-google-summary {
        padding: 10px 16px;
        gap: 8px;
    }

    .reviews-summary-score {
        font-size: 16px;
    }

    .reviews-summary-count {
        font-size: 13px;
    }

    .review-card {
        padding: 16px;
    }

    .review-card-avatar {
        width: 36px;
        height: 36px;
    }

    .review-card-name {
        font-size: 14px;
    }

    .review-card-date {
        font-size: 12px;
    }

    .review-card-text {
        font-size: 13px;
    }

    .reviews-slider-nav {
        padding: 0 16px;
    }

    .reviews-nav-arrow {
        width: 40px;
        height: 40px;
    }
}

/* ============================================================
   Review cards — always equal height, and a touch narrower.
   Swiper stretches every slide to the tallest, and the card fills it.
   ============================================================ */
.reviews-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.reviews-swiper .swiper-slide .review-card {
    width: 100%;
}

/* ===== blog-section.css ===== */
/* ==========================================================================
   Blog Section
   ========================================================================== */

   .blog-section {
    /* background: #FEF6F0; */
    padding: 37px 0 48px;
}

.blog-section-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Header */
.blog-section-header {
    text-align: center;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.blog-section.animate-in .blog-section-header {
    opacity: 1;
    transform: translateY(0);
}

.blog-section-title {
    font-size: 42px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 16px;
    line-height: 1.2;
}

.blog-section-description {
    font-size: 18px;
    color: #666;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Tabs */
.blog-tabs-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 48px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
}

.blog-section.animate-in .blog-tabs-wrapper {
    opacity: 1;
    transform: translateY(0);
    margin-bottom: 20px !important;
}

.blog-tabs {
    display: inline-flex;
    background: white;
    border-radius: 100px;
    padding: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    gap: 4px;
}

.blog-tab {
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 500;
    color: #666;
    background: transparent;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    color: #666;
    background: transparent;
    border: 2px solid #E0E0E0;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s 
ease;
    white-space: nowrap;
    margin: 0 2px;
}

.blog-tab:hover {
    color: #C97E53;
}

.blog-tab.active {
    background: #F6B38D;
    color: white;
    border-color: unset;
}

/* Search */
.blog-search-bar {
    display: flex;
    justify-content: center;
    margin: 0 auto 32px;
    max-width: 595px;
    width: 100%;
}

.blog-search-input {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 4rem;
}

.blog-search-input input {
    direction: rtl;
    width: 100%;
    padding: 8px 56px 8px 126px;
    border: none;
    min-height: 3.2rem;
    border-radius: 999px;
    font-size: 16px;
    line-height: 1;
    background: #fff;
    color: #1a1a1a;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.blog-search-btn {
    /* left: 0; */
    /* right: auto; */
    position: absolute;
    inset-inline-start: 10px;
    color: white;
    top: 14px;
    height: calc(100% - 28px);
    min-width: 103px;
    padding: 0 30px;
    width: max-content;
    border: none;
    border-radius: 999px;
    background: #1f3948;
    /* transform: translate(-50%, -50%); */ /* This is a shorthand of;;color: #fff;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    /* transition: transform 0.15s ease, box-shadow 0.15s ease; */
    z-index: 2;
    right: unset;
    left: 1rem;
}

.blog-search-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.16);
}

.blog-search-icon {
    position: absolute;
    inset-inline-end: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    z-index: 1;
    right: 24px;
    left: unset;
}

.blog-search-loader {
    position: absolute;
    inset-inline-end: 48px;
    top: 50%;
    width: 16px;
    height: 16px;
    border: 2px solid #e0e0e0;
    border-top-color: #153C6D;
    border-radius: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.blog-search-loader.active {
    opacity: 1;
    animation: blogSpin 0.8s linear infinite;
}

@keyframes blogSpin {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* Content */
.blog-content-wrapper {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

.blog-section.animate-in .blog-content-wrapper {
    opacity: 1;
    transform: translateY(0);
}

.blog-tab-content {
    display: none;
}

.blog-tab-content.active {
    display: block;
}

/* Slider */
.blog-slider {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
}

.blog-slider-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    transition: transform 0.4s ease;
}

.blog-slider-track.centered {
    justify-content: center;
}

/* Grid mode (page template) */
.blog-page-section .blog-tab-content {
    display: none;
}

.blog-page-section .blog-tab-content.active {
    display: block;
}

.blog-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-grid-inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.blog-grid .blog-card {
    flex: none;
    min-width: 0;
}

.blog-grid-empty {
    text-align: center;
    color: #888;
    font-weight: 600;
}

/* Blog Card */
.blog-card {
    flex: 0 0 calc(33.333% - 16px);
    min-width: 320px;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.blog-card-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
}

.blog-card-line {
    height: 4px;
    background: linear-gradient(90deg, #F6B38D 0%, #F9B26B 100%);
}

.blog-card-content {
    padding: 24px;
    text-align: right;
}

.blog-card-date {
    font-size: 14px;
    color: #F6B38D;
    font-weight: 500;
    margin-bottom: 12px;
}

.blog-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    background: var(--color-primary, #153C6D);
    color: white;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 100px;
    transition: all 0.3s ease;
}

.blog-card-link:hover {
    background: #0f2d52;
    transform: translateY(-2px);
}

.grid-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.grid-page-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #E5E5E5;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: rotate(180deg);
}

.grid-page-btn:hover:not(.disabled):not(:disabled) {
    background: var(--color-primary, #153C6D);
    color: #fff;
    border-color: var(--color-primary, #153C6D);
}

.grid-page-btn:disabled,
.grid-page-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.grid-page-btn-next svg {
    transform: rotate(180deg);
}

.grid-page-indicator {
    font-weight: 700;
    color: var(--color-primary, #153C6D);
}

.grid-pagination[data-single-page="1"] {
    display: none;
}

/* Navigation */
.blog-slider-nav {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
}

.blog-nav-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #1a1a1a;
}

.blog-nav-arrow:hover:not(.disabled) {
    background: #1a1a1a;
    color: white;
}

.blog-nav-arrow.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.blog-nav-arrow svg {
    width: 20px;
    height: 20px;
}

/* Rotate arrows for RTL */
.blog-nav-prev {
    transform: rotate(180deg);
}

.blog-nav-prev:hover:not(.disabled) {
    transform: rotate(180deg) scale(1.05);
}

.blog-nav-next {
    transform: rotate(180deg);
}

.blog-nav-next:hover:not(.disabled) {
    transform: rotate(180deg) scale(1.05);
}

/* Footer */
.blog-section-footer {
    text-align: center;
    margin-top: 40px;
}

.blog-all-posts-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #F6B38D;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-all-posts-link:hover {
    color: #C97E53;
}

.blog-all-posts-link svg {
    width: 16px;
    height: 16px;
}

/* No posts message */
.no-posts {
    text-align: center;
    padding: 48px;
    color: #999;
    font-size: 16px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
    .blog-section-container {
        padding: 0 32px;
    }
    
    .blog-card {
        flex: 0 0 calc(50% - 12px);
        min-width: 300px;
    }

    .blog-grid-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .blog-section {
        padding: 60px 0 80px;
    }
    
    .blog-section-title {
        font-size: 36px;
    }
    
    .blog-section-description {
        font-size: 16px;
    }
    
    .blog-card {
        flex: 0 0 calc(50% - 12px);
        min-width: 280px;
    }
    
    .blog-card-image {
        height: 180px;
    }

    .blog-grid-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .blog-section {
        padding: 48px 0 70px;
    }
    
    .blog-section-container {
        padding: 0 24px;
    }
    
    .blog-section-title {
        font-size: 28px;
    }
    
    .blog-section-description {
        font-size: 15px;
    }
    
    .blog-tabs-wrapper {
        margin-bottom: 32px;
    }

    /* Match FAQ tabs: individual pills, no white container */
    .blog-tabs {
        background: transparent;
        box-shadow: none;
        padding: 0;
        flex-wrap: wrap;
        gap: 8px;
    }

    .blog-tab {
        padding: 10px 20px;
        font-size: 14px;
        background: white;
        border: none;
    }

    .blog-tab.active {
        background: #F6B38D;
        color: black;
        border: none;
    }

    .blog-slider-track {
        gap: 16px;
    }
    
    .blog-card {
        flex: 0 0 100%;
        min-width: 100%;
        max-width: 100%;
    }

    .blog-card-image {
        height: 200px;
    }
    
    .blog-slider-nav {
        margin-top: 32px;
    }
    
    .blog-nav-arrow {
        width: 44px;
        height: 44px;
    }

    .blog-grid-inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .blog-section {
        padding: 40px 0 60px;
    }
    
    .blog-section-container {
        padding: 0 16px;
    }
    
    .blog-section-title {
        font-size: 24px;
    }
    
    .blog-tabs {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        border-radius: 16px;
    }
    
    .blog-tab {
        padding: 8px 16px;
        font-size: 13px;
    }
    
    .blog-card {
        flex: 0 0 100%;
        min-width: 100%;
        max-width: 100%;
    }

    .blog-card-content {
        padding: 20px;
    }
    
    .blog-card-title {
        font-size: 16px;
    }
    
    .blog-card-desc {
        font-size: 13px;
    }
    
    .blog-card-link {
        padding: 10px 24px;
        font-size: 13px;
    }
    
    .blog-nav-arrow {
        width: 40px;
        height: 40px;
    }
    
    .blog-all-posts-link {
        font-size: 14px;
    }
}


/* ============================================================
   Whole article card clickable — a "stretched link" overlay makes
   the entire .blog-card open the post, not just the "לקריאה" button.
   ============================================================ */
.blog-card {
    position: relative;
}

.blog-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* ===== faq-section.css ===== */
/* ==========================================================================
   FAQ Section
   ========================================================================== */

   .faq-section {
    background: #FEF6F0;
    padding: 80px 0 0;
}

.faq-section-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

.faq-section-layout {
    display: flex;
    /* flex-direction: row-reverse; */ /* RTL: Content on right, FAQ on left */
    gap: 80px;
    align-items: flex-start;
}

/* Right Side - Content */
.faq-section-content {
    flex: 0 0 380px;
    position: sticky;
    top: 120px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.faq-section.animate-in .faq-section-content {
    opacity: 1;
    transform: translateY(0);
}

.faq-section-title {
    font-size: 42px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 16px;
    line-height: 1.2;
    white-space: pre-line;
    word-wrap: break-word;
    overflow-wrap: break-word;
    direction: rtl;
}

.faq-section-title br {
    display: block !important;
    margin: 0;
    line-height: 0.5em;
    height: 0.5em;
}

.faq-section-description {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 32px;
}

/* Tabs - Vertical with arrows */
.faq-tabs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 40px;
}

.faq-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 21px 8px 8px;
    background: white;
    border: none;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: right;
}

.faq-tab:hover {
    background: #f5f5f5;
    color: #1a1a1a;
}

.faq-tab.active {
    background: #F6B38D;
    color: black;
}

.faq-tab-text {
    flex: 1;
}

.faq-tab-arrow {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 50%;
    color: #1a1a1a;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.faq-tab.active .faq-tab-arrow {
    opacity: 1;
}

.faq-tab-arrow svg {
    width: 16px;
    height: 16px;
}

/* CTA - Desktop */
.faq-cta-wrapper {
    text-align: right;
}

.faq-cta-text {
    font-size: 15px;
    color: #666;
    margin: 0 0 16px;
}

.faq-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background: var(--color-primary, #153C6D);
    color: white;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 100px;
    transition: all 0.3s ease;
}

.faq-cta-button:hover {
    background: #0f2d52;
    transform: translateY(-2px);
}

/* CTA - Mobile (hidden on desktop) */
.faq-cta-wrapper-mobile {
    display: none;
}

/* Left Side - Accordion */
.faq-section-accordion {
    flex: 1;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

.faq-section.animate-in .faq-section-accordion {
    opacity: 1;
    transform: translateY(0);
}

.faq-accordion-content {
    display: none;
}

.faq-accordion-content.active {
    display: block;
}

/* FAQ Item */
.faq-item {
    background: white;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.faq-item-header {
    display: block;
    width: 100%;
    padding: 20px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: right;
    transition: all 0.3s ease;
}

/* Flex lives on an inner wrapper, NOT on the <button>. A <button> as a flex
   container triggers a Chromium bug that wraps text one character per line;
   moving flex to a child element fixes the character-by-character breaking. */
.faq-item-header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.faq-item-header:hover {
    background: transparent;
}

.faq-item-indicator {
    flex-shrink: 0;
}

.faq-item-title {
    flex: 1;
    min-width: 0; /* allow flex child to wrap by words, not chars */
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.5;
    text-align: right;
    direction: rtl;
    word-break: keep-all;
    overflow-wrap: normal;
    white-space: normal;
}

.faq-item-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: all 0.3s ease;
}

.faq-item-icon svg {
    width: 16px;
    height: 16px;
}

.faq-item-icon .vertical {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.faq-item.active .faq-item-icon .vertical {
    transform: rotate(90deg);
    opacity: 0;
}

/* FAQ Content */
.faq-item-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-item.active .faq-item-content {
    max-height: 500px;
}

.faq-item-answer {
    padding: 0 24px 24px 24px;
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    text-align: right;
    direction: rtl;
}

.faq-item-answer p {
    margin: 0 0 12px;
}

.faq-item-answer p:last-child {
    margin-bottom: 0;
}

/* No FAQs message */
.no-faqs {
    text-align: center;
    padding: 48px;
    color: #999;
    font-size: 16px;
}

/* Bottom Line */
.faq-section-bottom-line {
    height: 8px;
    background: #F6B38D;
    margin-top: 80px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
    .faq-section-container {
        padding: 0 32px;
    }
    
    .faq-section-layout {
        gap: 60px;
    }
    
    .faq-section-content {
        flex: 0 0 320px;
    }
    
    .faq-section-title {
        font-size: 36px;
    }
}

@media (max-width: 1024px) {
    .faq-section {
        padding: 60px 0 80px;
    }
    
    .faq-section-layout {
        flex-direction: column;
        gap: 0;
    }
    
    .faq-section-content {
        flex: none;
        width: 100%;
        position: static;
        text-align: center;
        order: 1; /* Title first on mobile */
    }
    
    .faq-section-accordion {
        order: 2; /* Accordion after tabs */
    }
    
    .faq-section-title {
        font-size: 32px;
    }
    
    .faq-tabs {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    
    .faq-tab {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .faq-tab-arrow {
        width: 28px;
        height: 28px;
    }
    
    /* Hide desktop CTA, show mobile CTA */
    .faq-cta-wrapper {
        display: none;
    }
    
    .faq-cta-wrapper-mobile {
        display: block;
        text-align: center;
        margin-top: 40px;
    }
    
    .faq-cta-wrapper-mobile .faq-cta-button {
        background: #153C6D;
        width: 100%;
        max-width: 300px;
    }
    
    .faq-cta-wrapper-mobile .faq-cta-button:hover {
        background: #e5a27c;
    }
    
    .faq-section-accordion {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .faq-section {
        padding: 48px 0 70px;
    }
    
    .faq-section-container {
        padding: 0 24px;
    }
    
    .faq-section-title {
        font-size: 28px;
    }
    
    .faq-section-title br {
        display: block !important;
        margin: 0;
        line-height: 0.5em;
        height: 0.5em;
    }
    
    .faq-section-description {
        font-size: 15px;
        margin-bottom: 24px;
    }
    
    .faq-tabs {
        margin-bottom: 32px;
    }
    
    .faq-tab {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .faq-tab-arrow {
        width: 24px;
        height: 24px;
    }
    
    .faq-tab-arrow svg {
        width: 14px;
        height: 14px;
    }
    
    .faq-item-header {
        padding: 16px 20px;
        gap: 12px;
    }

    .faq-item-title {
        font-size: 16px;
    }

    .faq-item-answer {
        padding: 0 20px 20px 20px;
        font-size: 14px;
    }
    
    .faq-cta-wrapper-mobile .faq-cta-button {
        max-width: 50%;
        padding: 16px 32px;
    }
}

@media (max-width: 480px) {
    .faq-section {
        padding: 40px 0 0;
    }
    
    .faq-section-container {
        padding: 0 16px;
    }
    
    .faq-section-title {
        font-size: 24px;
    }
    
    .faq-section-title br {
        display: block !important;
        margin: 0;
        line-height: 0.5em;
        height: 0.5em;
    }
    
    .faq-tabs {
        gap: 6px;
    }
    
    .faq-tab {
        padding: 8px 14px;
        font-size: 12px;
        gap: 8px;
        justify-content: center;
    }
    
    .faq-tab-arrow {
        width: 22px;
        height: 22px;
        display: none;
    }
    
    .faq-item-header {
        padding: 14px 16px;
        gap: 10px;
    }
    
    .faq-item-indicator svg {
        width: 10px;
        height: 10px;
    }
    
    .faq-item-title {
        font-size: 15px;
    }

    .faq-item-answer {
        padding: 0 16px 16px 16px;
        font-size: 13px;
    }
}

/* ===== contact-form-section.css ===== */
/* ==========================================================================
   Contact Form Section
   ========================================================================== */

   .contact-form-section {
    background: var(--color-primary, #153C6D);
    overflow: hidden;
    padding: 40px;
}

.contact-form-section-layout {
    display: flex;
    flex-direction: row-reverse; /* RTL: Image on right, form on left */
    align-items: stretch;
    /* gap: 60px; */
    max-width: 1400px;
    /* border-radius: 1rem; */
    border-radius: 1.8rem;
    margin: 0 auto;
    background: #ffffff45;
}

/* Left Side - Form Content */
.contact-form-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.contact-form-section.animate-in .contact-form-content {
    opacity: 1;
    transform: translateY(0);
}

.contact-form-content-inner {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

.contact-form-title {
    font-size: 26px;
    font-weight: 400;
    color: white;
    margin: 0 0 8px;
    line-height: 1.3;
    text-align: right;
}

.contact-form-subtitle {
    font-size: 34px;
    font-weight: 700;
    color: white;
    margin: 0 0 48px;
    line-height: 1.3;
    text-align: center;
}

/* Form Wrapper - CF7 Styling */
.contact-form-wrapper {
    width: 100%;
}

.contact-form-wrapper .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0 2rem 2rem;
}

/* Form Row - Two columns */
.contact-form-wrapper .form-row {
    display: flex;
    flex-direction: row-reverse; /* RTL: Name on right, Phone on left */
    gap: 32px;
}

.contact-form-wrapper .form-row > p,
.contact-form-wrapper .form-row > .form-field {
    flex: 1;
}

/* Form Field - Floating Label Container */
.contact-form-wrapper .form-field {
    display: flex;
    flex-direction: column;
}

.contact-form-wrapper .form-field > p {
    position: relative;
    margin: 0;
}

/* Labels - Floating */
.contact-form-wrapper label {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    pointer-events: none;
    transition: transform 0.25s ease, font-size 0.25s ease, color 0.25s ease;
    transform-origin: right top;
    text-align: right;
    line-height: 1;
}

.contact-form-wrapper .form-field.is-focused label,
.contact-form-wrapper .form-field.has-value label {
    transform: translateY(-20px);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
}

/* Input Fields - Minimal underline style */
.contact-form-wrapper input[type="text"],
.contact-form-wrapper input[type="email"],
.contact-form-wrapper input[type="tel"],
.contact-form-wrapper textarea {
    width: 100%;
    padding: 4px 0 8px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgb(255 255 255 / 92%);
    color: white;
    font-size: 16px;
    font-family: inherit;
    transition: border-color 0.3s ease;
    text-align: right;
    direction: rtl;
}

.contact-form-wrapper input[type="text"]::placeholder,
.contact-form-wrapper input[type="email"]::placeholder,
.contact-form-wrapper input[type="tel"]::placeholder,
.contact-form-wrapper textarea::placeholder {
    color: transparent;
}

.contact-form-wrapper input[type="text"]:focus,
.contact-form-wrapper input[type="email"]:focus,
.contact-form-wrapper input[type="tel"]:focus,
.contact-form-wrapper textarea:focus {
    outline: none;
    border-bottom-color: white;
}

/* Phone input - numbers only, LTR for numbers */
.contact-form-wrapper input[type="tel"] {
    direction: ltr;
    text-align: right;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

/* Submit Button Wrapper */
.contact-form-wrapper .submit-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

/* Submit Button with Arrow */
.contact-form-wrapper input[type="submit"],
.contact-form-wrapper .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 200px;
    padding: 16px 40px;
    background: white;
    color: var(--color-primary, #153C6D);
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    flex-direction: row; /* Arrow on left, text on right */
}

.contact-form-wrapper input[type="submit"]:hover,
.contact-form-wrapper .wpcf7-submit:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Arrow SVG in button */
.contact-form-wrapper .submit-arrow {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    margin-left: 8px;
}

/* CF7 Validation Messages */
.contact-form-wrapper .wpcf7-not-valid-tip {
    color: #ff6b6b;
    font-size: 12px;
    margin-top: 4px;
    text-align: right;
}

.contact-form-wrapper .wpcf7-response-output {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
}

.contact-form-wrapper .wpcf7-mail-sent-ok {
    background: rgba(76, 175, 80, 0.2);
    color: #81c784;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.contact-form-wrapper .wpcf7-validation-errors,
.contact-form-wrapper .wpcf7-spam-blocked {
    background: rgba(244, 67, 54, 0.2);
    color: #e57373;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

/* Right Side - Image */
.contact-form-image {
    flex: 0 0 577px;
    position: relative;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
    border-radius: 1rem;
}

.contact-form-section.animate-in .contact-form-image {
    opacity: 1;
    transform: translateX(0);
}

.contact-form-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* object-position: center top; */
    /* border-radius: 0 24px 24px 0; */ /* Rounded corners on right side only */
    background: white;
    padding: 0;
    border-radius: 1.8rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
    .contact-form-section {
        padding: 32px;
    }
    
    .contact-form-section-layout {
        gap: 40px;
    }
    
    .contact-form-image {
        flex: 0 0 340px;
    }
    
    .contact-form-title {
        font-size: 24px;
    }
    
    .contact-form-subtitle {
        font-size: 30px;
    }
}

@media (max-width: 1024px) {
    .contact-form-section {
        padding: 24px;
    }
    
    .contact-form-section-layout {
        flex-direction: column;
        gap: 0;
    }
    
    .contact-form-image {
        flex: none;
        height: 400px;
        order: -1; /* Image first on mobile */
        padding: 0;
        margin-bottom: 24px;
    }
    
    .contact-form-image img {
        border-radius: 1rem;
    }
    
    .contact-form-content {
        padding: 0;
        order: 1; /* Content after image */
    }
    
    .contact-form-content-inner {
        max-width: 100%;
    }
    
    .contact-form-title {
        font-size: 22px;
    }
    
    .contact-form-subtitle {
        font-size: 26px;
        margin-bottom: 32px;
    }
}

@media (max-width: 768px) {
    .contact-form-section {
        padding: 20px;
    }
    
    .contact-form-image {
        height: 350px;
        padding: 0;
        margin-bottom: 20px;
    }
    
    .contact-form-content {
        padding: 0;
    }
    
    .contact-form-title {
        font-size: 20px;
    }
    
    .contact-form-subtitle {
        font-size: 24px;
        margin-bottom: 28px;
    }
    
    /* Stack form fields on mobile */
    .contact-form-wrapper .form-row {
        flex-direction: column;
        gap: 32px;
    }
    
    .contact-form-wrapper input[type="text"],
    .contact-form-wrapper input[type="email"],
    .contact-form-wrapper input[type="tel"],
    .contact-form-wrapper textarea {
        padding: 4px 0 8px 0;
        font-size: 16px;
    }
    
    .contact-form-wrapper input[type="submit"],
    .contact-form-wrapper .wpcf7-submit {
        width: 100%;
        padding: 16px 24px;
        font-size: 15px;
        width: 100%;
        max-width: unset;
    }
}
@media (min-width: 1024px) {
.contact-form-wrapper .wpcf7-form {

    padding: unset !important;
}
.contact-form-wrapper .submit-wrapper {
 
    justify-content: end !important;

}
}
@media (max-width: 480px) {
    .contact-form-wrapper label {
        font-size: 16px;
    }
    .contact-form-section {
        padding: 16px;
    }
    
    .contact-form-image {
        height: 320px;
        padding: 1rem;
        margin-bottom: 16px;
    }
    
    .contact-form-content {
        padding: 0;
    }
    
    .contact-form-title {
        font-size: 30px;
        text-align: center;
        margin-bottom: unset;
    }
    
    .contact-form-subtitle {
        font-size: 30px;
        margin-bottom: 24px;
        font-weight: 400;
    }
}
.wpcf7-spinner {
 

    position: absolute;
}
.form-field p br{
    display: none;;
}
/* ===== contact-map-section.css ===== */
/* ==========================================================================
   Contact + Map Section
   ========================================================================== */

   .contact-map-section {
    background: linear-gradient(180deg, #f8f1eb 0%, #f6f1ed 100%);
    padding: clamp(32px, 6vw, 72px) var(--container-padding, 24px);
}

.contact-map-container {
    max-width: var(--container-2xl, 1400px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 4vw, 40px);
}

.contact-map-header {
    text-align: center;
    max-width: 960px;
    margin: 0 auto;
}

.contact-map-title {
    font-size: clamp(28px, 2vw, 36px);
    margin: 0 0 8px;
    color: #1d1d1f;
    font-weight: 700;
}

.contact-map-description {
    font-size: 16px;
    color: #4a4a4a;
    line-height: 1.6;
}

.contact-map-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(20px, 4vw, 36px);
    align-items: stretch;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
    border: 1px solid #f0e8e2;
    padding: clamp(20px, 4vw, 32px);
}

.contact-map-image {
    border-radius: 14px;
    overflow: hidden;
    background: #f7f7f7;
}

.contact-map-image img {
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: cover;
    display: block;
}

.contact-map-card {
    background: transparent;
    border-radius: 12px;
    box-shadow: none;
    padding: 0;
    border: none;
    /* Center the title + form vertically so they sit mid-height against the
       taller image column on desktop. */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-map-form-title {
    font-size: clamp(37px, 1.4vw, 26px);
    font-weight: 600;
    color: #1f1f1f;
    margin: 0 0 18px;
    text-align: right;
}

.contact-map-form .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 8px; /* room for the first field's floated label */
}

/* Floating labels — same treatment as the home-page contact form, adapted to the
   light card. The label starts inside the field (acting as the placeholder) and
   floats up on focus / when the field has a value. */
.contact-map-form .form-field > p {
    position: relative;
    margin: 0;
}

.contact-map-form .wpcf7-form label {
    position: absolute;
    right: 0;
    top: 11px;
    margin: 0;
    font-size: 15px;
    color: #8a8a8a;
    line-height: 1;
    pointer-events: none;
    transform-origin: right top;
    transition: transform 0.25s ease, font-size 0.25s ease, color 0.25s ease;
    z-index: 1;
}

.contact-map-form .form-field.is-focused label,
.contact-map-form .form-field.has-value label {
    transform: translateY(-15px);
    font-size: 12px;
    color: var(--color-primary, #153c6d);
}

/* First two fields (name + phone) sit side by side on desktop, like the
   home-page contact form. */
.contact-map-form .form-row {
    display: flex;
    flex-direction: row-reverse; /* RTL: name on the right, phone on the left */
    gap: 24px;
}

.contact-map-form .form-row > .form-field,
.contact-map-form .form-row > p {
    flex: 1;
    min-width: 0;
}

/* Subject dropdown — same underline style as the text inputs, arrow on the left (RTL) */
.contact-map-form select {
    width: 100%;
    padding: 10px 0 12px 20px;
    border: none;
    border-bottom: 1px solid #d9d9d9;
    background: transparent;
    font-size: 15px;
    color: #111;
    font-family: inherit;
    direction: rtl;
    text-align: right;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23999' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 2px center;
    background-size: 12px;
    transition: border-color 0.2s ease;
}

.contact-map-form select:focus {
    outline: none;
    border-bottom-color: var(--color-secondary, #d6885b);
}

/* Message box — a plain single-line field that auto-grows with the text (no
   fixed height, no manual resize handle). The JS grows it on input. Heebo font. */
.contact-map-form textarea {
    min-height: 0;
    height: 44px;
    resize: none;
    overflow: hidden;
    line-height: 1.5;
    font-family: 'Heebo', sans-serif;
}

/* Heebo on the message field's floating label (its placeholder). */
.contact-map-form .form-field:has(textarea) label {
    font-family: 'Heebo', sans-serif;
}

/* Submit button — Heebo font (per request) */
.contact-map-form .wpcf7-submit,
.contact-map-form input[type="submit"] {
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
}

.contact-map-form input[type="text"],
.contact-map-form input[type="email"],
.contact-map-form input[type="tel"],
.contact-map-form textarea {
    width: 100%;
    padding: 10px 0 12px;
    border: none;
    border-bottom: 1px solid #d9d9d9;
    background: transparent;
    font-size: 15px;
    color: #111;
    direction: rtl;
    text-align: right;
    transition: border-color 0.2s ease;
}

.contact-map-form input[type="tel"] {
    direction: ltr;
    text-align: right;
}

.contact-map-form input[type="text"]:focus,
.contact-map-form input[type="email"]:focus,
.contact-map-form input[type="tel"]:focus,
.contact-map-form textarea:focus {
    outline: none;
    border-bottom-color: var(--color-secondary, #d6885b);
}

.contact-map-form .wpcf7-submit,
.contact-map-form input[type="submit"] {
    background: var(--color-primary, #153c6d);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 14px 24px;
    font-size: 15px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    min-width: 160px;
}

.contact-map-form .wpcf7-submit:hover,
.contact-map-form input[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(21, 60, 109, 0.2);
}

.contact-map-info-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(16px, 2.5vw, 24px);
    align-items: center;
    margin: 2rem 0;
}

.contact-map-description-block {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    border: none;
    color: #3a3a3a;
    line-height: 1.7;
    text-align: right;
    width: 78%;
}

.contact-map-details {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    border: none;
}

.contact-map-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 22px;
}

.contact-map-detail {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
}

.detail-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    /* background: #f7e2d7; */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.detail-icon img {
    /* max-width: 22px; */
    /* max-height: 22px; */
}

.detail-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label {
    font-weight: 600;
    color: #222;
    font-size: 15px;
}

.detail-value {
    font-size: 14px;
    color: #555;
}

.detail-value a {
    color: inherit;
    text-decoration: none;
}

.detail-value a:hover {
    color: var(--color-primary, #153c6d);
}

.contact-map-embed {
    margin-top: clamp(10px, 3vw, 24px);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.07);
    border: 1px solid #f0e8e2;
}

.contact-map-embed iframe {
    display: block;
    width: 100%;
    min-height: 360px;
    border: 0;
}

@media (max-width: 1024px) {
    .contact-map-grid {
        grid-template-columns: 1fr;
    }

    /* Stack name + phone again once the layout is single-column. */
    .contact-map-form .form-row {
        flex-direction: column;
        gap: 18px;
    }

    .contact-map-image img {
        max-height: 360px;
    }

    .contact-map-info-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .contact-map-description-block {

        width: 100%;
    }
    .contact-map-section {
        padding: 65px 16px;
    }

    /* Submit button spans the full width on mobile. */
    .contact-map-form .submit-wrapper,
    .contact-map-form .submit-wrapper p {
        width: 100%;
    }
    .contact-map-form .wpcf7-submit,
    .contact-map-form input[type="submit"] {
        width: 100%;
        min-width: 0;
    }

    .contact-map-card,
    .contact-map-details {
        border-radius: 14px;
    }

    .contact-map-image {
        border-radius: 14px;
    }

    .contact-map-embed iframe {
        min-height: 300px;
    }

    .detail-label {
        font-weight: 600;
        color: #222;
        font-size: 18px;
    }

    .detail-value {
        font-size: 17px;
        color: #555;
    }
    .contact-map-details-list {

        gap: 21px 22px;
    }
}


/* ===== single.css ===== */
/* ==========================================================================
   Single Post
   ========================================================================== */

   .single-post-wrapper {
    background: transparent;
    /* padding: clamp(32px, 6vw, 64px) var(--container-padding, 24px); */
    /* clip (not hidden) so the sticky sidebar form isn't broken by a scroll-container ancestor */
    overflow-x: clip;
    overflow-y: visible;
    width: 100%;
}

.single-date {
    text-align: center;
    font-size: 13px;
    color: #c67b3d;
    margin-bottom: 4px;
}

.single-title {
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 700;
    color: #0f0f0f;
    margin: 0 0 24px;
    line-height: 1.3;
    text-align: center;
}

.single-post-container {
    max-width: 1240px;
    margin: 0 auto;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0 var(--container-padding, 24px);
}

.single-featured-image {
    margin: 0 0 28px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.08);
    border-bottom: 6px solid #f1c9a5;
}

.single-featured-image img {
    width: 100%;
    height: 22rem;
    display: block;
    object-fit: cover;
}

.single-content {
    max-width: 940px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.9;
    color: #2b2b2b;
    text-align: right;
}

.single-content p {
    margin: 0 0 18px;
    width: 100%;
    break-line: inherit;
    line-break: auto;
}

.single-content h2,
.single-content h3,
.single-content h4 {
    margin: 24px 0 12px;
    font-weight: 700;
    color: #111;
}

.single-content ul {
    padding-right: 20px;
    margin: 0 0 18px;
}

.single-content li {
    margin-bottom: 8px;
}

.single-share {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 0 0 20px;
    max-width: 940px;
    margin: auto;
    margin-bottom: 1rem;
}

.share-label {
    font-weight: 600;
    color: #2b2b2b;
    margin-left: 8px;
}

.share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-decoration: none;
    color: #fff;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.share-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.share-icon.facebook { background: #3b5998; }
.share-icon.whatsapp { background: #25d366; }
.share-icon.instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.share-icon.email { background: #666; }

.share-icon:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

@media (max-width: 768px) {
    /* .single-content sits inside .single-post-container, which already adds the
       side padding. Its own padding doubled it — removed here. The container uses
       the same side padding as the rest of the site (24px ≤768, 16px ≤480). */
    .single-content {
        padding: 0;
    }

    .single-post-container {
        padding: 0 24px;
    }

    .single-title {
        font-size: clamp(26px, 5vw, 34px);
    }

    .single-featured-image {
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .single-post-container {
        padding: 0 16px;
    }
}

@media (min-width: 768px) {
    .service-archive-slider{
        margin-top:4rem;
      }
.single-title {
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 700;
    color: #0f0f0f;
    margin: 0 0 24px;
    line-height: 1.3;
    text-align: center;
    width: 50%;

    margin: auto !important;
    margin-bottom: 1rem !important;

}
}
.service-archive-slider .services-grid-title{
    text-align: center;
}
.service-archive-slider .services-grid-description{
    text-align: center;
    margin-bottom: 1rem;
}
.service-archive-slider{
  margin-top:2rem;
}
/* ============================================================
   Service / service-category pages — sticky contact-form sidebar
   (desktop only). Content shifts right, blue form panel on the left.
   ============================================================ */
.service-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 96px;
}

.service-layout > .single-content,
.service-layout > .service-term-content {
    flex: 1 1 auto;
    min-width: 0;
}

/* Desktop: spread the two-column form layout out to the page margins (up to the
   site's widest container) instead of the narrow article/term container — so the
   form sits at the left page margin and the content at the right page margin.
   Uses width + negative margin (no transform) so the sticky form keeps working. */
@media (min-width: 1025px) {
    /* The wrapper clipped horizontally, which stopped the row from breaking out of the
       narrow article column — allow it so the full-bleed row below can show. */
    body.single .single-post-wrapper,
    body.tax-service-category .single-post-wrapper {
        overflow-x: visible;
    }

    /* Full-bleed the two-column row to the viewport (width:100vw is absolute, so it does
       NOT depend on the narrow parent), then pad it to the EXACT header container box
       (.header-container: max-width container-3xl; padding 0 container-padding). Result:
       the form sits at the header's LEFT margin and the content's right edge lands on the
       header's RIGHT (logo) margin. */
    body.single .service-layout,
    body.tax-service-category .service-layout {
        width: 100vw;
        max-width: none;
        margin-inline: calc(50% - 50vw);
        padding-inline: max(
            var(--container-padding, 2rem),
            calc((100vw - var(--container-3xl, 1600px)) / 2 + var(--container-padding, 2rem))
        );
        box-sizing: border-box;
    }

    body.single .service-layout > .single-content,
    body.tax-service-category .service-layout > .service-term-content {
        max-width: none;
        margin: 0;
        /* NOTE: no negative margin-right here — a -28px "nudge" used to push the content
           past the padding, leaving it ~4px from the screen edge on viewports ≤1650px.
           The padding-inline on .service-layout already matches the header margins. */
    }

    /* Drop the sticky form down a little so its top edge lines up with the top of the
       content blocks (not the container edge). Tunable. */
    body.single .service-side-form,
    body.tax-service-category .service-side-form {
        margin-top: 34px;
    }
}

.service-side-form {
    flex: 0 0 380px;
    width: 380px;
    position: sticky;
    top: 110px;
    align-self: flex-start;
    /* Stops sticking ~64px before the layout ends, so it never touches the footer. */
    margin-bottom: 64px;
    background: var(--color-primary, #153C6D);
    border-radius: 18px;
    padding: 30px 26px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14);
}

.service-side-form-title {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 30px;
    text-align: center;
}

/* Drop the home-page form's 2rem side padding so the fields fill the panel, and
   use one uniform gap between every field (name / phone / email / button). */
.service-side-form .contact-form-wrapper .wpcf7-form {
    padding: 18px 0 0;
    gap: 28px;
}

.service-side-form .contact-form-wrapper .form-row {
    flex-direction: column;
    gap: 28px;
}

/* White submit button — full width of the form (the wrapper centred it before). */
.service-side-form .contact-form-wrapper .submit-wrapper {
    display: block;
    margin-top: 16px;
}

.service-side-form .contact-form-wrapper .submit-wrapper p {
    margin: 0;
    width: 100%;
}

.service-side-form .contact-form-wrapper input[type="submit"],
.service-side-form .contact-form-wrapper .wpcf7-submit {
    width: 100%;
    min-width: 0;
}

/* Quick actions (phone / WhatsApp / email) under the button — styled like the
   contact-page details: white icon + mini-title + value, no panel background. */
.service-side-form-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 26px;
}

.service-side-action {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    text-decoration: none;
}

.service-side-action-ico {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.service-side-action-ico svg,
.service-side-action-ico img {
    width: 28px;
    height: 28px;
    /* Force any icon colour to pure white on the blue panel. */
    filter: brightness(0) invert(1);
}

.service-side-action-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.service-side-action-title {
    font-weight: 600;
    font-size: 15px;
    color: #fff;
}

.service-side-action-value {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
    direction: ltr;
    text-align: right;
}

/* On these pages (desktop) the floating sticky actions move into the form, so
   hide the floating bar. */
@media (min-width: 1025px) {
    body.single .sticky-actions,
    body.tax-service-category .sticky-actions {
        display: none !important;
    }
}

/* Desktop only — below 1024px hide the form and let content fill the width. */
@media (max-width: 1024px) {
    .service-layout {
        display: block;
    }
    .service-side-form {
        display: none;
    }
}

/* ============================================================
   Inner תחומי-עיסוק carousel cards — white card, image on top,
   title in a white body BELOW the image (not overlaid).
   ============================================================ */
.service-archive-slider .service-card {
    background: #fff;
    color: inherit;
    border-radius: 18px;
    /* No clip box on the card — the image rounds itself; the card only pads its
       contents so the image sits inset with a small margin inside the card. */
    overflow: visible;
    padding: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-archive-slider .service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
}

/* Square (1:1) image, inset inside the card with its own rounded corners. */
.service-archive-slider .service-card-image {
    aspect-ratio: 1 / 1;
    min-height: 0;
    flex: 0 0 auto;
    border-radius: 12px;
    overflow: hidden;
}

/* Remove the orange/yellow accent line under the image. */
.service-archive-slider .service-card-line {
    display: none;
}

.service-archive-slider .service-card-body {
    padding: 14px 6px 4px;
    text-align: center;
    background: #fff;
}

.service-archive-slider .service-card-title {
    margin: 0;
    color: #1a1a1a;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    text-shadow: none;
}

/* Cards area: no side gutters. The slider had DOUBLE horizontal padding — the
   inner .service-container plus the outer .single-post-container. Drop the inner
   padding, and cancel the outer container's side padding with a negative inline
   margin so the cards row runs edge-to-edge of the page container. */
.service-archive-slider .service-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* On service singles the cards row lives inside the narrow .single-post-container
   (1240) while on the category (taxonomy) pages it spans the full-width .service-archive.
   Full-bleed it to the viewport here too so both look identical — no side gutters. */
body.single-service .service-archive-slider {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
}

/* On service singles the content sits in the right column (the form is on the left),
   so the share row must span the full width and align right with the content — not be
   centred on its own 940px like on a normal article. */
body.single .single-share {
    max-width: none;
    margin-inline: 0;
    justify-content: flex-start;
}

/* ============================================================
   Content accordions (built by main.js on service / category pages)
   Each heading + its text becomes a white card with an arrow toggle.
   ============================================================ */
.content-accordion-item {
    background: #fff;
    border: none;
    border-radius: 16px;
    /* Same shadow whether closed or open — no change between states. */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    margin-bottom: 16px;
    overflow: hidden;
}

.content-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    margin: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: right;
    font-family: inherit;
}

.content-accordion-title {
    font-size: clamp(17px, 1.6vw, 20px);
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-primary, #153C6D);
}

.content-accordion-arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-gray-100, #f1f2f4);
    color: var(--color-primary, #153C6D);
    transition: transform 0.35s ease, background-color 0.25s ease, color 0.25s ease;
}

.content-accordion-item.open .content-accordion-arrow {
    transform: rotate(180deg);
    background: var(--color-primary, #153C6D);
    color: #fff;
}

.content-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.content-accordion-inner {
    padding: 0 24px 22px;
}

/* Reset the top margin of the first element inside a panel (headings/paragraphs
   already carry their own spacing). */
.content-accordion-inner > :first-child {
    margin-top: 0;
}

/* ============================================================
   Breathing room between the hero (title / subtitle) and the
   content + accordions area on service, category and article pages.
   ============================================================ */
@media (min-width: 1025px) {
    body.single .service-layout,
    body.tax-service-category .service-layout {
        margin-top: 44px;
    }
}

/* ============================================================
   Mobile: content accordions span wider — much less side margin.
   ============================================================ */
@media (max-width: 768px) {
    /* Taxonomy pages: drop the term-content side padding (kept vertically). */
    .service-term-content {
        padding-inline: 0;
    }

    /* Articles / single services: pull the cards out past the container padding. */
    .single-content .content-accordion-item {
        margin-inline: -12px;
    }

    .content-accordion-header {
        padding: 18px 16px;
    }

    .content-accordion-inner {
        padding: 0 16px 20px;
    }
}

@media (max-width: 480px) {
    .single-content .content-accordion-item {
        margin-inline: -8px;
    }
}

/* ============================================================
   Content accordions: NEVER break characters inside a word —
   whole words wrap to the next line (Hebrew-safe).
   ============================================================ */
.content-accordion-item,
.content-accordion-item * {
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-break: auto !important;
    hyphens: none !important;
    white-space: normal !important;
}

/* ===== responsive.css ===== */
/**
 * Responsive Styles - Avraham Theme
 *
 * @package Avraham_Theme
 */

/* ========================================
   Disable scroll-reveal entry animations
   ========================================
   Every section had its own IntersectionObserver that added `.animate-in` once
   the section scrolled into view, fading/sliding its contents up from opacity:0.
   Across 12 sections this produced the "staged / uneven loading" feel — each
   block appearing late as you scrolled. We force every animated element to its
   final visible state on load. Only the specific entry-animation wrappers are
   listed here, so menus, popups, spinners and slider-card dimming (which also
   use opacity:0) are untouched. The hover transforms on these blocks live on
   child elements (.feature-content, img) or buttons, so `transform: none` here
   does not affect any hover effect. */
.about-content,
.about-image-desktop,
.blog-content-wrapper,
.blog-section-header,
.blog-tabs-wrapper,
.contact-form-content,
.contact-form-image,
.faq-section-accordion,
.faq-section-content,
.feature-item,
.reviews-content-wrapper,
.reviews-section-header,
.services-grid-header,
.services-grid-item,
.stat-item,
.stats-cta,
.stats-header,
.success-stories-content-wrapper,
.success-stories-cta,
.success-stories-header,
.success-stories-tabs-wrapper,
.team-section-title,
.team-slider,
.video-section-button-wrapper,
.video-section-description,
.video-section-embed,
.video-section-title,
.why-choose-button-wrapper,
.why-choose-feature,
.why-choose-title {
    opacity: 1 !important;
    transform: none !important;
}

/* ========================================
   Breakpoint Reference
   ======================================== 
   Mobile:     < 480px
   Mobile L:   480px - 767px
   Tablet:     768px - 1023px
   Desktop:    1024px - 1279px
   Desktop L:  1280px - 1399px
   Desktop XL: >= 1400px
   ======================================== */

/* ========================================
   Prevent Horizontal Scrolling on Mobile
   ======================================== */
   @media (max-width: 767px) {
    html,
    body {
        overflow-x: hidden !important;
        width: 100%;
        max-width: 100vw;
        position: relative;
    }
    
    .site-main,
    .front-page-content,
    .page-content,
    main {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }
    
    * {
        max-width: 100%;
    }
    
    img,
    video,
    iframe,
    embed,
    object {
        max-width: 100%;
        height: auto;
    }
    
    /* :not([class*="elementor"]) so this doesn't add side padding to Elementor's
       nested containers (.elementor-container / .elementor-widget-container) inside
       post content — that stacked 2× and made article text far more inset than the
       rest of the site. Overflow is still capped by the section/div/article rule below. */
    .container,
    .container-fluid,
    [class*="container"]:not([class*="elementor"]) {
        max-width: 100vw;
        overflow-x: hidden;
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
    }
    
    /* Prevent negative margins from causing overflow */
    section,
    div,
    article {
        max-width: 100vw;
    }
}

/* ========================================
   Extra Small Devices (< 480px)
   ======================================== */
@media (max-width: 479px) {
    :root {
        --container-padding: 1rem;
    }
    
    .btn {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
    }
    
    .btn-lg {
        padding: var(--space-3) var(--space-6);
    }
}

/* ========================================
   Small Devices (480px - 767px)
   ======================================== */
@media (min-width: 480px) and (max-width: 767px) {
    :root {
        --container-padding: 1.25rem;
    }
}

/* ========================================
   Medium Devices / Tablets (768px - 1023px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --container-padding: 1.5rem;
    }
}

/* ========================================
   Large Devices / Desktops (1024px - 1279px)
   ======================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
    :root {
        --container-padding: 2rem;
    }
}

/* ========================================
   Extra Large Devices (>= 1280px)
   ======================================== */
@media (min-width: 1280px) {
    :root {
        --container-padding: 2rem;
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .site-header,
    .site-footer,
    .mobile-menu,
    .mobile-menu-overlay {
        display: none !important;
    }
    
    .site-main {
        margin-top: 0;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
    
    img {
        max-width: 100% !important;
    }
}

/* ========================================
   Reduced Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* ========================================
   High Contrast Mode
   ======================================== */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #000080;
        --color-secondary: #b8860b;
    }
    
    .btn {
        border-width: 3px;
    }
    
    a:focus,
    button:focus {
        outline-width: 3px;
    }
}

/* ========================================
   Dark Mode Support (Future)
   ======================================== */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles can be added here if needed */
}


/* The greedy [class*="container"] rule above forces side padding AND
   overflow-x:hidden on EVERY container on mobile — including the inner-pages
   cards carousel. The hidden overflow turned it into a scroll container that
   CLIPPED the card shadows; the carousel must also be full-bleed. Same
   specificity, later in the file → this wins. (.service-slider handles the
   horizontal clipping of off-screen slides itself.) */
@media (max-width: 768px) {
    .service-archive-slider .service-container {
        padding-left: 0;
        padding-right: 0;
        overflow: visible;
    }
}