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

   Modern CSS Reset & Base Styles

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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



:root {

    /* Colors */

    --primary: #0066CC;

    --primary-dark: #0052A3;

    --primary-light: #3385D6;

    --secondary: #1A1A1A;

    --accent: #FF6B35;

    --text-dark: #1A1A1A;

    --text-light: #666666;

    --text-white: #FFFFFF;

    --bg-light: #F8F9FA;

    --bg-white: #FFFFFF;

    --border-color: #E5E5E5;

    

    /* Typography - Apple/Tesla style: system UI + clean sans */

    --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --font-heading: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    

    /* Spacing */

    --spacing-xs: 0.5rem;

    --spacing-sm: 1rem;

    --spacing-md: 2rem;

    --spacing-lg: 3rem;

    --spacing-xl: 4rem;

    --spacing-2xl: 6rem;

    

    /* Shadows */

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);

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

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

    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);

    

    /* Transitions */

    --transition-fast: 0.2s ease;

    --transition-base: 0.3s ease;

    --transition-slow: 0.5s ease;

    

    /* Border Radius */

    --radius-sm: 8px;

    --radius-md: 12px;

    --radius-lg: 16px;

    --radius-xl: 24px;

    --radius-full: 9999px;

}



html {

    scroll-behavior: smooth;

}



body {

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

    color: var(--text-dark);

    line-height: 1.6;

    overflow-x: hidden;

    padding-bottom: 0;

}



@media (max-width: 968px) {

    body {

        padding-bottom: 140px; /* Space for mobile towing CTA */

    }

}

.container-fluid{
    width: 100%;

    padding: 0px 2rem;

    margin:0;
}

.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 var(--spacing-md);

}



/* Display utility: hidden from sm (576px) and up */

@media (min-width: 576px) {

    .d-sm-none {

        display: none !important;

    }

}



/* Display utility: visible only on sm and up (hidden on mobile) */

.d-sm-block {

    display: none !important;

}

@media (min-width: 576px) {

    .d-sm-block {

        display: block !important;

    }

}



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

   Navigation

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

.navbar {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    background: #ffffff;

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

    z-index: 1002;

    transition: var(--transition-base);
  border-style: solid;
  border-width: 5px 0 0 0;
  border-image: linear-gradient(15deg, var(--primary), #75baff) 1;
}



.navbar.scrolled {

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

}



.nav-wrapper {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.2rem 0;

}

.d-none{
    display: none !important;
}

.logo {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: var(--spacing-xs);

    text-decoration: none;

    color: var(--text-dark);

    transition: var(--transition-base);

}



.logo:hover {

    transform: translateY(-2px);

}



.logo-icon {

    font-size: 2rem;

    line-height: 1;

}



.logo-image {

    height: 75px;

    width: auto;

    max-width: 280px;

    object-fit: contain;

    display: block;

    transition: var(--transition-base);

}



.logo:hover .logo-image {

    transform: scale(1.05);

}



.logo-text {

    display: flex;

    flex-direction: column;

    line-height: 1.2;

}



.logo-title {

    font-size: 1rem;

    font-weight: 700;

    letter-spacing: 0.05em;

    line-height: 1.2;

    color: var(--text-dark);

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

}



.logo-subtitle {

    font-size: 0.8125rem;

    font-weight: 500;

    color: var(--text-light);

    line-height: 1.2;

    letter-spacing: 0.02em;

}



.nav-menu {

    display: flex;

    align-items: center;

    gap: var(--spacing-md);

    list-style: none;

}



.nav-link {

    text-decoration: none;

    color: var(--text-dark);

    font-weight: 500;

    font-size: 0.9375rem;

    transition: var(--transition-fast);

    position: relative;

    padding: var(--spacing-xs) 0;

}



.nav-link::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--primary);

    transition: var(--transition-base);

}



.nav-link:hover::after,

.nav-link.active::after {

    width: 100%;

}



.nav-link:hover {

    color: var(--primary);

}



.nav-phone {

    text-decoration: none;

    color: var(--primary);

    font-weight: 600;

    font-size: 0.9375rem;

}



.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
}



.mobile-menu-toggle span {

    width: 24px;

    height: 2px;

    background: var(--text-dark);

    transition: var(--transition-base);

}



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

   Buttons

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

.btn-primary,

.btn-secondary,

.btn-hero {

    display: inline-flex;

    align-items: center;

    gap: var(--spacing-xs);

    padding: 0.875rem 1.75rem;

    font-weight: 600;

    font-size: 0.9375rem;

    text-decoration: none;

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

    transition: var(--transition-base);

    border: none;

    cursor: pointer;

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

}



.btn-primary {

    background: var(--primary);

    color: var(--text-white);

    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);

}



.btn-primary:hover {

    background: var(--primary-dark);

    transform: translateY(-2px);

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

}



.btn-secondary {

    background: transparent;

    color: var(--primary);

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

}



.btn-secondary:hover {

    background: var(--primary);

    color: var(--text-white);

    transform: translateY(-2px);

}



.btn-hero {

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);

    color: var(--text-white);

    padding: 1.125rem 2.25rem;

    font-size: 1rem;

    box-shadow: 0 8px 24px rgba(0, 102, 204, 0.4);

}



.btn-hero:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 32px rgba(0, 102, 204, 0.5);

}



.btn-full {

    width: 100%;

    justify-content: center;

}



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

   Hero Section

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

.hero {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding-top: 0px;

    overflow: hidden;

    background: #1a1a2e;

}



@media (max-width: 768px) {

    .hero {

        min-height: 80vh;

        padding-top: 70px;

    }

}



@media (max-width: 480px) {

    .hero {

        min-height: 70vh;

        padding-top: 60px;

    }

}



.hero-background {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    z-index: 0;

}



.hero-background::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

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

}



.hero-overlay-pattern {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: none;

    z-index: 0;

    pointer-events: none;

}



.hero-content {

    position: relative;

    z-index: 1;

    text-align: center;

    color: var(--text-white);

    max-width: 1000px;

    padding: var(--spacing-xl) var(--spacing-md);

    animation: fadeInUp 1s ease;

}



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.625rem 1.5rem;

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

    backdrop-filter: blur(15px);

    border-radius: 20px;

    font-size: 0.875rem;

    font-weight: 600;

    margin-bottom: var(--spacing-lg);

    border: 1px solid rgba(255, 255, 255, 0.25);

    animation: pulse 2s ease-in-out infinite;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

}



.hero-badge svg {

    width: 18px;

    height: 18px;

    opacity: 0.9;

}



@keyframes pulse {

    0%, 100% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.05);

    }

}



.hero-title {

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

    font-size: clamp(2.5rem, 5vw, 4.5rem);

    font-weight: 700;

    line-height: 1.1;

    margin-bottom: var(--spacing-md);

    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.hero-title-line {

    display: block;

    animation: fadeInUp 1s ease 0.2s both;

}



.hero-title-accent {

    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    animation: fadeInUp 1s ease 0.4s both;

    position: relative;

}



.hero-title-accent::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: linear-gradient(90deg, transparent, var(--primary-light), transparent);

    opacity: 0.6;

}



.hero-subtitle {

    font-size: clamp(0.875rem, 1.5vw, 1rem);

    margin-bottom: var(--spacing-xl);

    opacity: 0.95;

    line-height: 1.65;

    max-width: 620px;

    margin-left: auto;

    margin-right: auto;

    animation: fadeInUp 1s ease 0.6s both;

}



.hero-features {

    display: flex;

    justify-content: center;

    gap: var(--spacing-lg);

    margin-bottom: var(--spacing-xl);

    flex-wrap: wrap;

    animation: fadeInUp 1s ease 0.8s both;

}



.hero-feature-item {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.75rem 1.25rem;

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

    backdrop-filter: blur(10px);

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

    border: 1px solid rgba(255, 255, 255, 0.2);

    font-size: 0.875rem;

    font-weight: 500;

    transition: var(--transition-base);

}



.hero-feature-item:hover {

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

    transform: translateY(-2px);

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

}



.hero-feature-item svg {

    width: 20px;

    height: 20px;

    opacity: 0.9;

}



.hero-cta-group {

    display: flex;

    gap: var(--spacing-md);

    justify-content: center;

    align-items: center;

    margin-bottom: var(--spacing-xl);

    flex-wrap: wrap;

    animation: fadeInUp 1s ease 1s both;

}



.btn-hero-primary {

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);

    color: var(--text-white);

    box-shadow: 0 8px 24px rgba(0, 102, 204, 0.4);

}



.btn-hero-primary:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 32px rgba(0, 102, 204, 0.5);

}



.btn-hero-secondary {

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

    backdrop-filter: blur(10px);

    color: var(--text-white);

    border: 1px solid rgba(255, 255, 255, 0.3);

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

}



.btn-hero-secondary:hover {

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

    transform: translateY(-3px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);

}



.hero-trust-indicators {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: var(--spacing-lg);

    padding: var(--spacing-lg) var(--spacing-xl);

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

    backdrop-filter: blur(15px);

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

    border: 1px solid rgba(255, 255, 255, 0.15);

    margin-top: var(--spacing-lg);

    animation: fadeInUp 1s ease 1.2s both;

    flex-wrap: wrap;

}



.hero-trust-item {

    text-align: center;

}



.hero-trust-number {

    font-size: 2rem;

    font-weight: 700;

    line-height: 1;

    margin-bottom: 0.25rem;

    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.hero-trust-label {

    font-size: 0.75rem;

    opacity: 0.85;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.hero-trust-divider {

    width: 1px;

    height: 40px;

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

}



.hero-scroll-indicator {

    position: absolute;

    bottom: var(--spacing-lg);

    left: 50%;

    transform: translateX(-50%);

    z-index: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.5rem;

    animation: fadeIn 1s ease 1.5s both;

}



.scroll-arrow {

    width: 24px;

    height: 24px;

    border-right: 2px solid var(--text-white);

    border-bottom: 2px solid var(--text-white);

    transform: rotate(45deg);

    animation: bounce 2s infinite;

    opacity: 0.8;

}



.scroll-text {

    font-size: 0.75rem;

    opacity: 0.7;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-weight: 500;

}



@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}



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

   Section Styles

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

section {

    padding: var(--spacing-2xl) 0;

}



.section-header {

    text-align: center;

    margin-bottom: var(--spacing-md);

}



.section-label {

    font-size: 0.875rem;

    font-weight: 600;

    color: var(--primary);

    text-transform: uppercase;

    letter-spacing: 0.1em;

    margin-bottom: var(--spacing-xs);

}



.section-title {

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

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 700;

    color: var(--text-dark);

    margin-bottom: var(--spacing-sm);

}



.section-description {

    font-size: 1.125rem;

    color: var(--text-light);

}



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

   About Us Section

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

.about {

    padding: 0;

    background: var(--bg-white);

}



.about-hero {

    position: relative;

    min-height: 60vh;

    display: flex;

    align-items: center;

    padding-top: 80px;

    overflow: hidden;

}



.about-hero-background {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-size: cover;

    background-position: center;

    opacity: 0.4;

    z-index: 0;

}



.about-hero-background::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, rgba(0, 102, 204, 0.8) 0%, rgba(0, 82, 163, 0.9) 100%);

}



.about-hero-content {

    position: relative;

    z-index: 1;

    text-align: center;

    color: var(--text-white);

    max-width: 900px;

    margin: 0 auto;

    padding: var(--spacing-xl) var(--spacing-md);

}



.about-hero-title {

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

    font-size: clamp(2rem, 4vw, 3.5rem);

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: var(--spacing-md);

    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

}



.about-hero-subtitle {

    font-size: clamp(1.125rem, 2vw, 1.5rem);

    margin-bottom: var(--spacing-xl);

    opacity: 0.95;

    line-height: 1.6;

}



