/* --- VARIABLES --- */
:root {
    --yellow: #f7d554;
    --blue: #2b388e;
    --orange: #df792e;
    --bg-dark: #0f0f12;
    --bg-card: #16161a;
    --text-main: #e0e0e0;
    --text-muted: #888;
    --border-color: #334155;
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    overflow-x: hidden;
}

/* --- TEXTURES & BACKGROUNDS --- */
.bg-texture {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(15, 15, 18, 0) 50%, rgba(0, 0, 0, 0.2) 50%);
    background-size: 100% 4px;
    pointer-events: none;
    z-index: -1;
}
/* --- SPLIT SPEC SECTIONS --- */
.camera-specs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    padding: 100px 10%;
    flex-wrap: wrap;
}

.camera-text {
    flex: 1;
    min-width: 300px;
}

.camera-text h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--yellow); /* Matches your 4S Agility theme */
    text-shadow: 0 0 10px rgba(247, 213, 84, 0.3);
}

.camera-text p {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.camera-image {
    flex: 1;
    min-width: 300px;
    position: relative;
}

.camera-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 0 40px rgba(223, 121, 46, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.5s ease;
}
/* ADD THIS NEW BLOCK TO YOUR CSS */
.booking.system {
    flex: 1; /* Keep the flexibility, but... */
    min-width: 300px; /* ...ensure a minimum width */
    max-width: 600px; /* Crucial: Set a maximum width for the image *container* */
    
    /* This creates the rectangular shape *before* the image loads */
    aspect-ratio: 16 / 9; /* Or adjust this ratio to fit your preference, e.g., 4 / 3 */
    position: relative;
    overflow: hidden; /* Keeps things contained nicely */
    
    border-radius: 20px; /* Move the styles to the container */
    box-shadow: 0 0 40px rgba(223, 121, 46, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.5s ease;
}


/* Then update the image styles inside it */
.booking.system img {
    width: 100%;
    height: 100%; /* Make the image fill the defined container... */
    object-fit: cover; /* ...while ensuring it covers the whole area, cropping slightly if needed to match the aspect ratio, just like your video. Use 'contain' if you prefer to see the whole image with letterboxing. */
    border-radius: inherit; /* Inherit the radius from the container */
}

/* Add the hover effect to the container instead */
.booking.system:hover {
    transform: scale(1.02);
}
.camera-image img:hover {
    transform: scale(1.02);
}
.camera-video {
    flex: 1;
    min-width: 300px;
    position: relative;
    
}

.drone-vid {
    width: 100%;
    height: auto;
    border-radius: 20px;
    display: block;
    box-shadow: 0 0 40px rgba(223, 121, 46, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    
    object-fit: cover; 
}
#why-us {
    padding: 100px 5%;
    text-align: center;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--yellow);
    text-transform: uppercase;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.stat {
    background: var(--bg-card);
    padding: 2.5rem 1.5rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.stat:hover {
    transform: translateY(-10px);
    border-color: var(--orange);
    box-shadow: 0 15px 30px rgba(223, 121, 46, 0.15);
}
 
.stat-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.stat h3 {
    color: var(--yellow);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.stat p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* The "Glow" effect from your other project */
.stat::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(247, 213, 84, 0.05) 0%, transparent 70%);
    pointer-events: none;
}
/* Styling for the new Hero Logo */
.hero-logo-container {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-logo {
    max-width: 350px; 
    width: 90%;       
    height: auto;
  
    transition: transform 0.5s ease;
}

.hero-logo:hover {
    transform: scale(1.02);
}

/* Ensure mobile looks good */
@media (max-width: 768px) {
    .hero-logo {
        max-width: 250px;
    }
}
.spec-tag {
    display: inline-block;
    width: fit-content; /* Strictly limits width to the text size */
    padding: 5px 15px;
    background: rgba(247, 213, 84, 0.1);
    border: 1px solid var(--orange);
    color: var(--orange);
    border-radius: 5px;
    font-size: 0.8rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    white-space: nowrap; /* Prevents text from wrapping to a second line */
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .camera-specs {
        flex-direction: column !important;
        text-align: center;
        padding: 60px 5%;
    }
}
/* --- SCROLL TRACKER --- */
.scroll-path-container {
    position: fixed;
    top: 0; left: 20px;
    width: 4px; height: 100vh;
    background: rgba(255, 255, 255, 0.05);
    z-index: 999;
}

#scroll-line {
    width: 100%; height: 0%;
    background: linear-gradient(to bottom, var(--yellow), var(--orange));
    box-shadow: 0 0 15px var(--orange);
    border-radius: 2px;
}

.scroll-pointer {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 12px; height: 12px;
    background: var(--yellow);
    border-radius: 50%;
    box-shadow: 0 0 20px var(--yellow);
    top: 0%;
}

/* --- NAVBAR --- */
nav {
    position: fixed;
    top: 0; width: 100%;
    padding: 1.5rem 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 15, 18, 0.8);
    backdrop-filter: blur(15px);
    z-index: 1000;
    transition: 0.3s ease;
    border-bottom: 1px solid var(--border-color);
}
/* 1. Fix the Section Spacing */

.logo {
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--yellow);
    letter-spacing: 2px;
    transition: 0.5s;
}
/* Container for the logo image */
.logo-container {
    display: flex;
    align-items: center;
    height: 100%;
}
/* Add this to style.css */
section {
    /* Adjust '20vh' (20% of screen height) to change where it stops */
    scroll-margin-top: 20vh; 
}
#logo-img {
    height: 40px; /* Adjust this to fit your logo's height */
    width: auto;
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}

