/* ================================
   Root Variables (Design Tokens)
   ================================ */
   :root {
    /* Primary Colors */
    --primary-color: #008bff; /* Highlight Color */
    --primary-clr-2: #0a3b6c;
    --primary-clr-20: #0a3b6c;
    --primary-clr-5: #181411;
    --primary-clr-2: #008bff;
    --text-color: #555;
    --text-muted: #6d6d6d;

    /* Typography */
    --font-size-xl: clamp(24px, 4vw, 36px);
    --font-size-lg: clamp(18px, 2vw, 22px);
    --font-size-md: clamp(14px, 2vw, 16px);
    --font-size-sm: 14px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
  
    /* Backgrounds */
    --bg-light: #f5f5f5;
    --bg-light-2: #f5f5fb;
    --bg-light-1: #ffffff; /*white*/
    --bg-gray: #f8f8f8;
    --bg-highlight: rgba(231, 245, 255, 0.1);
    --bg-hover-yellow: rgba(255, 186, 68, 1);
  
    /* Text Colors */
    --text-dark: #333;
    --text-muted: #666;
    --text-brand: var(--primary-clr-2);
    --text-white: #fff;
    --text-hover: #000;
  }
  
  .section-abv-btm {
    padding-top: 60px !important;
    padding-bottom: 50px !important;
  }
  /* ================================
     Typography Utilities
     ================================ */
  .text-xl {
    font-size: var(--font-size-xl);
  }
  
  .text-lg {
    font-size: var(--font-size-lg);
  }
  
  .text-md {
    font-size: var(--font-size-md);
  }
  
  .text-sm {
    font-size: var(--font-size-sm);
  }
  
  .font-medium {
    font-weight: var(--font-weight-medium);
  }
  
  .font-bold {
    font-weight: var(--font-weight-bold);
  }
  
  .text-primary {
    color: var(--primary-clr-1);
  }
  
  .text-brand {
    color: var(--text-brand);
  }
  
  .text-muted {
    color: var(--text-muted);
  }
  
  /* ================================
     Buttons / Links
     ================================ */
  .btn-link {
    color: var(--primary-clr-2);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
  }
  
  .btn-link:hover {
    text-decoration: underline;
  }
  
  /* ================================
     Reusable Components
     ================================ */
  .badge-round {
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: var(--primary-clr-2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
  }
  
  .badge-round h4 {
    color: var(--text-white);
    font-size: 20px;
    margin: 0;
  }
  
  .section-title h2 {
    font-size: var(--font-size-xl) !important;
    font-weight: var(--font-weight-bold);
    margin-bottom: 0;
    color: var(--primary-clr-5);
  }
  
  .section-title p {
    font-size: var(--font-size-md) !important;
    margin-bottom: 30px;
  }
  
  .section-titlew {
    font-size: 36px;
    font-weight: var(--font-weight-bold);
  }
  
  /* ================================
     Misc Utility
     ================================ */
  .text-spd {
    font-size: 14px !important;
    text-decoration: none !important;
  }
  
  .font-xll {
    font-size: 20px;
  }
  
  .highlight {
    color: var(--primary-color);
  }