/* Scuttlebutt Drone Tech Style */
:root {
  --farm-green: #2e4a3e; /* Consistent with Scuttlebutt Farm */
  --drone-blue: #00edff; /* High-tech accent color */
  --slate-gray: #1a1a1b; /* Professional background */
  --text-light: #f4f4f4;
}

body { font-family: 'Inter', sans-serif; line-height: 1.6; color: var(--slate-gray); margin: 0; }

.tech-header { 
  background: var(--slate-gray); 
  color: var(--drone-blue); 
  padding: 1rem; 
  border-bottom: 2px solid var(--drone-blue);
  display: flex; justify-content: space-between; align-items: center;
}

.hero-section {
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('assets/images/hero-drone-1600x900.jpg');
  background-size: cover; height: 60vh; color: white;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
}

.btn-primary {
  background: var(--drone-blue); color: var(--slate-gray);
  padding: 12px 24px; border: none; font-weight: bold; text-decoration: none; border-radius: 4px;
}

.hero-section {
    position: relative;
    height: 60vh; /* Adjust height as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: white; /* Ensures text is visible over video */
    text-align: center;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.hero-content {
    position: relative;
    z-index: 2; /* Sits on top of the video */
    background: rgba(0, 0, 0, 0.4); /* Optional: Darkens video slightly for text clarity */
    padding: 2rem;
    border-radius: 10px;
}
.image-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
            margin: 2rem 0;
        }
        .gallery-item {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 4px;
            border: 2px solid #ddd;
            transition: transform 0.2s, border-color 0.2s;
            cursor: pointer;
        }
        .gallery-item:hover {
            transform: scale(1.05);
            border-color: #00edff;
        }
        .gallery-caption {
            font-size: 0.8rem;
            color: #666;
            margin-bottom: 1rem;
            text-align: center;
        }