.about-hero-buttons {

    display: flex;

    gap: var(--spacing-md);

    justify-content: center;

    flex-wrap: wrap;

}



.about-sections {

    padding: var(--spacing-2xl) 0;

}



.about-section-item {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--spacing-xl);

    align-items: center;

    margin-bottom: var(--spacing-2xl);

}



.about-section-item.reverse {

    direction: rtl;

}



.about-section-item.reverse > * {

    direction: ltr;

}



.about-section-image {

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

    overflow: hidden;

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

    transition: var(--transition-base);

}



.about-section-image:hover {

    transform: translateY(-4px);

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

}



.about-section-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.about-section-content {

    padding: var(--spacing-lg);

}



.about-section-title {

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

    font-size: clamp(1.75rem, 3vw, 2.5rem);

    font-weight: 700;

    margin-bottom: var(--spacing-md);

    color: var(--text-dark);

}



.about-section-text {

    font-size: 1.125rem;

    color: var(--text-light);

    line-height: 1.8;

    margin-bottom: var(--spacing-md);

}



.cert-badges-inline {

    display: flex;

    flex-wrap: wrap;

    gap: var(--spacing-sm);

    margin-top: var(--spacing-md);

}



.cert-badge-inline {

    padding: 0.5rem 1rem;

    background: var(--primary);

    color: var(--text-white);

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

    font-size: 0.875rem;

    font-weight: 600;

}



.about-wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--spacing-xl);

    align-items: center;

}



.about-content {

    padding-right: var(--spacing-lg);

}



.about-text {

    font-size: 1.125rem;

    color: var(--text-light);

    line-height: 1.8;

    margin-bottom: var(--spacing-md);

}



.about-features {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--spacing-md);

    margin-top: var(--spacing-lg);

}



.about-feature {

    display: flex;

    align-items: center;

    gap: var(--spacing-sm);

    padding: var(--spacing-sm);

}



.feature-icon {

    width: 32px;

    height: 32px;

    background: var(--primary);

    color: var(--text-white);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: 1.125rem;

    flex-shrink: 0;

}



.about-feature span {

    font-weight: 500;

    color: var(--text-dark);

}



.about-image {

    position: relative;

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

    overflow: hidden;

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

}



.about-image-placeholder {

    aspect-ratio: 4/3;

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-white);

    font-size: 1.125rem;

}



.about-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

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

}



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

   Certifications Section

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

.certifications {

    position: relative;

    background: linear-gradient(165deg, #f0f4f9 0%, #e8eef5 35%, #f2f6fb 70%, #eef3f9 100%);

    padding: var(--spacing-md) 0;

    overflow: hidden;

}



.certifications::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 1px;

    background: linear-gradient(90deg, transparent, rgba(0, 102, 204, 0.12), transparent);

}



.certifications-bg-pattern {

    position: absolute;

    inset: 0;

    background-image:

        radial-gradient(circle at 15% 25%, rgba(0, 102, 204, 0.05) 0%, transparent 45%),

        radial-gradient(circle at 85% 75%, rgba(0, 102, 204, 0.05) 0%, transparent 45%),

        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.6) 0%, transparent 70%);

    pointer-events: none;

}



.certifications .section-header {

    margin-bottom: var(--spacing-lg);

}



.certifications-description {

    max-width: 560px;

    margin-left: auto;

    margin-right: auto;

    line-height: 1.65;

}



.certifications-featured-label,

.certifications-slider-label {

    text-align: center;

    font-size: 0.8125rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.12em;

    color: var(--text-light);

    margin: 0 auto var(--spacing-md);

    position: relative;

    z-index: 1;

}



/* More certifications & partners – block */

.certifications-more-section {

    text-align: center;

    margin-top: var(--spacing-md);

    margin-bottom: var(--spacing-md);

    padding-top: var(--spacing-md);

    border-top: 1px solid rgba(0, 102, 204, 0.12);

    position: relative;

    z-index: 1;

}



.certifications-slider-label {

    margin-top: 0;

    margin-bottom: var(--spacing-xs);

    font-size: 0.875rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    color: var(--text-dark);

}



.certifications-slider-desc {

    font-size: 0.9375rem;

    color: var(--text-light);

    margin: 0 auto;

    max-width: 420px;

    line-height: 1.5;

}



.certifications-brands-label {

    text-align: center;

    font-size: 0.8125rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: var(--text-light);

    margin: var(--spacing-sm) auto var(--spacing-sm);

    position: relative;

    z-index: 1;

}



.certifications-header {

    position: relative;

    z-index: 1;

}



.cert-label,

.cert-title {

    opacity: 0;

    transform: translateY(20px);

}



.certifications.cert-in-view .cert-label {

    animation: cert-fade-in-up 0.7s ease forwards;

}



.certifications.cert-in-view .cert-title {

    animation: cert-fade-in-up 0.7s ease 0.1s forwards;

}



.certifications-intro-image.cert-intro-card {

    opacity: 0;

    transform: translateY(24px) scale(0.96);

}



.certifications.cert-in-view .certifications-intro-image.cert-intro-card {

    animation: cert-card-in 0.6s ease forwards;

}



@keyframes cert-fade-in-up {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Certifications intro - featured certs grid */

.certifications-intro {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: var(--spacing-lg);

    max-width: 920px;

    margin: 0 auto;

    position: relative;

    z-index: 1;

}



.certifications-intro-image.cert-intro-card {

    flex: 1;

    min-width: 0;

    max-width: 260px;

    height: 150px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 10px;

    background: var(--bg-white);

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

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.07), 0 2px 12px rgba(0, 102, 204, 0.06);

    border: 1px solid rgba(0, 102, 204, 0.08);

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

}



.certifications.cert-in-view .certifications-intro-image.cert-intro-card:nth-child(1) { animation-delay: 0.12s; }

.certifications.cert-in-view .certifications-intro-image.cert-intro-card:nth-child(2) { animation-delay: 0.22s; }

.certifications.cert-in-view .certifications-intro-image.cert-intro-card:nth-child(3) { animation-delay: 0.32s; }



@keyframes cert-card-in {

    from {

        opacity: 0;

        transform: translateY(24px) scale(0.96);

    }

    to {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}



.certifications-intro-image.cert-intro-card:hover {

    transform: translateY(-6px) scale(1.02);

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 102, 204, 0.1);

}



.cert-intro-img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

    transition: transform 0.3s ease;

}



.certifications-intro-image.cert-intro-card:hover .cert-intro-img {

    transform: scale(1.06);

}



.certifications-intro-text {

    flex: 1;

    min-width: 0;

}



.certifications-intro-para {

    margin: 0;

    font-size: 1rem;

    line-height: 1.7;

    color: var(--text-dark);

}



/* Slider wrapper */

.certifications-slider-wrapper {

    position: relative;

    width: 100%;

    overflow: hidden;

    margin: 0 auto;

    padding: 0;

    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);

    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);

    z-index: 1;

}



.certifications-slider-wrapper-brands {

    padding: var(--spacing-md) 0 var(--spacing-xl);

}



.certifications-track-brands .cert-brand-item {

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 140px;

    height: 80px;

    padding: var(--spacing-sm) var(--spacing-md);

    background: var(--bg-white);

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

    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

    border: 1px solid rgba(0, 102, 204, 0.06);

    transition: transform 0.25s ease, box-shadow 0.25s ease;
    
    margin: 0px 10px;

}



.certifications-track-brands .cert-brand-item:hover {

    transform: scale(1.05);

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);

}

.svg-color{
  filter: invert(1) sepia(1) saturate(5) hue-rotate(200deg);
}

.text-decoration-none{
    text-decoration: none;
}
.svg-color-social{
  filter: invert(1) sepia(1) saturate(5) hue-rotate(200deg);
  width: 20px;
  margin: 5px;
  height: 20px;
}

.certifications-track-brands .why-us-brand-logo {

    max-width: 100%;

    max-height: 75px;

    width: auto;

    height: auto;

    object-fit: contain;

}



.certifications-slider {

    width: 100%;

    overflow: hidden;

}



.certifications-track {

    display: flex;

    gap: 0px;

    animation: scroll-certifications 40s linear infinite;

    width: fit-content;

    will-change: transform;

}



.certifications-track:hover {

    animation-play-state: paused;

}



.cert-badge {
    text-align: center;

    font-weight: 600;

    font-size: 1.125rem;

    min-width: 200px;

    height: 170px;

    color: var(--text-dark);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

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

}



.cert-badge:hover {

    transform: translateY(-6px) scale(1.03);

}



.cert-image {

    max-width: 100%;

    object-fit: contain;

    transition: transform 0.3s ease;

}



.cert-badge:hover .cert-image {

    transform: scale(1.05);

}



@keyframes scroll-certifications {

    0% {

        transform: translateX(0);

    }

    100% {

        transform: translateX(calc(-50%));

    }

}



@media (max-width: 768px) {

    .certifications {

        padding: var(--spacing-xl) 0;

    }

    

    .certifications-description {

        font-size: 1rem;

    }

    

    .certifications-featured-label {

        font-size: 0.75rem;

        letter-spacing: 0.1em;

    }

    

    .certifications-more-section {

        margin-top: var(--spacing-xl);

        padding-top: var(--spacing-lg);

    }

    

    .certifications-slider-label {

        font-size: 0.75rem;

        letter-spacing: 0.1em;

    }

    

    .certifications-slider-desc {

        font-size: 0.875rem;

    }

    

    .certifications-brands-label {

        font-size: 0.75rem;

        margin-top: var(--spacing-lg);

    }

    

    .certifications-track-brands .cert-brand-item {

        min-width: 120px;

        height: 70px;

    }

    

    .certifications-track-brands .why-us-brand-logo {

        max-height: 40px;

    }

    

    .certifications-intro {

        flex-direction: column;

        gap: var(--spacing-lg);

        margin-bottom: 0;

    }

    

    .certifications-intro-image.cert-intro-card {

        max-width: 100%;

        width: 100%;

        height: 140px;

    }

    

    .certifications-intro-image.cert-intro-card:nth-child(1),

    .certifications-intro-image.cert-intro-card:nth-child(2),

    .certifications-intro-image.cert-intro-card:nth-child(3) {

        animation-delay: 0.1s;

    }

    

    .certifications-slider-wrapper {

        mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);

        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);

    }

    

    .certifications-track {

        animation-duration: 28s;

    }

    

    .cert-badge {

        min-width: 160px;

        height: 150px;

    }

    

    .cert-image {

        max-height: 120px;

    }

}



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

   How can we help? Section (Caliber-style)

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

.help-cta-section {

    padding: var(--spacing-2xl) 0;

    background: var(--bg-light);

}



.help-cta-title {

    font-size: clamp(1.5rem, 3vw, 2rem);

    font-weight: 700;

    text-align: center;

    max-width: 700px;

    margin: 0 auto var(--spacing-xl);

    line-height: 1.3;

    color: var(--text-dark);

}



.help-cta-cards {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: var(--spacing-lg);

    margin-bottom: var(--spacing-xl);

}



.help-cta-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: var(--spacing-lg);

    background: var(--bg-white);

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

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

    text-decoration: none;

    color: inherit;

    transition: var(--transition-base);

    border: 1px solid var(--border-color);

}



.help-cta-card:hover {

    transform: translateY(-4px);

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

    border-color: var(--primary);

}



.help-cta-card-icon {

    font-size: 2.5rem;

    margin-bottom: var(--spacing-sm);

}



.help-cta-card-title {

    font-size: 1.25rem;

    font-weight: 700;

    margin-bottom: 0.5rem;

    color: var(--text-dark);

}



.help-cta-card-text {

    font-size: 0.9375rem;

    color: var(--text-light);

    margin-bottom: var(--spacing-sm);

    line-height: 1.5;

}



