:root {
    /* Blue/gold color scheme */
    --primary-color: #29aae3;
    --primary-dark: #1A87B8;
    --primary-light: #5CBEE9;
    --primary-lighter: #C5E8F7;
    --accent-color: #B38C35;
    --accent-dark: #8A6D29;
    --accent-light: #D4B05C;
    --gold-color: #A37E2C;
    --gold-light: #D4AB56;
    --gold-dark: #7A5F21;
    --neutral-dark: #333333;
    --neutral-light: #F9FAFB;
    --success-color: #10b981;
    --error-color: #ef4444;
    --dark-bg: #1A1A1A;
    --dark-bg-lighter: #2A2A2A;
    --dark-text: #F0F0F0;
    --dark-text-muted: #BBBBBB;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
    font-family: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #1a1a1a !important; /* Changed from var(--dark-bg) to actual dark color */ 
    color: #f3f4f6;
    margin: 0;
    padding: 0;
}
    
    .hero-section {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    
    .hero-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }
    
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.7) 100%);
      z-index: 1;
    }
    
    .hero-content {
      position: relative;
      z-index: 10;
      max-width: 48rem;
      padding: 1.5rem;
      background: rgba(26, 26, 26, 0.8);
      backdrop-filter: blur(10px);
      border-radius: 1rem;
      border: 2px solid var(--gold-color);
      text-align: center;
    }
    
    @media (min-width: 1024px) {
      .hero-content {
        text-align: left;
        margin-left: 0;
        margin-right: auto;
        padding: 3rem;
      }
    }
    
    .header-fixed {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
      background: rgba(26, 26, 26, 0.95);
      backdrop-filter: blur(8px);
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .animate-fade-in,
    .animate-slide-up,
    .animate-scale,
    .animate-bounce,
    .fade-in-section {
        animation: none !important;
        transition: none !important;
    }
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(41, 170, 227, 0.5);
    border-radius: 0.25rem;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: white;
    padding: 8px;
    z-index: 100;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
}

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

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

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

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

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes wave-move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }

    100% {
        transform: translate3d(85px, 0, 0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-in-out forwards;
}

.animate-slide-up {
    animation: slideUp 1s ease-out forwards;
}

.animate-scale {
    animation: scale 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-delay-100 {
    animation-delay: 100ms;
}

.animate-delay-200 {
    animation-delay: 200ms;
}

.animate-delay-300 {
    animation-delay: 300ms;
}

.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
    will-change: opacity, transform;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Text shadows */
.text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.text-shadow-lg {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* Menu toggle */
.menu-toggle span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.menu-toggle span:nth-child(1) {
    top: 0;
}

.menu-toggle span:nth-child(2) {
    top: 8px;
}

.menu-toggle span:nth-child(3) {
    top: 16px;
}

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 8px;
}

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

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg);
    top: 8px;
}

/* Navigation */
.nav-transparent {
    background-color: transparent;
    transition: all 0.3s ease;
}

.nav-scrolled {
    background-color: var(--dark-bg);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Cards and interactive elements */
.service-card,
.gallery-item,
.testimonial-card,
.card,
.feature-card,
.contact-info-card,
.contact-form-container {
    transition: all 0.4s ease;
    border: 2px solid transparent;
}

.service-card:hover,
.gallery-item:hover,
.card:hover,
.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: var(--gold-color);
}

.testimonial-card:hover,
.contact-info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-color: var(--gold-color);
}

.service-card img,
.gallery-item img {
    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.service-card:hover img,
.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: opacity;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.gallery-item:hover .overlay {
    opacity: 1;
}

/* Glass effect */
.glass-effect {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    opacity: 1;
    border: 1px solid rgba(163, 126, 44, 0.3);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform, opacity;
}

.glass-effect-green {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: rgba(21, 128, 61, 0.15) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    opacity: 1;
    border: 1px solid rgba(21, 128, 61, 0.3);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform, opacity;
}

/* Gallery items */
.gallery-item .image-container {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gallery-item .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.gallery-item .absolute {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    will-change: transform, opacity;
}

.gallery-item {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Forms */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(41, 170, 227, 0.2);
}

/* Buttons */
.btn-primary,
.btn-secondary,
.btn-accent {
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--gold-color);
}

.btn-primary,
.btn-accent {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

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

.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-color: var(--gold-light);
}

.btn-secondary {
    background-color: transparent;
    border: 2px solid white;
    color: white;
}

.btn-secondary:hover {
    background-color: white;
    color: var(--primary-dark);
    transform: translateY(-2px);
    border-color: var(--gold-light);
}

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

.btn-accent:hover {
    background-color: var(--accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-color: var(--gold-light);
}

/* Card styles */
.card {
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 2px solid var(--gold-color);
}

.feature-card {
    background-color: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 2px solid var(--gold-color);
}

.feature-card-green {
    background-color: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 2px solid var(--green-primary);
    transition: all 0.4s ease;
}

.feature-card-green:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: var(--green-light);
}

.stat-number {
    animation: countUp 1s ease-out forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

/* Aspect ratios */
.aspect-ratio-16-9 {
    padding-top: 56.25%;
}

.aspect-ratio-4-3 {
    padding-top: 75%;
}

.aspect-ratio-square {
    padding-top: 100%;
}

.aspect-ratio-16-9,
.aspect-ratio-4-3,
.aspect-ratio-square {
    position: relative;
    background-color: #E2E8F0;
    overflow: hidden;
}

.aspect-ratio-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.aspect-ratio-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    border: 2px solid var(--gold-color);
}

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

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

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

.bg-gradient-overlay {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%);
}

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