/* Subtle hover effect for the logo */
#logo-img:hover {
    transform: scale(1.05);

}

/* Optional: Make the logo change slightly when scrolling (via the existing JS) */
#logo-img.scrolled {
    height: 35px; /* Shrink slightly on scroll for a modern feel */
}

.nav-links {
    display: flex; gap: 20px; align-items: center;
}

.nav-links a:not(.btn) {
    color: var(--text-main);
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
    position: relative;
}

.nav-links a:not(.btn):hover {
    color: var(--yellow);
}

/* --- BUTTONS --- */
.btn {
    display: inline-block;
    padding: 15px 30px;
    background: linear-gradient(45deg, var(--orange), var(--yellow));
    color: var(--bg-dark);
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
    box-shadow: 0 0 15px rgba(223, 121, 46, 0.4);
}

.btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 0 25px rgba(247, 213, 84, 0.6);
}

.hidden-btn {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}

.hidden-btn.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.full-width { width: 100%; }

/* --- HERO --- */
.hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 10%;
    
}

/* Keep the layout for the H1 */
h1 {
    font-size: clamp(3rem, 10vw, 6rem);
    filter: drop-shadow(0 0 10px rgba(43, 56, 142, 0.3));
}

/* Apply the clip and color to the spans */
h1 span {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; /* Helps with some browser rendering quirks */
}

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

.text-blue {
    background-color: var(--blue);
}

.subtitle {
    color: var(--text-muted);
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

/* --- SCROLL ARROW --- */
.scroll-indicator {
    position: absolute; bottom: 30px;
    left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center;
    color: var(--yellow); font-size: 0.7rem; letter-spacing: 2px;
    cursor: pointer;
}

.arrow {
    width: 20px; height: 20px;
    border-right: 3px solid var(--orange);
    border-bottom: 3px solid var(--orange);
    transform: rotate(45deg);
    animation: arrow-bounce 2s infinite;
}

@keyframes arrow-bounce {
    0% { transform: rotate(45deg) translate(0, 0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: rotate(45deg) translate(15px, 15px); opacity: 0; }
}

/* --- REVEAL ANIMATIONS --- */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(80px);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform, opacity;
}

.reveal-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- GRID & CARDS --- */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 5rem 10%;
    perspective: 1000px;
}

.card {
    background: var(--bg-card);
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    transition: 0.5s;
    position: relative;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-10px) rotateX(2deg) rotateY(2deg);
    border-color: var(--orange);
    box-shadow: 0 15px 30px rgba(223, 121, 46, 0.2);
}


