/* ==========================================================================
   #BASE STYLES
   ========================================================================== */

/*
 * 1. CSS Custom Properties (Variables)
 *    Global design tokens and variables used throughout the theme.
 *    Includes colors, typography, spacing, and other design tokens.
 */

/* ==========================================================================
   #CUSTOM PROPERTIES
   ========================================================================== */

/*
 * 1.1 Brand Colors
 *     Primary, secondary, and neutral color palettes
 */

:root {
  /* ================
   Brand Colors
   =============== */

  /* Primary Colors */
  --bs-primary: #051de0;
  --bs-primary-rgb: 5, 29, 224;
  --bs-primary-light: #e8ebff;
  --bs-primary-light-rgb: 232, 235, 255;
  --bs-primary-dark: #0415b3;
  --bs-primary-dark-rgb: 4, 21, 179;
  --bs-primary-active: #0414a6;
  --bs-primary-active-rgb: 4, 20, 166;
  --bs-primary-focus: rgba(5, 29, 224, 0.1);
  --bs-primary-100: #e8ebff;
  --bs-primary-100-rgb: 232, 235, 255;
  --bs-primary-200: #c7cdff;
  --bs-primary-200-rgb: 199, 205, 255;
  --bs-primary-300: #a5afff;
  --bs-primary-300-rgb: 165, 175, 255;
  --bs-primary-400: #6979ff;
  --bs-primary-400-rgb: 105, 121, 255;
  --bs-primary-500: #354bfe;
  --bs-primary-500-rgb: 53, 75, 254;
  --bs-primary-600: #051de0;
  --bs-primary-600-rgb: 5, 29, 224;
  --bs-primary-700: #0013ad;
  --bs-primary-700-rgb: 0, 19, 173;
  --bs-primary-800: #000d7a;
  --bs-primary-800-rgb: 0, 13, 122;
  --bs-primary-900: #000847;
  --bs-primary-900-rgb: 0, 8, 71;

  /* Secondary Colors */
  --bs-secondary: #fbbf24;
  --bs-secondary-rgb: 251, 191, 36;
  --bs-secondary-light: #fef6e0;
  --bs-secondary-light-rgb: 254, 246, 224;
  --bs-secondary-dark: #e6ac0a;
  --bs-secondary-dark-rgb: 230, 172, 10;
  --bs-secondary-100: #f7f7ef;
  --bs-secondary-100-rgb: 247, 247, 239;
  --bs-secondary-200: #fef6e0;
  --bs-secondary-200-rgb: 254, 246, 224;
  --bs-secondary-300: #feedc2;
  --bs-secondary-300-rgb: 254, 237, 194;
  --bs-secondary-400: #fde094;
  --bs-secondary-400-rgb: 253, 224, 148;
  --bs-secondary-500: #fcd266;
  --bs-secondary-500-rgb: 252, 210, 102;
  --bs-secondary-600: #fbbf24;
  --bs-secondary-600-rgb: 251, 191, 36;
  --bs-secondary-700: #c9991d;
  --bs-secondary-700-rgb: 201, 153, 29;
  --bs-secondary-800: #957218;
  --bs-secondary-800-rgb: 149, 114, 24;
  --bs-secondary-900: #624d14;
  --bs-secondary-900-rgb: 98, 77, 20;

  /* Neutral Colors - Natural Palette */
  --bs-white: #ffffff;
  --bs-white-rgb: 255, 255, 255;
  --bs-gray-100: #ffffff;
  /* Extra light gray */
  --bs-gray-100-rgb: 255, 255, 255;
  --bs-gray-200: #f3f2ee;
  /* Lighter gray */
  --bs-gray-200-rgb: 243, 242, 238;
  --bs-gray-300: #dbd9d2;
  /* Light gray */
  --bs-gray-300-rgb: 219, 217, 210;
  --bs-gray-400: #c6c3b9;
  /* Medium light gray */
  --bs-gray-400-rgb: 198, 195, 185;
  --bs-gray-500: #918f89;
  /* Medium gray */
  --bs-gray-500-rgb: 145, 143, 137;
  --bs-gray-600: #5f5d59;
  /* Medium dark gray */
  --bs-gray-600-rgb: 95, 93, 89;
  --bs-gray-700: #3d3b38;
  /* Dark gray */
  --bs-gray-700-rgb: 61, 59, 56;
  --bs-gray-800: #1f1e1c;
  /* Darker gray */
  --bs-gray-800-rgb: 31, 30, 28;
  --bs-black: #000000;
  --bs-black-rgb: 0, 0, 0;

  /* Alias for backward compatibility */
  --bs-light: var(--bs-gray-300);
  --bs-dark: var(--bs-gray-900);

  /* Status Colors */
  --bs-success: #04b46a;
  --bs-info: #918f89;
  --bs-warning: #e6d003;
  --bs-danger: #f71f01;

  /* Body Colors */
  --bs-body-color: #1f1e1c;
  --bs-body-color-rgb: 31, 30, 28;
  --bs-body-bg: #ffffff;

  /* Border Colors */
  --bs-border-color: #e9ecef;
  --bs-border-color-light: #f1f1f1;

  /* Gradient Colors */
  --bs-gradient-primary: linear-gradient(90deg, #051de0 0%, #1a5df8 100%);
  --bs-gradient-secondary: linear-gradient(90deg, #fbbf24 0%, #f9c74f 100%);
  --bs-gradient-dark: linear-gradient(90deg, #1f1e1c 0%, #3a3936 100%);
  --bs-gradient-light: linear-gradient(90deg, #ffffff 0%, #f8f9fa 100%);
  --bs-gradient-success: linear-gradient(90deg, #04b46a 0%, #06d17f 100%);
  --bs-gradient-warning: linear-gradient(90deg, #e6d003 0%, #f5e74c 100%);
  --bs-gradient-danger: linear-gradient(90deg, #f71f01 0%, #ff4d30 100%);
  --bs-gradient-info: linear-gradient(90deg, #918f89 0%, #b1afaa 100%);

  /*
 * 1.2 Typography
 *     Font families, sizes, and other typographic settings
 */
  --bs-body-font-family: "Poppins", system-ui, -apple-system, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.5;

  /* Spacing */
  --bs-spacer: 1rem;
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;

  /*
 * 1.4 Border Radius
 *     Consistent border radius values
 */
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-border-radius-circle: 50%;

  /* Box Shadow */
  --bs-box-shadow: 0 0.5rem 1rem rgba(var(--bs-black-rgb), 0.1);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(var(--bs-black-rgb), 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(var(--bs-black-rgb), 0.175);
  --bs-box-shadow-top: 0 -0.125rem 0.25rem rgba(var(--bs-black-rgb), 0.05);

  /*
 * 1.6 Transitions
 *     Animation timing and easing functions
 */
  --bs-transition: all 0.2s ease-in-out;
  --bs-transition-slow: all 0.3s ease-in-out;
}

/* Base HTML and Body Styles */
html {
  font-size: 16px;
  scrollbar-width: 0.25rem;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
  padding-right: 0 !important;
}

/* DPI-based font sizing for proper scaling */
/* Adjusted to prevent zoomed appearance on all screens */
@media (resolution: 96dpi) {
  html {
    font-size: 16px;
  }
}

@media (resolution: 120dpi) {
  html {
    font-size: 14px;
  }
}

@media (resolution: 144dpi) {
  html {
    font-size: 15px;
  }
}

@media (resolution: 192dpi) {
  html {
    font-size: 16px;
  }
}

:focus-visible {
  outline: 0;
}

/* Selection Styling */
::selection {
  background-color: var(--bs-primary-bg-subtle);
}

/* Hide default form control styling */
:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button
) {
  color: var(--bs-primary);
}

/* ==========================================================================
   Custom Scrollbar Styling
   ========================================================================== */

::-webkit-scrollbar {
  width: 0.25rem;
  height: 0.25rem;
}

::-webkit-scrollbar-track {
  background: var(--bs-light);
}

::-webkit-scrollbar-thumb {
  background: var(--bs-primary);
  border-radius: 0.25rem;
  transition: 0.2s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bs-secondary);
}

/* ==========================================================================
   #BASE ELEMENTS
   ========================================================================== */

/*
 * 2. Base Element Styles
 *    Default styles for bare HTML elements (no classes).
 *    These set the base styling for all elements.
 */

/*
 * 2.1 Document
 *     Root and body element styles
 */
body {
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
}

/*
 * 2.2 Typography Elements
 *     Headings, paragraphs, and other text elements
 */

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.5em;
}

/* Links */
a {
  color: var(--bs-primary);
  text-decoration: none;
  transition: var(--bs-transition);
}

a:hover {
  color: var(--bs-primary-dark);
  text-decoration: none;
}

/*
 * 2.3 Text-level Semantics
 *     Inline text elements
 */
.font-serif {
  font-family: "Cormorant", serif;
  font-weight: 300;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.text-highlight {
  position: relative;
  display: inline;
  line-height: 1.2;
  background: linear-gradient(
      0deg,
      var(--bs-secondary) 0.25rem,
      transparent 0.5rem
    )
    0 100% / 0% 0.7rem no-repeat;
  background-size: 100% 0.625rem;
  background-position: 0 calc(100% - 1.25rem);
  padding: 0 0.1rem 0.2rem;
  margin: 0 -0.1rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-decoration: none;
  box-shadow: none;
  font-weight: 600;

  /* For better rendering in different browsers */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  @media (max-width: 61.99875rem) {
    background-position: 0 calc(100% - 1rem);
  }
}

/* ==========================================================================
   #BUTTONS
   ========================================================================== */

/*
 * Button styles for primary and outline variants
 * Uses CSS custom properties for consistent theming and easy maintenance
 */

/* Primary Button */
.btn-primary {
  --bs-btn-color: var(--bs-white) --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--bs-primary-dark);
  --bs-btn-hover-border-color: var(--bs-primary-dark);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--bs-primary-active);
  --bs-btn-active-border-color: var(--bs-primary-active);
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: var(--bs-white);
  --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-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-secondary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-secondary-dark);
  --bs-btn-hover-border-color: var(--bs-secondary-dark);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-active-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-secondary-active);
  --bs-btn-active-border-color: var(--bs-secondary-active);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--bs-secondary-active);
  --bs-btn-active-border-color: var(--bs-secondary-active);
  --bs-btn-disabled-color: var(--bs-secondary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-secondary);
}

/* ==========================================================================
   #FORM CONTROLS
   ========================================================================== */

/*
 * Form control styles for inputs, selects, and other form elements
 * Includes focus states and custom styling for better UX
 */

.form-control,
.form-select {
  &:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
  }
}

/* ==========================================================================
   #UTILITY CLASSES
   ========================================================================== */

/*
 * Reusable utility classes for common styling needs
 * Organized by category (colors, spacing, layout, etc.)
 */

/* Color Utilities */
.text-primary {
  color: var(--bs-primary) !important;
}

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

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

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

/* Spacing Utilities */
.mt-6 {
  margin-top: 4rem !important;
}

.mb-6 {
  margin-bottom: 4rem !important;
}

.pt-6 {
  padding-top: 4rem !important;
}

.pb-6 {
  padding-bottom: 4rem !important;
}

/* ==========================================================================
   #BACK TO TOP BUTTON
   ========================================================================== */

/*
 * Fixed position back-to-top button
 * Appears when user scrolls down the page
 * Smooth transitions for better UX
 */

.back-to-top {
  position: fixed;
  bottom: 1.875rem;
  right: 1.875rem;
  width: 3.125rem;
  height: 3.125rem;
  background-color: var(--bs-primary);
  color: white;
  border-radius: var(--bs-border-radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: var(--bs-transition-slow);
  z-index: 999;
  box-shadow: var(--bs-box-shadow-sm);
  border: none;
  outline: none;

  /* Show button when scrolled */
  &.visible {
    opacity: 1;
    visibility: visible;
  }

  /* Hover and interaction states */
  &:hover {
    background-color: var(--bs-primary-dark);
    transform: translateY(-0.1875rem);
  }

  /* Icon styling */
  i {
    font-size: 1.5rem;
  }
}

@media (min-width: 87.5rem) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 86.5rem;
  }
}

