/* ________________________Body________________________ */
html body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  font-family: "Google Sans", sans-serif;
}
html {
  scroll-behavior: smooth;
}
html.lenis {
  height: auto;
}

.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
/* ________________________Font________________________ */

/* ________________________Text________________________ */
p {
  margin-bottom: 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
  color: #6f6f6f;
  text-decoration: none;
}
h1 {
  font-size: 60px;
  font-weight: 600;
  line-height: 72px;
  letter-spacing: -2%;
  color: #161616;
  text-align: center;
  margin-bottom: 0;
}
h2 {
  font-size: 40px;
  font-weight: 400;
  line-height: 52px;
  letter-spacing: -2%;
  color: #161616;
  text-align: center;
  margin-bottom: 0;
}
h3 {
  font-size: 32px;
  font-weight: 600;
  line-height: 44px;
  letter-spacing: -1%;
  color: #161616;
  text-align: center;
  margin-bottom: 0;
}
h4 {
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: #161616;
  text-align: left;
  margin-bottom: 0;
}
h5 {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: #161616;
  text-align: left;
  margin-bottom: 0;
}
h6 {
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  color: #161616;
  text-align: left;
  margin-bottom: 0;
}
.greeting-container {
  height: 96px; /* Increased height to give letters "breathing room" */
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  align-items: flex-end;
  margin-bottom: 0;

  /* Adjusted Mask: Clear at the bottom (100%), Faded at the top */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 50%,
    /* The fade starts halfway up */ black 100%
      /* The bottom is now 100% sharp */
  );
  mask-image: linear-gradient(to bottom, transparent 0%, black 50%, black 100%);
}
.hero h2 #greeting-text {
  font-size: 60px;

  font-weight: 500;
  line-height: 72px;

  display: block;
  transition: all 0.8s cubic-bezier(0.76, 0, 0.24, 1);

  /* Required for the color to show through the text */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Initial color */
  background-image: linear-gradient(to bottom, #161616, #444);
}

/* Adjusted exit/entry to be more dramatic with the mask */
.slide-up-exit {
  transform: translateY(-150%) scale(0.9); /* Moves further up and shrinks slightly */
  opacity: 0;
}

.slide-up-entry {
  transform: translateY(150%) scale(0.9); /* Starts further down */
  opacity: 0;
  transition: none !important;
}
.texth {
  background-color: #e8fe62;
}
/* ________________________Button________________________ */
button {
  padding-block: 0;
  padding-inline: 0;
  border-width: 0;
}
/* ________________________Scroll Animation________________________ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.5s ease-out;
}

/* This class will be added via JavaScript */
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ________________________Margin and Padding________________________ */
.p24 {
  padding: 24px;
}
.pt80 {
  padding-top: 80px;
}
.pt104 {
  padding-top: 104px;
}
.pb120 {
  padding-bottom: 120px;
}
.prl0 {
  padding-left: 0;
  padding-right: 0;
}
.mt80 {
  margin-top: 80px;
}
.mt160 {
  margin-top: 160px;
}
.mr40 {
  margin-right: 40px;
}
.mr80 {
  margin-right: 80px;
}
.mb16 {
  margin-bottom: 16px;
}
.mb40 {
  margin-bottom: 40px;
}
.mb80 {
  margin-bottom: 80px;
}

/* ________________________NavBar________________________ */
.navbar {
  max-width: 456px;
  border-radius: 100px;
  border: 1px solid #e0e0e0;
  margin: 16px auto 0 auto;
  padding: 12px;
  /* Make background semi-transparent */
  background-color: rgba(255, 255, 255, 0.5);
  /* Apply the blur effect to the background area */
  backdrop-filter: blur(10px);
  /* Add -webkit prefix for older browser compatibility, e.g. Safari */
  -webkit-backdrop-filter: blur(10px);
  position: sticky;
  top: 16px;
  --bs-navbar-nav-link-padding-x: 0.625rem;
}
.navbar-toggler {
  border: none;
}
.navbar-toggler-icon {
  width: 2em;
  height: 2em;
  color: #161616;
}

