/* Import Contact Animation Styles */
@import url('./patil-contact-animation.css');

/* CSS Custom Properties */
:root {
    --color-primary: #B52F30;
    --color-primary-dark: #9a2629;
    --color-primary-light: #d63a41;
    --color-white: #FFFFFF;
    --color-black: #111111;
    --color-gray: #333333;
    --color-light-gray: #FFE5E6;
    --color-bg-light: #FFF8F8;

    --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --font-size-base: 16px;
    --font-size-large: 18px;
    --font-size-h1: clamp(32px, 5vw, 56px);
    --font-size-h2: clamp(24px, 4vw, 40px);
    --font-size-h3: clamp(20px, 3vw, 28px);

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;

    --border-radius: 12px;
    --border-radius-lg: 20px;
    --shadow: 0 4px 6px -1px rgba(215, 25, 32, 0.1);
    --shadow-md: 0 8px 16px -4px rgba(215, 25, 32, 0.15);
    --shadow-lg: 0 20px 25px -5px rgba(215, 25, 32, 0.2);
    --shadow-red: 0 10px 30px -10px rgba(215, 25, 32, 0.4);

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-black);
    background-color: var(--color-white);
}

body.smooth-scroll {
    scroll-behavior: smooth;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

p {
    margin-bottom: var(--spacing-sm);
}

/* Layout */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--spacing-xs);
}

@media (min-width: 480px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--spacing-lg);
    }
}

/* Header & Navigation */
.header {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
    z-index: 100;
    transition: var(--transition);
}

.header.scrolled {
    box-shadow: var(--shadow-md);
    background: rgba(255, 255, 255, 0.98);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    margin-right: var(--spacing-xl);
}

.nav__brand {
    margin-left: var(--spacing-xl);
}

@media (max-width: 768px) {
    .nav {
        margin-right: 0;
    }
    
    .nav__brand {
        margin-left: var(--spacing-md);
    }
}

@media (max-width: 1024px) and (orientation: landscape) {
    .nav__brand {
        margin-left: var(--spacing-md);
    }
}

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

.logo-image {
    height: 50px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    transition: var(--transition);
    filter: drop-shadow(0 2px 4px rgba(215, 25, 32, 0.1));
    /* margin-left: 80px; */
}

.logo-image:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 8px rgba(215, 25, 32, 0.2));
}

@media (max-width: 480px) {
    .logo-image {
        height: 35px;
        max-width: 120px;
    }
}

.nav__toggle {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--spacing-xs);
    background: none;
    border: none;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

.nav__toggle span {
    width: 24px;
    height: 3px;
    background: var(--color-primary);
    transition: var(--transition);
    border-radius: 2px;
}

.nav__toggle:hover span {
    background: var(--color-primary-dark);
}

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

.nav__toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav__toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

.nav__menu {
    display: none;
    list-style: none;
    gap: var(--spacing-lg);
}

.nav__item {
    position: relative;
}



.nav__link {
    font-weight: 500;
    transition: all 0.3s ease;
    padding: var(--spacing-xs) var(--spacing-sm);
    position: relative;
    border-radius: 6px;
}

.nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width 0.3s ease;
}

.nav__link:hover::after {
    width: 100%;
}

.nav__link:hover {
    color: var(--color-primary);
}

.nav__link--active {
    color: var(--color-primary);
    background: rgba(215, 25, 32, 0.08);
}

.nav__link--active::after {
    width: 100%;
}

@media (min-width: 768px) {
    .nav__toggle {
        display: none;
    }
    
    .nav__menu {
        display: flex;
    }
}

/* Mobile Menu */
.nav__menu--open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    width: 200px;
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
    border-radius: 0 0 0 12px;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-right: none;
    z-index: 1000;
    text-align: center;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: var(--border-radius);
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    min-height: 44px;
    border: 2px solid transparent;
}

.btn--primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.btn--primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.btn--primary:hover::before {
    left: 100%;
}

.btn--primary:hover {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-red);
}

.btn--primary:active {
    transform: translateY(0);
}

.btn--secondary {
    background: var(--color-light-gray);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    font-weight: 600;
}

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

.btn--outline {
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    background: transparent;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn--outline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--color-primary);
    transition: width 0.4s ease;
    z-index: -1;
}

.btn--outline:hover::before {
    width: 100%;
}

.btn--outline:hover {
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn--large {
    padding: 16px 32px;
    font-size: var(--font-size-large);
}

/* Hero Section */
.hero {
    padding: var(--spacing-3xl) 0;
    background: linear-gradient(135deg, var(--color-light-gray) 0%, var(--color-white) 50%, var(--color-bg-light) 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 70vh;
    display: flex;
    align-items: center;
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}

.hero--small {
    min-height: auto;
    padding: var(--spacing-lg) 0;
}

.hero--small .container {
    max-width: 600px;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="%23D71920" opacity="0.1"/><circle cx="80" cy="30" r="1.5" fill="%23D71920" opacity="0.1"/><circle cx="60" cy="70" r="1" fill="%23D71920" opacity="0.1"/><circle cx="30" cy="80" r="2.5" fill="%23D71920" opacity="0.1"/></svg>');
    background-size: 200px 200px;
    pointer-events: none;
}

.hero__content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hero__content::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 100px;
    height: 100px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="20" fill="none" stroke="%23D71920" stroke-width="2" opacity="0.2"/><path d="M35 50 L50 35 L65 50" stroke="%23D71920" stroke-width="2" fill="none" opacity="0.2"/></svg>');
    background-repeat: no-repeat;
    pointer-events: none;
    animation: heroFloat 6s ease-in-out infinite;
}

.hero__content::after {
    content: '';
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 80px;
    height: 80px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="20" y="20" width="60" height="60" fill="none" stroke="%23D71920" stroke-width="2" opacity="0.2" rx="10"/><circle cx="50" cy="50" r="15" fill="%23D71920" opacity="0.1"/></svg>');
    background-repeat: no-repeat;
    pointer-events: none;
    animation: heroFloat 8s ease-in-out infinite reverse;
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__content::before,
    .hero__content::after {
        animation: none;
    }
}

.hero__title {
    margin-bottom: var(--spacing-md);
    color: var(--color-black);
    background: linear-gradient(135deg, var(--color-black) 0%, var(--color-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: fadeInUp 0.8s ease-out;
}

.hero__subtitle {
    font-size: var(--font-size-large);
    color: var(--color-gray);
    margin-bottom: var(--spacing-xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.hero__actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Scroll animations */
.fade-in {
    opacity: 0;
    animation: fadeIn 0.6s ease-out forwards;
}

.slide-in-left {
    opacity: 0;
    animation: slideInLeft 0.6s ease-out forwards;
}

.slide-in-right {
    opacity: 0;
    animation: slideInRight 0.6s ease-out forwards;
}

.scale-in {
    opacity: 0;
    animation: scaleIn 0.6s ease-out forwards;
}

/* Sections */
section {
    padding: var(--spacing-2xl) 0;
}

.section__title {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    color: var(--color-black);
    position: relative;
    display: inline-block;
    width: 100%;
}

.section__title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border-radius: 2px;
}

/* Services */
.services {
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

.services::before {
    content: '';
    position: absolute;
    top: 0;
    right: -100px;
    width: 200px;
    height: 200px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M20 30 L30 20 L40 30 L50 20 L60 30 L70 20 L80 30" stroke="%23D71920" stroke-width="2" fill="none" opacity="0.1"/><circle cx="25" cy="50" r="3" fill="%23D71920" opacity="0.1"/><circle cx="75" cy="70" r="2" fill="%23D71920" opacity="0.1"/></svg>');
    background-repeat: no-repeat;
    pointer-events: none;
}

.services__grid {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .services__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.service-card {
    background: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.service-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 30%, rgba(215, 25, 32, 0.05) 50%, transparent 70%);
    transform: rotate(45deg);
    transition: var(--transition);
    opacity: 0;
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card:hover::after {
    opacity: 1;
    transform: rotate(45deg) translate(20px, 20px);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-red);
    border-color: var(--color-primary);
}

.service-card__icon {
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
    transition: var(--transition);
    display: inline-block;
}

.service-card:hover .service-card__icon {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 4px 8px rgba(215, 25, 32, 0.3));
}

.service-card__title {
    margin-bottom: var(--spacing-sm);
}

.service-card__description {
    color: var(--color-gray);
    margin-bottom: var(--spacing-md);
}

.service-card__benefits {
    list-style: none;
    margin-bottom: var(--spacing-lg);
    text-align: left;
}

.service-card__benefits li {
    padding: var(--spacing-xs) 0;
    position: relative;
    padding-left: var(--spacing-md);
}

.service-card__benefits li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
}

/* Trust Section */
.trust {
    background: var(--color-light-gray);
    position: relative;
    overflow: hidden;
}

.trust::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -50px;
    width: 150px;
    height: 150px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="20" y="40" width="60" height="40" fill="none" stroke="%23D71920" stroke-width="2" opacity="0.1"/><circle cx="30" cy="30" r="8" fill="none" stroke="%23D71920" stroke-width="2" opacity="0.1"/><circle cx="70" cy="30" r="8" fill="none" stroke="%23D71920" stroke-width="2" opacity="0.1"/></svg>');
    background-repeat: no-repeat;
    pointer-events: none;
}

.trust__grid {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .trust__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .trust__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.trust__item {
    text-align: center;
}

.trust__item h3 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

/* Process Section */
.process {
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

.process::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--color-light-gray) 20%, var(--color-light-gray) 80%, transparent 100%);
    z-index: 0;
}

.process .container {
    position: relative;
    z-index: 1;
}

.process__steps {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .process__steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .process__steps {
        grid-template-columns: repeat(4, 1fr);
    }
}

.process__step {
    text-align: center;
    position: relative;
}

.process__number {
    width: 60px;
    height: 60px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto var(--spacing-md);
}

/* Testimonials */
.testimonials {
    background: var(--color-light-gray);
    position: relative;
    overflow: hidden;
}

.testimonials::before {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 100px;
    height: 100px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M20 40 Q30 20 40 40 Q50 20 60 40 Q70 20 80 40" stroke="%23D71920" stroke-width="3" fill="none" opacity="0.1"/><circle cx="20" cy="70" r="5" fill="%23D71920" opacity="0.1"/><circle cx="80" cy="70" r="5" fill="%23D71920" opacity="0.1"/></svg>');
    background-repeat: no-repeat;
    pointer-events: none;
}

.testimonials__grid {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: 1fr;
    margin-bottom: var(--spacing-lg);
}

@media (min-width: 768px) {
    .testimonials__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .testimonials__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.testimonial {
    background: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.testimonial p {
    font-style: italic;
    margin-bottom: var(--spacing-md);
}

.testimonial cite {
    color: var(--color-gray);
    font-size: 0.9rem;
}

.testimonials__note {
    text-align: center;
    color: var(--color-gray);
    font-size: 0.9rem;
}

/* CTA Banner */
.cta-banner {
    padding: var(--spacing-2xl) 0;
}

.cta-banner .container {
    max-width: 1000px;
}

.cta-banner__wrapper {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: var(--spacing-lg) var(--spacing-2xl);
    border-radius: 25px;
    box-shadow: 0 15px 30px rgba(181, 47, 48, 0.2);
    max-width: 1000px;
    margin: 0 auto;
    animation: ctaFloat 6s ease-in-out infinite;
}

.cta-banner__wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 2px, transparent 2px),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.08) 1px, transparent 1px),
        radial-gradient(circle at 60% 20%, rgba(255,255,255,0.06) 1.5px, transparent 1.5px);
    background-size: 50px 50px, 30px 30px, 40px 40px;
    animation: patternMove 20s linear infinite;
    pointer-events: none;
}