.help-cta-card-link {

    font-size: 0.9375rem;

    font-weight: 600;

    color: var(--primary);

}



.help-cta-makes-label {

    text-align: center;

    font-size: 0.875rem;

    color: var(--text-light);

    margin-bottom: var(--spacing-sm);

}



.help-cta-makes {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: var(--spacing-sm);

}



.help-make {

    padding: 0.5rem 1rem;

    background: var(--bg-white);

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

    font-size: 0.875rem;

    font-weight: 600;

    color: var(--text-dark);

    border: 1px solid var(--border-color);

}



@media (max-width: 768px) {

    .help-cta-cards {

        grid-template-columns: 1fr;

    }

    

    .help-cta-makes {

        gap: 0.5rem;

    }

}



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

   Statistics Section (legacy - kept for any refs)

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

.statistics {

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    padding: var(--spacing-xl) 0;

    color: var(--text-white);

    position: relative;

    overflow: hidden;

}



.statistics::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');

    opacity: 0.3;

}



.stats-grid {

    display: grid;

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

    gap: var(--spacing-lg);

    position: relative;

    z-index: 1;

}



.stat-item {

    text-align: center;

    padding: var(--spacing-md);

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

    backdrop-filter: blur(10px);

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

    border: 1px solid rgba(255, 255, 255, 0.2);

    transition: var(--transition-base);

}



.stat-item:hover {

    transform: translateY(-5px);

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

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

}



.stat-number {

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

    font-size: clamp(2.5rem, 5vw, 4rem);

    font-weight: 700;

    line-height: 1;

    margin-bottom: var(--spacing-xs);

    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.stat-label {

    font-size: 1rem;

    font-weight: 500;

    opacity: 0.9;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



/* Pause animation on mobile for better UX */

@media (max-width: 768px) {

    .certifications-track {

        animation-duration: 25s;

    }

    

    .cert-badge {

        min-width: 150px;

        height: 130px;

    }

    

    .certifications-slider-wrapper {

        mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);

        -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);

    }

}



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

   Services Section

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

.services {

    background: linear-gradient(to bottom, var(--bg-white) 0%, var(--bg-light) 100%);

    position: relative;

}



.services::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--border-color), transparent);

}



.services-grid {

    display: grid;

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

    gap: var(--spacing-lg);

    margin-bottom: var(--spacing-xl);

    position: relative;

    z-index: 1;

}



.service-card {

    background: var(--bg-white);

    padding: 10px;

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

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

    transition: var(--transition-base);

    text-align: center;

    position: relative;

    overflow: hidden;

    border: 1px solid var(--border-color);

}



.service-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);

    transform: scaleX(0);

    transform-origin: left;

    transition: var(--transition-base);

}



.service-card:hover::before {

    transform: scaleX(1);

}



.service-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 15px 40px rgba(0, 102, 204, 0.2);

    border-color: var(--primary);

}



.service-icon {

    font-size: 3.5rem;

    margin-bottom: var(--spacing-md);

    display: block;

}



.service-image {

    width: 100%;

    height: 200px;

    margin-bottom: var(--spacing-md);

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

    overflow: hidden;

    background: var(--bg-light);

}



.service-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: var(--transition-base);

}



.service-card:hover .service-img {

    transform: scale(1.05);

}



.service-title {

    font-size: 1.5rem;

    font-weight: 700;

    margin-bottom: var(--spacing-sm);

    color: var(--text-dark);

}



.service-description {

    color: var(--text-light);

    line-height: 1.7;

    margin-bottom: var(--spacing-md);

}



.service-link {

    color: var(--primary);

    text-decoration: none;

    font-weight: 600;

    font-size: 0.9375rem;

    display: inline-flex;

    align-items: center;

    gap: var(--spacing-xs);

    transition: var(--transition-base);

    margin-top: auto;

}



.service-link:hover {

    gap: var(--spacing-sm);

    color: var(--primary-dark);

}



.service-card {

    display: flex;

    flex-direction: column;

}



.services-cta {

    text-align: center;

    margin-top: var(--spacing-xl);

}



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

   Services Listing Page (Our Services grid)

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

.services-listing-hero .hero-content {

    padding: var(--spacing-lg) 0;

}



.services-listing-section {

    padding: var(--spacing-2xl) 0;

    background: var(--bg-light);

}



.services-listing-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: var(--spacing-xl);

    max-width: 1100px;

    margin: 0 auto;

}



.service-listing-card {

    display: block;

    background: var(--bg-white);

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

    overflow: hidden;

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

    text-decoration: none;

    color: inherit;

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

    border: 1px solid var(--border-color);

}



.service-listing-card:hover {

    transform: translateY(-8px);

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

}



.service-listing-image {

    aspect-ratio: 16/10;

    overflow: hidden;

    background: var(--bg-light);

}



.service-listing-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;

}



.service-listing-card:hover .service-listing-img {

    transform: scale(1.05);

}



.service-listing-content {

    padding: 10px 20px;

}



.service-listing-title {

    font-size: 1.5rem;

    font-weight: 700;

    margin-bottom: 0.5rem;

    color: var(--text-dark);

}



.service-listing-desc {

    font-size: 0.9375rem;

    line-height: 1.6;

    color: var(--text-light);

    margin-bottom: var(--spacing-sm);

}



.service-listing-link {

    font-size: 0.9375rem;

    font-weight: 600;

    color: var(--primary);

    display: inline-flex;

    align-items: center;

    gap: 0.25rem;

}



.service-listing-card:hover .service-listing-link {

    text-decoration: underline;

}



.services-listing-cta {

    text-align: center;

    margin-top: var(--spacing-2xl);

    padding-top: var(--spacing-xl);

    border-top: 1px solid var(--border-color);

}



.services-listing-cta-text {

    font-size: 1.125rem;

    color: var(--text-dark);

    margin-bottom: var(--spacing-md);

}



@media (max-width: 768px) {

    .services-listing-grid {

        grid-template-columns: 1fr;

        gap: var(--spacing-lg);

    }

}



/* ========== Blog Listing & Article ========== */

.blog-listing-hero .hero-content,

.blog-article-hero .hero-content {

    padding: var(--spacing-lg) 0;

}

.blog-listing-section {

    padding: var(--spacing-2xl) 0;

}

.blog-listing-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: var(--spacing-lg);

    max-width: 800px;

    margin: 0 auto;

}

.blog-card {

    background: var(--bg-white);

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

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

    overflow: hidden;

    transition: box-shadow 0.2s ease;

}

.blog-card:hover {

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

}

.blog-card-content {

    padding: var(--spacing-md);

}

.blog-card-title {

    font-size: 1.25rem;

    line-height: 1.35;

    margin-bottom: var(--spacing-sm);

}

.blog-card-title a {

    color: var(--text-dark);

    text-decoration: none;

}

.blog-card-title a:hover {

    color: var(--primary);

    text-decoration: underline;

}

.blog-card-excerpt {

    color: var(--text-light);

    font-size: 1rem;

    line-height: 1.6;

    margin-bottom: var(--spacing-sm);

}

.blog-card-link {

    display: inline-block;

    font-weight: 600;

    color: var(--primary);

    text-decoration: none;

}

.blog-card-link:hover {

    text-decoration: underline;

}

.blog-listing-cta {

    text-align: center;

    margin-top: var(--spacing-2xl);

    padding-top: var(--spacing-xl);

    border-top: 1px solid var(--border-color);

}

.blog-listing-cta-text {

    font-size: 1.125rem;

    color: var(--text-dark);

    margin-bottom: var(--spacing-md);

}

.container-narrow {

    max-width: 720px;

    margin-left: auto;

    margin-right: auto;

    padding-left: var(--spacing-sm);

    padding-right: var(--spacing-sm);

}

.blog-article-section {

    padding: var(--spacing-2xl) 0;

}

.blog-article-content {

    font-size: 1.0625rem;

    line-height: 1.7;

}

.blog-article-content .blog-lead {

    font-size: 1.125rem;

    color: var(--text-dark);

    margin-bottom: var(--spacing-md);

}

.blog-article-content h2 {

    font-size: 1.5rem;

    margin-top: var(--spacing-lg);

    margin-bottom: var(--spacing-sm);

    color: var(--text-dark);

}

.blog-article-content h3 {

    font-size: 1.25rem;

    margin-top: var(--spacing-md);

    margin-bottom: var(--spacing-xs);

    color: var(--text-dark);

}

.blog-article-content p {

    margin-bottom: var(--spacing-sm);

}

.blog-article-content ul,

.blog-article-content ol {

    margin-bottom: var(--spacing-sm);

    padding-left: var(--spacing-md);

}

.blog-article-content li {

    margin-bottom: 0.35rem;

}

.blog-article-cta {

    text-align: center;

    margin-top: var(--spacing-xl);

    padding-top: var(--spacing-lg);

    border-top: 1px solid var(--border-color);

}

.blog-article-cta p {

    margin-bottom: var(--spacing-sm);

}

/* ----- Blog: small screens ----- */

@media (max-width: 768px) {

    .blog-listing-hero .hero-content,

    .blog-article-hero .hero-content {

        padding: var(--spacing-md) 0;

    }

    .blog-listing-section,

    .blog-article-section {

        padding: var(--spacing-lg) 0;

    }

    .blog-listing-grid {

        grid-template-columns: 1fr;

        gap: var(--spacing-md);

        max-width: 100%;

    }

    .blog-card-content {

        padding: var(--spacing-sm);

    }

    .blog-card-title {

        font-size: 1.125rem;

        margin-bottom: 0.5rem;

    }

    .blog-card-excerpt {

        font-size: 0.9375rem;

    }

    .blog-listing-cta {

        margin-top: var(--spacing-xl);

        padding-top: var(--spacing-md);

    }

    .blog-listing-cta-text {

        font-size: 1rem;

    }

    .container-narrow {

        max-width: 100%;

        padding-left: var(--spacing-sm);

        padding-right: var(--spacing-sm);

    }

    .blog-article-content {

        font-size: 1rem;

    }

    .blog-article-content .blog-lead {

        font-size: 1.0625rem;

    }

    .blog-article-content h2 {

        font-size: 1.25rem;

        margin-top: var(--spacing-md);

    }

    .blog-article-content h3 {

        font-size: 1.125rem;

    }

    .blog-article-cta {

        margin-top: var(--spacing-lg);

        padding-top: var(--spacing-md);

    }

}

/* ----- Blog: large screens ----- */

@media (min-width: 992px) {

    .blog-listing-hero .hero-content,

    .blog-article-hero .hero-content {

        padding: var(--spacing-xl) 0;

    }

    .blog-listing-section {

        padding: var(--spacing-2xl) 0;

    }

    .blog-listing-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: var(--spacing-xl);

        max-width: 1100px;

        margin-left: auto;

        margin-right: auto;

    }

    .blog-card-content {

        padding: var(--spacing-lg);

    }

    .blog-card-title {

        font-size: 1.375rem;

        margin-bottom: var(--spacing-sm);

    }

    .blog-card-excerpt {

        font-size: 1.0625rem;

    }

    .blog-listing-cta {

        margin-top: var(--spacing-2xl);

    }

    .container-narrow {

        max-width: 780px;

        padding-left: 0;

        padding-right: 0;

    }

    .blog-article-section {

        padding: var(--spacing-2xl) 0;

    }

    .blog-article-content {

        font-size: 1.125rem;

        line-height: 1.75;

    }

    .blog-article-content .blog-lead {

        font-size: 1.25rem;

        margin-bottom: var(--spacing-md);

    }

    .blog-article-content h2 {

        font-size: 1.75rem;

        margin-top: var(--spacing-xl);

        margin-bottom: var(--spacing-sm);

    }

    .blog-article-content h3 {

        font-size: 1.375rem;

        margin-top: var(--spacing-lg);

    }

    .blog-article-content p,

    .blog-article-content ul,

    .blog-article-content ol {

        margin-bottom: var(--spacing-md);

    }

    .blog-article-cta {

        margin-top: var(--spacing-2xl);

        padding-top: var(--spacing-xl);

    }

}



