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

/* Video and Image Styling for Hero Background */
.sector-hero-image,
.sector-hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 0;
}

.sector-hero-image.active,
.sector-hero-video.active {
    opacity: 1;
    z-index: 0;
}

/* Ensure text overlay stays above videos */
.sector-hero-overlay {
    z-index: 2 !important;
}

/* =================== NAMED VIDEO POSITIONING CLASSES =================== */

/* ROW (Right of Way) Page Videos - Individual positioning by name */
.sector-hero-video.video-oil-pump-facility-reverse,
.sector-hero-image.image-oil-pump-facility-reverse {
  object-position: center 40%; /* Oil pump facility reverse - engineer meeting landowner */
}

.sector-hero-video.video-oil-process-facility,
.sector-hero-image.image-oil-process-facility {
  object-position: center 30%; /* Oil process facility - road shot */
}

.sector-hero-video.video-oil-facility2,
.sector-hero-image.image-oil-facility2 {
  object-position: center 35%; /* Oil facility 2 - tower color */
}

/* =================== RESPONSIVE ADJUSTMENTS FOR ROW PAGE =================== */

/* Tablet adjustments */
@media (max-width: 768px) {
  .sector-hero-video[class*="video-"],
  .sector-hero-image[class*="image-"] {
    object-position: center 45% !important;
  }
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .sector-hero-video[class*="video-"],
  .sector-hero-image[class*="image-"] {
    object-position: center 50% !important;
  }
}

/* Legacy nth-child positioning - kept for fallback */
.hero-background-container img:nth-child(1),
.hero-background-container video:nth-child(1) { 
    object-position: center 40%; /* First media (oil-pump-facility-reverse/engineer meeting landowner) */
}

.hero-background-container img:nth-child(2),
.hero-background-container video:nth-child(2),
.hero-background-container img:nth-child(3),
.hero-background-container video:nth-child(3) { 
    object-position: center 25%; /* Second/Third media (oil-process-facility/road-shot) */
}

.hero-background-container img:nth-child(4),
.hero-background-container video:nth-child(4),
.hero-background-container img:nth-child(5),
.hero-background-container video:nth-child(5) { 
    object-position: center 30%; /* Fourth/Fifth media (oil-facility2/tower-color) */
}

.hero-background-container img:nth-child(6),
.hero-background-container video:nth-child(6) { 
    object-position: center 30%; /* Sixth media */
}

/* ROW Services Styles */
.row-services {
    background-color: #f8f9fa;
    padding: 60px 0;
}

.service-box {
    background-color: #194164;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-box:hover {
    /* transform: translateY(-5px); */
    /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); */
}

.service-title {
    color: #F8B36A;
    font-size: 2.25rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.service-icon {
    width: 80px;
    height: 80px;
    margin: 15px 0 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-icon i {
    font-size: 4rem;
    color: #FFFFFF;
}

.service-description {
    color: #FFFFFF;
    font-size: 1.75rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 767px) {
    .service-box {
        margin-bottom: 20px;
    }
}