/*
* BloomForte Section Spacing
* Adds consistent 100px top padding between sections
* Ensures proper visual separation and breathing room
*/

/* Main Sections - Add top padding */
section:not(:first-child) {
    padding-top: 100px;
}

/* Specific section classes */
.aboutSection03,
.serviceSection03,
.companySec01,
.appoinmentSection03,
.bloomforte-hero-cta,
.chooseSection03,
.blogSectiont03,
.ctaSection,
.ctaSection02,
.callToAction,
.portfolioSection,
.contactSection,
.pageBannerSection {
    padding-top: 100px;
}

/* Exception: First section after header shouldn't have extra padding */
.slider_03 + section,
.pageBannerSection + section {
    padding-top: 100px;
}

/* Special case: Slider sections don't need top padding */
.slider_03 {
    padding-top: 0 !important;
}

/* Page banner sections */
.pageBannerSection {
    padding-top: 100px;
    margin-top: 0;
}

/* Service detail sections */
.serviceDetailsSection {
    padding-top: 100px;
}

/* Portfolio sections */
.portfolioDetailsSection {
    padding-top: 100px;
}

/* Blog sections */
.blogDetailsSection,
.blogSection {
    padding-top: 100px;
}

/* Contact sections */
.contactInfoSection,
.mapSection {
    padding-top: 100px;
}

/* About sections */
.aboutDetailsSection,
.teamSection,
.factsSection {
    padding-top: 100px;
}

/* Admin sections */
.adminSection {
    padding-top: 100px;
}

/* CTA sections - ensure they have proper spacing */
.ctaSection,
.ctaSection02 {
    padding-top: 100px;
    padding-bottom: 50px;
}

/* Our new BloomForte Hero CTA */
.bloomforte-hero-cta {
    padding-top: 100px;
    padding-bottom: 80px;
}

/* Footer - no top padding needed as it's at the bottom */
footer {
    padding-top: 0;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    section:not(:first-child),
    .aboutSection03,
    .serviceSection03,
    .companySec01,
    .appoinmentSection03,
    .bloomforte-hero-cta,
    .chooseSection03,
    .blogSectiont03,
    .ctaSection,
    .ctaSection02,
    .callToAction,
    .portfolioSection,
    .contactSection,
    .pageBannerSection,
    .serviceDetailsSection,
    .portfolioDetailsSection,
    .blogDetailsSection,
    .blogSection,
    .contactInfoSection,
    .mapSection,
    .aboutDetailsSection,
    .teamSection,
    .factsSection,
    .adminSection {
        padding-top: 80px;
    }
    
    .bloomforte-hero-cta {
        padding-top: 80px;
        padding-bottom: 60px;
    }
}

@media (max-width: 767px) {
    section:not(:first-child),
    .aboutSection03,
    .serviceSection03,
    .companySec01,
    .appoinmentSection03,
    .bloomforte-hero-cta,
    .chooseSection03,
    .blogSectiont03,
    .ctaSection,
    .ctaSection02,
    .callToAction,
    .portfolioSection,
    .contactSection,
    .pageBannerSection,
    .serviceDetailsSection,
    .portfolioDetailsSection,
    .blogDetailsSection,
    .blogSection,
    .contactInfoSection,
    .mapSection,
    .aboutDetailsSection,
    .teamSection,
    .factsSection,
    .adminSection {
        padding-top: 60px;
    }
    
    .bloomforte-hero-cta {
        padding-top: 60px;
        padding-bottom: 50px;
    }
}

@media (max-width: 480px) {
    section:not(:first-child),
    .aboutSection03,
    .serviceSection03,
    .companySec01,
    .appoinmentSection03,
    .bloomforte-hero-cta,
    .chooseSection03,
    .blogSectiont03,
    .ctaSection,
    .ctaSection02,
    .callToAction,
    .portfolioSection,
    .contactSection,
    .pageBannerSection,
    .serviceDetailsSection,
    .portfolioDetailsSection,
    .blogDetailsSection,
    .blogSection,
    .contactInfoSection,
    .mapSection,
    .aboutDetailsSection,
    .teamSection,
    .factsSection,
    .adminSection {
        padding-top: 50px;
    }
    
    .bloomforte-hero-cta {
        padding-top: 50px;
        padding-bottom: 40px;
    }
}

/* Ensure proper spacing doesn't affect nested elements */
section section {
    padding-top: 0;
}

/* Special handling for container spacing */
.container + .container,
.largeContainer + .largeContainer {
    margin-top: 0;
}

/* Override any conflicting styles */
.no-top-padding {
    padding-top: 0 !important;
}

/* Add a utility class for extra spacing when needed */
.extra-top-spacing {
    padding-top: 150px !important;
}

@media (max-width: 767px) {
    .extra-top-spacing {
        padding-top: 100px !important;
    }
}