/* Service Detail Cards (detail pages) */

.service-detail-card {

    background: var(--bg-white);

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

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

    margin-bottom: var(--spacing-xl);

    overflow: hidden;

    transition: var(--transition-base);

}



.service-detail-card:hover {

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

}



.service-detail-wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--spacing-xl);

    align-items: start;

    padding: var(--spacing-xl);

}



.service-detail-wrapper.reverse {

    direction: rtl;

}



.service-detail-wrapper.reverse > * {

    direction: ltr;

}



.service-detail-image {

    width: 100%;

    height: auto;

    min-height: 300px;

    max-height: 500px;

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

    overflow: hidden;

    background: var(--bg-light);

    align-self: start;

}



.service-detail-img {

    width: 100%;

    height: 100%;

    min-height: 300px;

    max-height: 500px;

    object-fit: cover;

    display: block;

}



.service-detail-content {

    padding: var(--spacing-xl);

}



.service-detail-title {

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

    font-size: clamp(1.75rem, 3vw, 2.5rem);

    font-weight: 700;

    margin-bottom: var(--spacing-md);

    color: var(--text-dark);

}



.service-detail-intro {

    font-size: 1.125rem;

    color: var(--text-light);

    line-height: 1.8;

    margin-bottom: var(--spacing-md);

}



.read-more-btn {

    background: var(--primary);

    color: var(--text-white);

    border: none;

    padding: var(--spacing-sm) var(--spacing-lg);

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

    font-weight: 600;

    font-size: 0.9375rem;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: var(--spacing-xs);

    transition: var(--transition-base);

    margin-bottom: var(--spacing-md);

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

}



.read-more-btn:hover {

    background: var(--primary-dark);

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);

}



.read-more-btn.active .read-more-icon {

    transform: rotate(180deg);

}



.read-more-icon {

    transition: var(--transition-base);

    display: inline-block;

    font-size: 0.75rem;

}



.service-details {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.5s ease, padding 0.5s ease;

    padding: 0;

}



.service-details.active {

    max-height: 5000px;

    padding-top: var(--spacing-lg);

}



.service-detail-section {

    margin-bottom: var(--spacing-lg);

}



.service-detail-section:last-child {

    margin-bottom: 0;

}



.service-detail-heading {

    font-size: 1.25rem;

    font-weight: 700;

    margin-bottom: var(--spacing-sm);

    color: var(--text-dark);

}



.service-detail-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.service-detail-list li {

    padding: var(--spacing-sm) 0;

    padding-left: var(--spacing-lg);

    position: relative;

    color: var(--text-light);

    line-height: 1.7;

}



.service-detail-list li::before {

    content: '✓';

    position: absolute;

    left: 0;

    color: var(--primary);

    font-weight: 700;

    font-size: 1.125rem;

}



.service-detail-text {

    color: var(--text-light);

    line-height: 1.8;

    font-size: 1.0625rem;

}



/* Service detail page layout (dedicated detail pages) */

.service-detail-hero {

    min-height: 42vh;

}



.service-detail-hero .hero-title {

    margin-bottom: var(--spacing-sm);

}



.service-detail-page {

    padding: var(--spacing-xl) 0;

    background: var(--bg-white);

}



.service-detail-layout {

    max-width: 840px;

    margin: 0 auto;

}



.service-detail-main {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-xl);

}



.service-detail-block {

    margin-bottom: 0;

}



.service-detail-block:first-child .service-detail-intro {

    margin-top: var(--spacing-md);

}



.service-detail-hero-img {

    width: 100%;

    height: auto;

    max-height: 420px;

    object-fit: contain;

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

    display: block;

    margin-bottom: 0;

    background: var(--bg-light);

}



.service-detail-h2 {

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

    font-size: clamp(1.35rem, 2.5vw, 1.6rem);

    font-weight: 700;

    color: var(--text-dark);

    margin: 0 0 var(--spacing-md);

    padding-bottom: var(--spacing-xs);

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

}



.service-detail-cta {

    margin-top: var(--spacing-xl);

    padding: var(--spacing-xl);

    background: linear-gradient(135deg, var(--bg-light) 0%, rgba(0, 102, 204, 0.06) 100%);

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

    text-align: center;

}



.service-detail-cta-title {

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

    font-size: clamp(1.35rem, 2.5vw, 1.5rem);

    font-weight: 700;

    color: var(--text-dark);

    margin: 0 0 var(--spacing-sm);

}



.service-detail-cta-text {

    color: var(--text-light);

    font-size: 1.0625rem;

    margin: 0 0 var(--spacing-lg);

    line-height: 1.6;

}



.service-detail-cta-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: var(--spacing-md);

    justify-content: center;

    align-items: center;

}



.service-detail-cta-buttons .btn-primary,

.service-detail-cta-buttons .btn-secondary {

    min-width: 160px;

}



@media (max-width: 768px) {

    .service-detail-hero {

        min-height: 36vh;

    }

    .service-detail-page {

        padding: var(--spacing-lg) 0;

    }

    .service-detail-cta {

        padding: var(--spacing-lg);

    }

    .service-detail-cta-buttons {

        flex-direction: column;

    }

    .service-detail-cta-buttons .btn-primary,

    .service-detail-cta-buttons .btn-secondary {

        width: 100%;

        min-width: 0;

    }

}



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

   Process Section

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

.process {

    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-white) 100%);

    position: relative;

    overflow: hidden;

}



.process::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--border-color), transparent);

}



.process-grid {

    display: grid;

    grid-template-columns: 1fr auto 1fr auto 1fr;

    gap: var(--spacing-md);

    align-items: start;

    position: relative;

}



.process-step {

    text-align: center;

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.process-step-number {

    position: absolute;

    top: -15px;

    left: 50%;

    transform: translateX(-50%);

    width: 50px;

    height: 50px;

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    color: var(--text-white);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

    font-weight: 700;

    z-index: 2;

    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);

    border: 4px solid var(--bg-white);

}



.process-number {

    font-size: 4rem;

    font-weight: 800;

    color: var(--primary);

    opacity: 0.2;

    line-height: 1;

    margin-bottom: var(--spacing-sm);

}



.process-video {

    position: relative;

    width: 100%;

    aspect-ratio: 16/9;

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

    overflow: hidden;

    margin-bottom: var(--spacing-md);

    cursor: pointer;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

    transition: var(--transition-base);

    border: 3px solid transparent;

}



.process-video:hover {

    transform: translateY(-8px);

    box-shadow: 0 15px 40px rgba(0, 102, 204, 0.25);

    border-color: var(--primary);

}



.process-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: var(--transition-base);

}



.video-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, rgba(0, 102, 204, 0.7) 0%, rgba(0, 82, 163, 0.8) 100%);

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transition: var(--transition-base);

    backdrop-filter: blur(2px);

}



.process-video:hover .video-overlay {

    opacity: 1;

}



.process-video:hover .process-img {

    transform: scale(1.15);

    filter: brightness(0.7);

}



.play-button {

    background: none;

    border: none;

    cursor: pointer;

    padding: 0;

    transition: var(--transition-base);

}



.play-button:hover {

    transform: scale(1.15);

}



.play-button-ripple {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 70px;

    height: 70px;

    border-radius: 50%;

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

    animation: ripple 2s infinite;

    pointer-events: none;

}



@keyframes ripple {

    0% {

        transform: translate(-50%, -50%) scale(0.8);

        opacity: 1;

    }

    100% {

        transform: translate(-50%, -50%) scale(1.5);

        opacity: 0;

    }

}



.process-video-badge {

    position: absolute;

    top: 15px;

    right: 15px;

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

    backdrop-filter: blur(10px);

    color: var(--text-white);

    padding: 0.5rem 1rem;

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

    font-size: 0.75rem;

    font-weight: 600;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    opacity: 0;

    transition: var(--transition-base);

    z-index: 2;

}



.process-video:hover .process-video-badge {

    opacity: 1;

}



.process-video-badge svg {

    width: 14px;

    height: 14px;

    color: var(--primary-light);

}





.process-content {

    padding: 0 var(--spacing-sm);

}



.process-title {

    font-size: 1.5rem;

    font-weight: 700;

    margin-bottom: var(--spacing-xs);

    color: var(--text-dark);

    transition: var(--transition-base);

}



.process-step:hover .process-title {

    color: var(--primary);

}



.process-description {

    color: var(--text-light);

    line-height: 1.7;

    font-size: 0.9375rem;

}



/* Process Connector */

.process-connector {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding-top: 60px;

    position: relative;

}



.connector-line {

    width: 2px;

    height: 60px;

    background: linear-gradient(180deg, var(--primary) 0%, transparent 100%);

    margin-bottom: var(--spacing-xs);

}



.connector-arrow {

    font-size: 1.5rem;

    color: var(--primary);

    font-weight: 700;

    animation: pulse-arrow 2s ease-in-out infinite;

}



@keyframes pulse-arrow {

    0%, 100% {

        transform: translateX(0);

        opacity: 1;

    }

    50% {

        transform: translateX(5px);

        opacity: 0.7;

    }

}



/* Process Connector */

.process-connector {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding-top: 60px;

    position: relative;

}



.connector-line {

    width: 2px;

    height: 60px;

    background: linear-gradient(180deg, var(--primary) 0%, transparent 100%);

    margin-bottom: var(--spacing-xs);

}



.connector-arrow {

    font-size: 1.5rem;

    color: var(--primary);

    font-weight: 700;

    animation: pulse-arrow 2s ease-in-out infinite;

}



@keyframes pulse-arrow {

    0%, 100% {

        transform: translateX(0);

        opacity: 1;

    }

    50% {

        transform: translateX(5px);

        opacity: 0.7;

    }

}



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

   Why Us Home Section

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

.why-us-home {

    padding: var(--spacing-2xl) 0;

    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-white) 100%);

}



.why-us-home-wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--spacing-xl);

    /* align-items: center; */

}



.why-us-home-content {

    padding-right: var(--spacing-lg);

}



.why-us-home-text {

    font-size: 1.125rem;

    color: var(--text-light);

    line-height: 1.8;

    margin-bottom: var(--spacing-lg);

}



.why-us-home-features {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--spacing-md);

    margin-bottom: var(--spacing-xl);

}



.why-us-home-feature {

    display: flex;

    gap: var(--spacing-sm);

    align-items: flex-start;

}



.why-us-home-icon {

    width: 32px;

    height: 32px;

    background: var(--primary);

    color: var(--text-white);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: 1.125rem;

    flex-shrink: 0;

}



.why-us-home-feature h4 {

    font-size: 1rem;

    font-weight: 700;

    margin-bottom: var(--spacing-xs);

    color: var(--text-dark);

}



.why-us-home-feature p {

    font-size: 0.875rem;

    color: var(--text-light);

    line-height: 1.6;

    margin: 0;

}



.why-us-home-buttons {

    display: flex;

    gap: var(--spacing-md);

    flex-wrap: wrap;

}



.why-us-home-lexus-badge {

    width: 100%;

    max-width: 320px;

    height: auto;

    display: block;

}



.why-us-home-image {

    position: relative;

    text-align: center;

}



.why-us-home-img {

    max-width: 100%;

    height: auto;

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

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

}



.why-us-home-brands {

    display: flex;

    justify-content: center;

    gap: var(--spacing-md);

    margin-top: var(--spacing-lg);

    flex-wrap: wrap;

}



.why-us-brand-logo {

    max-height: 50px;

    width: auto;

    object-fit: contain;

    opacity: 0.7;

    transition: var(--transition-base);

}



