:root {
    --bg-primary: #000000;
    --bg-secondary: #111111;
    --bg-card: rgba(30, 30, 30, 0.7);
    --text-primary: #cccccc;
    --text-heading: #ffffff;
    --accent: #F06C22;
    /* Safety Orange from logo */
    --accent-glow: rgba(240, 108, 34, 0.2);
    --danger: #ef4444;
    --warning: #f59e0b;
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --nav-height: 90px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-heading);
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid var(--accent);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-primary {
    background-color: rgba(240, 108, 34, 0.1);
    color: var(--accent);
    border-color: var(--accent);
}

.btn-primary:hover {
    background-color: rgba(240, 108, 34, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--accent-glow);
}

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

.btn-solid:hover {
    background-color: #ffffff;
    color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

/* Navigation */
header {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--nav-height);
    background-color: rgba(0, 0, 0, 0.9);
    /* Glassmorphism base */
    backdrop-filter: blur(12px);
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -1px;
    display: flex;
    align-items: center;
    font-family: var(--font-heading);
}

.logo span {
    color: var(--text-heading);
    margin-left: 5px;
}

/* Navigation & Deep Menu Structure */
.navbar-nav {
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
    list-style: none;
}

.nav-link {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    padding: 10px 0;
    display: block;
    text-decoration: none;
}

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

/* Sub Menu (Dropdown) */
.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--bg-secondary);
    min-width: 240px;
    padding: 10px 0;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
    z-index: 100;
    list-style: none;
}

.nav-item:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Nested Sub Menus */
.sub-menu .sub-menu {
    top: 0;
    left: 100%;
    margin-left: 5px;
}

.sub-menu .nav-item {
    position: relative;
}

.sub-menu .nav-link {
    padding: 8px 20px;
    font-size: 0.9rem;
    color: #cccccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sub-menu .nav-link:hover {
    background-color: rgba(240, 108, 34, 0.1);
    color: var(--accent);
}

/* Header Button Replacements for Menu items 314 & 315 */
.maxbutton-schedule-service,
.maxbutton-make-payment {
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    border: 1px solid var(--accent);
    display: inline-block;
}

.maxbutton-schedule-service {
    background: linear-gradient(135deg, var(--accent) 0%, #d94f0e 100%);
    color: white !important;
    border: none;
    box-shadow: 0 4px 10px rgba(240, 108, 34, 0.3);
    transition: var(--transition);
}

.maxbutton-schedule-service:hover {
    background: linear-gradient(135deg, #d94f0e 0%, var(--accent) 100%);
    box-shadow: 0 6px 15px rgba(240, 108, 34, 0.4);
    transform: translateY(-2px);
    color: white !important;
}

.maxbutton-make-payment {
    background: transparent;
    color: var(--accent) !important;
    transition: var(--transition);
}

.maxbutton-make-payment:hover {
    background-color: rgba(240, 108, 34, 0.1);
    color: var(--accent) !important;
    transform: translateY(-2px);
}

.fl-submenu-toggle-icon {
    display: none;
    /* Hide toggle icons on desktop */
}

/* Hide original classes that might interfere */
.dropdown,
.dropdown-item {
    display: none;
}

.card:hover {
    transform: translateY(-10px);
    border-color: var(--accent);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
}

.card-icon {
    font-size: 3rem;
    color: var(--accent);
    margin-bottom: 20px;
}

.card h3 {
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.card p {
    color: #8892b0;
    font-size: 0.95rem;
    margin-bottom: 25px;
    flex-grow: 1;
    /* Pushes button down */
}

/* Pricing Cards */
.pricing-card {
    background-color: var(--bg-secondary);
    padding: 50px 30px;
    border-radius: 8px;
    text-align: center;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition);
}

.pricing-card.featured {
    border-color: var(--accent);
    transform: scale(1.05);
    z-index: 2;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, rgba(240, 108, 34, 0.05) 100%);
}

.pricing-header h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.price {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 30px;
    display: block;
}

.price span {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 400;
}

.features-list {
    text-align: left;
    margin-bottom: 40px;
    padding: 0 10px;
}

.features-list li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #8892b0;
}

.features-list li::before {
    content: "✓";
    color: var(--accent);
    margin-right: 10px;
    font-weight: bold;
}

/* Hero Section */
.hero {
    padding-top: calc(var(--nav-height) + 60px);
    padding-bottom: 80px;
    min-height: 90vh;
    display: flex;
    align-items: center;
    position: relative;
    background: radial-gradient(circle at 80% 20%, rgba(240, 108, 34, 0.05) 0%, transparent 40%);
    overflow: hidden;
    /* Contain absolute shapes */
}

/* Abstract Animated Shapes */
.hero-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.shape-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: float 10s infinite ease-in-out;
}

.shape-1 {
    top: -10%;
    right: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--accent), transparent 70%);
    animation-delay: 0s;
}

.shape-2 {
    bottom: 10%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #f97316, transparent 70%);
    animation-delay: -5s;
}

