/* Park Features Section Styles */
.park-features-section {
    margin: 4rem 0;
    padding: 0 6rem; /* Same 6rem margin as park aerial section */
}

.park-features-container {
    position: relative;
    width: 100%;
}

.features-row {
    display: flex;
    width: 100%;
    justify-content: space-between; /* Replace gap with space-between */
}

.left-feature-container {
    width: calc(50% - 8px); /* Precise width calculation */
}

.right-features-container {
    width: 50%; /* Even width to align with above section */
    display: flex;
    flex-direction: column;
    gap: 16px; /* Keep gap between stacked images */
}

.top-feature-container {
    width: 100%;
    margin-top: 20px; /* Added top margin to first right image */
}

.bottom-feature-container {
    width: 100%;
}

.full-height-feature-image {
    width: 100%;
    height: 95vh; /* Increased from 80vh to 95vh */
    object-fit: cover;
    display: block;
    border-radius: 5px;
}

.half-height-feature-image {
    width: 100%;
    height: calc(47.5vh - 8px); /* Increased from 40vh to 47.5vh */
    object-fit: cover;
    display: block;
    border-radius: 5px;
}

.feature-caption {
    margin-top: 0.75rem;
    margin-bottom: 1rem;
}

.feature-caption p {
    margin: 0;
    color:black;
}

/* Responsive Styles for both sections */
@media (max-width: 1200px) {
    .park-features-section {
        padding: 0 4rem;
    }
    
    .full-height-feature-image {
        height: 90vh; /* Increased from 75vh to 90vh */
    }
    
    .half-height-feature-image {
        height: calc(45vh - 8px); /* Increased from 37.5vh to 45vh */
    }
}

@media (max-width: 991px) {
    .full-height-feature-image {
        height: 85vh; /* Increased from 70vh to 85vh */
    }
    
    .half-height-feature-image {
        height: calc(42.5vh - 8px); /* Increased from 35vh to 42.5vh */
    }
}

@media (max-width: 768px) {
    .park-features-section {
        padding: 0 2rem;
        margin: 3rem 0;
    }
    .features-row {
        flex-direction: column;
    }
    
    .left-feature-container,
    .right-features-container {
        width: 100%;
        margin-bottom: 16px;
    }
    
    .left-feature-container {
        margin-bottom: 16px;
    }
    
    .top-feature-container {
        margin-top: 0; /* Remove top margin on smaller screens */
        margin-bottom: 16px;
    }
    
    .full-height-feature-image,
    .half-height-feature-image {
        height: 60vh; /* Decreased from 75vh for better mobile viewing */
    }

}

@media (max-width: 480px) {
 .park-features-section {
        padding: 0 1rem;
        margin: 2rem 0;
    }
    
  
    .full-height-feature-image,
    .half-height-feature-image {
        height: 45vh; /* Decreased from 65vh for better mobile viewing */
    }
    
   
}