@media (min-width: 160rem) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 140rem;
  }
}

.counter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.125rem;
  margin-top: 1.875rem;

  @media (max-width: 61.99875rem) {
    flex-direction: column;
    gap: 1.125rem;
    margin-top: 1.875rem;

    li {
      &:not(:last-child)::after {
        content: none;
      }
    }
  }

  li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.5rem;

    .count {
      color: var(--bs-secondary);
      font-weight: 700;
      font-size: 1.25rem;
      line-height: 2.125rem;
      white-space: nowrap;
    }

    &:not(:last-child)::after {
      content: "";
      width: 0.0625rem;
      height: 100%;
      background-color: var(--bs-white);
      margin-left: 0.375rem;
    }
  }
}

.tick-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  row-gap: 1.25rem;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.875rem;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 1.875rem;
  text-align: left;

  &.full-list {
    grid-template-columns: repeat(1, 1fr);
  }

  @media (max-width: 61.99875rem) {
    grid-template-columns: repeat(1, 1fr);
    font-size: 1rem;
    line-height: 1.5rem;
    text-align: left;
  }

  li {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.5rem;

    p {
      margin-bottom: 0;
    }

    strong {
      font-weight: 700;
      font-size: 1.125rem;
    }

    &::before {
      content: "";
      height: 2.75rem;
      width: 2.75rem;
      background-image: url("../images/check.svg");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      flex: 0 0 auto;
      margin-top: -0.5rem;
    }
  }
}