.bg-gradient-orange {
    background: linear-gradient(135deg, var(--orange-accent) 0%, #e29006 100%);
}

/* Contact elements */
.contact-form-container {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--gold-color);
}

.contact-form-container:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.contact-info-card {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 2px solid var(--gold-color);
}

.contact-info-card:hover {
    background-color: var(--primary-lighter);
}

.contact-info-card:hover .contact-info-icon {
    background-color: var(--primary-color);
    color: white;
}

/* 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-width: 0;
}

.focus-visible:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Back to top button */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-color: var(--primary-color);
    color: white;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 50;
    border: 2px solid var(--gold-color);
}


/* Container and responsive layouts */
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
}

@media (max-width: 640px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    .service-card,
    .testimonial-card {
        margin-bottom: 1.5rem;
    }
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Transitions */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.transition-transform {
    transition-property: transform;
}

.transition-opacity {
    transition-property: opacity;
}

.transition-colors {
    transition-property: background-color, border-color, color, fill, stroke;
}

.transition-transform,
.transition-opacity,
.transition-colors {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* Print styles */
@media print {

    header,
    footer,
    .back-to-top,
    .contact-form {
        display: none;
    }

    body {
        background-color: white;
        color: black;
    }

    main {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: black;
        margin-top: 1rem;
    }

    a {
        color: black;
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    .container {
        max-width: none;
        padding: 0;
        margin: 0;
    }

    @page {
        margin: 2cm;
    }
}

/* Color utilities - Blue/Gold theme */
.text-primary {
    color: var(--primary-color);
}

.text-primary-dark {
    color: var(--primary-dark);
}

.text-accent {
    color: var(--accent-color);
}

.text-accent-light {
    color: var(--accent-light);
}

.text-gold {
    color: var(--gold-color);
}

.text-gold-light {
    color: var(--gold-light);
}

.text-dark {
    color: var(--dark-text);
}

.text-dark-muted {
    color: var(--dark-text-muted);
}

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

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

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

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

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

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

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

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

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

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

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

.border-accent {
    border-color: var(--accent-color);
}

.border-accent-light {
    border-color: var(--accent-light);
}

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

.border-gold {
    border-color: var(--gold-color);
}

/* Hover states - Blue/Gold theme */
.hover-bg-accent:hover {
    background-color: var(--accent-color);
}

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

.hover-text-accent:hover {
    color: var(--accent-color);
}

.hover-text-accent-light:hover {
    color: var(--accent-light);
}

.hover-text-gold:hover {
    color: var(--gold-color);
}

.hover-border-gold:hover {
    border-color: var(--gold-color);
}

/* Color utilities - Green/Orange theme */
.text-green {
    color: var(--green-primary);
}

.text-green-dark {
    color: var(--green-dark);
}

.text-green-light {
    color: var(--green-light);
}

.text-orange {
    color: var(--orange-accent);
}

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

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

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

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

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

.border-green {
    border-color: var(--green-primary);
}

.border-orange {
    border-color: var(--orange-accent);
}

/* Hover states - Green/Orange theme */
.hover-bg-green:hover {
    background-color: var(--green-primary);
}

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

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

/* Accent elements - Blue theme */
.blue-accent-bar {
    height: 2px;
    background: linear-gradient(to right, var(--primary-color), var(--primary-light), var(--primary-color));
}

.blue-badge {
    background-color: var(--primary-light);
    color: var(--primary-dark);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.875rem;
    border: 1px solid var(--primary-color);
}

.blue-icon {
    color: var(--primary-color);
}

/* Accent elements - Gold theme */
.gold-accent-bar {
    height: 2px;
    background: linear-gradient(to right, var(--gold-color), var(--gold-light), var(--gold-color));
}

.gold-badge {
    background-color: var(--gold-light);
    color: var(--gold-dark);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.875rem;
    border: 1px solid var(--gold-color);
}

.gold-icon {
    color: var(--gold-color);
}

/* Accent elements - Green theme */
.green-accent-bar {
    height: 2px;
    background: linear-gradient(to right, var(--green-primary), var(--green-light), var(--green-primary));
}

.green-badge {
    background-color: var(--green-lighter);
    color: var(--green-dark);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.875rem;
    border: 1px solid var(--green-primary);
}

.green-icon {
    color: var(--green-primary);
}

/* Special buttons */
.btn-blue {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
    color: white;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 2px solid var(--gold-color);
}

.btn-blue:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-color: var(--gold-light);
}

.btn-gold {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-color) 100%);
    color: white;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 2px solid var(--gold-dark);
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, var(--gold-color) 0%, var(--gold-dark) 100%);
}