@keyframes ctaFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

@keyframes patternMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

.cta-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="20" fill="white" opacity="0.05"/><circle cx="80" cy="80" r="30" fill="white" opacity="0.03"/></svg>');
    background-size: 300px 300px;
    pointer-events: none;
}

.cta-banner .container {
    position: relative;
    z-index: 1;
}

.cta-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="20" fill="white" opacity="0.05"/><circle cx="80" cy="80" r="30" fill="white" opacity="0.03"/></svg>');
    background-size: 300px 300px;
    pointer-events: none;
}

.cta-banner .container {
    position: relative;
    z-index: 1;
}

.cta-banner h2 {
    color: var(--color-white);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-h2);
}

.cta-banner p {
    font-size: var(--font-size-large);
    margin-bottom: var(--spacing-xl);
    opacity: 0.95;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cta-banner .btn--primary {
    background: #cfcdcd;
    color: var(--color-primary);
    border: 2px solid var(--color-white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.cta-banner .btn--primary:hover {
    background: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.cta-banner__content {
    text-align: center;
}

.cta-banner__text h2 {
    margin-bottom: var(--spacing-md);
    color: var(--color-white);
}

.cta-banner__text p {
    margin-bottom: var(--spacing-lg);
    opacity: 0.9;
}

.cta-banner__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.cta-banner__note {
    font-size: 0.9rem;
    opacity: 0.8;
    margin: 0;
}

/* Footer */
.footer {
    background: #D71920;
    color: white;
    padding: 3rem 0;
    font-family: 'Montserrat', sans-serif;
}

.footer__content {
    display: grid;
    grid-template-columns: 35% 20% 25% 20%;
    gap: 2rem;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.footer__value {
    padding-right: 1rem;
}

.footer__value h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: white;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

.footer__value p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #FF4D4F;
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.footer__location {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.location-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.location-item svg {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.location-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: white;
    line-height: 1.4;
}

.footer__contact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s ease;
    padding: 0.25rem 0;
}

.contact-item:hover {
    background: rgba(255, 77, 79, 0.1);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
}

.contact-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.contact-item a,
.contact-item span {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: white;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-item a:hover {
    color: #FF4D4F;
}

.consultation-link {
    color: #FF4D4F !important;
    border-bottom: 1px solid transparent;
}

.consultation-link:hover {
    border-bottom-color: #FF4D4F;
}

.footer__legal {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-end;
}

.legal-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 0.25rem 0;
}

.legal-link:hover {
    color: #FF4D4F;
    background: rgba(255, 77, 79, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

@media (max-width: 1024px) {
    .footer__content {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    
    .footer__legal {
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .footer__content {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 1rem;
    }
    
    .footer {
        padding: 2rem 0;
    }
    
    .footer__legal {
        align-items: flex-start;
    }
}

/* Cookie Banner */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-white);
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
    padding: var(--spacing-lg);
    z-index: 1000;
}

.cookie-banner__content {
    max-width: 800px;
    margin: 0 auto;
}

.cookie-banner h3 {
    margin-bottom: var(--spacing-sm);
}

.cookie-banner__options {
    margin: var(--spacing-md) 0;
}

.cookie-banner__options label {
    display: block;
    margin-bottom: var(--spacing-xs);
    cursor: pointer;
}

.cookie-banner__actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Form Styles */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: var(--border-radius);
    font-family: inherit;
    font-size: var(--font-size-base);
    transition: var(--transition);
    background: var(--color-white);
}

.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover {
    border-color: var(--color-primary);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.1);
    transform: translateY(-1px);
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    margin-top: 2px;
}

/* FAQ Accordion */
.faq {
    margin-bottom: var(--spacing-lg);
}

.faq__item {
    border: 1px solid #e5e7eb;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
}

.faq__question {
    width: 100%;
    padding: var(--spacing-md);
    text-align: left;
    background: none;
    border: none;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq__question:hover {
    background: var(--color-light-gray);
}

.faq__answer {
    padding: 0 var(--spacing-md) var(--spacing-md);
    display: none;
    color: var(--color-gray);
}

.faq__answer.active {
    display: block;
}

/* Animations */
@media (prefers-reduced-motion: no-preference) {
    .service-card,
    .process__step,
    .testimonial {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 0.6s ease forwards;
    }
    
    .service-card:nth-child(1) { animation-delay: 0.1s; }
    .service-card:nth-child(2) { animation-delay: 0.2s; }
    .service-card:nth-child(3) { animation-delay: 0.3s; }
    
    .process__step:nth-child(1) { animation-delay: 0.1s; }
    .process__step:nth-child(2) { animation-delay: 0.2s; }
    .process__step:nth-child(3) { animation-delay: 0.3s; }
    .process__step:nth-child(4) { animation-delay: 0.4s; }
}

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

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

/* Focus styles */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    }
}

/* Print styles */
/* Utility Classes */
.text-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hover-lift {
    transition: var(--transition);
}

.hover-lift:hover {
    transform: translateY(-4px);
}

.hover-scale {
    transition: var(--transition);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.bg-gradient-red {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.bg-light {
    background: var(--color-bg-light);
}

.shadow-red {
    box-shadow: var(--shadow-red);
}

/* Decorative Elements */
.decorative-dot {
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    display: inline-block;
    animation: pulse 2s infinite;
}

.decorative-line {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary) 0%, transparent 100%);
    margin: var(--spacing-sm) 0;
}

/* Scroll to top button */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 99;
    box-shadow: var(--shadow-red);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* Loading animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(215, 25, 32, 0.3);
    border-radius: 50%;
    border-top-color: var(--color-primary);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Contact Page Styles */
.contact {
    padding: var(--spacing-2xl) 0;
}

.contact__content {
    display: grid;
    gap: var(--spacing-2xl);
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .contact__content {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.contact__animation {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

/* Contact Animation */
.contact-visual {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

.contact-circle {
    position: relative;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #FFE5E6 0%, #FDE8E8 50%, #FFCCCB 100%);
    border-radius: 50%;
    box-shadow: 0 20px 40px rgba(215, 25, 32, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 50px auto;
    border: 3px solid rgba(215, 25, 32, 0.2);
}

.contact-icons {
    position: absolute;
    width: 100%;
    height: 100%;
}

.contact-icon {
    position: absolute;
    width: 50px;
    height: 50px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    animation: orbit 8s linear infinite;
    box-shadow: 0 4px 15px rgba(215, 25, 32, 0.3);
}

.phone-icon {
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0s;
}

.email-icon {
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
    animation-delay: -2.67s;
}

.chat-icon {
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: -5.33s;
}

@keyframes orbit {
    0% {
        transform: rotate(0deg) translateX(100px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(100px) rotate(-360deg);
    }
}

.center-text {
    text-align: center;
    z-index: 2;
}

.center-text h3 {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    z-index: 2;
}

.cartoon-person {
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

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

.center-text h3 {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.center-text p {
    color: var(--color-gray);
    margin: 0;
    font-size: 1rem;
}

/* Location Visual */
.location__visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.location-card {
    background: white;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(181, 47, 48, 0.1);
    border: 2px solid var(--color-light-gray);
    max-width: 400px;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
    box-sizing: border-box;
}

.location-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--color-light-gray);
}

.building-icon {
    margin-bottom: 1rem;
    animation: float 3s ease-in-out infinite;
}

.location-header h4 {
    color: var(--color-primary);
    font-size: 1.5rem;
    margin: 0;
}

.location-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.location-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--color-light-gray);
    border-radius: 12px;
}

.location-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.location-item strong {
    color: var(--color-primary);
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.location-item p {
    color: var(--color-gray);
    margin: 0;
    line-height: 1.5;
}

.location-subtitle {
    color: var(--color-gray);
    font-size: 0.9rem;
    margin: 0.5rem 0 1.5rem 0;
    font-style: italic;
}

.location-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--color-light-gray);
    border-radius: 8px;
    transition: transform 0.2s ease;
}

.detail-item:hover {
    transform: translateX(5px);
}

.detail-icon {
    flex-shrink: 0;
    padding: 0.5rem;
    background: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-item span {
    color: var(--color-gray);
    font-size: 0.95rem;
    font-weight: 500;
}



/* Floating Widgets */
.cookie-float-btn,
.a11y-float-btn {
    position: fixed;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid white;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 60;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.cookie-float-btn {
    bottom: 20px;
    left: 20px;
    background: #D71920;
}

.a11y-float-btn {
    bottom: 20px;
    right: 10px;
    background: #D71920;
}

.cookie-float-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(215, 25, 32, 0.4);
    background: #B52F30;
}

.a11y-float-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(215, 25, 32, 0.4);
    background: #B52F30;
}

.cookie-float-btn:active,
.a11y-float-btn:active {
    transform: scale(0.98);
}

/* Cookie Banner */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #FDE8E8;
    padding: 1rem;
    z-index: 55;
    border-top: 2px solid #D71920;
}

.cookie-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.cookie-banner-actions {
    display: flex;
    gap: 0.75rem;
}

.btn-accept-all {
    background: #D71920;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-accept-all:hover {
    background: #B52F30;
    transform: translateY(-1px);
}

.btn-manage,
.btn-save {
    background: white;
    color: #D71920;
    border: 2px solid #D71920;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-manage:hover,
.btn-save:hover {
    background: #D71920;
    color: white;
}

/* Modal Overlays */
.cookie-modal-overlay,
.a11y-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 70;
    padding: 1rem;
}

.cookie-modal,
.a11y-modal {
    background: white;
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    max-height: 75vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    margin: 5vh auto;
}

.cookie-modal-header,
.a11y-modal-header {
    background: #f8f9fa;
    padding: 1rem 1.5rem;
    border-radius: 16px 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
}

.cookie-modal-header h2,
.a11y-modal-header h2 {
    margin: 0;
    color: #1F2937;
    font-weight: 600;
    font-size: 1.1rem;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6b7280;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.close-btn:hover {
    background: #f3f4f6;
    color: #1F2937;
}

.cookie-modal-content,
.a11y-modal-content {
    padding: 1rem 1.5rem;
}

.cookie-categories {
    margin: 1.5rem 0;
}

.cookie-category {
    background: white;
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.category-header h3 {
    margin: 0;
    color: #1F2937;
    font-size: 1rem;
    font-weight: 500;
}

.toggle {
    width: 48px;
    height: 24px;
    background: #F3F4F6;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.toggle.active {
    background: #D71920;
}

.toggle.disabled {
    cursor: not-allowed;
    background: #D71920;
}

.toggle-switch {
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle.active .toggle-switch {
    transform: translateX(24px);
}

.cookie-links {
    margin: 1.5rem 0;
    display: flex;
    gap: 1rem;
}

.cookie-links a {
    color: #D71920;
    text-decoration: underline;
    font-size: 0.9rem;
}

.cookie-modal-actions {
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-radius: 0 0 16px 16px;
    display: flex;
    gap: 0.75rem;
    border-top: 1px solid #e5e7eb;
    justify-content: flex-end;
}

/* Accessibility Menu Styles */
.a11y-section {
    margin-bottom: 1.5rem;
}

.a11y-section h3 {
    margin: 0 0 0.75rem 0;
    color: #1F2937;
    font-size: 1rem;
    font-weight: 500;
}

.font-size-controls {
    display: flex;
    gap: 0.5rem;
}

.font-size-btn {
    padding: 0.5rem 0.75rem;
    border: 2px solid #e5e7eb;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.font-size-btn.active,
.font-size-btn:hover {
    border-color: #D71920;
    color: #D71920;
}

.contrast-controls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contrast-btn {
    padding: 0.75rem;
    border: 2px solid #e5e7eb;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.contrast-btn.active,
.contrast-btn:hover {
    border-color: #D71920;
    color: #D71920;
}

.a11y-toggles {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.a11y-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.a11y-toggle input {
    width: 18px;
    height: 18px;
    accent-color: #D71920;
}

.reset-btn {
    width: 100%;
    padding: 0.75rem;
    background: #f3f4f6;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 1rem;
}

.reset-btn:hover {
    background: #e5e7eb;
}

/* Accessibility Themes */
.theme-high {
    --color-primary: #000000;
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-gray: #000000;
    --color-bg-light: #FFFFFF;
}

.theme-dark {
    --color-primary: #D71920;
    --color-white: #111827;
    --color-black: #FFFFFF;
    --color-gray: #E5E7EB;
    --color-bg-light: #1F2937;
}

.theme-dark body {
    background: #111827;
    color: #FFFFFF;
}

.underline-links a {
    text-decoration: underline !important;
}

.dyslexia-font,
.dyslexia-font * {
    font-family: 'OpenDyslexic', 'Comic Sans MS', cursive !important;
}

.prefers-reduced-motion,
.prefers-reduced-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

/* Focus Styles */
.cookie-float-btn:focus,
.a11y-float-btn:focus,
.toggle:focus,
.font-size-btn:focus,
.contrast-btn:focus,
.btn-accept-all:focus,
.btn-manage:focus,
.btn-save:focus,
.reset-btn:focus {
    outline: 2px solid #D71920;
    outline-offset: 2px;
}

/* Vita Styles */
.vita-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.vita-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-primary);
}

.vita-header h1 {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.vita-title {
    color: var(--color-gray);
    font-size: 1.2rem;
    margin: 0;
}

.vita-section {
    margin-bottom: 2rem;
}

.vita-section h2 {
    color: var(--color-primary);
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.vita-item {
    margin-bottom: 1.5rem;
}

.vita-item h3 {
    color: var(--color-black);
    margin-bottom: 0.25rem;
}

.company {
    color: var(--color-gray);
    font-style: italic;
    margin-bottom: 0.5rem;
}

.specializations {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.5rem;
}

.specializations li {
    padding: 0.5rem;
    background: var(--color-light-gray);
    border-radius: 8px;
    position: relative;
    padding-left: 1.5rem;
}

.specializations li::before {
    content: "✓";
    position: absolute;
    left: 0.5rem;
    color: var(--color-primary);
    font-weight: bold;
}

.contact-info {
    background: var(--color-light-gray);
    padding: 1rem;
    border-radius: 8px;
}

.contact-info p {
    margin-bottom: 0.5rem;
}

.contact-info p:last-child {
    margin-bottom: 0;
}

/* Handshake Animation */
.handshake-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.handshake-visual {
    position: relative;
    background: white;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(181, 47, 48, 0.1);
    text-align: center;
}

.handshake-svg {
    animation: handshakeMove 3s ease-in-out infinite;
}

@keyframes handshakeMove {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.left-hand {
    animation: leftHandMove 2s ease-in-out infinite;
}

.right-hand {
    animation: rightHandMove 2s ease-in-out infinite;
}

@keyframes leftHandMove {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}

@keyframes rightHandMove {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-5px);
    }
}

.floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.float-element {
    position: absolute;
    animation: floatAround 4s ease-in-out infinite;
    opacity: 0.7;
}

.float-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.float-2 {
    top: 30%;
    right: 15%;
    animation-delay: 1.3s;
}

.float-3 {
    bottom: 25%;
    left: 20%;
    animation-delay: 2.6s;
}

@keyframes floatAround {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.7;
    }
    33% {
        transform: translateY(-15px) rotate(120deg);
        opacity: 1;
    }
    66% {
        transform: translateY(10px) rotate(240deg);
        opacity: 0.8;
    }
}

.handshake-text {
    margin-top: 1.5rem;
}

.handshake-text h3 {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.handshake-text p {
    color: var(--color-gray);
    margin: 0;
    font-size: 1rem;
}

/* Contact Hero Animation */
.contact-hero-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(181, 47, 48, 0.1);
    max-width: 400px;
    margin: 0 auto;
}

.animation-container {
    width: 250px;
    height: 200px;
    margin-bottom: 1rem;
}

.contact-svg {
    width: 100%;
    height: 100%;
}

.animation-text {
    text-align: center;
}

.animation-text h3 {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.animation-text p {
    color: var(--color-gray);
    margin: 0;
    font-size: 1rem;
}

.floating-dots {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    opacity: 0.6;
    animation: float 4s ease-in-out infinite;
}

.dot-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.dot-2 {
    top: 30%;
    right: 15%;
    animation-delay: 1s;
}

.dot-3 {
    bottom: 25%;
    left: 20%;
    animation-delay: 2s;
}

.dot-4 {
    bottom: 35%;
    right: 10%;
    animation-delay: 3s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-20px);
        opacity: 1;
    }
}

/* Contact Form */
.contact__form {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}

/* Contact Info */
.contact__details h3 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-lg);
}

.contact__item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--color-bg-light);
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.contact__item-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact__item h4 {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.contact__item p {
    color: var(--color-gray);
    line-height: 1.6;
    margin: 0;
}

.contact__item a {
    color: var(--color-gray);
    font-weight: 500;
    transition: color 0.3s ease;
}

.contact__item a:hover {
    color: var(--color-primary);
}

/* Find Us Section */
.find-us {
    margin-top: var(--spacing-xl);
}

.find-us h2 {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

.map-container {
    background: white;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(215, 25, 32, 0.1);
}

.map-container iframe {
    border: 0;
    border-radius: 12px;
}

.address {
    margin-top: 1rem;
    text-align: center;
    color: #666;
    font-size: 1rem;
}

.address strong {
    color: var(--color-primary);
}

/* About Page Styles */
.about-mission {
    padding: var(--spacing-2xl) 0;
    overflow-x: hidden;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.values-list {
    list-style: none;
    margin-top: var(--spacing-md);
}

.values-list li {
    padding: var(--spacing-sm) 0;
    position: relative;
    padding-left: var(--spacing-lg);
}

.values-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
    font-size: 1.2rem;
}

/* Team Section */
.team {
    padding: var(--spacing-2xl) 0;
    background: var(--color-light-gray);
    overflow-x: hidden;
}

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

.team-member {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: 1fr;
    align-items: center;
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

@media (min-width: 768px) {
    .team-member {
        grid-template-columns: 200px 1fr;
    }
}

.team-member__photo {
    text-align: center;
}

.team-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--color-primary);
}

.team-member__title {
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    text-align: center;
}

.team__note {
    text-align: center;
    color: var(--color-gray);
    font-size: 0.9rem;
    margin-top: var(--spacing-lg);
}

/* Location Section */
.location {
    padding: var(--spacing-2xl) 0;
    overflow-x: hidden;
}

.location__content {
    display: grid;
    gap: var(--spacing-2xl);
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 1024px) {
    .location__content {
        grid-template-columns: 1fr 1fr;
    }
}

.location__description {
    padding: var(--spacing-xl);
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

.location__description h3 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
    font-size: 1.8rem;
}

.location__description p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-gray);
}

.location__details {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .location__details {
        grid-template-columns: repeat(3, 1fr);
    }
}

.location__address h4,
.location__contact h4,
.location__hours h4 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

.location__map {
    display: flex;
    justify-content: center;
}

.location-svg {
    max-width: 100%;
    height: auto;
}

.location-pin {
    animation: locationPulse 2s ease-in-out infinite;
}

.pin-pulse {
    animation: pinPulse 2s ease-in-out infinite;
}

@keyframes locationPulse {
    0%, 100% {
        transform: translate(150px, 100px) scale(1);
    }
    50% {
        transform: translate(150px, 100px) scale(1.1);
    }
}

@keyframes pinPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

/* Service Detail Pages */
.service-detail {
    padding: var(--spacing-3xl) 0;
    position: relative;
}

.service-detail--alt {
    background: linear-gradient(135deg, var(--color-light-gray) 0%, #fafafa 100%);
}

.service-detail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, var(--color-primary) 50%, transparent 100%);
}

.service-detail__content {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    padding: var(--spacing-lg);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(181, 47, 48, 0.08);
    border: 1px solid #f0f0f0;
    overflow-x: hidden;
}

@media (min-width: 768px) {
    .service-detail__content {
        padding: var(--spacing-2xl);
    }
}

.service-detail__header {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--color-light-gray);
}

.service-detail__icon {
    color: var(--color-primary);
    flex-shrink: 0;
}

.service-detail__subtitle {
    color: var(--color-gray);
    font-size: var(--font-size-large);
}

.service-benefits {
    margin-bottom: var(--spacing-2xl);
    background: var(--color-light-gray);
    padding: var(--spacing-xl);
    border-radius: 16px;
    border-left: 4px solid var(--color-primary);
}

.service-benefits h3 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-lg);
}

.service-benefits ul {
    list-style: none;
    margin-top: var(--spacing-md);
    display: grid;
    gap: var(--spacing-md);
}

.service-benefits li {
    padding: var(--spacing-sm);
    background: white;
    border-radius: 12px;
    position: relative;
    padding-left: var(--spacing-lg);
    box-shadow: 0 2px 8px rgba(181, 47, 48, 0.05);
    transition: transform 0.2s ease;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (min-width: 768px) {
    .service-benefits li {
        padding: var(--spacing-md);
        padding-left: var(--spacing-xl);
    }
}

.service-benefits li:hover {
    transform: translateY(-2px);
}

.service-benefits li::before {
    content: "✓";
    position: absolute;
    left: var(--spacing-md);
    top: var(--spacing-md);
    color: var(--color-primary);
    font-weight: bold;
    font-size: 1.2rem;
    background: var(--color-light-gray);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-cta {
    text-align: center;
    margin-top: var(--spacing-xl);
}

/* Disclaimer */
.disclaimer {
    background: var(--color-light-gray);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-xl);
    border-left: 4px solid var(--color-primary);
}

.disclaimer h3 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

.disclaimer__content p {
    margin-bottom: var(--spacing-sm);
    color: var(--color-gray);
}

@media print {
    .header,
    .footer,
    .cookie-banner,
    .btn,
    .scroll-to-top {
        display: none;
    }

    body {
        font-size: 12pt;
        line-height: 1.4;
    }

    h1, h2, h3 {
        page-break-after: avoid;
    }
}
/* Mobile Responsive for Widgets */
@media (max-width: 768px) {
    .cookie-modal,
    .a11y-modal {
        width: 95%;
        margin: 2vh 2.5%;
        max-height: 80vh;
    }
    
    .cookie-modal-header,
    .a11y-modal-header {
        padding: 0.75rem 1rem;
    }
    
    .cookie-modal-content,
    .a11y-modal-content {
        padding: 0.75rem 1rem;
    }
    
    .cookie-modal-actions {
        padding: 0.75rem 1rem;
        flex-direction: column;
    }
    
    .btn-accept-all,
    .btn-save {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .btn-manage {
        width: 100%;
    }
}

/* Enhanced Screen Reader Mode */
.screen-reader-mode {
    /* Enhanced focus indicators and skip links */
}

.screen-reader-mode *:focus {
    outline: 3px solid #4F46E5 !important;
    outline-offset: 2px !important;
}

.screen-reader-mode .skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 10000;
    border-radius: 4px;
}

.screen-reader-mode .skip-link:focus {
    top: 6px;
}

.screen-reader-mode h1,
.screen-reader-mode h2,
.screen-reader-mode h3 {
    position: relative;
}

.screen-reader-mode h1::after,
.screen-reader-mode h2::after,
.screen-reader-mode h3::after {
    content: ' (Heading)';
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* Footer Bottom Section */
.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 24px 32px;
    text-align: center;
    background: rgba(0, 0, 0, 0.1);
    margin-top: 32px;
}

.footer__bottom p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    letter-spacing: 0.02em;
}

/* Enhanced Footer Styling */
.footer {
    background: linear-gradient(135deg, #D71920 0%, #B52F30 100%);
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #FF4D4F 50%, transparent 100%);
}

.footer__content {
    gap: 32px;
    padding: 0 32px;
}

.footer__location {
    background: rgba(255, 255, 255, 0.98);
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.footer__location:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.footer__contact {
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    gap: 20px;
}

.contact-item {
    transition: all 0.2s ease;
    padding: 8px 0;
}

.contact-item:hover {
    background: rgba(255, 77, 79, 0.15);
    border-radius: 8px;
    padding: 8px 12px;
    transform: translateX(4px);
}

.footer__legal {
    padding: 16px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    gap: 16px;
}

.legal-link {
    transition: all 0.2s ease;
    padding: 6px 0;
}

.legal-link:hover {
    color: #FF4D4F;
    background: rgba(255, 77, 79, 0.15);
    padding: 6px 12px;
    border-radius: 6px;
    transform: translateX(-4px);
}

@media (max-width: 768px) {
    .footer__bottom {
        padding: 20px 16px;
    }
    
    .footer__content {
        padding: 0 16px;
    }
    
    .footer__contact,
    .footer__legal {
        background: none;
        border: none;
        padding: 0;
    }
    
    .contact-item:hover,
    .legal-link:hover {
        transform: none;
    }
    
    .about-content,
    .team-member,
    .location__description,
    .location-card {
        padding: var(--spacing-md);
        margin: 0 var(--spacing-xs);
    }
    
    .location-card {
        max-width: calc(100vw - 2rem);
    }
}
/* CTA Banner Animation */
.cta-banner {
    animation: fadeInUp 0.8s ease-out;
}

.cta-banner__wrapper {
    animation: slideInScale 1s ease-out;
    position: relative;
}

.cta-banner__wrapper::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #FF4D4F, #D71920, #FF4D4F);
    border-radius: 42px;
    z-index: -1;
    animation: borderGlow 3s ease-in-out infinite;
}

@keyframes slideInScale {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes borderGlow {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

.cta-banner h2 {
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.cta-banner p {
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

.cta-banner .btn--primary {
    animation: fadeInUp 0.8s ease-out 0.6s both;
    position: relative;
    overflow: hidden;
}

.cta-banner .btn--primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s;
}

.cta-banner .btn--primary:hover::before {
    left: 100%;
}

/* Testimonials Animation */
.testimonials {
    animation: fadeIn 0.8s ease-out;
}

.testimonial {
    animation: slideInUp 0.6s ease-out;
    animation-fill-mode: both;
}

.testimonial:nth-child(1) { animation-delay: 0.1s; }
.testimonial:nth-child(2) { animation-delay: 0.2s; }
.testimonial:nth-child(3) { animation-delay: 0.3s; }

@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Process Section Animation */
.process__step {
    animation: bounceIn 0.8s ease-out;
    animation-fill-mode: both;
}

.process__step:nth-child(1) { animation-delay: 0.1s; }
.process__step:nth-child(2) { animation-delay: 0.2s; }
.process__step:nth-child(3) { animation-delay: 0.3s; }
.process__step:nth-child(4) { animation-delay: 0.4s; }

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(50px);
    }
    50% {
        opacity: 1;
        transform: scale(1.05) translateY(-10px);
    }
    70% {
        transform: scale(0.9) translateY(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.process__number {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(215, 25, 32, 0.4);
    }
    50% {
        box-shadow: 0 0 0 20px rgba(215, 25, 32, 0);
    }
}
/* Professional Footer Styles */
.footer-professional {
    background: #9C2729;
    color: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    padding: 64px 0 48px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Mobile Settings Section - Hidden by default */
.footer-settings {
    display: none;
}

.footer-settings h4,
.footer-legal h4 {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 20px 0;
}

.footer-settings ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-settings li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-settings button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: #cccccc;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    font-family: inherit;
    text-align: left;
    transition: color 0.2s ease;
}

.footer-settings button:hover {
    color: #FF4D4F;
}

.footer-settings svg {
    flex-shrink: 0;
    transition: stroke 0.2s ease;
}

.footer-settings button:hover svg {
    stroke: #FF4D4F;
}

/* Visibility classes */
.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

.footer-contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    margin-bottom: 12px;
}

.footer-contact a,
.footer-contact span {
    color: #cccccc;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.footer-contact a:hover {
    color: #FF4D4F;
}

.footer-company {
    max-width: 320px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.logo-icon {
    flex-shrink: 0;
}

.logo-text h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 2px 0;
    color: #ffffff;
}

.logo-text span {
    font-size: 12px;
    color: #999999;
    font-weight: 400;
}

.footer-company p {
    font-size: 14px;
    line-height: 1.6;
    color: #cccccc;
    margin: 0 0 20px 0;
}

.certification {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #FF4D4F;
    font-weight: 500;
}

.footer-services h4,
.footer-contact h4,
.footer-legal h4 {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 20px 0;
}

.footer-services ul,
.footer-legal ul,
.footer-contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-services li,
.footer-legal li,
.footer-contact li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-services a,
.footer-legal a,
.footer-legal button,
.footer-contact a,
.footer-contact span {
    color: #cccccc;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.footer-services a:hover,
.footer-legal a:hover,
.footer-legal button:hover,
.footer-contact a:hover {
    color: #FF4D4F;
}

.footer-services svg,
.footer-contact svg {
    flex-shrink: 0;
    transition: stroke 0.2s ease;
}

.footer-services li:hover svg,
.footer-contact li:hover svg {
    stroke: #FF4D4F;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.contact-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.contact-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-label {
    font-size: 12px;
    color: #FF4D4F;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-text span,
.contact-text a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.contact-text a:hover {
    color: #FF4D4F;
}

.footer-bottom {
    padding: 24px 0;
}

.footer-bottom-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-bottom p {
    font-size: 13px;
    color: #999999;
    margin: 0;
}

.footer-badges {
    display: flex;
    gap: 12px;
}

.badge {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

@media (max-width: 1024px) {
    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        padding: 48px 0 32px 0;
    }
    
    .footer-company {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .footer-container {
        padding: 0 16px;
    }
    
    .footer-main {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 40px 0 24px 0;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .footer-badges {
        justify-content: center;
    }
    
    /* Mobile-only: Show settings section, hide floating buttons */
    .footer-settings {
        display: block;
        /* padding: 16px; */
        /* background: rgba(0, 0, 0, 0.1); */
        /* border-radius: 12px; */
        /* border: 1px solid rgba(255, 255, 255, 0.1); */
    }
    
    .mobile-only {
        display: block;
    }
    
    .desktop-only {
        display: none;
    }
    
    .cookie-float-btn,
    .a11y-float-btn {
        display: none !important;
    }
}
/* Call Center Agent Styles */
.call-center-agent {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.agent-container {
    position: relative;
    width: 200px;
    height: 200px;
}

.agent-avatar {
    position: relative;
    width: 80px;
    height: 120px;
    margin: 0 auto;
    animation: agentBreathe 3s ease-in-out infinite;
}

.agent-head {
    position: relative;
    width: 45px;
    height: 50px;
    margin: 0 auto;
}

.agent-hair {
    position: absolute;
    top: 110px;
    left: 3px;
    width: 39px;
    height: 25px;
    background: #8B4513;
    border-radius: 20px 20px 10px 10px;
}

.agent-face {
    position: absolute;
    top: 120px;
    left: 7px;
    width: 31px;
    height: 35px;
    background: #FDBCB4;
    border-radius: 16px;
}

.agent-eyes {
    position: absolute;
    top: 12px;
    left: 6px;
    display: flex;
    gap: 8px;
}

.eye {
    width: 6px;
    height: 6px;
    background: #333;
    border-radius: 50%;
    animation: blink 4s ease-in-out infinite;
}

.agent-nose {
    position: absolute;
    top: 20px;
    left: 14px;
    width: 5px;
    height: 3px;
    background: #c48e84;
    border-radius: 50%;
}

.agent-mouth {
    position: absolute;
    top: 28px;
    left: 13px;
    width: 8px;
    height: 5px;
    border: 2px solid #D71920;
    border-top: none;
    border-radius: 0 0 10px 10px;
    animation: talk 2s ease-in-out infinite;
}

.agent-body {
    position: relative;
    margin-top: 109px;
}

.agent-shirt {
    width: 40px;
    height: 50px;
    background: #4A90E2;
    margin: 0 auto;
    border-radius: 6px 6px 0 0;
}

.agent-arms {
    position: absolute;
    top: 10px;
    width: 100%;
}

.arm {
    position: absolute;
    width: 15px;
    height: 40px;
    background: #FDBCB4;
    border-radius: 8px;
}

.left-arm {
    left: 15px;
    transform: rotate(-20deg);
}

.right-arm {
    right: 15px;
    transform: rotate(20deg);
}

.headset {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.headset-band {
    position: absolute;
    top: 97px;
    left: -26px;
    width: 61px;
    height: 20px;
    border: 2px solid #333;
    border-bottom: none;
    border-radius: 28px 28px 0 0;
}

.headset-left,
.headset-right {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #333;
    border-radius: 50%;
}

.headset-left {
    top: 8px;
    left: -20px;
}

.headset-right {
    top: 8px;
    right: -20px;
}

.microphone {
    position: absolute;
    top: 20px;
    right: -25px;
}

.mic-boom {
    width: 20px;
    height: 2px;
    background: #333;
    border-radius: 1px;
}

.mic-head {
    position: absolute;
    top: -3px;
    right: -6px;
    width: 6px;
    height: 8px;
    background: #333;
    border-radius: 3px;
    animation: micPulse 1.5s ease-in-out infinite;
}

.floating-icons {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.icon {
    position: absolute;
    font-size: 24px;
    animation: float 3s ease-in-out infinite;
}

.phone-icon {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.email-icon {
    top: 30%;
    right: 15%;
    animation-delay: 1s;
}

.chat-icon {
    bottom: 25%;
    left: 20%;
    animation-delay: 2s;
}

@keyframes agentBreathe {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

@keyframes blink {
    0%, 90%, 100% {
        transform: scaleY(1);
    }
    95% {
        transform: scaleY(0.1);
    }
}

@keyframes talk {
    0%, 100% {
        height: 5px;
    }
    50% {
        height: 8px;
    }
}

@keyframes micPulse {
    0%, 100% {
        background: #333;
    }
    50% {
        background: #D71920;
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.7;
    }
    33% {
        transform: translateY(-15px) rotate(5deg);
        opacity: 1;
    }
    66% {
        transform: translateY(10px) rotate(-5deg);
        opacity: 0.8;
    }
}
/* Customer Support Scene */
.customer-support-scene {
    position: relative;
    width: 100%;
    max-width: 450px;
    height: 350px;
    margin: 0 auto;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(102, 126, 234, 0.3);
    animation: sceneFloat 6s ease-in-out infinite;
}

.support-background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.bg-shape {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    animation: shapeFloat 8s ease-in-out infinite;
}

.shape-1 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.shape-2 {
    width: 60px;
    height: 60px;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    bottom: 20%;
    left: 10%;
    animation-delay: 2s;
}

.shape-3 {
    width: 80px;
    height: 40px;
    border-radius: 50px;
    top: 60%;
    right: 20%;
    animation-delay: 4s;
}

.support-agent {
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.agent-body {
    position: relative;
    width: 80px;
    height: 120px;
}

.agent-head {
    width: 45px;
    height: 50px;
    position: relative;
    margin: 0 auto;
    animation: headNod 4s ease-in-out infinite;
}

.hair-style {
    position: absolute;
    top: -5px;
    left: 5px;
    width: 35px;
    height: 25px;
    background: #8B4513;
    border-radius: 20px 20px 10px 10px;
}

.face-area {
    position: absolute;
    top: 10px;
    left: 8px;
    width: 30px;
    height: 35px;
    background: #FDBCB4;
    border-radius: 15px;
}

.eye-pair {
    position: absolute;
    top: 8px;
    left: 6px;
    display: flex;
    gap: 6px;
}

.eye-left,
.eye-right {
    width: 5px;
    height: 5px;
    background: #333;
    border-radius: 50%;
    animation: eyeBlink 5s ease-in-out infinite;
}

.nose-dot {
    position: absolute;
    top: 15px;
    left: 13px;
    width: 3px;
    height: 2px;
    background: #E8A598;
    border-radius: 50%;
}

.mouth-smile {
    position: absolute;
    top: 22px;
    left: 10px;
    width: 10px;
    height: 5px;
    border: 2px solid #D71920;
    border-top: none;
    border-radius: 0 0 10px 10px;
    animation: smile 3s ease-in-out infinite;
}

.agent-torso {
    position: relative;
    width: 50px;
    height: 55px;
    margin: 0 auto;
    margin-top: 5px;
}

.business-shirt {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    border-radius: 10px 10px 0 0;
}

.shirt-collar {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid #2c3e50;
}

.agent-arms {
    position: absolute;
    top: 15px;
    width: 100%;
}

.left-arm,
.right-arm {
    position: absolute;
    width: 12px;
    height: 35px;
    background: #FDBCB4;
    border-radius: 6px;
}

.left-arm {
    left: 10px;
    transform: rotate(-20deg);
    animation: armSway 3s ease-in-out infinite;
}

.right-arm {
    right: 10px;
    transform: rotate(20deg);
    animation: armWave 2s ease-in-out infinite;
}

.headset-gear {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
}

.headset-top {
    position: absolute;
    top: -3px;
    left: -12px;
    width: 55px;
    height: 25px;
    border: 3px solid #2c3e50;
    border-bottom: none;
    border-radius: 30px 30px 0 0;
}

.ear-piece {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #2c3e50;
    border-radius: 50%;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

.left-ear {
    top: 8px;
    left: -18px;
}

.right-ear {
    top: 8px;
    right: -18px;
}

.microphone {
    position: absolute;
    top: 15px;
    right: -22px;
}

.mic-stick {
    width: 15px;
    height: 3px;
    background: #2c3e50;
    border-radius: 2px;
}

.mic-head {
    position: absolute;
    top: -3px;
    right: -5px;
    width: 6px;
    height: 9px;
    background: #2c3e50;
    border-radius: 3px;
}

.mic-head.pulsing {
    animation: micPulse 2s ease-in-out infinite;
}

.support-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.laptop-desk {
    position: absolute;
    bottom: 40px;
    right: 30px;
    z-index: 5;
}

.laptop {
    position: relative;
    width: 80px;
    height: 50px;
}

.laptop-screen {
    width: 80px;
    height: 45px;
    background: #2c3e50;
    border-radius: 5px 5px 0 0;
    position: relative;
    overflow: hidden;
}

.screen-glow {
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 3px;
    animation: screenGlow 3s ease-in-out infinite;
}

.chat-interface {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
}

.message-bubble {
    width: 20px;
    height: 4px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
    margin-bottom: 3px;
    animation: messageAppear 2s ease-in-out infinite;
}

.msg-1 {
    animation-delay: 0s;
}

.msg-2 {
    animation-delay: 0.7s;
    width: 15px;
}

.msg-3 {
    animation-delay: 1.4s;
    width: 25px;
}

.laptop-base {
    width: 85px;
    height: 8px;
    background: #34495e;
    border-radius: 0 0 8px 8px;
    margin-top: -2px;
}

.floating-icons {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.support-icon {
    position: absolute;
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    animation: iconFloat 5s ease-in-out infinite;
}

.support-icon svg {
    width: 18px;
    height: 18px;
    stroke: #667eea;
}

.phone-support {
    top: 15%;
    left: 10%;
    animation-delay: 0s;
}

.email-support {
    top: 20%;
    right: 5%;
    animation-delay: 1.7s;
}

.chat-support {
    bottom: 25%;
    left: 15%;
    animation-delay: 3.4s;
}

.support-text {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 15;
    color: white;
}

.support-text h3 {
    font-size: 18px;
    color: white;
    margin: 0 0 5px 0;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.support-text p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Animations */
@keyframes floatCircle {
    0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-10px) scale(1.1);
        opacity: 0.6;
    }
}

@keyframes bubblePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes typingDot {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-4px);
    }
}

@keyframes professionalBlink {
    0%, 90%, 100% {
        transform: scaleY(1);
    }
    95% {
        transform: scaleY(0.1);
    }
}

@keyframes typing {
    0%, 100% {
        transform: rotate(15deg);
    }
    50% {
        transform: rotate(25deg);
    }
}

@keyframes micActive {
    0%, 100% {
        background: #34495e;
    }
    50% {
        background: #D71920;
    }
}

@keyframes methodFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.8;
    }
    33% {
        transform: translateY(-8px) rotate(5deg);
        opacity: 1;
    }
    66% {
        transform: translateY(4px) rotate(-5deg);
        opacity: 0.9;
    }
}

@media (max-width: 768px) {
    .contact-scene {
        max-width: 350px;
        height: 250px;
    }
    
    .contact-text h3 {
        font-size: 14px;
    }
    
    .contact-text p {
        font-size: 11px;
    }
}
/* Customer Support Animation Keyframes */
@keyframes sceneFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes shapeFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-15px) rotate(180deg);
        opacity: 0.8;
    }
}

@keyframes headNod {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(2deg);
    }
    75% {
        transform: rotate(-2deg);
    }
}

@keyframes eyeBlink {
    0%, 90%, 100% {
        transform: scaleY(1);
    }
    95% {
        transform: scaleY(0.1);
    }
}

@keyframes smile {
    0%, 100% {
        transform: scaleX(1);
    }
    50% {
        transform: scaleX(1.1);
    }
}

@keyframes armSway {
    0%, 100% {
        transform: rotate(-20deg);
    }
    50% {
        transform: rotate(-25deg);
    }
}

@keyframes armWave {
    0%, 100% {
        transform: rotate(20deg);
    }
    25% {
        transform: rotate(35deg);
    }
    75% {
        transform: rotate(10deg);
    }
}

@keyframes micPulse {
    0%, 100% {
        background: #2c3e50;
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
    }
    50% {
        background: #e74c3c;
        box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
    }
}

@keyframes screenGlow {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
}

@keyframes messageAppear {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }
    50% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0.7;
        transform: translateX(0);
    }
}

@keyframes iconFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.8;
    }
    33% {
        transform: translateY(-12px) rotate(10deg);
        opacity: 1;
    }
    66% {
        transform: translateY(6px) rotate(-10deg);
        opacity: 0.9;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .customer-support-scene {
        max-width: 380px;
        height: 280px;
    }
    
    .support-text h3 {
        font-size: 16px;
    }
    
    .support-text p {
        font-size: 12px;
    }
    
    .support-icon {
        width: 30px;
        height: 30px;
    }
    
    .support-icon svg {
        width: 15px;
        height: 15px;
    }
    
    /* Mobile responsive for services page */
    .service-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .legal-page section {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    }
    
    .not-found-content {
        padding: var(--spacing-lg);
        margin: var(--spacing-md);
    }
    
    .not-found-content h1 {
        font-size: 4rem;
    }
}
/* Professional SVG Call Center Agent */
.pf-agent-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative;
}

.pf-agent {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
}

.contact-text-overlay {
    text-align: center;
    margin-top: 16px;
}

.contact-text-overlay h3 {
    font-size: 18px;
    color: #D71920;
    margin: 0 0 6px 0;
    font-weight: 600;
}

.contact-text-overlay p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* SVG Animations */
.head {
    transform-origin: 160px 120px;
    animation: headNod 3.2s cubic-bezier(.22,1,.36,1) infinite;
}

@keyframes headNod {
    0%, 100% {
        transform: translate(140px,82px) rotate(0deg);
    }
    40% {
        transform: translate(140px,82px) rotate(-4deg);
    }
    70% {
        transform: translate(140px,82px) rotate(3deg);
    }
}

.eyes rect {
    transform-origin: center;
}

.eyes {
    animation: blink 5s ease-in-out infinite;
}

@keyframes blink {
    0%, 90%, 100% {
        transform: scaleY(1);
    }
    92% {
        transform: scaleY(0.1);
    }
}

.arm-wave {
    transform-origin: 0 22px;
    animation: wave 2.2s cubic-bezier(.22,1,.36,1) infinite;
}

@keyframes wave {
    0%, 100% {
        transform: translate(200px,150px) rotate(0);
    }
    50% {
        transform: translate(200px,150px) rotate(12deg);
    }
}

.mic-dot {
    animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: .6;
    }
    50% {
        opacity: 1;
    }
}

.bubble {
    opacity: .95;
}

.bubble.b1 {
    animation: float1 3.5s ease-in-out infinite;
}

.bubble.b2 {
    animation: float2 4.2s ease-in-out infinite;
}

@keyframes float1 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes float2 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(6px);
    }
}