.shape-3 {
    top: 40%;
    right: 30%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #fbbf24, transparent 70%);
    opacity: 0.2;
    animation-duration: 15s;
}

@keyframes float {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }

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

.hero-content {
    max-width: 600px;
    position: relative;
    z-index: 2;
    /* Ensure content is above shapes */
}

.hero-tagline {
    color: var(--accent);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 20px;
    display: block;
    letter-spacing: 2px;
}

.hero h1 {
    font-size: 4rem;
    margin-bottom: 20px;
    line-height: 1.1;
}

.hero p {
    font-size: 1.1rem;
    margin-bottom: 40px;
    max-width: 500px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
}

/* Features/Services Grid */
.section {
    padding: 100px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.section-title span {
    color: var(--accent);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card {
    background-color: var(--bg-secondary);
    padding: 40px 30px;
    border-radius: 8px;
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-10px);
    border-color: var(--accent);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
}

.card-icon {
    font-size: 3rem;
    color: var(--accent);
    margin-bottom: 20px;
}

.card h3 {
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.card p {
    color: #8892b0;
    font-size: 0.95rem;
    margin-bottom: 25px;
    flex-grow: 1;
    /* Pushes button down */
}

/* Pricing Cards */
.pricing-card {
    background-color: var(--bg-secondary);
    padding: 50px 30px;
    border-radius: 8px;
    text-align: center;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition);
}

.pricing-card.featured {
    border-color: var(--accent);
    transform: scale(1.05);
    z-index: 2;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, rgba(240, 108, 34, 0.05) 100%);
}

.pricing-header h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.price {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 30px;
    display: block;
}

.price span {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 400;
}

.features-list {
    text-align: left;
    margin-bottom: 40px;
    padding: 0 10px;
}

.features-list li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #8892b0;
}

.features-list li::before {
    content: "✓";
    color: var(--accent);
    margin-right: 10px;
    font-weight: bold;
}

/* Testimonials */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonial-card {
    background: var(--bg-card);
    padding: 30px;
    border-left: 3px solid var(--accent);
    font-style: italic;
}

.testimonial-author {
    margin-top: 20px;
    font-style: normal;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-heading);
}

.testimonial-role {
    font-size: 0.8rem;
    color: var(--accent);
    display: block;
}

/* Footer */
footer {
    background-color: #000000;
    padding: 60px 0 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 60px;
}

.footer-col h4 {
    margin-bottom: 20px;
    color: var(--text-heading);
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #8892b0;
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: var(--accent);
    padding-left: 5px;
}

.copyright {
    text-align: center;
    color: #8892b0;
    font-size: 0.8rem;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Contact Page Specifics */
.contact-hero {
    padding-top: 150px;
    padding-bottom: 60px;
    text-align: center;
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 50px;
}

.contact-info-card {
    background-color: var(--bg-secondary);
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.contact-info-card h4 {
    color: var(--accent);
    margin-bottom: 10px;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-heading);
}

input,
textarea,
select {
    width: 100%;
    padding: 12px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-heading);
    font-family: var(--font-body);
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hamburger {
        display: block;
        z-index: 1001;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background-color: var(--bg-secondary);
        flex-direction: column;
        justify-content: center;
        /* Center items vertically */
        align-items: center;
        /* Center items horizontally */
        gap: 20px;
        /* Reduce gap for mobile */
        transition: 0.3s;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
        padding: 20px;
        /* Add padding */
        overflow-y: auto;
        /* Allow scrolling if content is tall */
    }

    .nav-menu.active {
        right: 0;
    }

    /* Mobile Dropdown Logic - Nested lists often better for mobile */
    .nav-item {
        width: 100%;
        text-align: center;
    }

    .dropdown {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        background-color: rgba(0, 0, 0, 0.2);
        /* Darker background for nested items */
        box-shadow: none;
        min-width: 100%;
        display: none;
        /* Hide by default on mobile, toggle with JS if needed, or show all */
        border: none;
        margin-top: 5px;
        padding-left: 0;
    }

    .nav-item:hover .dropdown {
        /* On hover doesn't work well on touch, usually click to toggle. 
            For this mockup, ensuring basic visibility or ignoring dropdowns on mobile 
            might be safer unless js is refined. Let's make them always visible for now 
            or hidden. */
        display: block;
    }

    .dropdown-item {
        padding: 8px 0;
        font-size: 0.85rem;
        color: #8892b0;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .contact-layout {
        grid-template-columns: 1fr;
    }
}

/* Video Facade Styles */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--accent);
    background: #000;
    cursor: pointer;
}

.video-wrapper img.thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: opacity 0.3s;
    z-index: 1;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.video-wrapper:hover img.thumbnail {
    opacity: 1;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Centering fix */
    width: 68px;
    height: 48px;
    background-color: rgba(33, 33, 33, 0.8);
    border-radius: 12px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.play-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 20px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 2px;
    /* Visual center adjustment */
}

.video-wrapper:hover .play-button {
    background-color: #ff0000;
    /* YouTube Red */
}