/*
 * Bhavyam Infotech - Professional Spacing System
 * Based on 8px Grid System for Industry Standard Design
 *
 * Spacing Scale (8px base):
 * --space-1: 8px    --space-2: 16px   --space-3: 24px
 * --space-4: 32px   --space-5: 40px   --space-6: 48px
 * --space-7: 56px   --space-8: 64px   --space-9: 72px
 * --space-10: 80px  --space-11: 88px  --space-12: 96px
 * --space-13: 104px --space-14: 112px --space-15: 120px
 *
 * Section Padding Pattern:
 * Desktop (1400px+): 108px
 * Large Desktop (1200-1399px): 90px
 * Tablet (992-1199px): 80px
 * Small Tablet (768-991px): 64px
 * Mobile (576-767px): 56px
 * Small Mobile (<576px): 48px
 */

/* ========================================
   1. CSS CUSTOM PROPERTIES - SPACING SCALE
   ======================================== */
:root {
    /* 8px Grid Spacing Scale */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;
    --space-7: 56px;
    --space-8: 64px;
    --space-9: 72px;
    --space-10: 80px;
    --space-11: 88px;
    --space-12: 96px;
    --space-13: 104px;
    --space-14: 112px;
    --space-15: 120px;

    /* Section Padding - Desktop (10% reduced) */
    --section-padding-desktop: 108px;
    --section-padding-lg: 90px;
    --section-padding-md: 80px;
    --section-padding-sm: 64px;
    --section-padding-xs: 56px;
    --section-padding-xxs: 48px;

    /* Card Padding Scale */
    --card-padding-lg: 40px;
    --card-padding-md: 32px;
    --card-padding-sm: 24px;
    --card-padding-xs: 20px;
    --card-padding-patch: 5px;

    /* Grid Gaps */
    --grid-gap-lg: 30px;
    --grid-gap-md: 24px;
    --grid-gap-sm: 20px;
    --grid-gap-xs: 16px;

    /* Container Gutters */
    --container-gutter: 15px;
}

/* ========================================
   1.5 CRITICAL: FULL-WIDTH RESET
   Removes all horizontal white space gaps
   ======================================== */
