/* import SF */
@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/sf-pro/SFPRODISPLAYREGULAR.OTF') format('opentype');
    font-weight: 400;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/sf-pro/SFPRODISPLAYMEDIUM.OTF') format('opentype');
    font-weight: 500;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/sf-pro/SFPRODISPLAYBOLD.OTF') format('opentype');
    font-weight: 700;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/sf-pro/SFPRODISPLAYBLACKITALIC.OTF') format('opentype');
    font-weight: 900;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'SF Pro Text';
    src: url('../fonts/sf-pro/SFPROTEXTREGULAR.OTF') format('opentype');
    font-weight: 400;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SF Pro Text';
    src: url('../fonts/sf-pro/SFPROTEXTMEDIUM.OTF') format('opentype');
    font-weight: 500;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SF Pro Text';
    src: url('../fonts/sf-pro/SFPROTEXTSEMIBOLD.OTF') format('opentype');
    font-weight: 600;
    font-style: normal;
  }
  
  
  /* Imported Sf */
  
  :root {
    /* === Override Bootstrap Core Colors === */
    --bs-primary: #3B82F6;
    --bs-primary-rgb: 59, 130, 246;
  
    --bs-secondary: #4B5563;
    --bs-secondary-rgb: 75, 85, 99;
  
    /* === Extended Theme Colors === */
    --theme-purple-light: #F3E8FF;
    --theme-purple: #9333EA;
  
    --theme-green-light: #DCFCE7;
    --theme-green: #16A34A;
  
    --theme-blue-light: #DBEAFE;
    --theme-blue: #1E3A8A;
    --border-lightblue-light: #91B9FA;
  
    /* === Extended Greys === */
    --gray-50: #F9FAFB;
    --gray-100: #F8F8F8;
    --gray-200: #F3F4F6;
    --blue-100: #EFF6FF;
    --gray-300: #CCCCCC;
    --gray-400: #4B5563;
  }
  
  /* ------------------------------
     BACKGROUND UTILITIES
  --------------------------------*/
  .bg-gray-50 { background-color: var(--gray-50) !important; }
  .bg-gray-100 { background-color: var(--gray-100) !important; }
  .bg-gray-200 { background-color: var(--gray-200) !important; }
  .bg-blue-100 { background-color: var(--blue-100) !important; }
  .bg-gray-300 { background-color: var(--gray-300) !important; }
  .bg-gray-400 { background-color: var(--gray-400) !important; }
  
  .bg-purple-light { background-color: var(--theme-purple-light) !important; }
  .bg-purple { background-color: var(--theme-purple) !important; }
  .bg-green-light { background-color: var(--theme-green-light) !important; }
  .bg-green { background-color: var(--theme-green) !important; }
  .bg-blue-light { background-color: var(--theme-blue-light) !important; }
  .bg-blue { background-color: var(--theme-blue) !important; }
  .bg-orange-light{ background-color: #F6E7C7;}
  
  /* ------------------------------
     TEXT UTILITIES
  --------------------------------*/
  .text-gray-400 { color: var(--gray-400) !important; }
  
  .text-purple { color: var(--theme-purple) !important; }
  .text-purple-light { color: var(--theme-purple-light) !important; }
  .text-green { color: var(--theme-green) !important; }
  .text-green-light { color: var(--theme-green-light) !important; }
  .text-blue { color: var(--theme-blue) !important; }
  .text-blue-light { color: var(--theme-blue-light) !important; }
  .text-gray-800{ color: #1F2937; }
  .text-dark-900{ color: #6B7280;}
  .text-orange{color: #D49100;}
  .text-red{color: #EA3336 !important;}
  
  
  /* ------------------------------
     BORDER UTILITIES
  --------------------------------*/
  .border-gray-200 { border-color: var(--gray-200) !important; }
  .border-gray-300 { border-color: var(--gray-300) !important; }
  .border-gray-400 { border-color: var(--gray-400) !important; }
  .border-purple { border-color: var(--theme-purple) !important; }
  .border-green { border-color: var(--theme-green) !important; }
  .border-blue { border-color: var(--theme-blue) !important; }
  .border-lightblue-light{ border-color: var(--border-lightblue-light) !important; }
  
  
  /* Global Button */
  .btn{
    font-size: 16px;
    padding: 10px 20px;
    line-height: 1;
  }
  .btn i{
    font-size: 0.85em;
  }
  /* Primary Button */
  .btn-primary {
      --bs-btn-color: #fff;
      --bs-btn-bg: #3B82F6;
      --bs-btn-border-color: #3B82F6;
    
      --bs-btn-hover-color: #fff;
      --bs-btn-hover-bg: #1E3A8A;
      --bs-btn-hover-border-color: #1E3A8A;
    
      --bs-btn-focus-shadow-rgb: 59,130,246;
    
      --bs-btn-active-color: #fff;
      --bs-btn-active-bg: #1E3A8A;
      --bs-btn-active-border-color: #1E3A8A;
      --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1);
    
      --bs-btn-disabled-color: #fff;
      --bs-btn-disabled-bg: #3B82F6;
      --bs-btn-disabled-border-color: #3B82F6;
    }
    /* Secondary Button (Outline Style) */
    .btn-secondary {
      --bs-btn-color: #3B82F6;
      --bs-btn-bg: transparent;
      --bs-btn-border-color: #3B82F6;
    
      --bs-btn-hover-color: #fff;
      --bs-btn-hover-bg: #3B82F6;
      --bs-btn-hover-border-color: #3B82F6;
    
      --bs-btn-focus-shadow-rgb: 59,130,246;
    
      --bs-btn-active-color: #fff;
      --bs-btn-active-bg: #2563EB;
      --bs-btn-active-border-color: #2563EB;
    
      --bs-btn-disabled-color: #3B82F6;
      --bs-btn-disabled-bg: transparent;
      --bs-btn-disabled-border-color: #3B82F6;
    }
  /* Typography */
    :root {
      --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      --bs-heading-font-family: 'SF Pro Display', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    }
    
    /* Headings */
    h1, h2, h3, h4, h5, h6 {
      font-family: var(--bs-heading-font-family);
      line-height: 1.1;
      font-weight: 600;
      color: #222;
    }
    
    h1 { font-size: 30px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
    h5 { font-size: 16px; }
    h6 { font-size: 14px; }
    
    /* Body */
    body, p, span, li, input, button, label {
      font-family: var(--bs-body-font-family);
      line-height: 1.3;
      color: var(--bs-secondary);
      font-size: 16px;
    }
    
    /* Optional utility font sizes */
    .fs-30 { font-size: 30px !important;}
    .fs-24 { font-size: 24px !important;}
    .fs-20 { font-size: 20px !important;}
    .fs-18 { font-size: 18px !important;}
    .fs-16 { font-size: 16px !important;}
    .fs-14 { font-size: 14px !important;}
    .fs-13 { font-size: 13px !important;}
    .fs-12 { font-size: 12px !important;}