/* Bootstrap Integration CSS - Preserves existing theme colors */

/* Override Bootstrap's default colors with your theme colors */
:root {
  --bs-primary: #353082;
  --bs-primary-rgb: 53, 48, 130;
  --bs-secondary: #FF5722;
  --bs-secondary-rgb: 255, 87, 34;
  --bs-success: #28a745;
  --bs-info: #17a2b8;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #343a40;
}

/* Ensure Bootstrap components use your theme colors */
.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-secondary {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}

.text-primary {
  color: var(--bs-primary) !important;
}

.text-secondary {
  color: var(--bs-secondary) !important;
}

.bg-primary {
  background-color: var(--bs-primary) !important;
}

.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

/* Preserve your existing button styles */
.btn {
  border-radius: 25px;
  font-weight: 500;
  padding: 0.75rem 2rem;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  border: none;
  cursor: pointer;
}

/* Preserve your existing navbar styles */
.navbar {
  background-color: transparent !important;
}

/* Ensure your custom components aren't overridden by Bootstrap */
.custom-navbar {
  position: relative;
  z-index: 1030;
}

.hero-section {
  position: relative;
}

.full-width-section {
  width: 100%;
}

.feature-card {
  display: block;
}

.footer {
  margin-top: auto;
}

/* Bootstrap responsive utilities that work with your design */
.container-fluid {
  padding-left: 15px;
  padding-right: 15px;
}

/* Custom responsive breakpoints that match Bootstrap */
@media (max-width: 575.98px) {
  .container {
    max-width: 100%;
    padding: 0 1rem;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

/* Responsive text utilities */
.text-responsive {
  font-size: clamp(0.875rem, 2.5vw, 1rem);
}

.heading-responsive {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

/* Responsive spacing utilities */
.py-responsive {
  padding-top: clamp(1rem, 4vw, 3rem);
  padding-bottom: clamp(1rem, 4vw, 3rem);
}

.px-responsive {
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}