*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

#root,
#__next {
  isolation: isolate;
}

:root {
  --main-orange: #ff7e00;
  --soft-gray: #f0f2f1;
  --hard-gray: #595959;
}
a {
  text-decoration: none;
  color: inherit;
}

body {
  font-family: "Inter", sans-serif;
}

h1 {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 3.4375rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.h1-hero {
  font-size: 4.5rem;
  font-weight: 800;
}

h2 {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 2.8125rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.h3-large {
  font-size: 2rem;
  font-weight: 600;
}
.h3-boldest {
  font-weight: 800;
  font-size: 2rem;
}
h3 {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0;
}
.h3-thick {
  font-weight: 700;
}
.h3-thickest {
  font-weight: 800;
  line-height: 140%;
}
h4 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: 0;
}

.h4-boldest {
  font-weight: 800;
}

p {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.125rem;
}

.line-height {
  line-height: 22px;
}

.p-thick {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.125rem;
  line-height: 1;
}

.p-small {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.25;
}
.p-justified {
  text-align: justify;
  color: var(--hard-gray);
}

.p-smallest {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1;
}

/* Mobile-first spacing utilities */
.py-5 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.px-5 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.pt-5 {
  padding-top: 1rem !important;
}
.pb-5 {
  padding-bottom: 1rem !important;
}
.mb-5 {
  margin-bottom: 1rem !important;
}
.mt-5 {
  margin-top: 1rem !important;
}
.my-5 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
.py-6 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
.px-6 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
.pt-6 {
  padding-top: 1.5rem !important;
}
.pb-6 {
  padding-bottom: 1.5rem !important;
}
.my-6 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.py-7 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}
.pt-7 {
  padding-top: 2rem !important;
}
.pb-7 {
  padding-bottom: 2rem !important;
}
.mb-7 {
  margin-bottom: 2rem !important;
}
.mt-7 {
  margin-top: 2rem !important;
}
.my-7 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.py-8 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
.pb-8 {
  padding-bottom: 3rem !important;
}
.pt-8 {
  padding-top: 3rem !important;
}

@media (min-width: 768px) {
  .py-5 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  .px-5 {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
  }
  .pt-5 {
    padding-top: 2.5rem !important;
  }
  .pb-5 {
    padding-bottom: 2.5rem !important;
  }
  .mb-5 {
    margin-bottom: 2.5rem !important;
  }
  .mt-5 {
    margin-top: 2.5rem !important;
  }
  .my-5 {
    margin-top: 2.5rem !important;
    margin-bottom: 2.5rem !important;
  }
  .py-6 {
    padding-top: 3.75rem !important;
    padding-bottom: 3.75rem !important;
  }
  .px-6 {
    padding-left: 3.75rem !important;
    padding-right: 3.75rem !important;
  }
  .pt-6 {
    padding-top: 3.75rem !important;
  }
  .pb-6 {
    padding-bottom: 3.75rem !important;
  }
  .my-6 {
    margin-top: 3.75rem !important;
    margin-bottom: 3.75rem !important;
  }

  .px-7 {
    padding-left: 4.5rem !important;
    padding-right: 4.5rem !important;
  }
  .px-8 {
    padding-left: 5.25rem !important;
    padding-right: 5.25rem !important;
  }

  .py-7 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }

  .pt-7 {
    padding-top: 4.5rem !important;
  }

  .pb-7 {
    padding-bottom: 4.5rem !important;
  }
  .mb-7 {
    margin-bottom: 4.5rem !important;
  }
  .mt-7 {
    margin-top: 4.5rem !important;
  }

  .my-7 {
    margin-top: 4.5rem !important;
    margin-bottom: 4.5rem !important;
  }

  .py-8 {
    padding-top: 9.375rem !important;
    padding-bottom: 9.375rem !important;
  }
  .pb-8 {
    padding-bottom: 9.375rem !important;
  }
  .pt-8 {
    padding-top: 9.375rem !important;
  }
}

.text-orange {
  color: #ff7e00 !important;
}
.text-black-2 {
  color: #171717 !important;
}

.border-orange {
  border-color: #ff7e00 !important;
  border-radius: 10px;
}

.hard-grey {
  color: #595959;
}
.soft-grey {
  color: #f0f2f1;
}
.bg-orange {
  background-color: #ff7e00;
}
.bg-soft-gray {
  background-color: #f0f2f1;
}
.bg-black-2 {
  background-color: #171717;
}

/* Background gradients for Differnt Pages */

/* index.html */

.btn-outline-orange {
  border: 1px solid var(--main-orange);
  color: white;
  border-radius: 5px;
}
.btn-outline-orange:hover {
  background-color: var(--main-orange);
  color: white;
  border-color: var(--main-orange);
}