.why-us-brand-logo:hover {

    opacity: 1;

    transform: scale(1.1);

}



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

   Why Us Section

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

.why-us {

    padding: var(--spacing-2xl) 0;

    background: var(--bg-white);

}



.why-us-grid {

    display: grid;

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

    gap: var(--spacing-lg);

}



.why-us-card {

    background: var(--bg-light);

    padding: var(--spacing-lg);

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

    transition: var(--transition-base);

    border: 2px solid transparent;

}



.why-us-card:hover {

    transform: translateY(-8px);

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

    border-color: var(--primary);

    background: var(--bg-white);

}



.why-us-icon {

    font-size: 3rem;

    margin-bottom: var(--spacing-md);

    display: block;

}



.why-us-title {

    font-size: 1.5rem;

    font-weight: 700;

    margin-bottom: var(--spacing-sm);

    color: var(--text-dark);

}



.why-us-text {

    color: var(--text-light);

    line-height: 1.7;

}



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

   CTA Section

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

.cta-section {

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    color: var(--text-white);

    padding: var(--spacing-2xl) 0;

    text-align: center;

}



.cta-content {

    max-width: 800px;

    margin: 0 auto;

}



.cta-title {

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

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 700;

    margin-bottom: var(--spacing-md);

    color: var(--text-white);

}



.cta-description {

    font-size: 1.25rem;

    margin-bottom: var(--spacing-xl);

    opacity: 0.95;

    line-height: 1.6;

}



.cta-buttons {

    display: flex;

    gap: var(--spacing-md);

    justify-content: center;

    flex-wrap: wrap;

}



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

   Before & After Section

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

.before-after {

    background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg-light) 50%, var(--bg-white) 100%);

    position: relative;

    overflow: hidden;

    padding: var(--spacing-2xl) 0;

}



.before-after::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--border-color), transparent);

}



.before-after::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--border-color), transparent);

}



.before-after-stats {

    display: flex;

    justify-content: center;

    gap: var(--spacing-xl);

    margin-bottom: var(--spacing-xl);

    padding: var(--spacing-lg) 0;

    flex-wrap: wrap;

}



.ba-stat-item {

    text-align: center;

    padding: var(--spacing-md);

    background: var(--bg-white);

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

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

    min-width: 150px;

    transition: var(--transition-base);

}



.ba-stat-item:hover {

    transform: translateY(-4px);

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

}



.ba-stat-number {

    font-size: 2.5rem;

    font-weight: 700;

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    margin-bottom: var(--spacing-xs);

}



.ba-stat-label {

    font-size: 0.875rem;

    color: var(--text-light);

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



/* 1 row, 4 images on desktop - minmax ensures all 4 columns get space */

.before-after-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(160px, 1fr));

    grid-template-rows: 1fr;

    grid-auto-flow: column;

    gap: var(--spacing-md);

    margin-bottom: var(--spacing-xl);

    width: 100%;

}



@media (min-width: 769px) {

    .before-after-grid {

        grid-template-columns: repeat(4, minmax(160px, 1fr));

        grid-template-rows: 1fr;

    }

    .before-after-grid .ba-image-item {

        min-width: 0;

    }

}



@media (min-width: 1200px) {

    .before-after-grid {

        gap: var(--spacing-md);

    }

}



.ba-image-item {

    position: relative;

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

    overflow: hidden;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

    transition: var(--transition-base);

    cursor: pointer;

}



.ba-image-item:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(0, 102, 204, 0.2);

}



.ba-image-wrapper {

    position: relative;

    width: 100%;

    aspect-ratio: 4/3;

    overflow: hidden;

}



.ba-simple-image {

    width: 100%;

    object-fit: cover;

    border-radius:40px 40px 40px 40px;

    display: block;

    transition: var(--transition-base);

}



.ba-image-item:hover .ba-simple-image {

    transform: scale(1.05);

}



.ba-image-label {

    position: absolute;

    bottom: var(--spacing-sm);

    left: var(--spacing-sm);

    padding: 0.5rem 1rem;

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

    backdrop-filter: blur(10px);

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

    font-weight: 700;

    font-size: 0.875rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

}



.ba-label-before {

    color: #dc2626;

}



.ba-label-after {

    color: #22c55e;

}



.ba-item:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 50px rgba(0, 102, 204, 0.25);

    border-color: var(--primary);

}



.ba-item-badge {

    position: absolute;

    top: var(--spacing-md);

    right: var(--spacing-md);

    z-index: 10;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 1rem;

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);

    color: var(--text-white);

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

    font-size: 0.75rem;

    font-weight: 600;

    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.ba-item-badge svg {

    width: 14px;

    height: 14px;

}



.ba-item-badge-secondary {

    background: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);

    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);

}



.ba-comparison-wrapper {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-xs);

    position: relative;

    background: var(--bg-light);

    padding: var(--spacing-xs);

    min-height: 0;

    flex: 1;

}



.ba-image {

    position: relative;

    aspect-ratio: 4/3;

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    display: flex;

    align-items: center;

    justify-content: center;

    background-size: cover;

    background-position: center;

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

    overflow: hidden;

    transition: var(--transition-base);

    cursor: pointer;

    width: 100%;

    min-height: 0;

}



.ba-image-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

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

    transition: var(--transition-base);

    z-index: 1;

}



.ba-image:hover {

    transform: scale(1.03);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);

}



.ba-image:hover .ba-image-overlay {

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

}



.ba-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: var(--spacing-md);

    transition: var(--transition-base);

    z-index: 2;

}



.ba-overlay-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: var(--spacing-sm);

    animation: fadeInUp 0.5s ease;

}



.ba-before-overlay {

    background: linear-gradient(135deg, rgba(220, 38, 38, 0.85) 0%, rgba(185, 28, 28, 0.9) 100%);

    opacity: 0;

}



.ba-after-overlay {

    background: linear-gradient(135deg, rgba(34, 197, 94, 0.85) 0%, rgba(22, 163, 74, 0.9) 100%);

    opacity: 0;

}



.ba-image:hover .ba-overlay {

    opacity: 1;

}



.ba-label {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.75rem 1.5rem;

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

    color: var(--text-dark);

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

    font-weight: 700;

    font-size: 1rem;

    margin-bottom: var(--spacing-sm);

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

    backdrop-filter: blur(10px);

}



.ba-label-before {

    color: #dc2626;

}



.ba-label-after {

    color: #22c55e;

}



.ba-label svg {

    width: 18px;

    height: 18px;

}



.ba-description {

    color: var(--text-white);

    font-size: 1.125rem;

    font-weight: 600;

    text-align: center;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

    margin: var(--spacing-xs) 0;

}



.ba-damage-indicator {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 1rem;

    background: rgba(220, 38, 38, 0.2);

    border: 1px solid rgba(220, 38, 38, 0.4);

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

    color: var(--text-white);

    font-size: 0.875rem;

    font-weight: 500;

    margin-top: var(--spacing-xs);

    backdrop-filter: blur(10px);

}



.ba-success-indicator {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 1rem;

    background: rgba(34, 197, 94, 0.2);

    border: 1px solid rgba(34, 197, 94, 0.4);

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

    color: var(--text-white);

    font-size: 0.875rem;

    font-weight: 500;

    margin-top: var(--spacing-xs);

    backdrop-filter: blur(10px);

}



.ba-success-indicator svg {

    width: 16px;

    height: 16px;

}



.ba-divider {

    display: none;

}



.ba-item-footer {

    padding: var(--spacing-md);

    background: var(--bg-white);

    flex: 1;

    display: flex;

    flex-direction: column;

}



.ba-item-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: var(--spacing-sm);

    gap: var(--spacing-md);

}



.ba-item-title {

    font-size: 1.125rem;

    font-weight: 700;

    color: var(--text-dark);

    flex: 1;

    text-align: left;

}



.ba-item-rating {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    flex-shrink: 0;

}



.ba-rating-stars {

    color: #FFB800;

    font-size: 1rem;

    letter-spacing: 2px;

}



.ba-rating-text {

    font-size: 0.875rem;

    font-weight: 600;

    color: var(--text-light);

}



.ba-item-text {

    color: var(--text-light);

    font-size: 0.875rem;

    line-height: 1.6;

    margin-bottom: var(--spacing-sm);

    text-align: left;

}



.ba-item-tags {

    display: flex;

    flex-wrap: wrap;

    gap: var(--spacing-xs);

    margin-top: var(--spacing-sm);

}



.ba-tag {

    display: inline-block;

    padding: 0.375rem 0.875rem;

    background: var(--bg-light);

    color: var(--text-dark);

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

    font-size: 0.75rem;

    font-weight: 500;

    border: 1px solid var(--border-color);

    transition: var(--transition-base);

}



.ba-tag:hover {

    background: var(--primary);

    color: var(--text-white);

    border-color: var(--primary);

}



.before-after-cta {

    text-align: center;

    padding: var(--spacing-2xl);

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

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

    color: var(--text-white);

    margin-top: var(--spacing-xl);

    position: relative;

    overflow: hidden;

}



.before-after-cta::before {

    content: '';

    position: absolute;

    top: -50%;

    right: -50%;

    width: 200%;

    height: 200%;

    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);

    animation: rotate 20s linear infinite;

}



@keyframes rotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}



.ba-cta-content {

    position: relative;

    z-index: 1;

}



.ba-cta-title {

    font-size: clamp(1.75rem, 3vw, 2.5rem);

    font-weight: 700;

    margin-bottom: var(--spacing-md);

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

}



.ba-cta-text {

    font-size: 1.125rem;

    font-weight: 400;

    margin-bottom: var(--spacing-lg);

    opacity: 0.95;

    max-width: 600px;

    margin-left: auto;

    margin-right: auto;

    line-height: 1.7;

}



.ba-cta-buttons {

    display: flex;

    gap: var(--spacing-md);

    justify-content: center;

    align-items: center;

    flex-wrap: nowrap;

}



.before-after-cta .btn-primary {

    background: var(--text-white);

    color: var(--primary);

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

    font-weight: 600;

    flex: 0 1 auto;

    min-width: 200px;

}



.before-after-cta .btn-primary:hover {

    background: var(--bg-light);

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);

}



.before-after-cta .btn-secondary {

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

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.3);

    color: var(--text-white);

    flex: 0 1 auto;

    min-width: 200px;

}



.before-after-cta .btn-secondary:hover {

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

    transform: translateY(-2px);

}





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

   Mobile Towing CTA Bar

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

.mobile-towing-cta {

    display: none;

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background: var(--bg-white);

    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);

    z-index: 500;

    padding: var(--spacing-sm);

    border-top: 2px solid #0A3D62;

}



.towing-cta-micro-copy {

    text-align: center;

    font-size: 0.75rem;

    color: var(--text-light);

    margin-bottom: var(--spacing-xs);

    font-weight: 500;

}



.towing-cta-content {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-sm);

}



.towing-cta-text {

    text-align: center;

}



.towing-cta-title {

    font-size: 1rem;

    font-weight: 700;

    color: var(--text-dark);

    margin-bottom: 0.25rem;

    line-height: 1.3;

}



.towing-cta-subline {

    font-size: 0.8125rem;

    color: var(--text-light);

    font-weight: 500;

}



.towing-cta-buttons {

    display: flex;

    gap: var(--spacing-xs);

    width: 100%;

}



.towing-btn-primary {

    flex: 0 0 80%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    background: #0A3D62;

    color: var(--text-white);

    padding: 1rem;

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

    text-decoration: none;

    font-weight: 600;

    font-size: 0.9375rem;

    min-height: 56px;

    max-height: 64px;

    transition: var(--transition-base);

    box-shadow: 0 2px 8px rgba(10, 61, 98, 0.3);

}



.towing-btn-primary:hover,

.towing-btn-primary:active {

    background: #082d47;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(10, 61, 98, 0.4);

}