.btn-green {
    background: linear-gradient(135deg, var(--green-light) 0%, var(--green-primary) 100%);
    color: white;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-green:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-dark) 100%);
}

.btn-orange {
    background: linear-gradient(135deg, var(--orange-accent) 0%, #e29006 100%);
    color: white;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-orange:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #e29006 0%, #d18605 100%);
}

/* Wave effect */
.waves {
    width: 100%;
    height: 80px;
    margin-bottom: -7px;
    background-color: #1A1A1A;
}

.parallax>use {
    animation: wave-move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax>use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}

.parallax>use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}

.parallax>use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}

.parallax>use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}

/* Gold trim effect */
.gold-trim {
    border: 2px solid var(--gold-color);
    box-shadow: 0 0 10px rgba(163, 126, 44, 0.3);
}

.gold-trim-hover:hover {
    border-color: var(--gold-light);
    box-shadow: 0 0 15px rgba(163, 126, 44, 0.5);
}

/* Experience section */
.experience-section {
    background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-bg-lighter) 100%);
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--gold-color);
}

.experience-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('images/pattern-leaves.png');
    opacity: 0.05;
    z-index: 0;
}

.experience-card {
    background-color: rgba(42, 42, 42, 0.8);
    backdrop-filter: blur(5px);
    border: 2px solid var(--gold-color);
    border-radius: 1rem;
    transition: all 0.3s ease;
}

.experience-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border-color: var(--gold-light);
}

.experience-icon {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-color) 100%);
    color: white;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.experience-card:hover .experience-icon {
    transform: scale(1.1);
}

/* Form Input Group styles */
.input-group {
    position: relative;
}

.input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 1rem;
    color: #6B7280;
    pointer-events: none;
}

.textarea-icon {
    position: absolute;
    top: 1.5rem;
    left: 1rem;
    color: #6B7280;
    pointer-events: none;
}

/* Contact Option Card styles */
.contact-option-card {
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.contact-option-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.contact-option-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    transition: height 0.3s ease;
}

.contact-option-card:hover::after {
    height: 8px;
}

.contact-option-icon {
    transition: all 0.3s ease;
}

.contact-option-card:hover .contact-option-icon {
    transform: scale(1.1);
    background-color: var(--primary-color);
    color: white;
}

/* Service Area Map styles */
.service-area-map {
    position: relative;
    height: 500px;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.map-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
}

/* Success Message animation */
.success-message {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

.success-message.show {
    opacity: 1;
    max-height: 300px;
}


/* Timeline styles */
.timeline-container {
    position: relative;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--gold-color);
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    margin-bottom: 60px;
    padding-bottom: 20px;
    z-index: 10;
}

.timeline-item::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 20px;
    height: 20px;
    background-color: var(--gold-color);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 0 4px rgba(163, 126, 44, 0.2);
}

.timeline-item:last-child::after {
    background-color: white;
    border: 3px solid var(--gold-color);
}

.timeline-card {
    width: calc(50% - 40px);
    position: relative;
    transition: all 0.3s ease;
    border: 2px solid var(--gold-color);
}

.timeline-card:hover {
    transform: translateY(-5px);
}

.timeline-left {
    margin-right: auto;
}

.timeline-right {
    margin-left: auto;
}

.timeline-card::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 20px;
    height: 2px;
    background-color: var(--gold-color);
}

.timeline-left::before {
    right: -20px;
}

.timeline-right::before {
    left: -20px;
}

/* Team member styles */
.team-member-card {
    transition: all 0.3s ease;
    overflow: hidden;
    border: 2px solid var(--gold-color);
}

.team-member-card:hover {
    transform: translateY(-8px);
}

.team-member-image-container {
    overflow: hidden;
    border-radius: 0.75rem 0.75rem 0 0;
}

.team-member-image {
    transition: all 0.5s ease;
}