@media (max-width: 768px) {
    .pf-agent {
        width: 240px;
    }
    
    .contact-text-overlay h3 {
        font-size: 16px;
    }
    
    .contact-text-overlay p {
        font-size: 13px;
    }
}

/* Clean SVG Agent Animations */
.pf-agent .head {
    animation: headNod 4s ease-in-out infinite;
    transform-origin: center;
}

.pf-agent .eyes circle {
    animation: eyeBlink 5s ease-in-out infinite;
}

.pf-agent .arm-wave {
    animation: armWave 3s ease-in-out infinite;
    transform-origin: left center;
}

.pf-agent .mic-dot {
    animation: micPulse 2s ease-in-out infinite;
}

.pf-agent .bubble.b1 {
    animation: bubbleFloat 4s ease-in-out infinite;
}

.pf-agent .bubble.b2 {
    animation: bubbleFloat 5s ease-in-out infinite 1s;
}

@keyframes headNod {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(2deg); }
}

@keyframes eyeBlink {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

@keyframes armWave {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(15deg); }
}

@keyframes micPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

@keyframes bubbleFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

/* Professional Agent Styling */
.pf-agent-wrap {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 25px rgba(215, 25, 32, 0.1);
    border: 1px solid rgba(215, 25, 32, 0.1);
    transition: all 0.3s ease;
}