/* px seems higher on main-hero button */
.btn-hero {
  border-radius: 30px;
  padding-top: 15px;
  padding-right: 80px;
  color: black;
  padding-bottom: 15px;
  padding-left: 80px;
  border-width: 2px;
  border: 2px solid var(--main-orange);
  background-color: white;
  align-self: center;
}

.btn-large {
  border-radius: 30px;
  padding-top: 15px;
  padding-right: 60px;
  color: black;
  padding-bottom: 15px;
  padding-left: 60px;
  border-width: 2px;
  border: 2px solid var(--main-orange);
  background-color: white;
  align-self: center;
}
.btn-large-solid {
  border-radius: 10px;
  padding-top: 15px;
  padding-right: 60px;
  color: white;
  padding-bottom: 15px;
  padding-left: 60px;
  border-width: 2px;
  background-color: var(--main-orange);
}
.btn-large-solid:hover {
  background-color: transparent;
  color: black;
  border-color: var(--main-orange);
}

.btn-secondary {
  border-radius: 30px;
  padding-top: 8px;
  padding-right: 35px;
  padding-bottom: 8px;
  padding-left: 35px;
  border-width: 1px;
  border: 1px solid var(--main-orange);
  color: black;
  background-color: white;
  font-weight: 600;
  font-style: normal;
}

.btn-tertiary {
  border-radius: 50px;
  border-width: 0.5px;
  border: 0.5px solid var(--main-orange);
  padding-top: 3px;
  padding-right: 30px;
  padding-bottom: 3px;
  padding-left: 30px;
  background-color: #f9f2ec;
  transition: none;
  cursor: default;
  pointer-events: none;
}

.btn-readmore {
  border-radius: 5px;
  border-width: 0.5px;
  border: 0.5px solid var(--main-orange);
  padding-top: 15px;
  padding-right: 20px;
  padding-bottom: 15px;
  padding-left: 20px;
  background-color: #f9f2ec;
}

.btn-secondary:hover,
.btn-tertiary:hover,
.btn-large:hover,
.btn-readmore:hover {
  background-color: var(--main-orange); /* optional: highlight */
  color: white; /* optional: invert text */
  border-color: var(--main-orange);
}

/* Index.html Different Sections */
.arrow-img {
  position: absolute;
  top: 100%; /* start below the p */
  left: 50%;
  transform: translate(-50%, 20px); /* ⬅ push it down further */
  max-height: 120px;
  z-index: 5;
  pointer-events: none;
}

@media (max-width: 767.98px) {
  .arrow-img {
    max-height: 70px;
    transform: translate(-50%, 10px); /* smaller push on mobile */
  }
}

/* Header and Footer*/

.copyright-text {
  font-size: 15px;
}

/* Social icon brand hover colors in footer */
footer a.text-secondary:hover .bi-facebook,
footer a.text-secondary:focus .bi-facebook {
  color: #1877f3 !important;
}
footer a.text-secondary:hover .bi-twitter-x,
footer a.text-secondary:focus .bi-twitter-x {
  color: #000 !important;
}
footer a.text-secondary:hover .bi-linkedin,
footer a.text-secondary:focus .bi-linkedin {
  color: #0a66c2 !important;
}
footer a.text-secondary:hover .bi-instagram,
footer a.text-secondary:focus .bi-instagram {
  color: #e4405f !important;
}

.hr-footer {
  border-bottom: 1.5px solid rgba(23, 23, 23, 0.08);
}

/* index.html  */
.process-number {
  position: absolute;
  top: 0%;
  left: 34%;
  transform: translateX(-50%);
  width: 27px;
  height: 27px;
  background-color: #f0f2f1;
  color: #000;
  border-radius: 50%;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.success-numbers {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 55px;
  line-height: 1;
  letter-spacing: 0;
}

.process-arrow {
  position: absolute;
  top: 25%;
  right: -65px;
  transform: translateY(-50%);
  width: 130px;
  z-index: 1;
}

.success-metrics-section {
  position: relative;
  z-index: 1;
  /* orange section stays on top */
  background-color: #ff7e00;
  /* ensure orange fully covers inside */
  margin-top: 80px;
  /* 👈 add spacing from top */
}

.success-metrics-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 120px;
  background: url("../images/index/suceessWave-home.svg") no-repeat right
    top;
  background-size: cover;
  z-index: -99;
}

/* Vertical Borders between Columns */
.success-metrics-section .col-lg-4:not(:last-child) {
  position: relative;
}
.success-metrics-section .col-lg-4:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15%; /* adjust vertical padding */
  right: 0;
  height: 70%; /* control line length */
  width: 0.5px;
  background: rgba(255, 255, 255, 0.414); /* semi-transparent white */
}

