/* DeoFitness Spacing Optimization CSS
   Add this to your main.css file or create a new CSS file and include it after main.css
   This will reduce excessive padding while maintaining design integrity */

/* 1. OPTIMIZED SECTION SPACING */
.df-section {
    padding: var(--df-spacing-lg) 0 !important; /* Reduced from xxl (4rem) to lg (2rem) */
}

/* 2. HERO SECTION OPTIMIZATION */
.df-hero-section {
    height: 85vh !important; /* Reduced from 100vh to 85vh */
    min-height: 600px !important;
    padding: 80px 0 var(--df-spacing-lg) !important; /* Reduced top padding */
}

.df-hero-section__text-content {
    margin-bottom: var(--df-spacing-md) !important; /* Reduced bottom margin */
}

.df-hero-badge {
    margin-bottom: var(--df-spacing-md) !important; /* Reduced from lg */
}

.df-hero-section__title {
    margin-bottom: var(--df-spacing-md) !important; /* Reduced from lg */
}

.df-hero-section__subtitle {
    margin-bottom: var(--df-spacing-lg) !important; /* Optimized spacing */
}

.df-hero-section__cta-group {
    margin-bottom: var(--df-spacing-lg) !important; /* Reduced spacing */
}

.df-hero-section__trust-indicators {
    margin-top: var(--df-spacing-md) !important; /* Reduced from lg */
}

/* 3. ABOUT SECTION OPTIMIZATION */
.df-about-section {
    padding: var(--df-spacing-lg) 0 !important; /* More compact */
}

.df-section-header {
    margin-bottom: var(--df-spacing-lg) !important; /* Reduced from xl */
}

.df-section-badge {
    margin-bottom: var(--df-spacing-sm) !important; /* Reduced spacing */
}

.df-section-header__title {
    margin-bottom: var(--df-spacing-md) !important; /* Reduced spacing */
}

/* 4. SERVICES SECTION OPTIMIZATION */
.df-services-section {
    padding: var(--df-spacing-lg) 0 !important; /* More compact */
}

.df-services-grid {
    margin-top: var(--df-spacing-lg) !important; /* Reduced from xl */
    gap: var(--df-spacing-lg) !important; /* Reduced grid gap */
}

/* 5. TRANSFORMATIONS SECTION OPTIMIZATION */
.df-transformations-section {
    padding: var(--df-spacing-lg) 0 !important; /* More compact */
}

.df-bento-grid {
    margin-top: var(--df-spacing-lg) !important; /* Reduced from xl */
    gap: var(--df-spacing-lg) !important; /* Reduced grid gap */
}

.df-transformation-card__content {
    padding: var(--df-spacing-md) !important; /* Reduced internal padding */
}

/* 6. FAQ SECTION OPTIMIZATION */
.df-faq-section {
    padding: var(--df-spacing-lg) 0 !important; /* More compact */
}

.df-faq-accordion {
    margin-top: var(--df-spacing-lg) !important; /* Reduced from xl */
    gap: var(--df-spacing-sm) !important; /* Reduced gap between items */
}

.df-faq-accordion__trigger {
    padding: var(--df-spacing-md) var(--df-spacing-lg) !important; /* Reduced vertical padding */
}

.df-faq-accordion__panel p {
    padding: var(--df-spacing-sm) var(--df-spacing-lg) var(--df-spacing-md) !important; /* Reduced padding */
}

/* 7. CONTACT SECTION OPTIMIZATION */
.df-contact-section {
    padding: var(--df-spacing-lg) 0 !important; /* More compact */
}

.df-contact-section__grid {
    gap: var(--df-spacing-lg) !important; /* Reduced from xxl */
    margin-top: var(--df-spacing-lg) !important; /* Reduced top margin */
}

.df-contact-items {
    margin-top: var(--df-spacing-md) !important; /* Reduced from xl */
}

.df-contact-item {
    margin-bottom: var(--df-spacing-md) !important; /* Reduced from lg */
    padding: var(--df-spacing-sm) var(--df-spacing-md) !important; /* Reduced padding */
}

.df-contact-form {
    padding: var(--df-spacing-lg) !important; /* Reduced from xl */
}

