/* ==========================================
   ROOT VARIABLES
========================================== */

:root {
    /* Brand Colors */
    --text-color: var(--secondary-color);
    --bs-primary: #1d60e5;
    --bs-primary-hover: #0C1831;
    --bs-primary-rgb: 29, 96, 229;
    --bs-white-hover:#EAEBED;
    
    --secondary-color: #0C1831;
    --secondary-color-rgb: 0, 0, 0;
    
    --white-color: #ffffff;
    --bs-dark-color: #0f1b3d;
    --bs-dark-hover: 12, 24, 49;
  
    /* Bootstrap Overrides */
    --bs-border-radius: 8px;
    --bs-body-font-family: "Google Sans Flex", "Poppins", sans-serif;
    --bs-body-font-size: 16px;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.625;
    --bs-body-color: #111112;
  
    /* Layout */
    --section-spacing-80: 80px;
    --section-spacing-50: 50px;
  
    /* Font Weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
  
    /* Heading Typography */
    --h1-size: 48px;
    --h1-line: 56px;
  
    --h2-size: 36px;
    --h2-line: 44px;
  
    --h3-size: 28px;
    --h3-line: 36px;
  
    --h4-size: 22px;
    --h4-line: 30px;
  
    --h5-size: 18px;
    --h5-line: 26px;
  
    --h6-size: 16px;
    --h6-line: 24px;
  
    /* Body Typography */
    --body-lg-size: 18px;
    --body-lg-line: 28px;
  
    --body-size: 16px;
    --body-line: 26px;
  
    --body-sm-size: 14px;
    --body-sm-line: 22px;
  
    --caption-size: 12px;
    --caption-line: 18px;
  
    /* Colors */
    --text-color: #111112;
    --text-muted: rgba(87, 84, 85, 0.6);
  
    /* Effects */
    --transition: all 0.3s ease;
  }
  
  /* ==========================================
     BASE
  ========================================== */
  
  html {
    font-size: 16px;
    scroll-behavior: smooth;
  }
  
  body {
    overflow-x: hidden;
  }
  
  img,
  svg {
    max-width: 100%;
    height: auto;
  }
  
  a {
    text-decoration: none;
    transition: var(--transition);
  }
  
  button,
  .btn {
    transition: var(--transition);
  }
  
  ::selection {
    background: rgba(var(--bs-primary-rgb), 0.15);
  }
  
  /* ==========================================
     TYPOGRAPHY
  ========================================== */
  
  h1,
  .h1 {
    font-size: var(--h1-size) !important;
    line-height: var(--h1-line) !important;
    font-weight: var(--fw-semibold);
    color: var(--text-color);
  }
  
  h2,
  .h2 {
    font-size: var(--h2-size) !important;
    line-height: var(--h2-line) !important;
    font-weight: var(--fw-semibold);
    color: var(--text-color);
  }
  
  h3,
  .h3 {
    font-size: var(--h3-size) !important;
    line-height: var(--h3-line) !important;
    font-weight: var(--fw-semibold);
    color: var(--text-color);
  }
  
  h4,
  .h4 {
    font-size: var(--h4-size) !important;
    line-height: var(--h4-line) !important;
    font-weight: var(--fw-semibold);
    color: var(--text-color);
  }
  
  h5,
  .h5 {
    font-size: var(--h5-size) !important;
    line-height: var(--h5-line) !important;
    font-weight: var(--fw-semibold);
    color: var(--text-color);
  }
  
  h6,
  .h6 {
    font-size: var(--h6-size) !important;
    line-height: var(--h6-line) !important;
    font-weight: var(--fw-semibold);
    color: var(--text-color);
  }
  
  p,
  .body-text {
    font-size: var(--body-size);
    line-height: var(--body-line);
  }
  
  .body-lg {
    font-size: var(--body-lg-size);
    line-height: var(--body-lg-line);
  }
  
  .body-sm {
    font-size: var(--body-sm-size);
    line-height: var(--body-sm-line);
  }
  
  .caption {
    font-size: var(--caption-size);
    line-height: var(--caption-line);
  }
  
  .font-sm {
    font-size: var(--body-sm-size);
    line-height: var(--body-sm-line);
  }
  
  .text-muted {
    color: var(--text-muted) !important;
  }
  
  /* ==========================================
     SPACING
  ========================================== */
  
  .spacing-py-80 {
    padding-block: var(--section-spacing-80);
  }
  
  .spacing-py-50 {
    padding-block: var(--section-spacing-50);
  }
  
  .spacing-my-80 {
    margin-block: var(--section-spacing-80);
  }
  
  /* ==========================================
     BUTTONS
  ========================================== */
  
  .btn {
    border-radius: var(--bs-border-radius);
    font-weight: var(--fw-medium);
    min-width: 117px;
    min-height: 36px;
  
    --bs-btn-padding-y: 8px;
    --bs-btn-padding-x: 16px;
    --bs-btn-font-size: 16px;
  }
  
  .btn-sm {
    --bs-btn-padding-y: 4px;
    --bs-btn-padding-x: 12px;
    --bs-btn-font-size: 14px;
  
    min-width: 113px;
    min-height: 30px;
  }
  
  .btn-lg {
    --bs-btn-padding-y: 12px;
    --bs-btn-padding-x: 24px;
    --bs-btn-font-size: 18px;
  
    min-width: 138px;
    min-height: 48px;
  }
  
  /* Primary */
  
  .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
  
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-hover);
    --bs-btn-hover-border-color: var(--bs-primary-hover);
  
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary-hover);
    --bs-btn-active-border-color: var(--bs-primary-hover);
  }
  .btn-primary:hover, .btn--primary:hover {
    background: var(--bs-primary-hover);
    color: var(--white-color);
    transition: none !important;
  }
  
  /* Outline Primary */
  
  .btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
  
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
  
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
  }
  
  /* Secondary */
  
  .btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0c1831;
    --bs-btn-border-color: #0c1831;
  
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
  
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
  }
  
  /* ==========================================
     UTILITIES
  ========================================== */
  
  .mw-fit {
    max-width: fit-content !important;
  }
  
  .rounded-custom {
    border-radius: var(--bs-border-radius);
  }
  
  .transition {
    transition: var(--transition);
  }
  
  .text-primary {
    color: var(--bs-primary) !important;
  }
  
  .bg-primary-soft {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
  }


  .faq-section {
    background: #EBF1FD;
  }
  /* ==========================================
     RESPONSIVE
  ========================================== */
  
  @media (max-width: 991.98px) {
    :root {
      --h1-size: 40px;
      --h1-line: 48px;
  
      --h2-size: 32px;
      --h2-line: 40px;
  
      --h3-size: 26px;
      --h3-line: 34px;
      
      --section-spacing-80: 60px;
      --section-spacing-50: 25px;
    }
  }
  
  @media (max-width: 767.98px) {
    :root {
      --h1-size: 32px;
      --h1-line: 40px;
  
      --h2-size: 28px;
      --h2-line: 36px;
  
      --h3-size: 24px;
      --h3-line: 32px;
  
      --h4-size: 20px;
      --h4-line: 28px;
  
      --section-spacing-80: 40px;
    }
  
    .btn-lg {
      min-width: auto;
    }
  
    .btn {
      min-width: auto;
    }
  }