.newsletter-section {
  background-image: url("../images/index/Vector.svg");
  background-repeat: no-repeat;
  background-position: center 20px; /* Moves image 60px down from the top */
  background-size: cover;
  padding-top: 80px;
}

@media (max-width: 767px) {
  .newsletter-section {
    margin-top: 32px;
  }
}

/* Positoning Stars at Hero Section */
.star-img1 {
  top: 70%;
  left: 0%;
  width: 42px;
}

.star-img2 {
  top: 10%;
  right: -50%;
  width: 32px;
}

/* Blog Archive Page Styling */
.thick-arrow {
  font-weight: bolder;
  font-size: 1.2rem;
}

.bg-faded-orange {
  background-color: #f9f2ec !important;
}

/* Pagination hover effect */
.page-link:hover,
.page-link:focus {
  background-color: #f5f5f5 !important; /* Light gray */
  color: #171717 !important; /* Optional: dark text for contrast */
  text-decoration: none;
}

.aside-small-heading {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.quote-text {
  font-family: Inter;
  font-weight: 500;
  font-style: Italic;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
  color: #000000;
}

.checklist li {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.125rem;
  line-height: 1;
}

/* e-commerce-seo.html Styling  */

@media (min-width: 992px) {
  /* lg and up */
  .custom-padding-lg {
    padding: 50px 8px 50px 84px;
    margin-top: 0;
  }
}

.percentage {
  font-family: Manrope;
  font-weight: 800;
  font-size: 4.0625rem;
  line-height: 100%;
  color: var(--main-orange);
  margin-right: 1rem;
}

/* Ensure nested dropend menus open to the right on desktop */
@media (min-width: 992px) {
  .navbar .dropdown-menu {
    position: absolute;
  }
  .navbar .dropend > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: 0.125rem;
  }
  /* If a submenu uses dropdown-menu-end, force right-side for dropend */
  .navbar .dropend > .dropdown-menu.dropdown-menu-end {
    left: 100% !important;
    right: auto !important;
  }
}

/* SEO Audit */
.form-control::placeholder {
  color: rgba(0, 0, 0, 0.25); /* faint grey */
  opacity: 1; /* override browser default */
}

/* Tech Data-Architecture and Other Sections */
.service-pill:hover {
  border-color: var(--main-orange);
  box-shadow: inset 0 0 0 1px var(--main-orange);
}

/* Counter List */
.counter-list {
  counter-reset: step;
}

.counter-list li {
  counter-increment: step;
}

.counter {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 33px;
  font-size: 1.25rem;
  font-weight: 600;
  background-color: #fd7e14; /* Bootstrap orange */
  color: #fff;
  font-family: "Manrope", sans-serif;
}

.counter::before {
  content: counter(step);
}

.input-search {
  border: 1px var(--soft-gray) solid;
  border-radius: 22.5px;
}

/* Plain Numbered List */
.numbered-list {
  counter-reset: step;
}

.numbered-list li {
  counter-increment: step;
  align-items: flex-start; /* align number with top line of text */
  gap: 0.5rem; /* space between number and text */
  padding-right: 1rem; /* add breathing room on right side */
}

.numbered-list .num::before {
  content: counter(step) ".";
  font-weight: 600;
  color: var(--main-orange);
}

.numbered-list .num {
  min-width: 1.25rem; /* keeps consistent gap */
  text-align: right;
}

.numbered-list li {
  margin-bottom: 0.75rem;
}

.numbered-list li p {
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  margin-bottom: 0;
}

/* --- Dropdown hover color overrides --- */
/* Use brand orange background for hovered/active dropdown items */
/* Minimal hover; brand color for active/keyboard focus */
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item.dropdown-toggle:hover {
  background-color: var(--main-orange) !important;
  color: #171717 !important;
}
.navbar .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:active,
.navbar .dropdown-menu .dropdown-item.dropdown-toggle:focus {
  background-color: var(--main-orange) !important;
  color: #fff !important;
}

/* Optional: top-level nav-link hover color tweak (non-menu) */
.navbar .nav-link:hover {
  color: var(--main-orange);
}

.dropdown-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dropdown-flex::after {
  margin-left: 0.5rem !important;
  margin-right: 0 !important;
}

/* Swiper Syting */
.navbar .dropdown-menu .dropdown-item {
  transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Sleek, modern dropdown styling ===== */
.navbar .dropdown-menu {
  --dropdown-bg: #fff;
  --dropdown-border: rgba(23, 23, 23, 0.06);
  --dropdown-shadow: 0 6px 18px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04);
  background: var(--dropdown-bg);
  border: 1px solid var(--dropdown-border);
  border-radius: 10px;
  padding: 0.375rem;
  box-shadow: var(--dropdown-shadow);
  transform-origin: top center;
  transform: translateY(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease, transform 140ms ease,
    visibility 0s linear 140ms;
}
.navbar .dropdown-menu.show {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: opacity 140ms ease, transform 160ms ease;
}

/* Dropdown items spacing and typography */
.navbar .dropdown-item {
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  color: #171717;
}
.navbar .dropdown-item.dropdown-toggle::after {
  margin-left: 0.5rem;
}

/* Rotate caret when expanded (supports mobile/desktop) */
.navbar .dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}
.navbar .dropdown-toggle::after {
  transition: transform 0.2s ease;
}

