/* Bootstrap 5 Grid System Fixes and Card Positioning Corrections */

/* Ensure containers work properly */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  width: 100% !important;
  padding-right: 15px !important;
  padding-left: 15px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Ensure rows work properly */
.row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-right: -15px !important;
  margin-left: -15px !important;
}

/* Ensure columns work properly */
.col,
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-auto,
.col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-sm-auto,
.col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-md-auto,
.col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-lg-auto,
.col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
.col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12,
.col-xl-auto,
.col-xxl, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6,
.col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12,
.col-xxl-auto {
  position: relative !important;
  width: 100% !important;
  padding-right: 15px !important;
  padding-left: 15px !important;
}

/* Fix column widths */
.col-12 { flex: 0 0 100% !important; max-width: 100% !important; }
.col-11 { flex: 0 0 91.666667% !important; max-width: 91.666667% !important; }
.col-10 { flex: 0 0 83.333333% !important; max-width: 83.333333% !important; }
.col-9 { flex: 0 0 75% !important; max-width: 75% !important; }
.col-8 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
.col-7 { flex: 0 0 58.333333% !important; max-width: 58.333333% !important; }
.col-6 { flex: 0 0 50% !important; max-width: 50% !important; }
.col-5 { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; }
.col-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
.col-3 { flex: 0 0 25% !important; max-width: 25% !important; }
.col-2 { flex: 0 0 16.666667% !important; max-width: 16.666667% !important; }
.col-1 { flex: 0 0 8.333333% !important; max-width: 8.333333% !important; }

/* Responsive Column Fixes */
@media (min-width: 576px) {
  .col-sm-12 { flex: 0 0 100% !important; max-width: 100% !important; }
  .col-sm-11 { flex: 0 0 91.666667% !important; max-width: 91.666667% !important; }
  .col-sm-10 { flex: 0 0 83.333333% !important; max-width: 83.333333% !important; }
  .col-sm-9 { flex: 0 0 75% !important; max-width: 75% !important; }
  .col-sm-8 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
  .col-sm-7 { flex: 0 0 58.333333% !important; max-width: 58.333333% !important; }
  .col-sm-6 { flex: 0 0 50% !important; max-width: 50% !important; }
  .col-sm-5 { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; }
  .col-sm-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
  .col-sm-3 { flex: 0 0 25% !important; max-width: 25% !important; }
  .col-sm-2 { flex: 0 0 16.666667% !important; max-width: 16.666667% !important; }
  .col-sm-1 { flex: 0 0 8.333333% !important; max-width: 8.333333% !important; }
}

@media (min-width: 768px) {
  .col-md-12 { flex: 0 0 100% !important; max-width: 100% !important; }
  .col-md-11 { flex: 0 0 91.666667% !important; max-width: 91.666667% !important; }
  .col-md-10 { flex: 0 0 83.333333% !important; max-width: 83.333333% !important; }
  .col-md-9 { flex: 0 0 75% !important; max-width: 75% !important; }
  .col-md-8 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
  .col-md-7 { flex: 0 0 58.333333% !important; max-width: 58.333333% !important; }
  .col-md-6 { flex: 0 0 50% !important; max-width: 50% !important; }
  .col-md-5 { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; }
  .col-md-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
  .col-md-3 { flex: 0 0 25% !important; max-width: 25% !important; }
  .col-md-2 { flex: 0 0 16.666667% !important; max-width: 16.666667% !important; }
  .col-md-1 { flex: 0 0 8.333333% !important; max-width: 8.333333% !important; }
}

@media (min-width: 992px) {
  .col-lg-12 { flex: 0 0 100% !important; max-width: 100% !important; }
  .col-lg-11 { flex: 0 0 91.666667% !important; max-width: 91.666667% !important; }
  .col-lg-10 { flex: 0 0 83.333333% !important; max-width: 83.333333% !important; }
  .col-lg-9 { flex: 0 0 75% !important; max-width: 75% !important; }
  .col-lg-8 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
  .col-lg-7 { flex: 0 0 58.333333% !important; max-width: 58.333333% !important; }
  .col-lg-6 { flex: 0 0 50% !important; max-width: 50% !important; }
  .col-lg-5 { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; }
  .col-lg-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
  .col-lg-3 { flex: 0 0 25% !important; max-width: 25% !important; }
  .col-lg-2 { flex: 0 0 16.666667% !important; max-width: 16.666667% !important; }
  .col-lg-1 { flex: 0 0 8.333333% !important; max-width: 8.333333% !important; }
}