.towing-btn-secondary {

    flex: 0 0 20%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 0.25rem;

    background: #F1F3F4;

    color: #0A3D62;

    padding: 0.75rem 0.5rem;

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

    text-decoration: none;

    font-weight: 600;

    font-size: 0.75rem;

    min-height: 56px;

    max-height: 64px;

    transition: var(--transition-base);

    border: 1px solid #E0E0E0;

}



.towing-btn-secondary:hover,

.towing-btn-secondary:active {

    background: #E8EAED;

    transform: translateY(-2px);

}



.towing-btn-icon {

    font-size: 1.25rem;

    line-height: 1;

}



.towing-btn-secondary .towing-btn-icon {

    font-size: 1rem;

}



/* Show only on mobile */

@media (max-width: 968px) {

    .mobile-towing-cta {

        display: block;

    }

    

    /* Hide towing CTA when menu is open */

    body.menu-open .mobile-towing-cta {

        display: none !important;

    }

}



/* Desktop Towing CTA Bar */

.desktop-towing-cta {

    display: none;

    background: linear-gradient(135deg, #0A3D62 0%, #1565C0 100%);

    padding: 0px 25px 0px 25px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    position: relative;

    z-index: 100;

    margin-top: 0; /* cleared by media query on desktop where navbar is fixed */

}



.desktop-towing-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--spacing-lg);

}



.desktop-towing-text {

    flex: 1;

    color: var(--text-white);

}



.desktop-towing-micro-copy {

    display: block;

    font-size: 0.75rem;

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

    margin-bottom: 0.25rem;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.desktop-towing-title {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--text-white);

    margin-bottom: 0.25rem;

    line-height: 1.3;

}



.desktop-towing-subline {

    font-size: 0.9375rem;

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

    font-weight: 500;

    margin: 0;

}



.desktop-towing-buttons {

    display: flex;

    gap: var(--spacing-sm);

    align-items: center;

    flex-shrink: 0;

}



.desktop-towing-btn-primary {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    background: var(--text-white);

    color: #0A3D62;

    padding: 0.875rem 2rem;

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

    text-decoration: none;

    font-weight: 700;

    font-size: 1rem;

    min-height: 56px;

    transition: var(--transition-base);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

    white-space: nowrap;

}



.desktop-towing-btn-primary:hover,

.desktop-towing-btn-primary:active {

    background: #F5F5F5;

    transform: translateY(-2px);

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);

}



.desktop-towing-btn-secondary {

    display: flex;

    flex-direction: inherit;

    align-items: center;

    justify-content: center;

    gap: 0.25rem;

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

    color: var(--text-white);

    padding: 0.875rem 1.5rem;

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

    text-decoration: none;

    font-weight: 600;

    font-size: 0.875rem;

    min-height: 56px;

    transition: var(--transition-base);

    border: 2px solid rgba(255, 255, 255, 0.3);

    backdrop-filter: blur(10px);

    white-space: nowrap;

}



.desktop-towing-btn-secondary:hover,

.desktop-towing-btn-secondary:active {

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

    border-color: rgba(255, 255, 255, 0.5);

    transform: translateY(-2px);

}



.desktop-towing-btn-secondary .towing-btn-icon {

    font-size: 1.25rem;

}



/* Show desktop towing CTA on desktop only - after menu, before slider */

@media (min-width: 969px) {

    .desktop-towing-cta {

        display: block;

        margin-top: 85px; /* below fixed navbar */

    }

    

    .mobile-towing-cta {

        display: none !important;

    }

}



/* Hide desktop towing CTA on mobile */

@media (max-width: 968px) {

    .desktop-towing-cta {

        display: none !important;

    }

}



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

   Testimonials Section

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

.testimonials-grid {

    display: grid;

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

    gap: var(--spacing-lg);

}



/* Google Reviews section (Caliber-style) */

.google-reviews-section .section-header {

    position: relative;

}



.google-reviews-badge {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    margin-top: var(--spacing-sm);

    padding: 0.5rem 1rem;

    background: var(--bg-white);

    border: 1px solid var(--border-color);

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

    text-decoration: none;

    color: var(--text-dark);

    font-size: 0.875rem;

    font-weight: 500;

    transition: var(--transition-base);

}



.google-reviews-badge:hover {

    border-color: var(--primary);

    color: var(--primary);

}



.google-logo-img {

    height: 20px;

    width: auto;

    object-fit: contain;

}



.testimonial-google-label {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    margin-bottom: 0.75rem;

}



.testimonial-google-label img {

    height: 18px;

    width: auto;

}



.testimonial-date {

    font-size: 0.75rem;

    color: var(--text-light);

}



.testimonial-card {

    background: var(--bg-white);

    padding: var(--spacing-lg);

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

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

    transition: var(--transition-base);

    position: relative;

    border: 1px solid var(--border-color);

    overflow: hidden;

}



.testimonial-card::before {

    content: '"';

    position: absolute;

    top: -20px;

    left: 20px;

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

    font-size: 8rem;

    color: var(--primary);

    opacity: 0.1;

    line-height: 1;

}



.testimonial-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 40px rgba(0, 102, 204, 0.15);

    border-color: var(--primary);

}



.testimonial-card:hover {

    transform: translateY(-4px);

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

}



.testimonial-stars {

    color: #FFB800;

    font-size: 1.25rem;

    margin-bottom: var(--spacing-sm);

}



.testimonial-text {

    color: var(--text-light);

    line-height: 1.7;

    margin-bottom: var(--spacing-md);

    font-style: italic;

}



.testimonial-author {

    font-weight: 600;

    color: var(--text-dark);

}



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

   Contact Section

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

.contact {

    background: var(--bg-light);

}



.contact-wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--spacing-xl);

    align-items: start;

}



.contact-title {

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

    font-size: 2.5rem;

    font-weight: 700;

    margin-bottom: var(--spacing-sm);

    color: var(--text-dark);

}



.contact-description {

    color: var(--text-light);

    margin-bottom: var(--spacing-lg);

    font-size: 1.125rem;

}



.contact-details {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-md);

}



.contact-item {

    display: flex;

    align-items: center;

    gap: var(--spacing-sm);

    padding: var(--spacing-md);

    background: var(--bg-white);

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

    text-decoration: none;

    color: var(--text-dark);

    transition: var(--transition-base);

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

}



.contact-item:hover {

    transform: translateX(8px);

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

}



.contact-item svg {

    color: var(--primary);

    flex-shrink: 0;

}



.contact-form-wrapper {

    background: var(--bg-white);

    padding: var(--spacing-xl);

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

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

}



.form-title {

    font-size: 1.75rem;

    font-weight: 700;

    margin-bottom: var(--spacing-lg);

    color: var(--text-dark);

}



.form-group {

    margin-bottom: var(--spacing-md);

}



.form-group input,

.form-group textarea {

    width: 100%;

    padding: 0.875rem 1.25rem;

    border: 2px solid var(--border-color);

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

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

    font-size: 1rem;

    transition: var(--transition-base);

    background: var(--bg-light);

}



.form-group input:focus,

.form-group textarea:focus {

    outline: none;

    border-color: var(--primary);

    background: var(--bg-white);

}



.form-group textarea {

    resize: vertical;

    min-height: 120px;

}



/* Contact Hours */

.contact-hours {

    margin-top: var(--spacing-xl);

    padding: var(--spacing-lg);

    background: var(--bg-light);

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

}



.hours-title {

    font-size: 1.5rem;

    font-weight: 700;

    margin-bottom: var(--spacing-md);

    color: var(--text-dark);

}



.hours-list {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-sm);

}



.hours-item {

    display: flex;

    justify-content: space-between;

    padding: var(--spacing-sm) 0;

    border-bottom: 1px solid var(--border-color);

}



.hours-item:last-child {

    border-bottom: none;

}



.hours-day {

    font-weight: 600;

    color: var(--text-dark);

}



.hours-time {

    color: var(--text-light);

}



/* Form Messages */

.form-message {

    padding: var(--spacing-md);

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

    margin-bottom: var(--spacing-md);

}



.form-message.success {

    background: #d4edda;

    color: #155724;

    border: 1px solid #c3e6cb;

}



.form-message.error {

    background: #f8d7da;

    color: #721c24;

    border: 1px solid #f5c6cb;

}



/* Service Features List */

.service-features {

    list-style: none;

    padding: 0;

    margin-top: var(--spacing-md);

}



.service-features li {

    padding: var(--spacing-xs) 0;

    padding-left: var(--spacing-md);

    position: relative;

    color: var(--text-light);

}



.service-features li::before {

    content: '✓';

    position: absolute;

    left: 0;

    color: var(--primary);

    font-weight: 700;

}



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

   Footer

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

.footer {

    background: var(--secondary);

    color: var(--text-white);

    padding: var(--spacing-2xl) 0 var(--spacing-md);

    border-style: solid;
  border-width: 5px 0 0 0;
  border-image: linear-gradient(15deg, var(--primary), #75baff) 1;

}



.footer-content {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1.5fr;

    gap: var(--spacing-xl);

    margin-bottom: var(--spacing-lg);

}



/* Footer Brand Section */

.footer-brand {

    max-width: 300px;

}



.footer-logo {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: var(--spacing-xs);

    text-decoration: none;

    color: var(--text-white);

}



.footer-logo-image {

    height: 65px;

    width: auto;

    max-width: 250px;

    object-fit: contain;

    display: block;

    transition: var(--transition-base);

}



.footer-logo:hover .footer-logo-image {

    transform: scale(1.05);

}



.footer-logo-text {

    display: flex;

    flex-direction: column;

    line-height: 1.2;

}



.footer-logo-title {

    font-size: 0.875rem;

    font-weight: 700;

    letter-spacing: 0.05em;

    line-height: 1.2;

    color: var(--text-white);

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

}



.footer-logo-subtitle {

    font-size: 0.75rem;

    font-weight: 500;

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

    line-height: 1.2;

    letter-spacing: 0.02em;

}



.footer-description {

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

    font-size: 0.9375rem;

    line-height: 1.6;

    margin-bottom: var(--spacing-md);

}



.footer-certifications {

    display: flex;

    flex-wrap: wrap;

    gap: var(--spacing-xs);

    margin-top: var(--spacing-md);

}



.footer-cert-badge {

    padding: 0.375rem 0.875rem;

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

    border: 1px solid rgba(255, 255, 255, 0.2);

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

    font-size: 0.75rem;

    font-weight: 600;

    color: var(--text-white);

}



/* Footer Links Section */

.footer-links-section,

.footer-services-section,

.footer-contact-section {

    display: flex;

    flex-direction: column;

}



.footer-section-title {

    font-size: 1.125rem;

    font-weight: 700;

    margin-bottom: var(--spacing-md);

    color: var(--text-white);

}



.footer-links,

.footer-services {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-sm);

}



.footer-links a,

.footer-services a {

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

    text-decoration: none;

    transition: var(--transition-fast);

    font-size: 0.9375rem;

}



.footer-links a:hover,

.footer-services a:hover {

    color: var(--text-white);

    padding-left: var(--spacing-xs);

}



/* Footer Contact Section */

.footer-contact-info {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-sm);

    margin-bottom: var(--spacing-md);

}



.footer-contact-item {

    display: flex;

    align-items: center;

    gap: var(--spacing-sm);

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

    text-decoration: none;

    transition: var(--transition-fast);

    font-size: 0.9375rem;

}



.footer-contact-item:hover {

    color: var(--text-white);

    transform: translateX(4px);

}



.footer-contact-item svg {

    flex-shrink: 0;

    color: var(--primary);

}



.footer-appointment {

    background: var(--primary);

    padding: var(--spacing-sm) var(--spacing-md);

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

    margin-top: var(--spacing-xs);

    font-weight: 600;

}