.number-list {
  counter-reset: item;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  font-weight: 300;
  text-align: left;

  &.full-list {
    grid-template-columns: repeat(1, 1fr);
  }

  @media (max-width: 61.99875rem) {
    grid-template-columns: 1fr;
    text-align: left;
  }

  strong {
    font-weight: 700;
  }

  li {
    counter-increment: item;
    display: flex;
    align-items: first baseline;
    gap: 0.5rem;
    font-size: 1rem;
    line-height: 1.875rem;
    position: relative;

    &::before {
      content: counter(item);
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 2.625rem;
      height: 2.625rem;
      background-color: var(--bs-secondary);
      color: var(--bs-primary);
      border-radius: 50%;
      font-size: 1.125rem;
      font-weight: 700;
    }
  }
}

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5rem;
  margin-top: 1.875rem;
  text-align: left;

  @media (max-width: 61.99875rem) {
    grid-template-columns: repeat(2, 1fr);
    text-align: left;
  }

  @media (max-width: 41.99875rem) {
    grid-template-columns: repeat(1, 1fr);
  }

  strong {
    font-weight: 700;
    font-size: 1.4rem;
  }

  li {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
}

.arrow-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-weight: 300;
  font-size: 1rem;

  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 1.875rem;
  text-align: left;

  li {
    display: flex;
    gap: 1.25rem;
    padding-top: 0.5rem;

    p {
      margin-bottom: 0;
    }

    strong {
      font-weight: 700;
      font-size: 1.125rem;
    }

    &::before {
      content: "";
      height: 3rem;
      width: 3.375rem;
      background-image: url("../images/arrow.svg");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      flex: 0 0 auto;
    }
  }
}