.team-member-card:hover .team-member-image {
    transform: scale(1.05);
}

.team-social-links {
    transition: all 0.3s ease;
    transform: translateY(100%);
    opacity: 0;
}

.team-member-card:hover .team-social-links {
    transform: translateY(0);
    opacity: 1;
}

/* Stats card */
.stats-card {
    transition: all 0.3s ease;
    border: 2px solid var(--gold-color);
}

.stats-card:hover {
    transform: translateY(-5px);
    background-color: var(--primary-color);
    color: white;
}

.stats-card:hover .stats-icon {
    background-color: white;
    color: var(--primary-color);
}

.stats-card:hover .stats-value {
    color: white;
}

.stats-card:hover .stats-label {
    color: rgba(255, 255, 255, 0.9);
}

.stats-card:hover .stats-description {
    color: rgba(255, 255, 255, 0.8);
}

/* Value card */
.value-card {
    transition: all 0.3s ease;
    overflow: hidden;
    background-color: white;
    border-radius: 1rem;
    border: 2px solid var(--gold-color);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    opacity: 1;
    border: 1px solid rgba(163, 126, 44, 0.3);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform, opacity;
}

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.value-card-icon {
    transition: all 0.3s ease;
    color: var(--gold-color);
}

.value-card:hover .value-card-icon {
    transform: scale(1.1);
    background-color: var(--gold-color);
    color: white;
}

/* Responsive timeline adjustments */
@media (max-width: 768px) {
    .timeline-line {
        left: 30px;
    }

    .timeline-item::after {
        left: 30px;
        transform: none;
    }

    .timeline-card {
        width: calc(100% - 60px);
        margin-left: 60px !important;
        margin-right: 0 !important;
    }

    .timeline-card::before {
        left: -30px !important;
        right: auto !important;
    }
}

.radial-gradient-blue {
    background: radial-gradient(circle, rgba(41, 170, 227, 0.3) 0%, rgba(41, 170, 227, 0) 70%);
}

.radial-gradient-gold {
    background: radial-gradient(circle, rgba(179, 140, 53, 0.3) 0%, rgba(179, 140, 53, 0) 70%);
}

/* Timeline CSS */
@media (min-width: 768px) {
    .timeline-line {
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 1px;
        background: linear-gradient(to bottom, rgba(179, 140, 53, 0), rgba(179, 140, 53, 0.4), rgba(179, 140, 53, 0));
        transform: translateX(-50%);
    }
}

/* FAQ animation */
.faq-icon i {
    transition: transform 0.3s ease;
}

.faq-question.active .faq-icon i {
    transform: rotate(45deg);
}

/* Enhanced Landscaping Process Section */
.landscaping-process-section {
    position: relative;
    background-color: var(--dark-bg);
    background-image:
        radial-gradient(circle at 90% 10%, rgba(41, 170, 227, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 10% 90%, rgba(163, 126, 44, 0.08) 0%, transparent 50%);
}

/* Create cascading shadow effect for process cards */
.process-card {
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.shadow-gold-cascade {
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(179, 140, 53, 0.1),
        0 0 0 3px rgba(179, 140, 53, 0.05),
        0 0 0 5px rgba(179, 140, 53, 0.025);
}

.process-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.2),
        0 10px 10px -5px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(179, 140, 53, 0.2),
        0 0 0 3px rgba(179, 140, 53, 0.1),
        0 0 0 5px rgba(179, 140, 53, 0.05),
        0 0 20px rgba(179, 140, 53, 0.2);
}

/* Timeline node container */
.timeline-node-container {
    position: relative;
}

/* Timeline connector - gold line connecting number to card */
.timeline-connector {
    position: absolute;
    top: 50%;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-color), var(--gold-light));
    transform: translateY(-50%);
    box-shadow: 0 0 5px rgba(179, 140, 53, 0.3);
}

.timeline-connector-left {
    right: 100%;
    width: 40px;
    margin-right: 10px;
}

.timeline-connector-right {
    left: 100%;
    width: 40px;
    margin-left: 10px;
}

/* Add shadow to timeline numbers */
.shadow-gold {
    box-shadow:
        0 0 0 4px rgba(179, 140, 53, 0.2),
        0 0 10px rgba(179, 140, 53, 0.4),
        0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Background animation */
@keyframes slow-drift {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }
}

.animate-slow-drift {
    animation: slow-drift 30s linear infinite alternate;
    background-size: 120% 120%;
}

/* Add radial gradient background */
.bg-gradient-radial {
    background-image: radial-gradient(var(--tw-gradient-stops));
}

/* Particles container for subtle background effect */
.particles-container {
    opacity: 0.3;
}