.footer-appointment:hover {

    background: var(--primary-dark);

    transform: translateX(0);

}



.footer-hours {

    margin-top: var(--spacing-md);

    padding-top: var(--spacing-md);

    border-top: 1px solid rgba(255, 255, 255, 0.1);

}



.footer-hours-title {

    font-size: 0.875rem;

    font-weight: 600;

    margin-bottom: var(--spacing-sm);

    color: var(--text-white);

}



.footer-hours-list {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-xs);

}



.footer-hours-item {

    display: flex;

    justify-content: space-between;

    font-size: 0.875rem;

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

}



.footer-image-wrapper {

    margin-top: var(--spacing-md);

}



.footer-image {

    max-width: 200px;

    height: auto;

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

}



/* Footer Bottom */

.footer-bottom {

    padding-top: var(--spacing-md);

    border-top: 1px solid rgba(255, 255, 255, 0.1);

}



.footer-bottom-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: var(--spacing-md);

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

    font-size: 0.875rem;

}



.footer-bottom-links {

    display: flex;

    align-items: center;

    gap: var(--spacing-sm);

}



.footer-bottom-links a {

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

    text-decoration: none;

    transition: var(--transition-fast);

}



.footer-bottom-links a:hover {

    color: var(--text-white);

}



.footer-bottom-links span {

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

}



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

   Animations

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

@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes bounce {

    0%, 20%, 50%, 80%, 100% {

        transform: translateX(-50%) translateY(0);

    }

    40% {

        transform: translateX(-50%) translateY(-10px);

    }

    60% {

        transform: translateX(-50%) translateY(-5px);

    }

}



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

   Responsive Design

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

@media (max-width: 968px) {

    .navbar {

        padding: 0;

    }

    

    .nav-wrapper {

        padding: 0.5rem 0;

    }

    

    .nav-menu {

        position: fixed;

        top: 70px;

        left: -100%;

        width: 100%;

        height: calc(100vh - 70px);

        background: var(--bg-white);

        flex-direction: column;

        align-items: flex-start;

        padding: var(--spacing-lg);

        transition: var(--transition-base);

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

        overflow-y: auto;

        z-index: 1001;

    }

    

    /* Hide towing CTA when menu is open */

    .nav-menu.active ~ * .mobile-towing-cta,

    body:has(.nav-menu.active) .mobile-towing-cta {

        display: none !important;

    }

    

    .nav-menu.active {

        left: 0;

    }

    

    /* Menu Overlay */

    .menu-overlay {

        display: none;

        position: fixed;

        top: 70px;

        left: 0;

        right: 0;

        bottom: 0;

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

        z-index: 1000;

        opacity: 0;

        transition: opacity 0.3s ease;

    }

    

    .menu-overlay.active {

        display: block;

        opacity: 1;

    }

    

    .nav-menu li {

        width: 100%;

    }

    

    .nav-link {

        width: 100%;

        padding: var(--spacing-sm) 0;

        font-size: 1.125rem;

    }

    

    .nav-phone {

        font-size: 1.125rem;

        padding: var(--spacing-sm) 0;

    }

    

    .nav-menu .btn-primary {

        width: 100%;

        justify-content: center;

        margin-top: var(--spacing-sm);

    }

    

    .mobile-menu-toggle {

        display: flex;

    }

    

    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    /* Make dropdown toggle display inline with arrow on mobile */
    .nav-menu .dropdown .dropdown-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 8px;
    }

    .dropdown-caret {
        margin-left: auto;
    }

    

    .mobile-menu-toggle.active span:nth-child(2) {

        opacity: 0;

    }

    

    .mobile-menu-toggle.active span:nth-child(3) {

        transform: rotate(-45deg) translate(7px, -6px);

    }

    

    .about-wrapper {

        grid-template-columns: 1fr;

    }

    

    .about-content {

        padding-right: 0;

    }

    

    .about-features {

        grid-template-columns: 1fr;

    }

    

    .about-images-grid {

        grid-template-columns: 1fr;

    }

    

    .about-hero {

        min-height: 50vh;

    }

    

    .about-section-item {

        grid-template-columns: 1fr;

    }

    

    .about-section-item.reverse {

        direction: ltr;

    }

    

    .about-hero-buttons {

        flex-direction: column;

    }

    

    .about-hero-buttons .btn-primary,

    .about-hero-buttons .btn-secondary {

        width: 100%;

        justify-content: center;

    }

    

    .contact-wrapper {

        grid-template-columns: 1fr;

    }

    

    .footer-content {

        grid-template-columns: 1fr;

        gap: var(--spacing-lg);

        text-align: left;

    }

    

    .footer-brand {

        max-width: 100%;

    }

    

    .footer-section-title {

        font-size: 1.125rem;

        margin-bottom: var(--spacing-sm);

    }

    

    .footer-description {

        font-size: 0.875rem;

    }

    

    .footer-certifications {

        flex-wrap: wrap;

        gap: var(--spacing-xs);

    }

    

    .footer-cert-badge {

        font-size: 0.75rem;

        padding: 0.4rem 0.75rem;

    }

    

    .footer-contact-item {

        font-size: 0.875rem;

        padding: var(--spacing-sm);

    }

    

    .footer-hours-title {

        font-size: 0.9375rem;

    }

    

    .footer-hours-item {

        font-size: 0.8125rem;

    }

    

    .footer-bottom-content {

        flex-direction: column;

        text-align: center;

        gap: var(--spacing-sm);

        text-align: center;

    }

}



@media (max-width: 768px) {

    :root {

        --spacing-xl: 3rem;

        --spacing-2xl: 4rem;

    }

    

    .hero {

        min-height: 80vh;

        padding-top: 70px;

    }

    

    .hero-title {

        font-size: clamp(2rem, 6vw, 3rem);

    }

    

    .hero-subtitle {

        font-size: clamp(0.9375rem, 3vw, 1.125rem);

    }

    

    .hero-features {

        gap: var(--spacing-sm);

    }

    

    .hero-feature-item {

        padding: 0.5rem 1rem;

        font-size: 0.8125rem;

    }

    

    .hero-cta-group {

        flex-direction: column;

        width: 100%;

    }

    

    .btn-hero-primary,

    .btn-hero-secondary {

        width: 100%;

        justify-content: center;

    }

    

    .hero-trust-indicators {

        gap: var(--spacing-md);

        padding: var(--spacing-md);

    }

    

    .hero-trust-number {

        font-size: 1.5rem;

    }

    

    .hero-trust-label {

        font-size: 0.6875rem;

    }

    

    .hero-trust-divider {

        height: 30px;

    }

    

    .section-title {

        font-size: clamp(1.75rem, 5vw, 2.5rem);

    }

    

    .services-grid,

    .testimonials-grid,

    .why-us-grid {

        grid-template-columns: 1fr;

        gap: var(--spacing-md);

    }

    

    .stats-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: var(--spacing-md);

    }

    

    .stat-item {

        padding: var(--spacing-sm);

    }

    

    .stat-number {

        font-size: clamp(2rem, 6vw, 3rem);

    }

    

    .stat-label {

        font-size: 0.8125rem;

    }

    

    .process-grid {

        grid-template-columns: 1fr;

        gap: var(--spacing-xl);

    }

    

    .process-connector {

        display: none;

    }

    

    .process-step-number {

        top: -20px;

        width: 45px;

        height: 45px;

        font-size: 1.125rem;

    }

    

    .process-video {

        margin-bottom: var(--spacing-sm);

    }

    

    .process-title {

        font-size: 1.25rem;

    }

    

    .process-description {

        font-size: 0.875rem;

    }

    

    .play-button svg {

        width: 60px;

        height: 60px;

    }

    

    .service-card {

        padding: var(--spacing-md);

    }

    

    .service-title {

        font-size: 1.25rem;

    }

    

    .testimonial-card {

        padding: var(--spacing-md);

    }

    

    .testimonial-text {

        font-size: 0.9375rem;

    }

    

    .why-us-home-buttons {

        flex-direction: column;

    }

    

    .why-us-home-buttons .btn-primary,

    .why-us-home-buttons .btn-secondary {

        width: 100%;

        justify-content: center;

    }

    

    .service-detail-wrapper {

        grid-template-columns: 1fr;

    }

    

    .service-detail-wrapper.reverse {

        direction: ltr;

    }

    

    .service-detail-image {

        min-height: 250px;

        max-height: 400px;

    }

    

    .service-detail-img {

        max-height: 400px;

    }

    

    .service-detail-wrapper {

        padding: var(--spacing-md);

    }

    

    .service-detail-content {

        padding: var(--spacing-md);

    }

    

    .why-us-home-wrapper {

        grid-template-columns: 1fr;

    }

    

    .why-us-home-content {

        padding-right: 0;

    }

    

    .why-us-home-lexus-badge {

        max-width: 200px;

        margin: 0 auto;

    }

    

    .why-us-home-img {

        max-width: 280px;

        margin: 0 auto;

    }

    

    .why-us-home-features {

        grid-template-columns: 1fr;

    }

    

    .cta-buttons {

        flex-direction: column;

    }

    

    .cta-buttons .btn-hero,

    .cta-buttons .btn-secondary {

        width: 100%;

        justify-content: center;

    }

    

    .before-after-stats {

        gap: var(--spacing-md);

    }

    

    .ba-stat-item {

        min-width: 120px;

        padding: var(--spacing-sm);

    }

    

    .ba-stat-number {

        font-size: 2rem;

    }

    

    .ba-image-item {

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

    }

    

    .ba-image-label {

        font-size: 0.8125rem;

        padding: 0.5rem 1rem;

    }

}



/* Before & After: 1 image per row only on small screens (768px and below) */

@media (max-width: 768px) {

    .before-after-grid {

        grid-template-columns: 1fr;

        grid-template-rows: auto;

        grid-auto-flow: row;

        gap: var(--spacing-lg);

        margin-bottom: var(--spacing-lg);

    }

}



@media (max-width: 640px) {

    .before-after {

        padding: var(--spacing-xl) 0;

    }

    

    .ba-image-item:hover {

        transform: none;

    }

    

    .ba-image-wrapper {

        aspect-ratio: 4/3;

    }

    

    .ba-image-label {

        font-size: 0.8125rem;

        padding: 0.5rem 0.75rem;

    }

    

    .before-after-cta {

        padding: var(--spacing-xl);

        margin-top: var(--spacing-lg);

    }

    

    .ba-cta-buttons {

        flex-wrap: wrap;

        gap: var(--spacing-md);

    }

    

    .ba-cta-buttons .btn-primary,

    .ba-cta-buttons .btn-secondary {

        min-width: 140px;

    }

}



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

   Video Modal

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

.video-modal {

    display: none;

    position: fixed;

    z-index: 2000;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

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

    align-items: center;

    justify-content: center;

    animation: fadeIn 0.3s ease;

}



.video-modal.active {

    display: flex;

}



.video-modal-content {

    position: relative;

    width: 90%;

    max-width: 900px;

    background: var(--bg-white);

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

    padding: var(--spacing-lg);

    animation: slideUp 0.3s ease;

}



.video-modal-close {

    position: absolute;

    top: -40px;

    right: 0;

    background: none;

    border: none;

    color: var(--text-white);

    font-size: 2.5rem;

    cursor: pointer;

    line-height: 1;

    padding: 0;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: var(--transition-base);

}



.video-modal-close:hover {

    transform: rotate(90deg);

}



.video-container {

    position: relative;

    padding-bottom: 56.25%; /* 16:9 aspect ratio */

    height: 0;

    overflow: hidden;

}



.video-container iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

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

}



@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}