@media (min-width: 1200px) {
  .col-xl-12 { flex: 0 0 100% !important; max-width: 100% !important; }
  .col-xl-11 { flex: 0 0 91.666667% !important; max-width: 91.666667% !important; }
  .col-xl-10 { flex: 0 0 83.333333% !important; max-width: 83.333333% !important; }
  .col-xl-9 { flex: 0 0 75% !important; max-width: 75% !important; }
  .col-xl-8 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
  .col-xl-7 { flex: 0 0 58.333333% !important; max-width: 58.333333% !important; }
  .col-xl-6 { flex: 0 0 50% !important; max-width: 50% !important; }
  .col-xl-5 { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; }
  .col-xl-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
  .col-xl-3 { flex: 0 0 25% !important; max-width: 25% !important; }
  .col-xl-2 { flex: 0 0 16.666667% !important; max-width: 16.666667% !important; }
  .col-xl-1 { flex: 0 0 8.333333% !important; max-width: 8.333333% !important; }
}

/* CRITICAL: Card positioning fixes to prevent layout breaks */
.feature-card,
.service-card,
.price-card,
.team-card,
.review-card {
  /* Remove position: relative that was causing issues */
  position: static !important;
  /* Ensure cards stay within their containers */
  contain: layout !important;
  /* Prevent layout reflow during animations */
  will-change: auto !important;
  /* Ensure proper box model */
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Specific fix for featured price card that was causing the biggest issues */
.price-card.featured {
  /* Replace problematic transform with scale */
  transform: none !important;
  scale: 1.05 !important;
  /* Ensure it doesn't affect layout flow */
  contain: layout !important;
  transform-origin: center center !important;
}

.price-card.featured:hover {
  /* Keep the scale but add translateY safely */
  scale: 1.05 !important;
  transform: translateY(-13px) !important;
}

/* Stabilize hover effects on all cards */
.feature-card:hover,
.service-card:hover,
.team-card:hover,
.review-card:hover {
  /* Ensure hover transforms don't break layout */
  will-change: transform !important;
  contain: layout !important;
}

/* Mobile fixes - disable problematic transforms */
@media (max-width: 767.98px) {
  .container { 
    width: 100% !important; 
    max-width: none !important; 
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  .row { 
    margin-right: -15px !important; 
    margin-left: -15px !important; 
  }
  
  [class*="col-"] { 
    padding-right: 15px !important; 
    padding-left: 15px !important; 
  }
  
  /* Disable hover transforms on mobile to prevent layout issues */
  .feature-card:hover,
  .service-card:hover,
  .price-card:hover,
  .team-card:hover,
  .review-card:hover {
    transform: none !important;
    scale: none !important;
  }
  
  .price-card.featured {
    transform: none !important;
    scale: none !important;
  }
  
  .price-card.featured:hover {
    transform: none !important;
    scale: none !important;
  }
}

/* Ensure columns containing cards are properly aligned */
.col-md-4 .feature-card,
.col-md-4 .service-card,
.col-md-4 .price-card,
.col-md-4 .team-card,
.col-md-3 .review-card {
  width: 100% !important;
  margin: 0 auto !important;
}

/* Flex fixes for better alignment */
.d-flex {
  display: flex !important;
}

.justify-content-center {
  justify-content: center !important;
}

.align-items-center {
  align-items: center !important;
}

/* Reset any z-index conflicts */
.navbar {
  z-index: 1030 !important;
}

.hero {
  z-index: 1 !important;
}

.section {
  z-index: 1 !important;
  position: relative !important;
}