.pf-agent-wrap:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(215, 25, 32, 0.15);
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .pf-agent {
        width: 200px;
    }
    
    .pf-agent-wrap {
        padding: 20px 15px;
    }
    
    .contact-text-overlay h3 {
        font-size: 14px;
    }
    
    .contact-text-overlay p {
        font-size: 12px;
    }
}
/* Simple Contact Card */
.contact-card {
    background: white;
    border-radius: 16px;
    padding: 40px 20px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(215, 25, 32, 0.1);
    border: 1px solid rgba(215, 25, 32, 0.1);
    transition: all 0.3s ease;
    max-width: 300px;
    margin: 0 auto;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(215, 25, 32, 0.15);
}

.contact-icon {
    margin-bottom: 20px;
    animation: pulse 2s ease-in-out infinite;
}

.contact-card h3 {
    font-size: 20px;
    color: #D71920;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.contact-card p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
/* Contact Animation */
.contact-visual {
    background: linear-gradient(135deg, #D71920 0%, #B52F30 100%);
    color: white;
    padding: 40px 20px;
    border-radius: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

.phone-icon {
    font-size: 60px;
    margin-bottom: 20px;
    animation: bounce 2s ease-in-out infinite;
}

.floating-dots {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(255,255,255,0.6);
    border-radius: 50%;
    animation: float 3s ease-in-out infinite;
}

.dot:nth-child(1) {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.dot:nth-child(2) {
    top: 60%;
    right: 20%;
    animation-delay: 1s;
}

.dot:nth-child(3) {
    bottom: 30%;
    left: 30%;
    animation-delay: 2s;
}

.contact-visual h3 {
    font-size: 24px;
    margin: 0 0 10px 0;
    color: white;
}

.contact-visual p {
    margin: 0;
    opacity: 0.9;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes float {
    0%, 100% { 
        transform: translateY(0px);
        opacity: 0.6;
    }
    50% { 
        transform: translateY(-15px);
        opacity: 1;
    }
}

/* Insurance Section Styles */
.insurance-section {
    width: 100%;
    background-color: #FFE5E6;
    padding: var(--spacing-3xl) 0;
    font-family: var(--font-body);
}

.insurance-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* Insurance Header */
.insurance-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.insurance-icon {
    flex-shrink: 0;
    margin-top: 4px;
}

.insurance-title h2 {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #111111;
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.1;
}

.insurance-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    color: #555555;
    margin: 0;
    line-height: 1.4;
    font-weight: 400;
}

/* Insurance Solutions */
.insurance-solutions {
    margin-bottom: var(--spacing-3xl);
}

.insurance-solutions h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    color: #111111;
    margin-bottom: var(--spacing-xl);
}

.insurance-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.insurance-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
}

.check-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.insurance-content {
    flex: 1;
    font-size: 1.1rem;
}

.product-name {
    font-weight: 600;
    color: #111111;
}

.product-german {
    font-weight: 500;
    color: #D71920;
    font-style: italic;
}

.product-description {
    font-weight: 400;
    color: #555555;
}

/* FAQ Section */
.insurance-faq h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    color: #111111;
    margin-bottom: var(--spacing-xl);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.faq-card {
    background: #FFFFFF;
    border: 1px solid #f3d3d5;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(215, 25, 32, 0.08);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-card:hover {
    box-shadow: 0 4px 16px rgba(215, 25, 32, 0.12);
    transform: translateY(-2px);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.1rem;
    color: #111111;
    transition: color 0.3s ease;
}

.faq-question:hover {
    color: #D71920;
}

.faq-toggle {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(215, 25, 32, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-toggle.open {
    transform: rotate(45deg);
    background: #D71920;
}

.faq-toggle.open svg path {
    stroke: white;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.faq-answer.open {
    max-height: 200px;
    opacity: 1;
    padding: 0 var(--spacing-lg) var(--spacing-lg);
}

.faq-answer p {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: #555555;
    margin: 0;
}

/* Responsive Design for Insurance */
@media (max-width: 768px) {
    .insurance-section {
        padding: var(--spacing-2xl) 0;
    }
    
    .insurance-container {
        padding: 0 var(--spacing-md);
    }
    
    .insurance-header {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }
    
    .insurance-icon {
        align-self: center;
        margin-top: 0;
    }
    
    .insurance-item {
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }
    
    .insurance-content {
        font-size: 1rem;
    }
    
    .faq-question {
        padding: var(--spacing-md);
        font-size: 1rem;
    }
    
    .faq-answer.open {
        padding: 0 var(--spacing-md) var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .insurance-header {
        gap: var(--spacing-sm);
    }
    
    .insurance-solutions,
    .insurance-faq {
        margin-bottom: var(--spacing-2xl);
    }
    
    .insurance-item {
        align-items: flex-start;
    }
    
    .check-icon {
        margin-top: 4px;
    }
}

/* Modern Services Sections */
.services-modern-section {
    width: 100%;
    background-color: #FFFFFF;
    padding: var(--spacing-3xl) 0;
    font-family: var(--font-body);
}

.services-modern-section--alt {
    background-color: #FFE5E6;
}

.services-modern-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.services-modern-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.services-modern-icon {
    flex-shrink: 0;
    margin-top: 4px;
}

.services-modern-title h2 {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #111111;
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.1;
}

.services-modern-title p {
    font-family: var(--font-body);
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    color: #555555;
    margin: 0;
    line-height: 1.4;
    font-weight: 400;
}

.services-modern-solutions {
    margin-bottom: var(--spacing-3xl);
}

.services-modern-solutions h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    color: #111111;
    margin-bottom: var(--spacing-xl);
}

.services-modern-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.services-modern-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
}

.services-check-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.services-modern-content {
    flex: 1;
    font-size: 1.1rem;
}

.services-product-name {
    font-weight: 600;
    color: #111111;
}

.services-product-german {
    font-weight: 500;
    color: #D71920;
    font-style: italic;
}

.services-product-description {
    font-weight: 400;
    color: #555555;
}

.services-modern-faq h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    color: #111111;
    margin-bottom: var(--spacing-xl);
}

.services-faq-list .faq {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.services-faq-list .faq__item {
    background: #FFFFFF;
    border: 1px solid #f3d3d5;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(215, 25, 32, 0.08);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.services-faq-list .faq__item:hover {
    box-shadow: 0 4px 16px rgba(215, 25, 32, 0.12);
    transform: translateY(-2px);
}

.services-faq-list .faq__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.1rem;
    color: #111111;
    transition: color 0.3s ease;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}

.services-faq-list .faq__question:hover {
    color: #D71920;
}

.services-faq-list .faq__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(215, 25, 32, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.services-faq-list .faq__icon.open {
    transform: rotate(45deg);
    background: #D71920;
}

.services-faq-list .faq__icon.open path {
    stroke: white;
}

.services-faq-list .faq__answer {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
}

.services-faq-list .faq__answer p {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: #555555;
    margin: 0;
}

@media (max-width: 768px) {
    .services-modern-section {
        padding: var(--spacing-2xl) 0;
    }
    
    .services-modern-container {
        padding: 0 var(--spacing-md);
    }
    
    .services-modern-header {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }
    
    .services-modern-icon {
        align-self: center;
        margin-top: 0;
    }
    
    .services-modern-item {
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }
    
    .services-modern-content {
        font-size: 1rem;
    }
    
    .services-faq-list .faq__question {
        padding: var(--spacing-md);
        font-size: 1rem;
    }
    
    .services-faq-list .faq__answer {
        padding: 0 var(--spacing-md) var(--spacing-md);
    }
}

/* Services Page Styles */
.services-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

/* Services Sections */
.services-section {
    padding: var(--spacing-2xl) 0;
    position: relative;
}

.services-section .container {
    max-width: 900px;
}

.services-section--alt {
    background: linear-gradient(135deg, var(--color-light-gray) 0%, #fafafa 100%);
}

.services-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--color-primary) 50%, transparent 100%);
}

/* Services Card */
.services-card {
    background: var(--color-white);
    border-radius: 20px;
    padding: var(--spacing-xl);
    box-shadow: 0 8px 30px rgba(215, 25, 32, 0.08);
    border: 1px solid rgba(215, 25, 32, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease-out forwards;
}

.services-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.services-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(215, 25, 32, 0.15);
}

.services-card:hover::before {
    transform: scaleX(1);
}

/* Services Header */
.services-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--color-light-gray);
    position: relative;
}