/* Ultra Premium Background Class with Maximum Depth */
.premium-background {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at top left, var(--dark-bg) 0%, var(--dark-bg-lighter) 100%),
        linear-gradient(135deg, var(--dark-bg) 0%, rgba(42, 42, 42, 0.95) 50%, var(--dark-bg-lighter) 100%);
}

/* Base depth layer - Deepest background gradients */
.premium-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 15%, rgba(179, 140, 53, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 85% 85%, rgba(41, 170, 227, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 50% 10%, rgba(179, 140, 53, 0.08) 0%, transparent 35%),
        radial-gradient(circle at 20% 90%, rgba(41, 170, 227, 0.06) 0%, transparent 30%),
        radial-gradient(circle at 80% 40%, rgba(179, 140, 53, 0.04) 0%, transparent 25%);
    pointer-events: none;
    z-index: 1;
    animation: premium-depth-shift 25s ease-in-out infinite alternate;
}

/* Secondary depth layer - Geometric patterns */
.premium-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(30deg, transparent 40%, rgba(179, 140, 53, 0.03) 50%, transparent 60%),
        linear-gradient(150deg, transparent 40%, rgba(41, 170, 227, 0.025) 50%, transparent 60%),
        linear-gradient(-30deg, transparent 45%, rgba(179, 140, 53, 0.02) 52%, transparent 55%),
        linear-gradient(-150deg, transparent 45%, rgba(41, 170, 227, 0.015) 52%, transparent 55%);
    background-size: 120px 120px, 100px 100px, 80px 80px, 60px 60px;
    animation: premium-pattern-drift 30s linear infinite;
    pointer-events: none;
    z-index: 2;
    opacity: 0.7;
}