/* ===== Replace default caret with modern SVG chevron ===== */
/* Base chevron (uses currentColor to adapt on hover/active) */
.navbar .dropdown-toggle::after,
.navbar .dropdown-item.dropdown-toggle::after {
  content: "";
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border: none;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* Chevron down SVG with currentColor stroke */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Right-facing chevron for dropend (desktop submenus) */
.navbar .dropend > .dropdown-toggle::after {
  transform: rotate(-90deg);
}

/* Space tweaks for submenu items */
.navbar .dropdown-item.dropdown-toggle::after {
  margin-left: 0.375rem;
}

/* Submenu panel visual on desktop (keeps existing positioning rules) */
@media (min-width: 992px) {
  .navbar .dropend > .dropdown-menu {
    border-radius: 12px;
    box-shadow: var(--dropdown-shadow);
    padding: 0.5rem;
  }
}

/* Mobile-first dropdown: full-width, nested lists flat & clean */
@media (max-width: 991.98px) {
  .navbar .dropdown-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: 100vw;
    min-width: 0;
    max-width: 100vw;
    z-index: 9999;
    background: #fff;
    border: 1px solid rgba(23, 23, 23, 0.06);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
    margin-top: 0;
    padding: 0.5rem 0.25rem;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  /* Nested menus: flat, slight indent, minimal border */
  .navbar .dropdown-menu .dropdown-menu {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid rgba(23, 23, 23, 0.04);
    margin: 0.5rem 0 0.5rem 1rem;
    box-shadow: none;
    padding: 0.5rem 0.25rem;
  }

  /* Tap targets and spacing */
  .navbar .dropdown-item {
    padding: 0.85rem 1rem;
    font-size: 1.08rem;
  }
  .navbar .dropdown-item.dropdown-toggle::after {
    margin-left: 0.5rem;
  }
  /* Prevent content disruption below navbar */
  .navbar-collapse {
    position: relative;
    z-index: 10;
  }
}
.swiper-slide {
  display: flex;
  align-items: center; /* vertical center */
  justify-content: center; /* horizontal center */
}

.swiper.trusted-swiper {
  min-height: 100px; /* just enough to fit tallest logo */
}

.trusted-swiper .swiper-slide {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100px; /* Set consistent height */
}

/* Organic Exposure */

.organic-section-dark {
  background-color: #171717;

  color: white;
}
.organic-service-card {
  background: #1e1e1e;
  border: 1px solid #595959;
  border-radius: 10px;
  height: 404px;
  position: relative;
  overflow: hidden;
}

.organic-service-number {
  font-family: "Manrope", sans-serif;
  position: absolute;
  top: 0;
  font-size: 203px;
  font-weight: bold;
  opacity: 0.1;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(30, 30, 30, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  left: 45px;
}

.organic-service-card:nth-child(2) .organic-service-number {
  left: 29px;
}

.organic-service-card:nth-child(3) .organic-service-number {
  left: 30px;
}

/* Digital Strategy Page */
.business-auditing .cta:hover {
  cursor: pointer;
  color: white;
  background-color: var(--main-orange);
}

.the-approach .overlap-img {
  position: absolute;
  top: 70%; /* desktop default */
  left: 40%;
  transform: translate(-50%, -50%);
  width: 260px;
  z-index: 1;
  height: auto;
}

/* Tablet */
@media (max-width: 992px) {
  .the-approach .overlap-img {
    top: 72%; /* move slightly lower */
    left: 50%; /* center more */
    width: 220px; /* shrink a bit */
  }
}

/* Mobile */
@media (max-width: 768px) {
  .the-approach .overlap-img {
    top: 75%; /* more breathing space */
    left: 50%; /* fully centered */
    width: 180px; /* smaller */
  }
}

/* Extra Small (phones) */
@media (max-width: 480px) {
  .the-approach .overlap-img {
    top: 78%; /* a bit lower again */
    width: 150px; /* even smaller */
  }
}

.business-audit ul li {
  font-family: "Manrope", sans-serif;
  font-size: 1.5rem;
  color: var(--hard-gray);
  font-weight: 500;
  margin-bottom: 1rem;
}

.text-orange-border {
  border-bottom-color: var(--main-orange) !important;
}