.services-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 80px;
    height: 2px;
    background: var(--color-primary);
}

.services-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 25px rgba(215, 25, 32, 0.3);
    position: relative;
    overflow: hidden;
}

.services-icon::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

.services-card:hover .services-icon::before {
    opacity: 1;
    transform: rotate(45deg) translate(20px, 20px);
}

.services-title h2 {
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-black) 0%, var(--color-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.services-title p {
    color: var(--color-gray);
    font-size: var(--font-size-large);
    margin: 0;
    line-height: 1.5;
}

/* Services Content */
.services-content {
    margin-bottom: var(--spacing-2xl);
}

.services-questions {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-light-gray);
}

.services-info h3,
.services-questions h3 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-xl);
    font-size: 1.5rem;
    font-weight: 600;
    position: relative;
    padding-bottom: var(--spacing-sm);
}

.services-info h3::after,
.services-questions h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px;
}

/* Services List */
.services-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.services-list li {
    padding: var(--spacing-md);
    background: var(--color-bg-light);
    border-radius: 12px;
    position: relative;
    padding-left: var(--spacing-xl);
    color: var(--color-gray);
    line-height: 1.6;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInLeft 0.6s ease-out forwards;
}

.services-list li:hover {
    background: rgba(215, 25, 32, 0.05);
    border-left-color: var(--color-primary);
    transform: translateX(4px);
}