/* Floating premium orbs with depth */
.premium-background .premium-orb-1,
.premium-background .premium-orb-2,
.premium-background .premium-orb-3,
.premium-background .premium-orb-4,
.premium-background .premium-orb-5 {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.premium-background .premium-orb-1 {
    width: 300px;
    height: 300px;
    background:
        radial-gradient(circle at 30% 30%, rgba(179, 140, 53, 0.2) 0%, rgba(179, 140, 53, 0.1) 30%, transparent 70%),
        radial-gradient(circle at 70% 70%, rgba(179, 140, 53, 0.15) 0%, transparent 50%);
    top: 5%;
    right: 10%;
    animation: premium-float-1 20s ease-in-out infinite;
    filter: blur(60px);
    z-index: 3;
}

.premium-background .premium-orb-2 {
    width: 200px;
    height: 200px;
    background:
        radial-gradient(circle at 40% 40%, rgba(41, 170, 227, 0.15) 0%, rgba(41, 170, 227, 0.08) 40%, transparent 70%);
    bottom: 15%;
    left: 8%;
    animation: premium-float-2 25s ease-in-out infinite;
    filter: blur(45px);
    z-index: 4;
}

.premium-background .premium-orb-3 {
    width: 150px;
    height: 150px;
    background:
        radial-gradient(circle at 60% 20%, rgba(179, 140, 53, 0.12) 0%, transparent 60%);
    top: 50%;
    right: 55%;
    animation: premium-float-3 18s ease-in-out infinite;
    filter: blur(35px);
    z-index: 5;
}

.premium-background .premium-orb-4 {
    width: 250px;
    height: 250px;
    background:
        radial-gradient(ellipse at 25% 75%, rgba(41, 170, 227, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 25%, rgba(179, 140, 53, 0.08) 0%, transparent 40%);
    top: 70%;
    right: 20%;
    animation: premium-float-4 22s ease-in-out infinite;
    filter: blur(50px);
    z-index: 2;
}

.premium-background .premium-orb-5 {
    width: 100px;
    height: 100px;
    background:
        radial-gradient(circle, rgba(179, 140, 53, 0.1) 0%, transparent 60%);
    top: 25%;
    left: 25%;
    animation: premium-float-5 15s ease-in-out infinite;
    filter: blur(25px);
    z-index: 6;
}

/* Premium mesh gradient overlay with depth */
.premium-background .premium-mesh {
    position: absolute;
    inset: 0;
    background:
        conic-gradient(from 0deg at 25% 25%,
            transparent 0deg,
            rgba(179, 140, 53, 0.05) 45deg,
            transparent 90deg,
            rgba(41, 170, 227, 0.03) 135deg,
            transparent 180deg,
            rgba(179, 140, 53, 0.04) 225deg,
            transparent 270deg,
            rgba(41, 170, 227, 0.025) 315deg,
            transparent 360deg),
        conic-gradient(from 180deg at 75% 75%,
            transparent 0deg,
            rgba(41, 170, 227, 0.04) 60deg,
            transparent 120deg,
            rgba(179, 140, 53, 0.03) 180deg,
            transparent 240deg,
            rgba(41, 170, 227, 0.025) 300deg,
            transparent 360deg);
    background-size: 500px 500px, 400px 400px;
    animation: premium-rotate 40s linear infinite, premium-mesh-pulse 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
    opacity: 0.6;
    filter: blur(1px);
}

/* Light beam effects */
.premium-background .premium-light-beam-1,
.premium-background .premium-light-beam-2 {
    position: absolute;
    pointer-events: none;
    z-index: 7;
}

.premium-background .premium-light-beam-1 {
    top: -50%;
    left: 20%;
    width: 2px;
    height: 200%;
    background: linear-gradient(to bottom,
            rgba(179, 140, 53, 0.4) 0%,
            rgba(179, 140, 53, 0.1) 30%,
            transparent 50%,
            rgba(179, 140, 53, 0.1) 70%,
            rgba(179, 140, 53, 0.3) 100%);
    filter: blur(3px);
    transform: rotate(15deg);
    animation: premium-beam-shimmer 12s ease-in-out infinite;
    opacity: 0.3;
}

.premium-background .premium-light-beam-2 {
    top: -50%;
    right: 30%;
    width: 1px;
    height: 200%;
    background: linear-gradient(to bottom,
            rgba(41, 170, 227, 0.3) 0%,
            rgba(41, 170, 227, 0.08) 40%,
            transparent 50%,
            rgba(41, 170, 227, 0.08) 60%,
            rgba(41, 170, 227, 0.25) 100%);
    filter: blur(2px);
    transform: rotate(-12deg);
    animation: premium-beam-shimmer 15s ease-in-out infinite reverse;
    opacity: 0.25;
}

/* Shimmer overlay effect */
.premium-background .premium-shimmer {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(45deg,
            transparent 30%,
            rgba(179, 140, 53, 0.02) 50%,
            transparent 70%),
        linear-gradient(-45deg,
            transparent 40%,
            rgba(41, 170, 227, 0.015) 50%,
            transparent 60%);
    background-size: 200px 200px, 300px 300px;
    animation: premium-shimmer-drift 35s linear infinite;
    pointer-events: none;
    z-index: 8;
    opacity: 0.5;
}

/* Noise texture for premium feel */
.premium-background .premium-noise {
    position: absolute;
    inset: 0;
    background-image:
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><filter id="noise"><feTurbulence baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/><feComponentTransfer><feFuncA type="discrete" tableValues="0 0.5 0 0.3 0 0.1 0 0.2 0"/></feComponentTransfer></filter><rect width="100%" height="100%" filter="url(%23noise)" fill="rgba(179,140,53,0.02)"/></svg>');
    background-size: 150px 150px;
    animation: premium-noise-drift 20s linear infinite;
    pointer-events: none;
    z-index: 4;
    opacity: 0.3;
    mix-blend-mode: soft-light;
}

/* Content wrapper to ensure proper z-index */
.premium-background>.container,
.premium-background>.relative {
    position: relative;
    z-index: 20;
}

/* Enhanced Animations */
@keyframes premium-depth-shift {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.8;
    }

    25% {
        transform: scale(1.02) rotate(0.5deg);
        opacity: 1;
    }

    50% {
        transform: scale(1.05) rotate(0deg);
        opacity: 0.9;
    }

    75% {
        transform: scale(1.02) rotate(-0.5deg);
        opacity: 1;
    }
}

@keyframes premium-pattern-drift {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.7;
    }

    25% {
        transform: translate(5px, -3px) rotate(0.5deg);
        opacity: 0.8;
    }

    50% {
        transform: translate(8px, 2px) rotate(0deg);
        opacity: 0.9;
    }

    75% {
        transform: translate(3px, 5px) rotate(-0.5deg);
        opacity: 0.7;
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.7;
    }
}

@keyframes premium-float-1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }

    25% {
        transform: translate(20px, -15px) scale(1.1);
        opacity: 0.8;
    }

    50% {
        transform: translate(-10px, -25px) scale(0.95);
        opacity: 0.7;
    }

    75% {
        transform: translate(-25px, 10px) scale(1.05);
        opacity: 0.9;
    }
}

@keyframes premium-float-2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }

    33% {
        transform: translate(-15px, 20px) scale(1.08);
        opacity: 0.7;
    }

    66% {
        transform: translate(20px, -10px) scale(0.92);
        opacity: 0.8;
    }
}

@keyframes premium-float-3 {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 0.4;
    }

    50% {
        transform: translate(15px, -20px) rotate(180deg) scale(1.15);
        opacity: 0.6;
    }
}