.img-placeholder {
    width: 100%; height: 200px;
    border-radius: 12px; margin-bottom: 1.5rem;
    overflow: hidden;
    background: var(--blue);
    position: relative;
}

.img-placeholder img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: 0.6s ease;
    opacity: 0.7;
    filter: grayscale(50%);
}

.card:hover .img-placeholder img {
    transform: scale(1.1);
    opacity: 1;
    filter: grayscale(0%);

}

.card h3 {color: var(--orange); /* Swapped from yellow to orange */}
.card p { color: var(--text-muted); line-height: 1.6; }

/* --- PARALLAX --- */
.parallax-window {
    height: 50vh;
    /* Use the inline variable if it exists, otherwise fall back to the default image */
    background-image: var(--bg-image, url('20260421_R3X_8902-2.jpg'));
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}

/* The rest of your awesome CSS stays exactly the same */
.parallax-window::after {
    content: ""; position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
}

.mask {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

.parallax-text {
    position: relative; z-index: 1;
    font-size: clamp(2rem, 5vw, 4rem); font-weight: 900;
    color: var(--orange);
    text-transform: uppercase;
    text-shadow: 0 0 40px rgba(247, 213, 84, 0.5);
    
}

/* --- STATS & UTILS --- */
.text-center { text-align: center; }
.padding-huge { padding: 120px 10%; }
.margin-bottom-large { margin-bottom: 80px; }
.tracking-widest { letter-spacing: 5px; color: var(--text-muted); }

.massive-number {
    font-size: clamp(5rem, 15vw, 8rem);
    color: var(--orange);
    text-shadow: 0 0 30px rgba(223, 121, 46, 0.4);
    line-height: 1;
}

/* --- WORKFLOW --- */
.workflow-container {
    display: flex; justify-content: space-between; gap: 2rem; position: relative;
}

.workflow-container::before {
    content: ''; position: absolute;
    top: 50px; left: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--yellow), var(--orange), transparent);
    z-index: 0;
}

.step-card {
    flex: 1; background: var(--bg-card);
    padding: 2.5rem 1.5rem; border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.05);
    position: relative; z-index: 1; transition: 0.4s; text-align: center;
}

.step-card:hover {
    border-color: var(--yellow);
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(247, 213, 84, 0.15);
}

.step-number {
    font-size: 3rem; font-weight: 900;
    color: var(--blue);
    margin-bottom: 1rem; line-height: 1;
}

/* --- CONTACT FORM --- */
.contact-section { padding: 100px 10%; display: flex; justify-content: center; }

.contact-card {
    background: var(--bg-card);
    padding: 3rem; border-radius: 20px;
    border: 1px solid var(--blue);
    width: 100%; max-width: 600px;
    text-align: center;
}

.contact-card h2 { color: var(--yellow); margin-bottom: 10px; }
.contact-card p { color: var(--text-muted); margin-bottom: 30px; }

form { display: flex; flex-direction: column; gap: 15px; }
.input-group { display: flex; gap: 15px; }

input, textarea {
    width: 100%; padding: 15px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--bg-dark); color: #fff;
    transition: 0.3s;
}

input:focus, textarea:focus {
    outline: none; border-color: var(--yellow);
    box-shadow: 0 0 10px rgba(247, 213, 84, 0.2);
}
/* --- INTEGRATED ABOUT SECTION --- */
.about-modern {
    padding: 100px 10%;
    background-color: var(--bg-dark);
}

.about-content {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: center;
}

.about-text h2 {
    font-size: 3rem;
    margin-bottom: 2rem;
    color: var(--yellow);
    text-shadow: 0 0 10px rgba(247, 213, 84, 0.2);
}

.about-text p {
    color: var(--text-muted);
    margin-bottom: 2rem;
    line-height: 1.8;
    font-size: 1.1rem;
}

.about-list {
    list-style: none;
}

