/* Section reordering using CSS flexbox order property */

/* Make root a flex container */
body #root {
    display: flex !important;
    flex-direction: column !important;
}

/* Reorder sections:
   Original order: Hero, Clients, Services, Experiences, About, Projects
   Desired order: Hero, Clients, About, Projects, Services, Experiences
*/

/* Hero Section - stays at position 1 */
body #root > div:nth-child(1), body #root > section:nth-child(1) {
    order: 1 !important;
}

/* Client Logos - stays at position 2 */
body #root > div:nth-child(2), body #root > section:nth-child(2) {
    order: 2 !important;
}

/* Services - move from position 3 to position 5 */
body #root > div:nth-child(3), body #root > section:nth-child(3), body #root > section#services {
    order: 5 !important;
}

/* Our Experiences - move from position 4 to position 6 */
body #root > div:nth-child(4), body #root > section:nth-child(4), body #root > section#experiences {
    order: 6 !important;
}

/* About Us - move from position 5 to position 3 */
body #root > div:nth-child(5), body #root > section:nth-child(5), body #root > section#about {
    order: 3 !important;
}

/* Featured Projects - move from position 6 to position 4 */
body #root > div:nth-child(6), body #root > section:nth-child(6), body #root > section#portfolio {
    order: 4 !important;
}

/* Contact and any other sections */
#root > div:nth-child(7) {
    order: 7 !important;
}

#root > div:nth-child(n+8) {
    order: 8 !important;
}