@keyframes premium-float-4 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }

    40% {
        transform: translate(-20px, 15px) scale(1.05);
        opacity: 0.5;
    }

    80% {
        transform: translate(10px, -25px) scale(0.95);
        opacity: 0.6;
    }
}

@keyframes premium-float-5 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.2;
    }

    33% {
        transform: translate(12px, -8px) scale(1.2);
        opacity: 0.4;
    }

    66% {
        transform: translate(-8px, 12px) scale(0.8);
        opacity: 0.5;
    }
}

@keyframes premium-rotate {
    from {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.02);
    }

    to {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes premium-mesh-pulse {

    0%,
    100% {
        opacity: 0.6;
        filter: blur(1px);
    }

    50% {
        opacity: 0.8;
        filter: blur(0.5px);
    }
}

@keyframes premium-beam-shimmer {

    0%,
    100% {
        opacity: 0.3;
        transform: rotate(15deg) scaleY(1);
    }

    25% {
        opacity: 0.5;
        transform: rotate(15deg) scaleY(1.1);
    }

    50% {
        opacity: 0.7;
        transform: rotate(15deg) scaleY(0.9);
    }

    75% {
        opacity: 0.4;
        transform: rotate(15deg) scaleY(1.05);
    }
}

@keyframes premium-shimmer-drift {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.5;
    }

    25% {
        transform: translate(-10px, 5px) rotate(1deg);
        opacity: 0.7;
    }

    50% {
        transform: translate(5px, -8px) rotate(0deg);
        opacity: 0.6;
    }

    75% {
        transform: translate(8px, 3px) rotate(-1deg);
        opacity: 0.8;
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.5;
    }
}

@keyframes premium-noise-drift {
    0% {
        transform: translate(0, 0);
        opacity: 0.3;
    }

    100% {
        transform: translate(-50px, -50px);
        opacity: 0.2;
    }
}


/* Responsive and Accessibility */
@media (max-width: 768px) {

    .premium-background .premium-orb-1,
    .premium-background .premium-orb-2,
    .premium-background .premium-orb-3,
    .premium-background .premium-orb-4,
    .premium-background .premium-orb-5 {
        filter: blur(30px);
        opacity: 0.6;
        transform: scale(0.7);
    }

    .premium-background::after {
        background-size: 60px 60px, 50px 50px, 40px 40px, 30px 30px;
    }

    .premium-background .premium-mesh {
        background-size: 300px 300px, 250px 250px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .premium-background::before,
    .premium-background::after,
    .premium-background .premium-orb-1,
    .premium-background .premium-orb-2,
    .premium-background .premium-orb-3,
    .premium-background .premium-orb-4,
    .premium-background .premium-orb-5,
    .premium-background .premium-mesh,
    .premium-background .premium-light-beam-1,
    .premium-background .premium-light-beam-2,
    .premium-background .premium-shimmer,
    .premium-background .premium-noise,
    .premium-background-luxury::before,
    .premium-background-luxury::after {
        animation: none;
    }
}

/* Custom image display class */
.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

.image-container {
    background-color: rgba(17, 24, 39, 0.8);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Hover effect for gallery images */
.group:hover .gallery-image {
    transform: scale(1.05);
}

/* Modal styling for accessibility */
#gallery-modal .modal-container {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    margin: 0 auto;
}

#modal-image {
    max-height: 70vh;
    object-fit: contain;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    transition: opacity 0.2s ease;
}

.modal-content {
    padding: 2rem;
    background-color: #1f2937;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid #d4af37;
}

.modal-navigation {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 20;
}

.modal-nav-button {
    background-color: rgba(17, 24, 39, 0.8);
    color: white;
    border: 2px solid #d4af37;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-nav-button:hover {
    background-color: #29AAE3;
}

.modal-close {
    position: absolute;
    top: -3rem;
    right: 0;
    background-color: transparent;
    color: white;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 30;
}

.modal-close:hover {
    color: #d4af37;
}

.modal-caption {
    padding: 1.5rem;
    color: white;
}

/* Ensure focus states are visible for accessibility */
button:focus,
a:focus {
    outline: 2px solid #29AAE3;
    outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    #modal-image {
        max-height: 60vh;
    }

    .modal-nav-button {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* Custom styles for reviews page */
.review-card {
    transition: all 0.3s ease;
    height: 100%;
}

.review-card:hover {
    transform: translateY(-5px);
}

.star-rating {
    color: #d4af37;
}

.review-avatar {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #d4af37;
}

.review-platform-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 2px solid #d4af37;
}

.review-stats-card {
    transition: all 0.3s ease;
}

.review-stats-card:hover {
    transform: scale(1.03);
}

.review-filter-btn.active {
    background-color: #29AAE3;
    color: white;
    border-color: #d4af37;
    border-width: 2px;
}