.about-list li {
    color: var(--yellow);
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.about-stats-grid {
display: grid;
    grid-template-columns: 1fr;
    /* This 'gap' controls the vertical space between the sliding cards */
    gap: 1rem; 
   
    perspective: 1000px;
    /* Added a bit of padding to the top/bottom so they don't hit the section edges */
    padding: 20px 0;
}

.stat-card {
    background: var(--bg-card);
    padding: 2rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    transition: border-color 0.3s ease; /* Don't transition transform/opacity here! */
    
    /* PERFORMANCE SECRETS */
    opacity: 0; 
    will-change: transform, opacity; /* This stops the lag[cite: 3] */
    pointer-events: auto;
}

.stat-card:hover {
    border-color: var(--orange);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(223, 121, 46, 0.1);
}

.stat-card h3 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--yellow), var(--orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 968px) {
    .about-content { grid-template-columns: 1fr; text-align: center; }
    .about-list li { display: inline-block; margin: 0 10px; }
}

/* --- FOOTER & BACK TO TOP --- */
footer { padding: 3rem; text-align: center; color: var(--text-muted); font-size: 0.9rem; }

#backToTop {
    position: fixed; bottom: 30px; right: 30px;
    width: 50px; height: 50px;
    background: var(--bg-card); color: var(--yellow);
    border: 2px solid var(--yellow); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; cursor: pointer; z-index: 2000;
    transition: 0.4s; opacity: 0; visibility: hidden;
}

#backToTop.visible { opacity: 1; visibility: visible; }
#backToTop:hover {
    background: var(--yellow); color: var(--bg-dark);
    box-shadow: 0 0 20px rgba(247, 213, 84, 0.5);
    transform: translateY(-5px);
}

/* Mobile Responsive Tweaks */
@media (max-width: 768px) {
    .input-group { flex-direction: column; }
    .workflow-container { flex-direction: column; }
    .workflow-container::before { display: none; }
    .scroll-path-container { display: none; }
}
/* --- SEMINARS SECTION (GLASSMORPHISM) --- */
#seminars {
    padding: 100px 5%;
    background-color: var(--bg-dark);
}

.seminars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 3rem;
    padding: 0 20px;
}

.seminar-card {
    /* Frosted Glass Effect */
    background: rgba(22, 22, 26, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Structure & Padding */
    border-radius: 24px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    /* Animation & Shadows */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s, box-shadow 0.4s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    will-change: transform;
}

/* Image Wrapper with Padding & Custom Shadow */
.seminar-img-wrapper {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    position: relative;
}

.seminar-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Seminar Typography */
.seminar-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: left;
}

.seminar-info h3 {
    color: var(--text-main);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 8px;
    transition: color 0.3s;
}

.seminar-subtitle {
    color: var(--yellow);
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.seminar-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Card Button Fixes to make it fit inside glass cards smoothly */
.seminar-btn {
    align-self: flex-start;
    padding: 12px 24px;
    font-size: 0.85rem;
    margin-top: auto; /* Pushes button to bottom if text heights differ */
}

/* Hover States */
.seminar-card:hover {
    transform: translateY(-8px);
    border-color: rgba(247, 213, 84, 0.3);
    box-shadow: 0 20px 40px rgba(223, 121, 46, 0.15), 
                0 0 30px rgba(247, 213, 84, 0.05);
}

.seminar-card:hover .seminar-img-wrapper img {
    transform: scale(1.05);
}

.seminar-card:hover h3 {
    color: var(--yellow);
}

/* Mobile optimizations */
@media (max-width: 480px) {
    .seminar-card {
        padding: 15px;
    }
    .seminar-btn {
        width: 100%;
        text-align: center;
    }
}
/* --- VERTICAL IMAGE ONLY IN ABOUT SECTION --- */
.stat-card.about-vertical-img-card {
    background: transparent;   /* Remove card background wrapper */
    border: none;              /* Remove card border */
    box-shadow: none;          /* Remove card shadow */
    padding: 0;
    overflow: visible;         /* Let your hover effects breathe */
    height: auto;              /* Allow natural aspect ratio sizing */
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}

.about-vertical-img {
    width: 100%;
    max-height: 550px;         /* Creates a tall, elegant vertical profile */
    object-fit: cover;       /* Fits the entire frame completely without cropping */
    border-radius: 24px;       /* Custom clean border radius for the image edge */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 
                0 0 30px rgba(223, 121, 46, 0.1);
    display: block;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s;
}

/* Hover glow effect specifically designed for the standalone image */
.stat-card.about-vertical-img-card:hover .about-vertical-img {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--yellow);
    box-shadow: 0 20px 40px rgba(223, 121, 46, 0.2), 
                0 0 30px rgba(247, 213, 84, 0.1);
}
/* ============================================ */
/* PRICING & CONTACT FORM SECTION */
/* ============================================ */
.pricing-section {
    padding: 100px 10%;
    display: flex;
    justify-content: center;
    background-color: var(--bg-dark);
}