@media (max-width: 61.99875rem) {
  .arrow-list {
    font-size: 1rem;

    gap: 1.25rem;
    text-align: left;
  }
}

.arrow-round-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.75rem;
  font-size: 1rem;
  line-height: 1.875rem;
  flex-direction: column;
  text-align: left;

  li {
    font-weight: 700;
    display: flex;
    gap: 0.75rem;
    align-items: center;

    strong {
      font-weight: 700;
      font-size: 1.125rem;
    }

    &::before {
      content: "";
      height: 2.75rem;
      width: 2.75rem;
      background-image: url("../images/arrow-bullet.svg");
      background-size: 100% 100%;
      background-position: center;
      background-repeat: no-repeat;
    }
  }

  @media (max-width: 61.99875rem) {
    text-align: left;
  }
}
.section-caption {
  margin-top: 2.5rem;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 3.438rem;
  text-align: right;
  max-width: 54.75rem;
  margin-left: auto;
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 3.438rem;
  }
  span {
    color: var(--bs-primary);
  }
  .font-serif {
    font-size: 3.438rem;
    line-height: 3.438rem;
    font-weight: 400;
  }
}

@media (max-width: 61.99875rem) {
  .section-caption {
    font-size: 2.5rem;
    line-height: 3.438rem;
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: 2.5rem;
      line-height: 3.438rem;
    }

    .font-serif {
      font-size: 3.438rem;
      line-height: 3.438rem;
    }
  }
}

.g-6,
.gy-6 {
  --bs-gutter-y: 3.75rem;
}
.g-6,
.gx-6 {
  --bs-gutter-x: 3.75rem;
}
.main-content{
  min-height: 100vh;
}