.testimonial-quote {
    position: relative;
}

.testimonial-quote::before {
    content: "" ";
 font-family: Georgia, serif;
    font-size: 5rem;
    position: absolute;
    left: -1.5rem;
    top: -2rem;
    color: rgba(212, 175, 55, 0.2);
    z-index: 0;
}

.review-form input:focus,
.review-form textarea:focus,
.review-form select:focus {
    border-color: #29AAE3;
    box-shadow: 0 0 0 3px rgba(41, 170, 227, 0.2);
}

/* Animation for review cards */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation delay for review cards */
.review-card:nth-child(1) {
    transition-delay: 0.1s;
}

.review-card:nth-child(2) {
    transition-delay: 0.2s;
}

.review-card:nth-child(3) {
    transition-delay: 0.3s;
}

.review-card:nth-child(4) {
    transition-delay: 0.4s;
}

.review-card:nth-child(5) {
    transition-delay: 0.5s;
}

.review-card:nth-child(6) {
    transition-delay: 0.6s;
}

/* Progress bar styling */
.progress-bar {
    height: 8px;
    border-radius: 4px;
    background-color: #e5e7eb;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #29AAE3 0%, #1d8ab5 100%);
}

/* Testimonial carousel */
.testimonial-carousel {
    position: relative;
    overflow: hidden;
}

.testimonial-slide {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
}

.testimonial-slide.active {
    opacity: 1;
    position: relative;
    pointer-events: auto;
}

.carousel-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #4b5563;
    transition: all 0.3s ease;
    cursor: pointer;
}

.carousel-indicator.active {
    background-color: #d4af37;
    transform: scale(1.2);
}

.carousel-nav-button {
    background-color: rgba(17, 24, 39, 0.7);
    color: white;
    border: 2px solid #d4af37;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-nav-button:hover {
    background-color: #29AAE3;
}

  #off-canvas-menu {
      transform: translateX(-100%);
    }
    #backdrop {
      display: none;
    }
    /* Completely hide on desktop only */
    @media (min-width: 1024px) {
      #off-canvas-menu {
        display: none !important;
      }
      #backdrop {
        display: none !important;
      }
    }

/* FIXED: Improved contrast ratios for accessibility */
.text-gray-400 {
  color: #9ca3af !important;
  /* Enhanced contrast from original */
}

.text-gray-500 {
  color: #6b7280 !important;
  /* Enhanced contrast */
}

/* FIXED: Better link visibility without relying on color alone */
a:not(.skip-link-styles) {
  text-decoration-thickness: 1px;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
}

/* Navigation links styling */
nav a {
  position: relative;
  text-decoration: none;
}

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

nav a:hover::after,
nav a:focus::after {
  width: 100%;
}

/* Enhanced focus styles for better accessibility */
*:focus {
  outline: 2px solid var(--gold-color);
  outline-offset: 2px;
}

/* Enhanced mobile menu visibility */
.mobile-nav a {
  border-left: 3px solid transparent;
  transition: all 0.3s ease;
}

.mobile-nav a:hover,
.mobile-nav a:focus {
  border-left-color: var(--gold-color);
  background-color: var(--dark-lighter);
}

#topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  min-height: 36px;
}

#main-header {
  position: fixed;
  top: 36px; /* Height of topbar */
  left: 0;
  right: 0;
  z-index: 50;
  width: 100%;
}

/* Adjust for different screen sizes */
@media (max-width: 768px) {
  #topbar {
    min-height: 32px;
  }
  
  #main-header {
    top: 32px; /* Adjusted height for mobile */
  }
}

/* Responsive breakpoints for extra small screens */
@media (min-width: 375px) {
  .xs\:inline {
    display: inline;
  }
  .xs\:hidden {
    display: none;
  }
}

/* Ensure topbar content doesn't overflow on very small screens */
@media (max-width: 320px) {
  #topbar .container {
    padding-left: 8px;
    padding-right: 8px;
  }
  
  #topbar .text-xs {
    font-size: 10px;
  }
}

/* Adjust header positioning for mobile */
@media (max-width: 768px) {
  #topbar {
    min-height: 32px;
  }
  
  #topbar .py-2 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }
}
/* Topbar and Header positioning fixes */
:root {
--topbar-height: 36px;
}

@media (max-width: 768px) {
:root {
--topbar-height: 32px;
}
}

#topbar {
height: var(--topbar-height);
}

#main-header {
top: var(--topbar-height);
}

/* Adjust body padding to account for fixed headers */
body {
padding-top: calc(var(--topbar-height) + 80px);
}

#main-content {
margin-top: 0; /* Reset any existing margin-top */
padding-top: 0; /* Reset any existing padding-top */
}