/* Update below HEX and RGB color code to your primary color for light mode */
/* Updated CSS for light mode with new primary color */
[data-bs-theme=light] {
  --bs-primary: #F3745C !important;
  --bs-primary-rgb: 243, 116, 92 !important;
  --bs-link-color: #F3745C !important;
  --bs-link-hover-color: #C85C47 !important;
  --bs-link-color-rgb: 243, 116, 92 !important;
  --bs-link-hover-color-rgb: 200, 92, 71;
  --bs-nav-pills-link-active-bg: #F3745C !important;
  --bs-background-color: #0E162E !important;
}

/* Updated CSS for dark mode with the same new primary color */
[data-bs-theme=dark] {
  --bs-primary: #F3745C !important;
  --bs-primary-rgb: 243, 116, 92 !important;
  --bs-link-color: #F3745C !important;
  --bs-link-hover-color: #C85C47 !important;
  --bs-link-color-rgb: 243, 116, 92 !important;
  --bs-link-hover-color-rgb: 200, 92, 71;
  --bs-nav-pills-link-active-bg: #F3745C !important;
  --bs-background-color: #222529 !important;
}


.lh-3 {
  line-height: 1.45 !important;
}

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

/* CSS for overriding primary colors */
.navbar {
  --bs-navbar-hover-color: var(--bs-primary);
  --bs-navbar-active-color: var(--bs-primary);
}

.navbar-dark {
  --bs-navbar-hover-color: var(--bs-primary) !important;
  --bs-navbar-active-color: var(--bs-primary) !important;
}

.nav {
  --bs-nav-link-hover-color: var(--bs-primary);
}

.dropdown-menu {
  --bs-dropdown-link-hover-color: var(--bs-primary) !important;
  --bs-dropdown-link-hover-bg: rgba(var(--bs-primary-rgb), 0.1) !important;
  --bs-dropdown-link-active-color: var(--bs-primary) !important;
  --bs-dropdown-link-active-bg: rgba(var(--bs-primary-rgb), 0.1) !important;
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-link-hover-color);
  --bs-btn-hover-border-color: var(--bs-link-hover-color);
  --bs-btn-active-bg: var(--bs-link-hover-color);
  --bs-btn-active-border-color: var(--bs-link-hover-color);
  --bs-btn-disabled-bg: var(--bs-primary);
}

.btn-link {
  --bs-btn-color: var(--bs-primary);
  --bs-link-color: var(--bs-primary);
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-active-color: var(--bs-link-hover-color);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-primary-soft {
  color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.btn-primary-soft:hover {
  color: var(--bs-white);
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-primary-soft:focus {
  color: var(--bs-white);
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-primary-soft.active {
  color: var(--bs-white);
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

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

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--bs-primary);
}

.form-control:focus {
  border-color: var(--bs-primary);
}

.text-bg-primary {
  background-color: rgba(var(--bs-primary-rgb), 1) !important;
}

.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.choices.is-focused .choices__inner {
  border-color: var(--bs-primary);
}

/* =============================================
   LAPTOP SCREEN OPTIMIZATION
   Reduces visual scale for laptop screens to prevent
   "zoomed in" appearance while preserving mobile styles
   ============================================= */

/* Medium laptops: 1400px to 1600px (e.g., 1440p, 1536p with scaling) */
@media (min-width: 1400px) and (max-width: 1599.98px) {
  html {
    font-size: 14.5px;
  }

  h1, .h1 {
    font-size: 3rem;
  }
  
  h2, .h2 {
    font-size: 2.6rem;
  }
  
  h3, .h3 {
    font-size: 2rem;
  }

  .py-5 {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
  }

  .my-5 {
    margin-top: 2.25rem !important;
    margin-bottom: 2.25rem !important;
  }

  .btn {
    padding: 0.55rem 1.1rem;
    font-size: 0.92rem;
  }

  .card-body {
    padding: 1.1rem;
  }
}

/* Small laptops: 1200px to 1400px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  html {
    font-size: 13.5px;
  }

  .container,
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm {
    max-width: 1080px;
  }

  h1, .h1 {
    font-size: 2.6rem;
  }
  
  h2, .h2 {
    font-size: 2.2rem;
  }
  
  h3, .h3 {
    font-size: 1.8rem;
  }
  
  h4, .h4 {
    font-size: 1.4rem;
  }
  
  h5, .h5 {
    font-size: 1.1rem;
  }

  .py-5 {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }
  
  .py-4 {
    padding-top: 1.1rem !important;
    padding-bottom: 1.1rem !important;
  }
  
  .pt-5 {
    padding-top: 1.75rem !important;
  }
  
  .pb-5 {
    padding-bottom: 1.75rem !important;
  }

  .my-5 {
    margin-top: 1.75rem !important;
    margin-bottom: 1.75rem !important;
  }
  
  .mt-5 {
    margin-top: 1.75rem !important;
  }
  
  .mb-5 {
    margin-bottom: 1.75rem !important;
  }

  .btn {
    padding: 0.45rem 0.9rem;
    font-size: 0.875rem;
  }
  
  .btn-lg {
    padding: 0.55rem 1.1rem;
    font-size: 0.95rem;
  }

  .card-body {
    padding: 0.9rem;
  }

  .navbar {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }
}

/* Very small laptops: 1200px - 1280px */
@media (min-width: 1200px) and (max-width: 1279.98px) {
  html {
    font-size: 13px;
  }

  .container,
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm {
    max-width: 1000px;
  }
}