html {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Main wrapper - full viewport width */
.tj-main-wrapper,
main {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* All sections should be full viewport width */
section,
[class*="tj-"][class*="-section"],
.tj-hero-section,
.tj-hero-section-two,
.tj-hero-section-three,
.tj-about-section,
.tj-about-section-two,
.tj-service-section,
.tj-service-section-two,
.tj-service-section-three,
.tj-counter-section,
.tj-testimonial-section,
.tj-cta-section,
.tj-cta-section-two,
.tj-contact-cta-section,
.tj-footer-section,
.tj-brand-section,
.tj-team-section,
.tj-blog-section,
.tj-faq-section,
.tj-choose-us-section,
.tj-mission-vision-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Hero slider specific - ensure full width */
.hero-slider,
.swiper,
.swiper-wrapper,
.swiper-slide,
.tj-hero-item-three {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Footer full width */
.tj-footer-section,
footer {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Remove any scrollbar-induced layout shift */
@supports (scrollbar-gutter: stable) {
    html {
        scrollbar-gutter: stable;
    }
}

/* ========================================
   1.6 EXTRA FIXES FOR WHITE SPACE GAPS
   ======================================== */
/* Remove any potential borders or shadows on body */
body {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Ensure all direct children of body span full width */
body > * {
    max-width: 100% !important;
}

/* Fix potential mouse cursor elements taking space */
.mouseCursor {
    pointer-events: none !important;
    position: fixed !important;
}

/* Preloader should not affect layout */
.preloader {
    position: fixed !important;
}

/* Negative margin fix if needed to eliminate gaps */
.tj-main-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure header doesn't cause horizontal shift */
.tj-header-area,
header {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* ========================================
   2. GLOBAL SECTION PADDING FIXES
   ======================================== */

/* Desktop (1400px+) - 108px symmetrical padding */
.tj-service-section,
.tj-service-section-two,
.tj-service-section-three,
.tj-about-section,
.tj-about-section-two,
.tj-counter-section,
.tj-testimonial-section,
.tj-blog-section,
.tj-blog-section-wrap,
.tj-team-section,
.tj-contact-section,
.tj-faq-section,
.tj-feature-section,
.tj-feature-section-two,
.tj-brand-section,
.tj-cta-section,
.tj-cta-section-two,
.tj-mission-vision-section,
.tj-portfolio-section,
.tj-pricing-section,
.tj-choose-us-section,
.tj-why-choose-section,
.tj-industries-section,
.tj-process-section,
.tj-values-section,
[class*="tj-"][class*="-section"] {
    /*padding-top: var(--section-padding-desktop) !important;
    padding-bottom: var(--section-padding-desktop) !important;*/
}

/* Large Desktop (1200-1399px) - 90px */
@media (max-width: 1399px) and (min-width: 1200px) {
    .tj-service-section,
    .tj-service-section-two,
    .tj-service-section-three,
    .tj-about-section,
    .tj-about-section-two,
    .tj-counter-section,
    .tj-testimonial-section,
    .tj-blog-section,
    .tj-blog-section-wrap,
    .tj-team-section,
    .tj-contact-section,
    .tj-faq-section,
    .tj-feature-section,
    .tj-feature-section-two,
    .tj-brand-section,
    .tj-cta-section,
    .tj-cta-section-two,
    .tj-mission-vision-section,
    .tj-portfolio-section,
    .tj-pricing-section,
    .tj-choose-us-section,
    .tj-why-choose-section,
    .tj-industries-section,
    .tj-process-section,
    .tj-values-section,
    [class*="tj-"][class*="-section"] {
        /*padding-top: var(--section-padding-lg) !important;
        padding-bottom: var(--section-padding-lg) !important;*/
    }
}

/* Tablet (992-1199px) - 80px */
@media (max-width: 1199px) and (min-width: 992px) {
    .tj-service-section,
    .tj-service-section-two,
    .tj-service-section-three,
    .tj-about-section,
    .tj-about-section-two,
    .tj-counter-section,
    .tj-testimonial-section,
    .tj-blog-section,
    .tj-blog-section-wrap,
    .tj-team-section,
    .tj-contact-section,
    .tj-faq-section,
    .tj-feature-section,
    .tj-feature-section-two,
    .tj-brand-section,
    .tj-cta-section,
    .tj-cta-section-two,
    .tj-mission-vision-section,
    .tj-portfolio-section,
    .tj-pricing-section,
    .tj-choose-us-section,
    .tj-why-choose-section,
    .tj-industries-section,
    .tj-process-section,
    .tj-values-section,
    [class*="tj-"][class*="-section"] {
        padding-top: var(--section-padding-md) !important;
        padding-bottom: var(--section-padding-md) !important;
    }
}

/* Small Tablet (768-991px) - 64px */
@media (max-width: 991px) and (min-width: 768px) {
    .tj-service-section,
    .tj-service-section-two,
    .tj-service-section-three,
    .tj-about-section,
    .tj-about-section-two,
    .tj-counter-section,
    .tj-testimonial-section,
    .tj-blog-section,
    .tj-blog-section-wrap,
    .tj-team-section,
    .tj-contact-section,
    .tj-faq-section,
    .tj-feature-section,
    .tj-feature-section-two,
    .tj-brand-section,
    .tj-cta-section,
    .tj-cta-section-two,
    .tj-mission-vision-section,
    .tj-portfolio-section,
    .tj-pricing-section,
    .tj-choose-us-section,
    .tj-why-choose-section,
    .tj-industries-section,
    .tj-process-section,
    .tj-values-section,
    [class*="tj-"][class*="-section"] {
        /*padding-top: var(--section-padding-sm) !important;
        padding-bottom: var(--section-padding-sm) !important;*/
    }
}

/* Mobile (576-767px) - 56px */
@media (max-width: 767px) and (min-width: 576px) {
    .tj-service-section,
    .tj-service-section-two,
    .tj-service-section-three,
    .tj-about-section,
    .tj-about-section-two,
    .tj-counter-section,
    .tj-testimonial-section,
    .tj-blog-section,
    .tj-blog-section-wrap,
    .tj-team-section,
    .tj-contact-section,
    .tj-faq-section,
    .tj-feature-section,
    .tj-feature-section-two,
    .tj-brand-section,
    .tj-cta-section,
    .tj-cta-section-two,
    .tj-mission-vision-section,
    .tj-portfolio-section,
    .tj-pricing-section,
    .tj-choose-us-section,
    .tj-why-choose-section,
    .tj-industries-section,
    .tj-process-section,
    .tj-values-section,
    [class*="tj-"][class*="-section"] {
        padding-top: var(--section-padding-xs) !important;
        padding-bottom: var(--section-padding-xs) !important;
    }
}

/* Small Mobile (<576px) - 48px */
@media (max-width: 575px) {
    .tj-service-section,
    .tj-service-section-two,
    .tj-service-section-three,
    .tj-about-section,
    .tj-about-section-two,
    .tj-counter-section,
    .tj-testimonial-section,
    .tj-blog-section,
    .tj-blog-section-wrap,
    .tj-team-section,
    .tj-contact-section,
    .tj-faq-section,
    .tj-feature-section,
    .tj-feature-section-two,
    .tj-brand-section,
    .tj-cta-section,
    .tj-cta-section-two,
    .tj-mission-vision-section,
    .tj-portfolio-section,
    .tj-pricing-section,
    .tj-choose-us-section,
    .tj-why-choose-section,
    .tj-industries-section,
    .tj-process-section,
    .tj-values-section,
    [class*="tj-"][class*="-section"] {
        padding-top: var(--section-padding-xxs) !important;
        padding-bottom: var(--section-padding-xxs) !important;
    }
}

/* ========================================
   3. CTA SECTION SPECIFIC FIXES
   ======================================== */
/* CTA sections need less vertical padding but symmetrical */
.tj-cta-section,
.tj-cta-section-two,
.tj-contact-cta-section {
    padding-top: var(--space-10) !important;  /* 80px */
    padding-bottom: var(--space-10) !important;
}

@media (max-width: 1199px) {
    .tj-cta-section,
    .tj-cta-section-two,
    .tj-contact-cta-section {
        padding-top: var(--space-8) !important;  /* 64px */
        padding-bottom: var(--space-8) !important;
    }
}

@media (max-width: 767px) {
    .tj-cta-section,
    .tj-cta-section-two,
    .tj-contact-cta-section {
        padding-top: var(--space-7) !important;  /* 56px */
        padding-bottom: var(--space-7) !important;
    }
}

/* ========================================
   4. HERO SECTION PADDING FIXES
   ======================================== */
.tj-hero-section,
.tj-hero-section-two,
.tj-hero-section-three,
.hero-slider-section,
[class*="hero-section"] {
    /*padding-top: 160px !important; 
    padding-bottom: var(--section-padding-desktop) !important;*/
}

@media (max-width: 1199px) {
    .tj-hero-section,
    .tj-hero-section-two,
    .tj-hero-section-three,
    .hero-slider-section,
    [class*="hero-section"] {
        padding-top: 140px !important;
        padding-bottom: var(--section-padding-md) !important;
    }
}

@media (max-width: 767px) {
    .tj-hero-section,
    .tj-hero-section-two,
    .tj-hero-section-three,
    .hero-slider-section,
    [class*="hero-section"] {
        padding-top: 120px !important;
        padding-bottom: var(--section-padding-xs) !important;
    }
}

/* ========================================
   5. GRID GAPS - STANDARDIZED ROW/COLUMN SPACING
   ======================================== */

/* All row elements - standard 30px gap */
.row,
[class*="row"] {
    --bs-gutter-x: var(--grid-gap-lg);
    /*--bs-gutter-y: var(--grid-gap-lg);*/
}

/* Section-specific rows with row-gap for vertical spacing */
.tj-service-section .row,
.tj-service-section-two .row,
.tj-service-section-three .row,
.tj-about-section .row,
.tj-about-section-two .row,
.tj-feature-section .row,
.tj-feature-section-two .row,
.tj-team-section .row,
.tj-blog-section .row,
.tj-testimonial-section .row,
.tj-counter-section .row,
.tj-faq-section .row,
.tj-choose-us-section .row,
.tj-why-choose-section .row,
.tj-mission-vision-section .row,
.tj-industries-section .row,
.tj-values-section .row,
.tj-process-section .row,
.tj-contact-section .row,
.tj-contact-info-section .row,
.tj-contact-form-section .row,
.services-list-section .row,
.service-detail-section .row {
    row-gap: var(--grid-gap-lg) !important;  /* 30px */
}

/* Tablet - reduce gap slightly */
@media (max-width: 991px) {
    .tj-service-section .row,
    .tj-service-section-two .row,
    .tj-service-section-three .row,
    .tj-about-section .row,
    .tj-about-section-two .row,
    .tj-feature-section .row,
    .tj-feature-section-two .row,
    .tj-team-section .row,
    .tj-blog-section .row,
    .tj-testimonial-section .row,
    .tj-counter-section .row,
    .tj-faq-section .row,
    .tj-choose-us-section .row,
    .tj-why-choose-section .row,
    .tj-mission-vision-section .row,
    .tj-industries-section .row,
    .tj-values-section .row,
    .tj-process-section .row,
    .tj-contact-section .row,
    .tj-contact-info-section .row,
    .tj-contact-form-section .row,
    .services-list-section .row,
    .service-detail-section .row {
        row-gap: var(--grid-gap-md) !important;  /* 24px */
    }
}

/* Mobile - compact gap */
@media (max-width: 575px) {
    .tj-service-section .row,
    .tj-service-section-two .row,
    .tj-service-section-three .row,
    .tj-about-section .row,
    .tj-about-section-two .row,
    .tj-feature-section .row,
    .tj-feature-section-two .row,
    .tj-team-section .row,
    .tj-blog-section .row,
    .tj-testimonial-section .row,
    .tj-counter-section .row,
    .tj-faq-section .row,
    .tj-choose-us-section .row,
    .tj-why-choose-section .row,
    .tj-mission-vision-section .row,
    .tj-industries-section .row,
    .tj-values-section .row,
    .tj-process-section .row,
    .tj-contact-section .row,
    .tj-contact-info-section .row,
    .tj-contact-form-section .row,
    .services-list-section .row,
    .service-detail-section .row {
        row-gap: var(--grid-gap-sm) !important;  /* 20px */
    }
}

/* ========================================
   6. BOOTSTRAP MARGIN UTILITY OVERRIDE
   ======================================== */
/* Override Bootstrap's mb-* classes to use row-gap instead */
/* This prevents double spacing when row-gap is applied */

[class*="col-"].mb-1,
[class*="col-"].mb-2,
[class*="col-"].mb-3,
[class*="col-"].mb-4,
[class*="col-"].mb-5 {
    margin-bottom: 0 !important;
}

/* Keep margin utilities for non-column elements */
.mb-1:not([class*="col-"]) { margin-bottom: var(--space-1) !important; }
.mb-2:not([class*="col-"]) { margin-bottom: var(--space-2) !important; }
.mb-3:not([class*="col-"]) { margin-bottom: var(--space-3) !important; }
.mb-4:not([class*="col-"]) { margin-bottom: var(--space-4) !important; }
.mb-5:not([class*="col-"]) { margin-bottom: var(--space-6) !important; }

.mt-1:not([class*="col-"]) { margin-top: var(--space-1) !important; }
.mt-2:not([class*="col-"]) { margin-top: var(--space-2) !important; }
.mt-3:not([class*="col-"]) { margin-top: var(--space-3) !important; }
.mt-4:not([class*="col-"]) { margin-top: var(--space-4) !important; }
.mt-5:not([class*="col-"]) { margin-top: var(--space-6) !important; }

/* ========================================
   7. CARD PADDING STANDARDIZATION
   ======================================== */

/* Service Cards - Symmetrical padding */
.service-item,
.service-style-2,
.service-style-3 {
    padding: var(--card-padding-lg) !important;  /* 40px all sides */
}

.service-item .service-content,
.service-style-2 .service-content {
    padding: 0 !important;  /* Remove inner padding, handled by parent */
}

/* Feature Cards */
.feature-item,
.choose-item,
.value-item {
    padding: var(--card-padding-lg) var(--card-padding-md) !important;  /* 40px 32px */
}

/* Blog Cards */
.blog-item,
.blog-style-2,
.blog-style-3 {
    padding: var(--card-padding-sm) !important;  /* 24px */
}

.blog-item .blog-content,
.blog-style-2 .blog-content,
.blog-style-3 .blog-content {
    padding: var(--card-padding-sm) var(--card-padding-xs) !important;  /* 24px 20px */
}

/* Team Cards */
.team-item .team-content {
    padding: var(--card-padding-sm) !important;  /* 24px */
}

/* Counter Items */
.counter-item {
    padding: var(--card-padding-lg) !important;  /* 40px all sides */
}

/* Testimonial Cards */
.testimonial-item,
.testimonial-content {
    padding: var(--card-padding-lg) !important;
}

/* Contact Info Cards */
.contact-info-item {
    padding: var(--card-padding-md) var(--card-padding-sm) !important;  /* 32px 24px */
}

/* Tablet Card Padding */
@media (max-width: 991px) {
    .service-item,
    .service-style-2,
    .service-style-3 {
        padding: var(--card-padding-md) !important;  /* 32px */
    }

    .feature-item,
    .choose-item,
    .value-item {
        padding: var(--card-padding-md) var(--card-padding-sm) !important;  /* 32px 24px */
    }

    .counter-item {
        padding: var(--card-padding-md) !important;  /* 32px */
    }

    .testimonial-item,
    .testimonial-content {
        padding: var(--card-padding-md) !important;  /* 32px */
    }
}

/* Mobile Card Padding */
@media (max-width: 575px) {
    .service-item,
    .service-style-2,
    .service-style-3 {
        padding: var(--card-padding-sm) !important;  /* 24px */
    }

    .feature-item,
    .choose-item,
    .value-item {
        padding: var(--card-padding-sm) var(--card-padding-xs) !important;  /* 24px 20px */
    }

    .blog-item .blog-content,
    .blog-style-2 .blog-content,
    .blog-style-3 .blog-content {
        padding: var(--card-padding-xs) var(--space-2) !important;  /* 20px 16px */
    }

    .counter-item {
        padding: var(--card-padding-sm) !important;  /* 24px */
    }

    .testimonial-item,
    .testimonial-content {
        padding: var(--card-padding-sm) !important;  /* 24px */
    }

    .contact-info-item {
        padding: var(--card-padding-sm) var(--card-padding-xs) !important;  /* 24px 20px */
    }
}

/* ========================================
   8. SECTION HEADING SPACING
   ======================================== */
.sec-heading,
.section-header,
.section-title-wrapper {
    margin-bottom: var(--space-8) !important;  /* 64px */
}

@media (max-width: 991px) {
    .sec-heading,
    .section-header,
    .section-title-wrapper {
        margin-bottom: var(--space-6) !important;  /* 48px */
    }
}

@media (max-width: 575px) {
    .sec-heading,
    .section-header,
    .section-title-wrapper {
        margin-bottom: var(--space-5) !important;  /* 40px */
    }
}

/* ========================================
   9. BUTTON PADDING STANDARDIZATION
   ======================================== */
.tj-primary-btn,
.tj-secondary-btn,
.btn-primary,
.btn-secondary,
.tj-btn,
[class*="btn-"] {
    padding: var(--space-2) var(--space-4) !important;  /* 16px 32px */
}

.tj-primary-btn.btn-sm,
.btn-sm {
    padding: var(--space-1) var(--space-3) !important;  /* 8px 24px */
}

.tj-primary-btn.btn-lg,
.btn-lg {
    padding: var(--space-3) var(--space-5) !important;  /* 24px 40px */
}

/* ========================================
   10. FORM ELEMENT SPACING
   ======================================== */
.form-group,
.form-field {
    margin-bottom: var(--space-3) !important;  /* 24px */
}

.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
    padding: var(--space-2) var(--space-2) !important;  /* 16px */
}

/* ========================================
   11. NAVIGATION SPACING
   ======================================== */
.mega-menu-col {
    padding: var(--space-3) var(--space-2) !important;  /* 24px 16px */
}

.mega-menu-link {
    padding: var(--space-1) var(--space-2) !important;  /* 8px 16px */
    margin-bottom: var(--space-1) !important;  /* 8px */
}

.mega-menu-col-label {
    padding: 0 var(--space-2) var(--space-1) !important;  /* 0 16px 8px */
    margin-bottom: var(--space-1) !important;  /* 8px */
}

/* ========================================
   12. FOOTER SPACING
   ======================================== */
.tj-footer-section {
    padding-top: var(--section-padding-desktop) !important;
    padding-bottom: var(--space-5) !important;  /* 40px */
}

@media (max-width: 991px) {
    .tj-footer-section {
        padding-top: var(--section-padding-md) !important;
        padding-bottom: var(--space-4) !important;  /* 32px */
    }
}

@media (max-width: 575px) {
    .tj-footer-section {
        padding-top: var(--section-padding-xxs) !important;
        padding-bottom: var(--space-3) !important;  /* 24px */
    }
}

.footer-widget {
    margin-bottom: var(--space-5) !important;  /* 40px */
}

@media (max-width: 767px) {
    .footer-widget {
        margin-bottom: var(--space-4) !important;  /* 32px */
    }
}

/* ========================================
   13. ACCORDION / FAQ SPACING
   ======================================== */
.accordion-button {
    padding: var(--space-3) var(--space-6) var(--space-3) var(--space-3) !important;  /* 24px 48px 24px 24px */
}

.accordion-body {
    padding: 0 var(--space-3) var(--space-3) !important;  /* 0 24px 24px */
}

.accordion-item {
    margin-bottom: var(--space-2) !important;  /* 16px */
}

/* ========================================
   14. LIST SPACING
   ======================================== */
.service-features li,
.feature-list li,
.benefits-list li,
ul.list-style li {
    margin-bottom: var(--space-2) !important;  /* 16px */
    padding-left: var(--space-4) !important;  /* 32px */
}

/* ========================================
   15. ICON SPACING
   ======================================== */
.service-icon,
.feature-icon,
.choose-icon,
.counter-icon,
.value-icon {
    margin-bottom: var(--space-3) !important;  /* 24px */
}

@media (max-width: 575px) {
    .service-icon,
    .feature-icon,
    .choose-icon,
    .counter-icon,
    .value-icon {
        margin-bottom: var(--space-2) !important;  /* 16px */
    }
}

/* ========================================
   16. CARD INTERNAL ELEMENT SPACING
   ======================================== */
/* Title spacing within cards */
.service-item .title,
.feature-item .title,
.choose-item .title,
.blog-item .title,
.team-item .title,
.counter-item .title {
    margin-bottom: var(--space-2) !important;  /* 16px */
}

/* Description spacing within cards */
.service-item .desc,
.feature-item .desc,
.choose-item .desc,
.blog-item .desc {
    margin-bottom: var(--space-3) !important;  /* 24px */
}

.service-item .desc p:last-child,
.feature-item .desc p:last-child,
.choose-item .desc p:last-child {
    margin-bottom: 0 !important;
}

/* ========================================
   17. PAGE-SPECIFIC SECTION OVERRIDES
   ======================================== */

/* Service Detail Page */
.service-detail-hero {
    padding-top: 160px !important;
    padding-bottom: var(--space-10) !important;  /* 80px */
}

@media (max-width: 991px) {
    .service-detail-hero {
        padding-top: 140px !important;
        padding-bottom: var(--space-8) !important;  /* 64px */
    }
}

/* Contact Page Info Section */
.tj-contact-info-section {
    padding-top: var(--section-padding-desktop) !important;
    padding-bottom: var(--space-10) !important;  /* 80px - less for transition to form */
}

@media (max-width: 991px) {
    .tj-contact-info-section {
        padding-top: var(--section-padding-md) !important;
        padding-bottom: var(--space-8) !important;
    }
}

/* Contact Form Section */
.tj-contact-form-section {
    padding-top: var(--space-10) !important;  /* 80px - continues from info section */
    padding-bottom: var(--section-padding-desktop) !important;
}

@media (max-width: 991px) {
    .tj-contact-form-section {
        padding-top: var(--space-8) !important;
        padding-bottom: var(--section-padding-md) !important;
    }
}

/* ========================================
   18. ABOUT PAGE SPECIFIC FIXES
   ======================================== */
.about-wrapper,
.about-wrapper-two {
    gap: var(--grid-gap-lg) !important;  /* 30px */
}

@media (max-width: 991px) {
    .about-wrapper,
    .about-wrapper-two {
        gap: var(--grid-gap-md) !important;  /* 24px */
    }
}

/* Column gaps in about sections */
.about-wrapper-two {
    column-gap: var(--space-10) !important;  /* 80px */
}

@media (max-width: 1399px) {
    .about-wrapper-two {
        column-gap: var(--space-8) !important;  /* 64px */
    }
}

@media (max-width: 1199px) {
    .about-wrapper-two {
        column-gap: var(--space-5) !important;  /* 40px */
    }
}

@media (max-width: 991px) {
    .about-wrapper-two {
        column-gap: var(--grid-gap-lg) !important;  /* 30px */
    }
}

/* ========================================
   19. SERVICES INDEX PAGE FIXES
   ======================================== */
.services-grid .row {
    row-gap: var(--grid-gap-lg) !important;
}

.services-grid [class*="col-"] {
    margin-bottom: 0 !important;  /* Use row-gap instead */
}

/* ========================================
   20. TESTIMONIAL SLIDER SPACING
   ======================================== */
.testimonial-slider .swiper-slide {
    padding: var(--space-2) !important;  /* 16px */
}

.swiper-pagination {
    margin-top: var(--space-5) !important;  /* 40px */
}

/* ========================================
   21. BREADCRUMB SPACING - MOBILE FIX
   ======================================== */
/* Desktop */
section.tj-breadcrumb-section,
.tj-breadcrumb-section,
.breadcrumb-section,
.page-header {
    padding: 180px 0 80px !important;
    margin-top: 0 !important;
}

/* Tablet */
@media (max-width: 991px) {
    section.tj-breadcrumb-section,
    .tj-breadcrumb-section,
    .breadcrumb-section,
    .page-header {
        padding: 140px 0 60px !important;
        margin-top: 0 !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    section.tj-breadcrumb-section,
    .tj-breadcrumb-section,
    .breadcrumb-section,
    .page-header {
        padding: 40px 0 40px !important;
        margin-top: 75px !important;
    }
}

/* Small Mobile */
@media (max-width: 575px) {
    section.tj-breadcrumb-section,
    .tj-breadcrumb-section,
    .breadcrumb-section,
    .page-header {
        padding: 35px 0 35px !important;
        margin-top: 70px !important;
    }

    .breadcrumb-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
}

/* ========================================
   22. FULL-WIDTH SECTION FIXES
   ======================================== */
/* Ensure full-width sections extend to viewport edges */
.tj-hero-section,
.tj-hero-section-two,
.tj-hero-section-three,
.hero-slider-section,
.tj-cta-section,
.tj-cta-section-two,
.tj-contact-cta-section,
.tj-footer-section,
.tj-brand-section,
[class*="hero-section"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100vw !important;
    width: 100% !important;
}

/* Main wrapper should have no horizontal constraints */
.tj-main-wrapper,
main,
body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ========================================
   23. CONTAINER WIDTH PRESERVATION
   ======================================== */
/* Keep Bootstrap container behavior intact - don't override */
/* Only ensure containers don't cause overflow */
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    max-width: 100% !important;
}

/* container-fluid should always be full width */
.container-fluid {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 100% !important;
}

/* ========================================
   24. CARD BOTTOM MARGIN REMOVAL
   ======================================== */
/* Since we're using row-gap, remove all card bottom margins */
.service-item,
.service-style-2,
.service-style-3,
.feature-item,
.choose-item,
.value-item,
.blog-item,
.blog-style-2,
.blog-style-3,
.team-item,
.counter-item,
.testimonial-item,
.contact-info-item {
    margin-bottom: 0 !important;
}

/* ========================================
   25. SPECIAL COMPONENTS SPACING
   ======================================== */

/* Mission/Vision Cards */
.mission-card,
.vision-card {
    padding: var(--card-padding-lg) !important;
}

@media (max-width: 991px) {
    .mission-card,
    .vision-card {
        padding: var(--card-padding-md) !important;
    }
}

@media (max-width: 575px) {
    .mission-card,
    .vision-card {
        padding: var(--card-padding-sm) !important;
    }
}

/* Process Steps */
.process-item,
.approach-item {
    padding: var(--card-padding-md) !important;
    margin-bottom: 0 !important;
}

/* Industry Cards */
.industry-item {
    padding: var(--card-padding-sm) !important;
    margin-bottom: 0 !important;
}

/* ========================================
   26. GLASSMORPHISM CARD SPACING OVERRIDES
   ======================================== */
/* Ensure glassmorphism cards also follow the spacing system */
/*.glassmorphism-card,
.glass-card,
[class*="glass-"] {    
    padding: var(--card-padding-md) !important;
}*/
.glass-card { padding: var(--card-padding-md)!important; }

@media (max-width: 767px) {
    .glassmorphism-card,
    .glass-card,
    [class*="glass-"] {
        padding: var(--card-padding-sm) !important;
    }
}

/* ========================================
   27. UTILITY CLASSES FOR CUSTOM SPACING
   ======================================== */
/* Use these for one-off spacing needs */
.space-top-1 { padding-top: var(--space-1) !important; }
.space-top-2 { padding-top: var(--space-2) !important; }
.space-top-3 { padding-top: var(--space-3) !important; }
.space-top-4 { padding-top: var(--space-4) !important; }
.space-top-5 { padding-top: var(--space-5) !important; }
.space-top-6 { padding-top: var(--space-6) !important; }
.space-top-8 { padding-top: var(--space-8) !important; }
.space-top-10 { padding-top: var(--space-10) !important; }

.space-bottom-1 { padding-bottom: var(--space-1) !important; }
.space-bottom-2 { padding-bottom: var(--space-2) !important; }
.space-bottom-3 { padding-bottom: var(--space-3) !important; }
.space-bottom-4 { padding-bottom: var(--space-4) !important; }
.space-bottom-5 { padding-bottom: var(--space-5) !important; }
.space-bottom-6 { padding-bottom: var(--space-6) !important; }
.space-bottom-8 { padding-bottom: var(--space-8) !important; }
.space-bottom-10 { padding-bottom: var(--space-10) !important; }

.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }
.gap-5 { gap: var(--space-5) !important; }

/* ========================================
   28. PRINT STYLES - REDUCED SPACING
   ======================================== */
@media print {
    [class*="tj-"][class*="-section"] {
        padding-top: var(--space-5) !important;
        padding-bottom: var(--space-5) !important;
    }

    .service-item,
    .feature-item,
    .blog-item {
        padding: var(--space-2) !important;
    }
}

/* ========================================
   29. FULL-WIDTH BANNER FIX
   Targets: Hero, Breadcrumb, CTA, Footer
   Removes left white space gap
   ======================================== */

/* Hero Section - Home Page Slider */
.tj-hero-section-three,
.tj-hero-section,
.tj-hero-section-two,
.hero-slider,
.hero-slider-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
}

/* Hero item backgrounds */
.tj-hero-item-three,
.tj-hero-item,
.tj-hero-item-two {
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Breadcrumb / Inner Page Header Sections */
.tj-breadcrumb-section,
.breadcrumb-section,
.page-header,
.tj-page-header,
[class*="breadcrumb-section"],
[class*="page-header"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
}

/* CTA Sections - Full Width Banner */
.tj-cta-section,
.tj-cta-section-two,
.tj-contact-cta-section,
[class*="cta-section"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
}

/* Footer Section */
.tj-footer-section,
footer,
.footer-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
}

/* Ensure parent wrapper doesn't constrain these full-width sections */
.tj-main-wrapper {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;    
}

/* Fix for body creating offset */
body {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;   
}

/* Header area full width */
.tj-header-area {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}