.services-list li::before {
    content: '✓';
    position: absolute;
    left: var(--spacing-md);
    top: var(--spacing-md);
    width: 18px;
    height: 18px;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
}

/* Insurance List Special Styling */
.services-list--insurance li {
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-xl);
    background: linear-gradient(135deg, #fff 0%, var(--color-bg-light) 100%);
    border: 1px solid rgba(215, 25, 32, 0.1);
    box-shadow: 0 2px 8px rgba(215, 25, 32, 0.05);
}

.services-list--insurance li:hover {
    box-shadow: 0 4px 16px rgba(215, 25, 32, 0.1);
    transform: translateY(-2px);
}

.services-list--insurance li::before {
    left: var(--spacing-md);
    top: var(--spacing-md);
}

.service-name {
    font-weight: 600;
    color: var(--color-black);
}

.service-german {
    font-weight: 500;
    color: var(--color-primary);
    font-style: italic;
}

.service-desc {
    color: var(--color-gray);
}

/* FAQ Styles */
.services-faq {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.services-faq-item {
    background: linear-gradient(135deg, #ffffff 0%, #fefefe 100%);
    border: 2px solid transparent;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(215, 25, 32, 0.08);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
    position: relative;
    margin-bottom: var(--spacing-md);
}

.services-faq-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary) 0%, #ff6b6b 100%);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.services-faq-item:hover {
    box-shadow: 0 8px 30px rgba(215, 25, 32, 0.15);
    transform: translateY(-4px);
    border-color: rgba(215, 25, 32, 0.2);
}