.df-form-grid {
    gap: var(--df-spacing-sm) !important; /* Reduced gap */
}

.df-form-group {
    margin-bottom: var(--df-spacing-sm) !important; /* Reduced spacing */
}

/* 8. FOOTER OPTIMIZATION */
.df-site-footer {
    padding: var(--df-spacing-lg) 0 var(--df-spacing-md) !important; /* Reduced from xxl */
}

.df-site-footer__grid {
    gap: var(--df-spacing-lg) !important; /* Reduced from xxl */
    padding-bottom: var(--df-spacing-md) !important; /* Reduced from xl */
}

.df-social-links {
    margin-top: var(--df-spacing-md) !important; /* Reduced from lg */
}

/* 9. PAGE HEADER OPTIMIZATION (for other pages) */
.df-page-header {
    padding: var(--df-spacing-xl) 0 var(--df-spacing-lg) !important; /* Reduced from xxxl and xxl */
}

.df-page-header__title {
    margin-bottom: var(--df-spacing-md) !important; /* Reduced from lg */
}

/* 10. MOBILE RESPONSIVENESS ADJUSTMENTS */
@media (max-width: 768px) {
    .df-section {
        padding: var(--df-spacing-md) 0 !important; /* Even more compact on mobile */
    }
    
    .df-hero-section {
        height: auto !important;
        min-height: 70vh !important;
        padding: 100px 0 var(--df-spacing-md) !important; /* Reduced mobile padding */
    }
    
    .df-contact-section__grid {
        gap: var(--df-spacing-md) !important; /* Reduced mobile gap */
    }
    
    .df-bento-grid,
    .df-services-grid {
        gap: var(--df-spacing-md) !important; /* Reduced mobile grid gaps */
    }
    
    .df-site-footer {
        padding: var(--df-spacing-md) 0 !important; /* More compact footer on mobile */
    }
    
    .df-site-footer__grid {
        gap: var(--df-spacing-md) !important; /* Reduced mobile footer gap */
    }
}

/* 11. SPECIFIC COMPONENT OPTIMIZATIONS */

/* Hero Trust Indicators */
.df-trust-item {
    padding: var(--df-spacing-xs) var(--df-spacing-sm) !important; /* Reduced padding */
}

/* Service Cards */
.df-service-card {
    padding: var(--df-spacing-lg) !important; /* Reduced from xl */
}

.df-service-card__content {
    margin-top: var(--df-spacing-md) !important; /* Reduced spacing */
}

/* Achievement Cards */
.df-achievement-card {
    padding: var(--df-spacing-md) !important; /* Reduced internal padding */
    margin-bottom: var(--df-spacing-sm) !important; /* Reduced bottom margin */
}

/* Buttons */
.df-button {
    margin: var(--df-spacing-xs) !important; /* Reduced button margins */
}

.df-button--large {
    padding: var(--df-spacing-sm) var(--df-spacing-lg) !important; /* Optimized large button padding */
}

/* Text Elements */
p {
    margin-bottom: var(--df-spacing-sm) !important; /* Reduced paragraph spacing */
}

h2, h3, h4 {
    margin-bottom: var(--df-spacing-sm) !important; /* Reduced heading bottom margins */
}

/* 12. LAYOUT CONTAINER OPTIMIZATION */
.df-container {
    padding: 0 var(--df-spacing-md) !important; /* Optimized container padding */
}

@media (max-width: 768px) {
    .df-container {
        padding: 0 var(--df-spacing-sm) !important; /* More compact mobile container */
    }
}

/* 13. FINAL VISUAL ADJUSTMENTS */

/* Ensure proper visual hierarchy is maintained */
.df-section + .df-section {
    border-top: 1px solid rgba(0, 0, 0, 0.05); /* Add subtle section separators */
}

/* Maintain breathing room for key elements */
.df-hero-section__image-cards {
    margin-top: var(--df-spacing-md) !important; /* Ensure hero images don't get too cramped */
}

/* Preserve important call-to-action spacing */
.df-button--primary {
    margin: var(--df-spacing-sm) var(--df-spacing-xs) !important; /* Maintain CTA button spacing */
}

/* END OF OPTIMIZATION CSS */