/**
 * ===============================
 *    Root Variables & Theme Setup
 * =================================
 *
 * @format
 */

:root {
  /* ===== Font ===== */
  --font-base: "Segoe UI", system-ui, sans-serif;

  /* ===== Colors ===== */
  --color-heading: #242424;
  --color-text: #424242;
  --color-text-2: #616161;
  --color-body: #424242;
  --color-primary: #4f6bed;
  --color-button: #4f6bed;
  --color-button-secondary: #d1d1d1;
  --color-button-text: #ffffff;
  --color-hover-bg: #3c55b0;
  --color-hover-text: #ffffff;
  --color-stroke: #4f6bed;
  --color-stroke-alt: #f0f0f0;
  --color-bg: #ffffff;
  --color-white: #ffffff;
  --color-bg-gray: #12141d;
  --color-light-blue: #f7f9fe;
  --color-bg-white: #f4f7fb;
  --color-text-gray: #ffffffb2;
  --color-text-dropdown: #3b82f6;
  --color-text-dropdown-content: #2563eb;
  --color-customer-story: #e8eff7;
  --color-bg-dropdown: #ccd5f3;
  --color-bg-btn-hover-life: #4f6bed1a;
  --color-bg-btn-life: #ffffff00;
  --color-bg-ideal: #13263f;
  --color-form-inpt-bg: #ffffff14;
  --color-form-txt: #ffffffe5;
  --color-form-upload-bg: #e7f3fa14;

  /* ===== Spacing ===== */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 52px;

  /* ===== Container Widths ===== */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1440px;
}

/* ===============================
   Global Styles
================================= */
html,
body {
  height: 100%;
  line-height: 1.5;
  font-family: var(--font-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* ===============================
   Dark Mode Support
================================= */
/* @media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121212;
    --color-text: #f1f1f1;
    --color-heading: #ffffff;
    --color-primary: #4dabf7;
    --color-button-text: #ffffff;
  }
} */

/* ===============================
   Buttons
================================= */
.custom-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 192px;
  height: 56px;
  border: none;
  border-radius: 30px;
  background-color: var(--color-button);
  color: var(--color-button-text);
  font-weight: 400;
  -webkit-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
  font-size: 22px;
}

.contact-us {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 101px;
  height: 36px;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 20px;
  -webkit-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
}

.custom-btn:hover,
.contact-us:hover {
  background-color: var(--color-hover-bg);
  color: var(--color-hover-text);
}

@-webkit-keyframes bounce {
  0%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
a {
    text-decoration: none !important;
}
@keyframes bounce {
  0%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
@media (min-width: 1025px) and (max-width: 1280px) {
p {
    font-size: 20px !important;
}
h1, h2 {
    font-size: 56px !important;
}
}