.services-faq-item:hover::before {
    transform: scaleX(1);
}

.services-faq-question {
    width: 100%;
    padding: var(--spacing-lg);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-black);
    transition: all 0.3s ease;
    position: relative;
}

.services-faq-question::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--color-primary);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.services-faq-question:hover {
    color: var(--color-primary);
    background: linear-gradient(135deg, rgba(215, 25, 32, 0.03) 0%, rgba(215, 25, 32, 0.06) 100%);
    padding-left: calc(var(--spacing-lg) + 8px);
}

.services-faq-question:hover::before {
    transform: scaleY(1);
}

.services-faq-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, rgba(215, 25, 32, 0.1) 0%, rgba(215, 25, 32, 0.2) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    border: 2px solid transparent;
}

.services-faq-icon:hover {
    background: linear-gradient(135deg, rgba(215, 25, 32, 0.2) 0%, rgba(215, 25, 32, 0.3) 100%);
    transform: scale(1.1) rotate(5deg);
    border-color: rgba(215, 25, 32, 0.3);
}

.services-faq-icon.open {
    background: linear-gradient(135deg, var(--color-primary) 0%, #ff4757 100%);
    transform: rotate(45deg) scale(1.15);
    box-shadow: 0 6px 20px rgba(215, 25, 32, 0.4);
    border-color: var(--color-primary);
}

.services-faq-icon.open svg path {
    stroke: white;
}

.services-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(-15px);
}