.price-card {
    background: rgba(22, 22, 26, 0.45); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid #df792e;
    border-radius: 24px;
    padding: 3rem;
    width: 100%;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(246, 171, 92, 0.1);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
}

.price-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(242, 217, 127, 0.31);
}

/* Form layout updates */
#project-form {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 20px; 
}

#project-form input,
#project-form select,
#project-form textarea {
    width: 100%;
    padding: 15px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0f0f12;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

/* Focus states - subtle purple glow to match the form theme */
#project-form input:focus,
#project-form select:focus,
#project-form textarea:focus {
    outline: none;
    border-color: #bb86fc;
    box-shadow: 0 0 15px #200cfd46;
    background: #131317;
}

/* Custom styling to fix the default browser look of the select dropdown */
#project-form select {
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
    padding-right: 45px;
}

/* The Submit Button  */
.cta-button {
    display: inline-block;
    padding: 16px 32px;
    background: linear-gradient(45deg, #f7d554, #df792e);
    color: #0f0f12;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 900;
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 20px #df782e7d;
    margin-top: 10px;
}

.cta-button:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px #ffba0d71;
    filter: brightness(1.1);
}

/* State when the JS is actively sending the form */
.cta-button:disabled {
    background: #333;
    color: #777;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Placeholder text color */
#project-form ::placeholder {
    color: var(--text-muted);
    opacity: 0.8;
}

/* ============================================ */
/* RESPONSIVE RESPONSIVENESS */
/* ============================================ */
@media (max-width: 768px) {
    .pricing-section {
        padding: 60px 5%;
    }
    
    .price-card {
        padding: 2rem 1.5rem;
    }

    #project-form div {
        flex-direction: column;
        gap: 20px;
    }
}

/* --- HAMBURGER BUTTON STYLE --- */
.hamburger {
    display: none; /* Hidden on desktop screens */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1010;
}

.hamburger .bar {
    width: 100%;
    height: 3px;
    background-color: var(--yellow);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- MOBILE NAVIGATION RESPONSIVENESS --- */
@media (max-width: 968px) {
    .hamburger {
        display: flex; /* Shown only on mobile layouts */
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%; /* Hidden off-screen by default */
        width: 70%;
        max-width: 300px;
        height: 100vh;
        background: rgba(15, 15, 18, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-left: 1px solid var(--border-color);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1005;
    }

    .nav-links.open {
        right: 0; /* Slides into view */
    }

    /* --- ANIMATE HAMBURGER TO "X" --- */
    .hamburger.open .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
        background-color: var(--orange);
    }

    .hamburger.open .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.open .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
        background-color: var(--orange);
    }
}
/* Fix blurry parallax scaling on mobile devices */
@media (max-width: 968px) {
    .parallax-window {
        background-attachment: scroll !important;
        background-position: center center;
    }
}
@media (max-width: 768px) {
    /* Hide the decorative image/video columns in standard sections */
  
    .booking.system {
        display: none !important;
    }
}
@media (max-width: 768px) {
    /* Give sections room to breathe so they don't look like a wall of text */
    .camera-specs {
        padding: 40px 8% !important;
        gap: 1.5rem !important;
    }

    /* Fix button clustering */
    .camera-text div[style*="display: flex"] {
        flex-direction: column !important; /* Stack buttons vertically instead of jamming them side-by-side */
        gap: 12px !important;
        width: 100%;
    }

    /* Make buttons full-width on mobile for easier thumb-tapping */
    .camera-text .btn {
        width: 100%;
        text-align: center;
        padding: 14px 20px !important;
        font-size: 0.95rem !important;
    }
}