/* 
   BitSafariX Section Width Increase
   Creating fuller, more immersive layout
*/

/* Increase container width */
.container {
    width: 100%;
    max-width: 1400px; /* Increased from 1200px */
    margin: 0 auto;
    padding: 0 2rem;
}

/* Adjust section padding for better spacing */
section {
    padding: 6rem 0; /* Increased from 5rem */
}

/* Full-width sections for specific areas */
.hero,
.testimonials,
.contact,
footer {
    width: 100%;
    max-width: 100%;
}

/* Adjust hero height for better proportions */
.hero {
    min-height: 750px; /* Increased from 700px */
}

/* Adjust services grid for wider layout */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Increased from 300px */
    gap: 2.5rem; /* Increased from 2rem */
}

/* Adjust why-kenya section for wider layout */
.why-kenya-content {
    display: flex;
    align-items: center;
    gap: 5rem; /* Increased from 4rem */
}

/* Adjust steps container for wider layout */
.steps-container {
    max-width: 1100px; /* Increased from 900px */
    margin: 0 auto 4rem;
}

/* Adjust team slider for wider layout */
.team-slider {
    max-width: 1200px; /* Increased from 1000px */
}

/* Adjust testimonial slider for wider layout */
.testimonial-slider {
    max-width: 1000px; /* Increased from 800px */
}

/* Adjust contact container for wider layout */
.contact-container {
    display: flex;
    gap: 5rem; /* Increased from 4rem */
}

/* Adjust footer content for wider layout */
.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 3.5rem; /* Increased from 3rem */
    padding-bottom: 3.5rem; /* Increased from 3rem */
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .container {
        max-width: 1200px;
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 100%;
        padding: 0 3rem;
    }
    
    section {
        padding: 5rem 0;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 2rem;
    }
    
    section {
        padding: 4rem 0;
    }
}

@media (max-width: 576px) {
    .container {
        padding: 0 1.5rem;
    }
    
    section {
        padding: 3rem 0;
    }
}