.navbar-toggler {
  color: #161616;
}

.navbar li {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
/* _____///NavBar_image///_____ */
.navimage img {
  border-radius: 100px;
  width: 44px;
  height: 44px;
}
.rotate-on-hover {
  display: inline-block;
  height: auto;
  transition: transform 0.5s ease;
  transform-origin: center;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotate-on-hover:hover {
  animation-name: spin;
  animation-duration: 1s;
  animation-timing-function: linear;
  /* This is the key line: */
  animation-iteration-count: infinite;
}
/* Only hide the outline when clicking with a mouse */
.nav-link:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ________________________CTA________________________ */
.button {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.25s ease;
  border-radius: 100px;
  border: none;
  outline: none;
  padding: 9px 16px;
  text-decoration: none;
}
.bigxbtn {
  padding: 18px 25px;
}
.button::before,
.button::after {
  content: "";
  position: absolute;
  inset: var(--space);
  transition: all 0.5s ease-in-out;
  border-radius: 100px;
  z-index: 0;
}

.button::after {
  --space: 0;
  background:
    radial-gradient(
      65.28% 65.28% at 50% 100%,
      rgba(104, 104, 104, 0.8) 0%,
      rgba(104, 104, 104, 0) 100%
    ),
    linear-gradient(0deg, #000000, #000000);
}

/* ← THIS IS THE NEW HOVER COLOR SECTION */
.button:hover::after {
  background:
    radial-gradient(
      65.28% 65.28% at 50% 100%,
      rgba(0, 104, 104, 0.8) 0%,
      rgba(0, 104, 104, 0) 100%
    ),
    linear-gradient(0deg, #002c22, #002c22);
}
/* ← END OF HOVER COLOR SECTION */

.button:active {
  transform: scale(0.95);
}

.points_wrapper {
  overflow: hidden;
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
.points_wrapper .point {
  bottom: -10px;
  position: absolute;
  animation: floating-points infinite ease-in-out;
  pointer-events: none;
  width: 2px;
  height: 2px;
  background-color: #fff;
  border-radius: 9999px;
}
@keyframes floating-points {
  0% {
    transform: translateY(0);
  }
  85% {
    opacity: 0;
  }
  100% {
    transform: translateY(-55px);
    opacity: 0;
  }
}
.points_wrapper .point:nth-child(1) {
  left: 10%;
  opacity: 1;
  animation-duration: 2.35s;
  animation-delay: 0.2s;
}
.points_wrapper .point:nth-child(2) {
  left: 30%;
  opacity: 0.7;
  animation-duration: 2.5s;
  animation-delay: 0.5s;
}
.points_wrapper .point:nth-child(3) {
  left: 25%;
  opacity: 0.8;
  animation-duration: 2.2s;
  animation-delay: 0.1s;
}
.points_wrapper .point:nth-child(4) {
  left: 44%;
  opacity: 0.6;
  animation-duration: 2.05s;
}
.points_wrapper .point:nth-child(5) {
  left: 50%;
  opacity: 1;
  animation-duration: 1.9s;
}
.points_wrapper .point:nth-child(6) {
  left: 75%;
  opacity: 0.5;
  animation-duration: 1.5s;
  animation-delay: 1.5s;
}
.points_wrapper .point:nth-child(7) {
  left: 88%;
  opacity: 0.9;
  animation-duration: 2.2s;
  animation-delay: 0.2s;
}
.points_wrapper .point:nth-child(8) {
  left: 58%;
  opacity: 0.8;
  animation-duration: 2.25s;
  animation-delay: 0.2s;
}
.points_wrapper .point:nth-child(9) {
  left: 98%;
  opacity: 0.6;
  animation-duration: 2.6s;
  animation-delay: 0.1s;
}
.points_wrapper .point:nth-child(10) {
  left: 65%;
  opacity: 1;
  animation-duration: 2.5s;
  animation-delay: 0.2s;
}

.inner {
  z-index: 2;
  position: relative;
  width: 100%;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: -1%;
  transition: color 0.2s ease-in-out;
  overflow: hidden;
}

.sizer {
  visibility: hidden;
  white-space: nowrap;
}

.text,
.hover-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: top 0.5s ease;
}

.text {
  top: 0;
}

.hover-text {
  top: 100%;
}

.button:hover .text {
  top: -100%;
}

.button:hover .hover-text {
  top: 0;
}

/* ________________________Hero________________________ */

/* ________________________Works________________________ */
.showcase {
  display: block;
  padding: 0;
  border-radius: 16px;
  transition: all 0.4s ease;
  transform-origin: center top;
}
.imgwrap img {
  border-radius: 8px;
  max-width: 100%; /* Ensures the image doesn't exceed its container's width */
  height: auto; /* Maintains the image's aspect ratio */
  width: 100%;
  box-sizing: border-box;
  display: block;
}
.titlelogo {
  margin-bottom: 8px;
}
.bannertextwrap {
  margin-top: 24px;
}
.worksection a {
  text-decoration: none;
}
/* ________________________Sticky XX________________________ */
.stacking-cards {
  padding-bottom: 64px;
}
.sticky-card {
  position: sticky;
  top: 160px; /* This is where the card stops scrolling and "sticks" */
  background-color: transparent; /* Ensures no weird background overlaps */
}
.sticky-card:nth-child(1) {
  top: 160px;
}
.sticky-card:nth-child(2) {
  top: 160px;
}
.sticky-card:nth-child(3) {
  top: 160px;
}
.showcase {
  display: block;
  transition: all 0.4s ease;
  transform-origin: center top;
}
.imgwrap img {
  border-radius: 16px;
  max-width: 100%; /* Ensures the image doesn't exceed its container's width */
  height: auto; /* Maintains the image's aspect ratio */
  width: 100%;
  box-sizing: border-box;
  display: block;
}
.titlelogo {
  margin-bottom: 8px;
}
.bannertextwrap {
  margin-bottom: 24px;
}
.worksection a {
  text-decoration: none;
}

/* Default (inactive cards) */
.sticky-card .showcase {
  transform: scale(0.96) translateY(0);
  filter: blur(0) brightness(1);
  opacity: 1;
}

/* Active (focused card) */
.sticky-card.active .showcase {
  transform: scale(1) translateY(0);
  filter: blur(0) brightness(1);
  opacity: 1;
  z-index: 3;
}

/* Previous card (just behind active) */
.sticky-card.prev .showcase {
  transform: scale(0.96);
  filter: blur(2px) brightness(0.8);
  z-index: 2;
}

/* ________________________Final CTA________________________ */
.lastctatext {
  margin-bottom: 24px;
}
/* ________________________Footer________________________ */
.footercontainer {
  background-color: #f8f8f8;
  border-radius: 16px;
  margin-bottom: 16px;
}
.footerthanks p {
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -1%;
  color: #161616;
}
.footersocialrow p {
  color: #161616;
  text-decoration: none;
  margin-bottom: 0;
  font-size: 20px;

  font-weight: 400;
  line-height: 30px;
  letter-spacing: -1%;
}
.footersocialrow a {
  text-decoration: none;
  color: #161616;
  margin-bottom: 0;
  font-size: 20px;

  font-weight: 400;
  line-height: 30px;
  letter-spacing: -1%;
}
.onlylinkedin a {
  position: relative;
  text-decoration: none;
  color: #161616;
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -1%;
  padding: 0;
}

.onlylinkedin a:after {
  content: "";
  position: absolute;
  background-color: #161616;
  height: 2px;
  width: 0;
  left: 0;
  bottom: -2px;
  transition: 0.2s ease-in-out;
}

.onlylinkedin a:hover:after {
  width: 100%;
}

.emailpluscopyrow p {
  color: #6f6f6f;

  font-weight: 400;
}

.footersocialrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.emailpluscopyrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-icon {
  background: transparent;
  color: #161616;
  padding: 0px;
}

/* ________________________Footer_Tooltip________________________ */
.tooltip.fade {
  transition: opacity 0.1s ease-in-out;
}

.tooltip.show .tooltip-inner {
  animation: tooltip-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes tooltip-pop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Default tooltip (black) – now using Bootstrap’s official CSS variable */
.tooltip {
  --bs-tooltip-bg: #161616 !important;
  --bs-tooltip-color: #ffffff !important;
}

/* Success green tooltip – variable automatically colors background + arrow */
.tooltip-success {
  --bs-tooltip-bg: #007a55 !important;
  --bs-tooltip-color: #ffffff !important;
}

/* Optional: Keep your padding/font if you want (Bootstrap already uses the vars) */
.tooltip-inner {
  padding: 6px 12px !important;
  font-size: 14px !important;
}
/* ________________________Magnetic cursor effect________________________ */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10000;
  padding: 10px 22px;
  color: #ffffff;
  border-radius: 50px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;

  /* Initial state: Hidden and scaled down */
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);

  /* Performance & Transitions */
  will-change: transform, opacity;
  transition:
    opacity 0.2s ease,
    transform 0.3s cubic-bezier(0.19, 1, 0.22, 1),
    background-color 0.2s ease;
}

/* This class is toggled by JS */
.custom-cursor.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

body.hide-system-cursor,
body.hide-system-cursor * {
  cursor: none !important;
}
/* ||||||||||||||||||||||||||----------ABOUT PAGE----------|||||||||||||||||||||||||| */
.abouttext {
  padding: 0;
}
.abouttext p {
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -1%;
  color: #393939;
}
.aboutimg {
  background-color: #f8f8f8;
  padding: 24px;
  border-radius: 16px;
}

.aboutimg img {
  border-radius: 8px;
  max-width: 100%; /* Ensures the image doesn't exceed its container's width */
  height: auto; /* Maintains the image's aspect ratio */
  width: 100%;
  box-sizing: border-box;
  display: block;
}
.aboutimg p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -1%;
  color: #6f6f6f;
}
.creative_img {
  background-color: #f8f8f8;
  padding: 16px;
  border-radius: 16px;
}
.creative_img img {
  border-radius: 8px;
  max-width: 100%; /* Ensures the image doesn't exceed its container's width */
  height: auto; /* Maintains the image's aspect ratio */
  width: 100%;
  box-sizing: border-box;
  display: block;
}

/* ||||||||||||||||||||||||||----------NESTWISE PAGE----------|||||||||||||||||||||||||| */
.casestudyheroimg img {
  border-radius: 16px;
  max-width: 100%; /* Ensures the image doesn't exceed its container's width */
  height: auto; /* Maintains the image's aspect ratio */
  width: 100%;
  box-sizing: border-box;
  display: block;
}
.casestnda {
  background-color: #f8f8f8;
  padding: 16px;
  border-radius: 100px;
}
.casestnda p {
  color: #161616;
}
.card_1 {
  background-color: #f8f8f8;
  padding: 24px 24px 20px 24px;
  border-radius: 16px;
}
.card_1 img {
  margin-bottom: 48px;
}
.card_1 h4 {
  margin-bottom: 8px;
}
.cs_reg_paragraph p {
  margin-bottom: 24px;
}
.com_box {
  background-color: #f8f8f8;
  padding: 24px;
  border-radius: 16px;
  margin-bottom: 16px;
}
.com_box img {
  border-radius: 8px;
  max-width: 100%; /* Ensures the image doesn't exceed its container's width */
  height: auto; /* Maintains the image's aspect ratio */
  width: 100%;
  box-sizing: border-box;
  display: block;
}
.insidecom_box h4 {
  margin: 44px 0 8px 0;
}
.mscwcard {
  background-color: #f8f8f8;
  padding: 24px 24px 20px 24px;
  border-radius: 16px;
}
.mscwletter {
  background-color: #ffffff;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  margin-bottom: 48px;
}
.mscwcard h4 {
  margin-bottom: 8px;
}
.mscwcard ul {
  margin-bottom: 0;
  padding: 0 0 0 16px;
}
.mscwcard li {
  font-weight: 400;
  color: #6f6f6f;
}
.hmwrapper {
  background-color: #f8f8f8;
  padding: 24px;
  border-radius: 16px;
}
.hmwrapper img {
  border-radius: 8px;
  width: 128px;
  height: 128px;
  object-fit: cover;
}
.hmwrapper p {
  font-size: 20px;
  line-height: 30px;
  margin: 0;
}
.pivot_top h4 {
  margin-bottom: 8px;
}
.pivot_top p {
  margin-bottom: 24px;
  padding-right: 24px;
}
.pivot_top img {
  border-radius: 8px;
  max-width: 100%; /* Ensures the image doesn't exceed its container's width */
  height: auto; /* Maintains the image's aspect ratio */
  width: 100%;
  box-sizing: border-box;
  display: block;
}
.designdiv {
  background-color: #f8f8f8;
  padding: 24px;
  border-radius: 16px;
}

.designdiv img {
  border-radius: 8px;
  max-width: 100%; /* Ensures the image doesn't exceed its container's width */
  height: auto; /* Maintains the image's aspect ratio */
  width: 60%;
  box-sizing: border-box;
  display: block;
}
.pivotdiv h4 {
  margin-bottom: 8px;
}
.chatimg img {
  border-radius: 8px;
  max-width: 100%; /* Ensures the image doesn't exceed its container's width */
  height: auto; /* Maintains the image's aspect ratio */
  width: 100%;
  box-sizing: border-box;
  display: block;
}
.allchaing img {
  border-radius: 16px;
  max-width: 100%; /* Ensures the image doesn't exceed its container's width */
  height: auto; /* Maintains the image's aspect ratio */
  width: 100%;
  box-sizing: border-box;
  display: block;
}
.bodersimg img {
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  max-width: 100%; /* Ensures the image doesn't exceed its container's width */
  height: auto; /* Maintains the image's aspect ratio */
  width: 100%;
  box-sizing: border-box;
  display: block;
}
/* Custom style for the blurred text background */
.text-overlay-bg {
  /* White background with 50% opacity */
  background-color: rgba(255, 255, 255, 0.5);

  /* Blurs the image *behind* this element */
  backdrop-filter: blur(10px);

  /* Modern compatibility check */
  -webkit-backdrop-filter: blur(10px);

  /* Add some padding to space things out nicely */
  padding: 20px;
}

/* ||||||||||||||||||||||||||----------HOMEHORIZEN PAGE----------|||||||||||||||||||||||||| */
.card_user {
  background-color: #f8f8f8;
  padding: 24px 24px 20px 24px;
  border-radius: 16px;
}
.card_user img {
  border-radius: 8px;
  max-width: 100%; /* Ensures the image doesn't exceed its container's width */
  height: auto; /* Maintains the image's aspect ratio */
  width: 100%;
  box-sizing: border-box;
  display: block;
  margin: 0 0 48px 0;
}
.com_box2 {
  border-radius: 8px;
  max-width: 100%; /* Ensures the image doesn't exceed its container's width */
  height: auto; /* Maintains the image's aspect ratio */
  width: 100%;
  box-sizing: border-box;
  display: block;
}
/* ||||||||||||||||||||||||||----------TURBOBROKER PAGE----------|||||||||||||||||||||||||| */
.tbcard {
  border-radius: 16px;
  padding: 24px;
  background-color: #f8f8f8;
}