.services-faq-answer.open {
    max-height: 400px;
    opacity: 1;
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    transform: translateY(0);
    background: linear-gradient(135deg, rgba(215, 25, 32, 0.02) 0%, rgba(255, 107, 107, 0.05) 100%);
    position: relative;
}

.services-faq-answer.open::before {
    content: '';
    position: absolute;
    left: var(--spacing-lg);
    top: 0;
    right: var(--spacing-lg);
    height: 1px;
    background: linear-gradient(90deg, var(--color-primary) 0%, transparent 100%);
}

.services-faq-answer p {
    color: #555;
    line-height: 1.8;
    margin: 0;
    font-size: 1rem;
    animation: slideInAnswer 0.8s ease-out 0.2s both;
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    border-left: 4px solid var(--color-primary);
    position: relative;
    box-shadow: 0 2px 10px rgba(215, 25, 32, 0.05);
}

.services-faq-answer p::before {
    content: '“';
    position: absolute;
    left: -2px;
    top: -8px;
    font-size: 2rem;
    color: var(--color-primary);
    font-weight: bold;
    opacity: 0.3;
}

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



/* Mobile Responsive */
@media (max-width: 768px) {
    .services-section {
        padding: var(--spacing-2xl) 0;
    }
    
    .services-card {
        padding: var(--spacing-lg);
        border-radius: 16px;
    }
    
    .services-header {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-lg);
    }
    
    .services-icon {
        width: 60px;
        height: 60px;
    }
    
    .services-title h2 {
        font-size: 1.8rem;
    }
    
    .services-list li {
        padding: var(--spacing-md) var(--spacing-sm) var(--spacing-md) 3rem;
        font-size: 0.95rem;
    }
    
    .services-list li::before {
        left: var(--spacing-sm);
        top: var(--spacing-md);
        width: 16px;
        height: 16px;
        font-size: 10px;
    }
    
    .services-faq-question {
        padding: var(--spacing-md);
        font-size: 1rem;
    }
    
    .services-faq-answer.open {
        padding: 0 var(--spacing-md) var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .services-card {
        margin: 0 var(--spacing-xs);
        padding: var(--spacing-md);
    }
    
    .services-header {
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-2xl);
    }
    
    .services-icon {
        width: 50px;
        height: 50px;
    }
    
    .services-list li {
        padding: var(--spacing-sm) var(--spacing-xs) var(--spacing-sm) 2.5rem;
        font-size: 0.9rem;
    }
    
    .services-list li::before {
        left: var(--spacing-xs);
        width: 14px;
        height: 14px;
        font-size: 9px;
    }
    
    .services-faq-question {
        padding: var(--spacing-sm);
        font-size: 0.95rem;
    }
    
    .services-faq-icon {
        width: 28px;
        height: 28px;
    }
}

/* Legal Pages Styles */
.legal-page {
    min-height: 100vh;
    padding: var(--spacing-2xl) 0;
    background: var(--color-white);
}

.legal-page .container {
    max-width: 800px;
}

.legal-page h1 {
    color: var(--color-primary);
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 3px solid var(--color-primary);
    position: relative;
}

.legal-page h1::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: var(--color-primary-light);
}

.legal-page section {
    margin-bottom: var(--spacing-2xl);
    padding: var(--spacing-lg);
    background: var(--color-bg-light);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--color-primary);
}

.legal-page h2 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
    font-size: 1.5rem;
}

.legal-page h3 {
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.legal-page p {
    color: var(--color-gray);
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
}

.legal-page ul {
    color: var(--color-gray);
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

.legal-page li {
    margin-bottom: var(--spacing-xs);
}

.legal-page a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: var(--transition);
}

.legal-page a:hover {
    color: var(--color-primary-dark);
}

.legal-page strong {
    color: var(--color-black);
}

/* Not Found Page Styles */
.not-found-page {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-light-gray) 0%, var(--color-white) 100%);
}

.not-found-content {
    text-align: center;
    padding: var(--spacing-2xl);
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 500px;
}

.not-found-content h1 {
    font-size: 6rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
}

.not-found-content h2 {
    color: var(--color-black);
    margin-bottom: var(--spacing-md);
}

.not-found-content p {
    color: var(--color-gray);
    margin-bottom: var(--spacing-xl);
    font-size: var(--font-size-large);
}

.not-found-content .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Animation for page load */
.services-page,
.legal-page,
.not-found-page {
    animation: fadeIn 0.8s ease-out;
}

.services-card {
    animation: slideInUp 0.8s ease-out;
    animation-fill-mode: both;
}

.services-section:nth-child(2) .services-card { animation-delay: 0.1s; }
.services-section:nth-child(3) .services-card { animation-delay: 0.2s; }
.services-section:nth-child(4) .services-card { animation-delay: 0.3s; }

.legal-page section {
    animation: slideInLeft 0.6s ease-out;
    animation-fill-mode: both;
}

.legal-page section:nth-child(2) { animation-delay: 0.1s; }
.legal-page section:nth-child(3) { animation-delay: 0.2s; }
.legal-page section:nth-child(4) { animation-delay: 0.3s; }
.legal-page section:nth-child(5) { animation-delay: 0.4s; }
.legal-page section:nth-child(6) { animation-delay: 0.5s; }

/* Services Animation */
.services-section:nth-child(2) .services-card { animation-delay: 0.1s; }
.services-section:nth-child(3) .services-card { animation-delay: 0.3s; }
.services-section:nth-child(4) .services-card { animation-delay: 0.5s; }

.services-list li:nth-child(1) { animation-delay: 0.2s; }
.services-list li:nth-child(2) { animation-delay: 0.3s; }
.services-list li:nth-child(3) { animation-delay: 0.4s; }
.services-list li:nth-child(4) { animation-delay: 0.5s; }
.services-list li:nth-child(5) { animation-delay: 0.6s; }
.services-list li:nth-child(6) { animation-delay: 0.7s; }

.services-faq-item:nth-child(1) { animation-delay: 0.8s; }
.services-faq-item:nth-child(2) { animation-delay: 0.9s; }
.services-faq-item:nth-child(3) { animation-delay: 1s; }

@keyframes slideInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

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

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Footer Link Button Styling */
.footer-link-button {
    background: none;
    border: none;
    color: #cccccc;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    font-family: inherit;
    text-align: left;
    transition: color 0.2s ease;
}

.footer-link-button:hover {
    color: #FF4D4F;
}

.textAligment
{
     text-align: justify;
}