@keyframes slideUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@media (max-width: 480px) {

    .container {

        padding: 0 var(--spacing-sm);

    }

    

    .hero {

        min-height: 70vh;

        padding-top: 60px;

    }

    

    .hero-content {

        padding: var(--spacing-lg) var(--spacing-sm);

    }

    

    .hero-badge {

        font-size: 0.75rem;

        padding: 0.5rem 1.25rem;

    }

    

    .hero-badge svg {

        width: 16px;

        height: 16px;

    }

    

    .hero-title {

        font-size: clamp(1.75rem, 7vw, 2.5rem);

        margin-bottom: var(--spacing-sm);

    }

    

    .hero-subtitle {

        font-size: 0.9375rem;

        margin-bottom: var(--spacing-md);

    }

    

    .hero-features {

        gap: var(--spacing-xs);

        margin-bottom: var(--spacing-md);

    }

    

    .hero-feature-item {

        padding: 0.5rem 0.875rem;

        font-size: 0.75rem;

    }

    

    .hero-feature-item svg {

        width: 16px;

        height: 16px;

    }

    

    .hero-cta-group {

        margin-bottom: var(--spacing-md);

        gap: var(--spacing-sm);

    }

    

    .btn-hero {

        padding: 1rem 1.5rem;

        font-size: 0.875rem;

    }

    

    .hero-trust-indicators {

        padding: var(--spacing-sm) var(--spacing-md);

        gap: var(--spacing-sm);

    }

    

    .hero-trust-number {

        font-size: 1.25rem;

    }

    

    .hero-trust-label {

        font-size: 0.625rem;

    }

    

    .hero-trust-divider {

        height: 25px;

    }

    

    section {

        padding: var(--spacing-xl) 0;

    }

    

    .section-header {

        margin-bottom: var(--spacing-md);

    }

    

    .section-title {

        font-size: clamp(1.5rem, 6vw, 2rem);

    }

    

    .section-description {

        font-size: 0.9375rem;

    }

    

    .video-modal-content {

        width: 95%;

        padding: var(--spacing-sm);

    }

    

    .logo-image {

        height: 50px;

        max-width: 180px;

    }

    

    .logo-title {

        font-size: 0.7rem;

    }

    

    .logo-subtitle {

        font-size: 0.6rem;

    }

    

    .footer-logo-image {

        height: 50px;

        max-width: 180px;

    }

    

    .footer-logo-title {

        font-size: 0.7rem;

    }

    

    .footer-logo-subtitle {

        font-size: 0.6rem;

    }

    

    .stats-grid {

        grid-template-columns: 1fr;

        gap: var(--spacing-sm);

    }

    

    .stat-item {

        padding: var(--spacing-sm);

    }

    

    .stat-number {

        font-size: clamp(1.75rem, 7vw, 2.5rem);

        margin-bottom: 0.25rem;

    }

    

    .stat-label {

        font-size: 0.75rem;

    }

    

    .process-grid {

        grid-template-columns: 1fr;

        gap: var(--spacing-lg);

    }

    

    .process-connector {

        display: none;

    }

    

    .process-step-number {

        width: 40px;

        height: 40px;

        font-size: 1rem;

        top: -15px;

        border-width: 3px;

    }

    

    .process-video {

        margin-bottom: var(--spacing-sm);

    }

    

    .process-title {

        font-size: 1.125rem;

        margin-bottom: 0.5rem;

    }

    

    .process-description {

        font-size: 0.8125rem;

        line-height: 1.6;

    }

    

    .play-button svg {

        width: 55px;

        height: 55px;

    }

    

    .process-video-badge {

        top: 10px;

        right: 10px;

        padding: 0.4rem 0.75rem;

        font-size: 0.6875rem;

    }

    

    .process-video-badge svg {

        width: 12px;

        height: 12px;

    }

    

    .service-card {

        padding: var(--spacing-sm);

    }

    

    .service-image {

        margin-bottom: var(--spacing-sm);

    }

    

    .service-title {

        font-size: 1.125rem;

    }

    

    .service-detail-image {

        min-height: 200px;

        max-height: 300px;

    }

    

    .service-detail-img {

        min-height: 200px;

        max-height: 300px;

    }

    

    .service-detail-wrapper {

        padding: var(--spacing-sm);

        gap: var(--spacing-md);

    }

    

    .service-detail-content {

        padding: var(--spacing-sm) !important;

    }

    }

    

    .service-description {

        font-size: 0.875rem;

    }

    

    .service-link {

        font-size: 0.875rem;

    }

    

    .testimonial-card {

        padding: var(--spacing-sm);

    }

    

    .testimonial-stars {

        font-size: 1rem;

    }

    

    .testimonial-text {

        font-size: 0.875rem;

        line-height: 1.6;

    }

    

    .testimonial-author {

        font-size: 0.875rem;

    }

    

    .why-us-home-feature {

        gap: var(--spacing-xs);

    }

    

    .why-us-home-icon {

        width: 28px;

        height: 28px;

        font-size: 1rem;

    }

    

    .why-us-home-feature h4 {

        font-size: 0.9375rem;

    }

    

    .why-us-home-feature p {

        font-size: 0.8125rem;

    }

    

    .why-us-home-lexus-badge {

        max-width: 100%;

    }

    

    .why-us-home-img {

        max-width: 100%;

    }

    

    .cta-title {

        font-size: clamp(1.5rem, 6vw, 2rem);

    }

    

    .cta-description {

        font-size: 1rem;

    }

    

    .cta-buttons {

        flex-direction: column;

        gap: var(--spacing-sm);

    }

    

    .cta-buttons .btn-hero,

    .cta-buttons .btn-secondary {

        width: 100%;

        justify-content: center;

        padding: 1rem 1.5rem;

        color: var(--text-white);

    }

    

    .before-after-stats {

        gap: var(--spacing-sm);

        padding: var(--spacing-sm) 0;

    }

    

    .ba-stat-item {

        min-width: 100px;

        padding: var(--spacing-xs);

    }

    

    .ba-stat-number {

        font-size: 1.5rem;

    }

    

    .ba-stat-label {

        font-size: 0.75rem;

    }

    

    .before-after-grid {

        grid-template-columns: 1fr;

        gap: var(--spacing-lg);

        margin-bottom: var(--spacing-lg);

    }

    

    .ba-image-wrapper {

        aspect-ratio: 4/3;

    }

    

    .ba-image-label {

        font-size: 0.8125rem;

        padding: 0.5rem 0.75rem;

    }

    

    .ba-comparison-wrapper {

        grid-template-columns: 1fr;

        gap: var(--spacing-xs);

        padding: var(--spacing-xs);

    }

    

    .ba-divider {

        display: none;

    }

    

    .ba-image {

        aspect-ratio: 4/3;

    }

    

    .ba-item-badge {

        top: var(--spacing-sm);

        right: var(--spacing-sm);

        padding: 0.375rem 0.75rem;

        font-size: 0.6875rem;

    }

    

    .ba-label {

        padding: 0.5rem 1rem;

        font-size: 0.875rem;

    }

    

    .ba-label svg {

        width: 16px;

        height: 16px;

    }

    

    .ba-description {

        font-size: 0.9375rem;

    }

    

    .ba-damage-indicator,

    .ba-success-indicator {

        padding: 0.375rem 0.75rem;

        font-size: 0.75rem;

    }

    

    .ba-item-footer {

        padding: var(--spacing-sm);

    }

    

    .ba-item-title {

        font-size: 1.125rem;

    }

    

    .ba-item-text {

        font-size: 0.875rem;

    }

    

    .ba-item-tags {

        gap: 0.25rem;

    }

    

    .ba-tag {

        padding: 0.25rem 0.625rem;

        font-size: 0.6875rem;

    }

    

    .before-after {

        padding: var(--spacing-xl) 0;

    }

    

    .before-after-cta {

        padding: var(--spacing-lg);

        margin-top: var(--spacing-lg);

    }

    

    .ba-cta-title {

        font-size: 1.35rem;

        margin-bottom: var(--spacing-sm);

    }

    

    .ba-cta-text {

        font-size: 0.9375rem;

        margin-bottom: var(--spacing-md);

    }

    

    .ba-cta-buttons {

        flex-direction: column;

        gap: var(--spacing-md);

        flex-wrap: wrap;

    }

    

    .ba-cta-buttons .btn-primary,

    .ba-cta-buttons .btn-secondary {

        width: 100%;

        min-width: 0;

        font-size: 0.9375rem;

        padding: 0.875rem 1.25rem;

        justify-content: center;

    }

    

    .cert-badge {

        min-width: auto;

        height: 250px;

        padding: var(--spacing-sm);

    }

    

    .cert-image {

        /**max-height: 90px;**/

    }

    

    .footer-bottom-links {

        flex-wrap: wrap;

        justify-content: center;

        gap: var(--spacing-xs);

    }

    

    .footer-bottom-links a {

        font-size: 0.8125rem;

    }

    

    .section-label {

        font-size: 0.75rem;

    }

    

    .btn-primary,

    .btn-secondary {

        padding: 0.75rem 1.5rem;

        font-size: 0.875rem;

    }

    

    .services-cta {

        margin-top: var(--spacing-lg);

    }

    

    .why-us-home-text {

        font-size: 1rem;

    }
    /* =========================
   FAQ Section
    ========================= */

    .faqs {
        padding: var(--spacing-xl) 0;
        background: #f9fafb;
    }

    .faqs-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        max-width: 800px;
        margin: 0 auto;
    }

    /* FAQ Card */
    .faq-item {
        background: #ffffff;
        border-radius: 12px;
        padding: 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        border: 1px solid #eee;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .faq-item:hover {
        box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    }

    /* Question */
    .faq-question {
        font-size: 1.125rem;
        font-weight: 600;
        padding: var(--spacing-sm);
        margin: 0;
        cursor: pointer;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Plus Icon */
    .faq-question::after {
        content: "+";
        font-size: 1.25rem;
        transition: transform 0.3s ease;
    }

    /* Active State */
    .faq-item.active .faq-question::after {
        content: "–";
    }

    /* Answer */
    .faq-answer {
        max-height: 0;
        overflow: hidden;
        padding: 0 var(--spacing-sm);
        font-size: 0.95rem;
        line-height: 1.6;
        color: #555;
        transition: max-height 0.35s ease, padding 0.3s ease;
    }

    /* Expanded */
    .faq-item.active .faq-answer {
        padding: 0 var(--spacing-sm) var(--spacing-sm);
        max-height: 300px;
    }

/* Dropdown menu (added for navbar Our Services) */
.nav-menu .dropdown {
    position: relative;
}
.nav-menu .dropdown .dropdown-toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nav-menu .dropdown .dropdown-toggle::after {
    /* keep empty - we use .dropdown-caret element instead */
    content: '';
    display: none !important;
}
.dropdown-caret {
    font-size: 0.8rem;
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
    transition: transform .2s ease;
}
.nav-menu .dropdown .dropdown-menu {
    display: none;
    position: absolute;
    /* top: calc(100% + 8px); */
    left: 0;
    background: var(--bg-white);
    box-shadow: var(--shadow-md);
    border-radius: 8px;
    min-width: 220px;
    list-style: none;
    padding: 0.5rem 0;
    z-index: 1003;
}
.nav-menu .dropdown .dropdown-menu li a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--text-dark);
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
}
.nav-menu .dropdown .dropdown-menu li a:hover {
    background: var(--bg-light);
    color: var(--primary);
}
.nav-menu .dropdown:hover .dropdown-menu {
    display: block;
}

@media (max-width: 968px) {
    .nav-menu .dropdown .dropdown-menu {
        position: static;
        display: none;
        box-shadow: none;
        padding-left: 0.5rem;
    }
    .nav-menu .dropdown.open .dropdown-menu {
        display: block;
    }
    .dropdown-caret {
        transform: rotate(0);
    }
    .nav-menu .dropdown.open > .dropdown-caret {
        transform: rotate(180deg);
    }
}