.width-50 {
  width: 55% !important;
}

.primary-border-top {
  border-top: 1px solid rgba(25, 24, 24, 0.16) !important;
}

/* Colors */
.primary-bg-color {
    background-color: rgb(247, 247, 242);
}

.secondary-bg-color {
    background-color: rgb(25, 24, 24);
}

.secondary-icon-color {
    background-color: rgba(25, 24, 24, 0) !important;
}

.secondary-text-color {
    color: rgba(247, 247, 242, 0.88);
}

.primary-bg-color {
    background-color: rgb(247, 247, 242);
}


/* Typography */
.secondary-label-large {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 12px !important;
  letter-spacing: 0.75px !important;
  line-height: 16px !important;
  color: rgba(247, 247, 242, 0.88) !important;
  text-rendering: optimizeLegibility;  
}

.label-large {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 12px !important;
  letter-spacing: 0.75px !important;
  line-height: 16px !important;
  color: rgba(25, 24, 24, 0.88) !important;
  text-rendering: optimizeLegibility;
}

.label-large-1 {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 12px !important;
  letter-spacing: 0.75px !important;
  line-height: 16px !important;
  color: rgba(25, 24, 24, 0.64) !important;
  text-rendering: optimizeLegibility;
}

.primary-text-large {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 500;
  font-size: 20px !important;
  letter-spacing: normal !important;
  line-height: 28px !important;
  color: rgba(25, 24, 24, 0.88) !important;
  text-rendering: optimizeLegibility;
}

.primary-text-h4 {
  font-family: "IBM Plex Serif", Arial, sans-serif;
  font-weight: 400;
  font-size: 32px !important;
  letter-spacing: -1px !important;
  line-height: 36px !important;
  color: rgba(25, 24, 24, 0.88) !important;
  text-rendering: optimizeLegibility;
}

.primary-text-h5 {
  font-family: "IBM Plex Serif", Arial, sans-serif;
  font-weight: 400;
  font-size: 28px !important;
  letter-spacing: -0.5px !important;
  line-height: 32px !important;
  color: rgb(25, 24, 24) !important;
  text-rendering: optimizeLegibility;
}

.secondary-text-medium {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem !important;
  letter-spacing: normal !important;
  line-height: 24px !important;
  color: rgba(247, 247, 242, 0.64) !important;
  text-rendering: optimizeLegibility;
}


.secondary-text-h2 {
  font-family: "IBM Plex Serif", Arial, sans-serif;
  font-weight: 400;
  font-size: 48px !important;
  letter-spacing: -1px !important;
  line-height: 52px !important;
  color: rgba(247, 247, 242, 0.88) !important;
  text-rendering: optimizeLegibility;
}

.secondary-text-h6 {
  font-family: "IBM Plex Serif", Arial, sans-serif;
  font-weight: 400;
  font-size: 24px !important;
  letter-spacing: -0.5px !important;
  line-height: 28px !important;
  color: rgba(247, 247, 242, 0.88) !important;
  text-rendering: optimizeLegibility;
}

.secondary-text-h4 {
  font-family: "IBM Plex Serif", Arial, sans-serif;
  font-weight: 400;
  font-size: 32px !important;
  letter-spacing: -1px !important;
  line-height: 36px !important;
  color: rgba(247, 247, 242, 0.88) !important;
  text-rendering: optimizeLegibility;
}

.secondary-text-medium {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px !important;
  letter-spacing: normal !important;
  line-height: 24px !important;
  color: rgba(247, 247, 242, 0.64) !important;
  text-rendering: optimizeLegibility;
}

.secondary-text-medium-1 {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px !important;
  letter-spacing: normal !important;
  line-height: 24px !important;
  color: rgba(247, 247, 242, 0.88) !important;
  text-rendering: optimizeLegibility;
}

.secondary-text-medium-bold {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 500;
  font-size: 1rem !important;
  letter-spacing: normal !important;
  line-height: 24px !important;
  color: rgba(247, 247, 242, 0.88) !important;
  text-rendering: optimizeLegibility;
}

.secondary-text-small-1 {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 14px !important;
  letter-spacing: normal !important;
  line-height: 20px !important;
  color: rgba(247, 247, 242, 0.64) !important;
  text-rendering: optimizeLegibility;
}

.secondary-text-small-2 {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px !important;
  letter-spacing: normal !important;
  line-height: 24px !important;
  color: rgba(247, 247, 242, 0.88) !important;
  text-rendering: optimizeLegibility;
}

.secondary-text-large-1 {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 500;
  font-size: 20px !important;
  letter-spacing: normal !important;
  line-height: 28px !important;
  color: rgba(247, 247, 242, 0.88) !important;
  text-rendering: optimizeLegibility;
}

.secondary-text-large-2 {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 20px !important;
  letter-spacing: normal !important;
  line-height: 28px !important;
  color: rgba(247, 247, 242, 0.88) !important;
  text-rendering: optimizeLegibility;
}

/* Spacing */
.primary-padding-x-0 {
    padding: 32px !important;
}

.primary-padding-x-y-1 {
    padding: 32px !important;
}

.primary-padding-x-y-2 {
    padding: 64px !important;
}

.primary-padding-y-1 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.primary-padding-y-2 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.primary-padding-y-3 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.primary-padding-y-4 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

.primary-padding-y-5 {
    padding-top: 80px !important;
    padding-bottom: 32px !important;
}

.primary-padding-x-1 {
    padding-right: 8px !important;
    padding-left: 8px !important;
}

.primary-padding-x-2 {
    padding-right: 32px !important;
    padding-left: 32px !important;
}

.primary-padding-x-3 {
    padding-right: 8px !important;
    padding-left: 0px !important;
}

.primary-padding-t-1 {
  padding-top: 24px !important;
}

.primary-padding-t-2 {
  padding-top: 80px !important;
}

.primary-padding-t-3 {
  padding-top: 48px !important;
}

.primary-padding-b-1 {
  padding-bottom: 24px !important;
}

.primary-padding-b-3 {
  padding-bottom: 80px !important;
}

.primary-padding-b-4 {
  padding-bottom: 48px !important;
}

.primary-padding-b-5 {
  padding-bottom: 16px !important;
}

.primary-padding-b-6 {
  padding-bottom: 8px !important;
}

.primary-padding-b-7 {
  padding-bottom: 20px !important;
}

.primary-padding-b-8 {
  padding-bottom: 32px !important;
}

.primary-padding-r-1 {
  padding-right: 4px !important;
}

.primary-padding-r-2 {
  padding-right: 8px !important;
}

.primary-padding-r-3 {
  padding-right: 132px !important;
}

.primary-mt-1 {
    padding-top: 4px !important;
}

.primary-mt-2 {
    padding-top: 24px !important;
}

.primary-mb-1 {
    padding-bottom: 16px !important;
}

.primary-mb-2 {
    padding-bottom: 24px !important;
}

.custom-w-1 {
    width: 50% !important;
    margin: 0 auto !important;
}

.container-fluid {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* Logo */
.nafio-nabi-logo {
  font-family: "IBM Plex Serif", Arial, sans-serif;
  font-weight: 400;
  font-size: 24px !important;
  letter-spacing: -1.5px !important;
  line-height: 24px !important;
  color: rgba(25, 24, 24, 0.88) !important;
}

.nafio-nabi-logo-1 {
  font-family: "IBM Plex Serif", Arial, sans-serif;
  font-weight: 400;
  font-size: 32px !important;
  letter-spacing: -1.5px !important;
  line-height: 24px !important;
  color: rgba(247, 247, 242, 0.88) !important;
}

/* Borders */
.primary-border {
  border: 1px solid rgba(25, 24, 24, 0.16) !important;
}

/* Components: icon */
.icon-wrap-feature {
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  background-color: rgb(225, 220, 213);
  border-radius: 12px;
  display: flex;
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  box-shadow: 0 -1px 0 0 rgba(247, 247, 242, 0.16), 0 1px 0 0 rgba(247, 247, 242, 0.08);
}

.icon-color {
  color: rgb(25, 24, 24) !important;
}

.icon-large {
  width: 24px;
  height: 24px;
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

/* Components: badges */


/* Components: buttons */
.custom-btn-primary {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: normal !important;
  line-height: 24px !important;
  text-rendering: optimizeLegibility;
  color: rgb(247, 247, 242) !important;
  background-color: rgba(25, 24, 24) !important;
  border: 1px solid rgba(247, 247, 242, 0.08) !important;
  padding: 12px 16px !important;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
}

/* Hover State */
.custom-btn-primary:hover {
  background-color: rgba(25, 24, 24, 0.88) !important;
}

/* Focus State (Keyboard Navigation & Click Ring) */
/* .custom-btn-primary:focus,
.custom-btn-primary:focus-visible {
  background-color: rgba(25, 24, 24) !important;
  color: rgb(247, 247, 242) !important;
  outline: none;
} */

/* Active State (Pressed / Clicked) */
.custom-btn-primary:active,
.custom-btn-primary.active,
.custom-btn-primary:first-child:active {
  background-color: rgba(25, 24, 24) !important;
  color: rgb(247, 247, 242) !important;
  outline: none;
}

.custom-btn-secondary {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: normal !important;
  line-height: 24px !important;
  text-rendering: optimizeLegibility;
  color: rgba(25, 24, 24) !important;
  background-color: transparent !important;
  border: 1px solid rgba(25, 24, 24, 0.16) !important;
  padding: 12px 16px !important;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
}

.custom-btn-secondary:hover {
  background-color: rgba(25, 24, 24, 0.88) !important;
  color: rgb(247, 247, 242) !important;
  border: 1px solid rgba(247, 247, 242, 0.08) !important;
}

.custom-btn-secondary:active,
.custom-btn-secondary.active,
.custom-btn-secondary:first-child:active {
  background-color: rgba(25, 24, 24) !important;
  color: rgb(247, 247, 242) !important;
  outline: none;
}

.custom-btn-white {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: normal !important;
  line-height: 24px !important;
  text-rendering: optimizeLegibility;
  color: rgba(25, 24, 24) !important;
  background-color: rgb(247, 247, 242) !important;
  border: 1px solid rgba(25, 24, 24, 0.08) !important;
  padding: 12px 16px !important;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
}

.custom-btn-white:hover {
  background-color: rgba(247, 247, 242, 0.88) !important;
  border: 1px solid rgba(25, 24, 24, 0.08) !important;
}

.custom-btn-white:active,
.custom-btn-white.active,
.custom-btn-white:first-child:active {
  background-color: rgb(247, 247, 242) !important;
  color: rgba(25, 24, 24) !important;
  outline: none;
}

/* Section: header */
.navbar-nav .nav-link {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: normal !important;
  line-height: 24px !important;
  text-rendering: optimizeLegibility;
  color: rgb(25, 24, 24);
  padding: 8px 12px !important;
  transition: opacity 0.3s ease, color 0.3s ease;
}

/* Hover state */
.navbar-nav .nav-link:hover {
  opacity: 0.6 !important;
}

/* Section: hero */
/* Hero Image Grid */
.hero-image-grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column on mobile devices */
  gap: 16px;
  width: 100%;
}

.hero-img-item {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.hero-img-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.custom-obj-position-1 {
  object-position: right !important;
}

.custom-obj-position-2 {
  object-position: left !important;
}

/* .custom-obj-position-3 {
  object-position:0dvw !important;
} */

/* Desktop & Tablet Layout (>= 768px) */
@media (min-width: 768px) {
  .hero-image-grid {
    grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
    grid-template-rows: repeat(2, 260px); /* 2 fixed height rows */
  }

  /* Left image takes row 1 & 2 in column 1 */
  .hero-img-tall {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }

  /* Bottom right image spans across column 2 & 3 in row 2 */
  .hero-img-wide {
    grid-column: 2 / 4;
    grid-row: 2 / 3;
  }
}

/* ==========================================================================
   Section: benefits
   ==========================================================================
   These variables control the look of the whole section. Change a value
   here and it updates everywhere it's used below — no need to hunt through
   the rest of the rules.
   ========================================================================== */
.benefits-section {
  --benefits-radius: 16px;             /* corner roundness of placeholder image boxes */
  --benefits-placeholder-bg: rgba(247, 247, 242, 0.08);     /* fill color of placeholder boxes */
  --benefits-placeholder-border: rgba(247, 247, 242, 0.16); /* dashed border color of placeholder boxes */
  --benefits-placeholder-text: rgba(247, 247, 242, 0.4);    /* "Image placeholder" label color */
}

/* Heading text style, e.g. "Every decision, every detail..." */
.secondary-text-large {
  font-family: "IBM Plex Serif", Arial, sans-serif;
  font-weight: 400;
  font-size: 40px !important;
  letter-spacing: -1.5px !important;
  line-height: 48px !important;
  color: rgba(247, 247, 242, 0.88) !important;
  text-rendering: optimizeLegibility;
}

/* Column title text style, e.g. "40+ Modular Sections" */
.secondary-text-heading {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 500;
  font-size: 20px !important;
  letter-spacing: normal !important;
  line-height: 28px !important;
  color: rgba(247, 247, 242, 0.88) !important;
  text-rendering: optimizeLegibility;
  margin-bottom: 8px !important;
}

.benefits-placeholder-img-1 {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px solid rgb(247, 247, 242, 0.16);
  display: flex;
  margin-bottom: 16px;
  align-items: center;
  justify-content: center;
  background-image: url("../img/benefit-two.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.benefits-placeholder-img-2 {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px solid rgb(247, 247, 242, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background-image: url("../img/hero-three.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.benefits-placeholder-img-3 {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px solid rgb(247, 247, 242, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background-image: url("../img/benefits-four.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

.benefits-placeholder-img span {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 0.875rem;
  color: var(--benefits-placeholder-text);
}

/* Section: service */
.service-bg-img-1 {
  background-image: url("../img/homepage-hero-one.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  border-radius: 12px;
  height: 100%;
}

.service-img-1 {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: top !important;
  border-radius: 12px;
  /* border: 0.2px solid rgba(25, 24, 24, 0.16) !important; */
}

.service-bg-img-2 {
  background-image: url("../img/forme-review-two.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 1.5% 5%;
  border-radius: 12px;
  height: 100%;
  border: 0.2px solid rgba(25, 24, 24, 0.16) !important;
}

.service-img-2 {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: left !important;
  border-radius: 12px;
  /* border: 0.2px solid rgba(25, 24, 24, 0.16) !important; */
}

.service-bg-img-3 {
  background-image: url("../img/meta-ad-4.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 1.5% 5%;
  border-radius: 12px;
  height: 100%;
  border: 0.2px solid rgba(25, 24, 24, 0.16) !important;
}

.service-img-3 {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: left !important;
  border-radius: 12px;
  /* border: 0.2px solid rgba(25, 24, 24, 0.16) !important; */
}

.service-bg-img-customer-support {
  background-image: url("../img/service-customer-support-3.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left;
  border-radius: 12px;
  height: 100%;
  border: 0.2px solid rgba(25, 24, 24, 0.16) !important;
}

.service-img-4 {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: left !important;
  border-radius: 12px;
  /* border: 0.2px solid rgba(25, 24, 24, 0.16) !important; */
}

/* Stacked layout (below lg): let images use their natural height
   so the 32px top margin can't push them out of their column */
@media (max-width: 991.98px) {
  .service-img-1,
  .service-img-2,
  .service-img-3,
  .service-img-4 {
    display: block;
    height: auto;
    object-fit: initial;
  }
}

/* Section: pricing */
.pricing-row {
  display: flex;
  align-items: stretch;
}

.pricing-col {
  margin-bottom: 24px;
  display: flex;
}

.pricing-card {
  background-color: rgb(239, 237, 231);
  border-radius: 12px;
  border: 1px solid rgba(25, 24, 24, 0.16);
  padding: 32px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.pricing-card-dark {
  background-color: rgb(30, 28, 27);
  border-radius: 12px;
  border: 1px solid rgba(247, 247, 242, 0.16);
  padding: 32px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.pricing-card-title {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.125rem !important;
  color: rgba(25, 24, 24, 0.88) !important;
}

.pricing-card-dark .pricing-card-title {
  color: rgba(247, 247, 242, 0.88) !important;
}

.pricing-price {
  font-family: "IBM Plex Serif", Arial, sans-serif;
  font-weight: 400;
  font-size: 40px !important;
  letter-spacing: -1px !important;
  line-height: 44px !important;
  color: rgba(25, 24, 24, 0.88) !important;
}

.pricing-card-dark .pricing-price {
  color: rgba(247, 247, 242, 0.88) !important;
}

.pricing-price-suffix {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: rgba(25, 24, 24, 0.5);
}

.pricing-card-dark .pricing-price-suffix {
  color: rgba(247, 247, 242, 0.5);
}

.pricing-divider {
  border-top: 1px solid rgba(25, 24, 24, 0.88);
}

.pricing-card-dark .pricing-divider {
  border-top: 1px solid rgba(247, 247, 242, 0.16);
}

.pricing-includes {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 11px !important;
  letter-spacing: 0.75px !important;
  color: rgba(25, 24, 24, 0.5) !important;
  margin-bottom: 16px !important;
}

.pricing-card-dark .pricing-includes {
  color: rgba(247, 247, 242, 0.5) !important;
}

.pricing-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  flex-grow: 1;
}

.pricing-feature-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 0.9375rem;
  color: rgba(25, 24, 24, 0.72);
  margin-bottom: 14px;
}

.pricing-card-dark .pricing-feature-list li {
  color: rgba(247, 247, 242, 0.72);
}

.pricing-check-wrap {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background-color: rgb(247, 247, 242);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(25, 24, 24);
}

.pricing-card-dark .pricing-check-wrap {
  background-color: rgb(247, 247, 242);
  color: rgb(25, 24, 24);
}

.pricing-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  text-align: center;
  margin-bottom: 24px;
}

.pricing-cta-dark {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: rgb(25, 24, 24) !important;
  background-color: rgb(247, 247, 242) !important;
  border: 1px solid rgba(25, 24, 24, 0.08) !important;
  padding: 12px 16px !important;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
  transition: all 0.3s ease-in-out;
}

.pricing-cta-dark:hover {
  background-color: rgba(247, 247, 242, 0.88) !important;
}

.pricing-footnote {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 0.8125rem;
  color: rgba(25, 24, 24, 0.5);
  line-height: 18px;
}

.pricing-footnote-dark {
  color: rgba(247, 247, 242, 0.5);
}

/* Section: how it works */
.how-it-works-row {
  display: flex;
  flex-wrap: wrap;
}

.how-it-works-col {
  /* margin-bottom: 24px; */
  display: flex;
}

.how-it-works-card {
  position: relative;
  width: 100%;
  min-height: 420px;
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
}

.image-card-1 {
  /* background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../img/meetin-2.png"); */
  background-image: linear-gradient(rgba(25, 24, 24, 0.2), rgba(25, 24, 24, 0.2)), url("../img/meetin-2.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 20% 50%;
  border-radius: 12px;
  height: 100%;
  border: 1px solid rgba(247, 247, 242, 0.16);
}

.image-card-2 {
  /* background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../img/meetin-2.png"); */
  background-image: linear-gradient(rgba(25, 24, 24, 0.2), rgba(25, 24, 24, 0.2)), url("../img/design-1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 20% 50%;
  border-radius: 12px;
  height: 100%;
  border: 1px solid rgba(247, 247, 242, 0.16);
}

.image-card-3 {
  /* background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../img/meetin-2.png"); */
  background-image: linear-gradient(rgba(25, 24, 24, 0.2), rgba(25, 24, 24, 0.2)), url("../img/launch-3.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  /* background-position: 20% 50%; */
  background-position: right;
  border-radius: 12px;
  height: 100%;
  border: 1px solid rgba(247, 247, 242, 0.16);
}

.image-card-4 {
  /* background-image: url("../img/cs-4.jpg"); */
  background-image: linear-gradient(rgba(25, 24, 24, 0.2), rgba(25, 24, 24, 0.2)), url("../img/cs-4.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
  border-radius: 12px;
  height: 100%;
  border: 1px solid rgba(247, 247, 242, 0.16);
}

.how-it-works-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(25, 24, 24, 0.05) 0%, rgba(25, 24, 24, 0.35) 55%, rgba(25, 24, 24, 0.92) 100%);
  z-index: 1;
}

.how-it-works-card-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
}

.how-it-works-number {
  font-family: "IBM Plex Serif", Arial, sans-serif;
  font-weight: 400;
  font-size: 32px !important;
  letter-spacing: -1px !important;
  color: rgba(247, 247, 242, 0.88) !important;
  text-rendering: optimizeLegibility;
}

.how-it-works-title {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 500;
  font-size: 1rem !important;
  color: rgb(247, 247, 242) !important;
  margin-bottom: 6px !important;
}

.how-it-works-desc {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 14px !important;
  line-height: 20px !important;
  color: rgba(247, 247, 242, 0.64) !important;
}

@media (min-width: 768px) {
  .how-it-works-col {
    padding-right: 12px;
    padding-left: 12px;
  }
}

/* Section: homepage cta */
.cta-jumbotron {
  border: 1px solid rgba(25, 24, 24, 0.16);
  border-radius: 16px;
}

.cta-bg {
  background-image: url("../img/cta-bg-2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Component: cta contact form */
.cta-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cta-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cta-form-label {
  margin-bottom: 0 !important;
  text-transform: uppercase;
}

.cta-form-input {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: normal;
  line-height: 24px;
  color: rgba(25, 24, 24, 0.64) !important;
  background-color: rgba(25, 24, 24, 0.08);
  border: 1px solid rgba(25, 24, 24, 0.16);
  border-radius: 8px;
  padding: 12px 16px;
  width: 100%;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cta-form-input::placeholder {
  color: rgba(25, 24, 24, 0.64) !important;
}

.cta-form-input:focus {
  outline: none;
  background-color: rgba(25, 24, 24, 0.14);
  border-color: rgba(25, 24, 24, 0.64);
}

.cta-form-textarea {
  resize: vertical;
  min-height: 112px;
}

.cta-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  border: none !important;
}

.cta-form-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.cta-form-status {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
  min-height: 0;
}

.cta-form-status:empty {
  display: none;
}

.cta-form-status-success {
  color: #2e7d32;
}

.cta-form-status-error {
  color: #c0392b;
}

.user-image {
  width: 15.712%;
  border-radius: 12px;
}

/* Section: footer */
.footer-about-text {
  max-width: 396px;
}

.footer-col-label {
  color: rgba(247, 247, 242, 0.4) !important;
  text-transform: uppercase;
}

.footer-link {
  color: rgba(247, 247, 242, 0.64) !important;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.footer-link:hover {
  color: rgba(247, 247, 242, 0.88) !important;
  opacity: 1;
}

.footer-divider {
  border: none;
  border-top: 1px solid rgba(247, 247, 242, 0.16);
  /* margin: 48px 0 24px 0; */
  opacity: 1;
}

.footer-social-icon {
  color: rgba(247, 247, 242, 0.64) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.footer-social-icon:last-child {
  margin-right: 0;
}

.footer-social-icon:hover {
  color: rgba(247, 247, 242, 0.88) !important;
}

.footer-copy {
  color: rgba(247, 247, 242, 0.4) !important;
}

@media (max-width: 575.98px) {
  .primary-padding-b-sm-0 {
    padding-bottom: 24px !important;
  }
}

.footer-nav-group {
  gap: 48px 64px;
}

.footer-nav-col {
  min-width: 140px;
}

@media (max-width: 991.98px) {
  .footer-nav-group {
    justify-content: flex-start !important;
  }
}

.review-card {
  padding: 48px !important;
  border-radius: 12px !important;
}

.primary-line-break {
  border: 1px solid rgba(25, 24, 24, 0.16) !important;
}

.review-img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background-image: url("../img/review-img.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid rgb(247, 247, 242, 0.16);
}

.review-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.review-row > .review-card,
.review-row > .review-video-col {
  flex: 0 0 calc(50% - 12px);
  max-width: calc(50% - 12px);
}

.review-card {
  padding: 48px !important;
  border-radius: 16px;
}

.review-video-col {
  position: relative;
}

.review-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
  /* object-position: 50% 5%; */
  object-position: top;
  border: 1px solid rgb(247, 247, 242, 0.16);
  display: block;
}

.brand-logo {
  max-width: 150px;
}

/*********************
Spacing
**********************/

.primary-link-color {
  color: rgba(25, 24, 24, 0.64) !important;
}

.secondary-link-color {
  color: rgba(247, 247, 242, 0.88) !important;
}

/*********************
Spacing
**********************/

/* Padding */
.primary-padding-b-2 {
  padding-bottom: 64px !important;
}

/*********************
Typography
**********************/

/* Primary */
.primary-text-h1 {
  font-family: "IBM Plex Serif", Arial, sans-serif;
  font-weight: 400;
  font-size: 64px !important;
  letter-spacing: -2.5px !important;
  line-height: 72px !important;
  color: rgba(25, 24, 24, 0.88) !important;
  text-rendering: optimizeLegibility;
}

.primary-text-h6 {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 24px !important;
  letter-spacing: -0.5px !important;
  line-height: 28px !important;
  color: rgb(25, 24, 24) !important;
  text-rendering: optimizeLegibility;
}

.primary-text-h2 {
  font-family: "IBM Plex Serif", Arial, sans-serif;
  font-weight: 400;
  font-size: 48px !important;
  letter-spacing: -1px !important;
  line-height: 52px !important;
  color: rgba(25, 24, 24, 0.88) !important;
  text-rendering: optimizeLegibility;
}

.primary-text-h3 {
  font-family: "IBM Plex Serif", Arial, sans-serif;
  font-weight: 400;
  font-size: 40px !important;
  letter-spacing: -1px !important;
  line-height: 44px !important;
  color: rgba(25, 24, 24, 0.88) !important;
  text-rendering: optimizeLegibility;
}

.primary-text-small {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 10px !important;
  letter-spacing: 0.75px !important;
  line-height: 12px !important;
  color: rgba(25, 24, 24, 0.88) !important;
  text-rendering: optimizeLegibility;
}

.primary-text-small-1 {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 14px !important;
  letter-spacing: normal !important;
  line-height: 20px !important;
  color: rgba(25, 24, 24, 0.64) !important;
  text-rendering: optimizeLegibility;
}

.primary-text-small-2 {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 14px !important;
  letter-spacing: normal !important;
  line-height: 20px !important;
  color: rgba(247, 247, 242, 0.88) !important;
  text-rendering: optimizeLegibility;
}

.primary-text-small-3 {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 14px !important;
  letter-spacing: normal !important;
  line-height: 20px !important;
  color: rgba(25, 24, 24, 0.88) !important;
  text-rendering: optimizeLegibility;
}

.primary-text-small-3 {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 14px !important;
  letter-spacing: normal !important;
  line-height: 20px !important;
  color: rgba(25, 24, 24, 0.88) !important;
  text-rendering: optimizeLegibility;
}

.primary-text-medium {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem !important;
  letter-spacing: normal !important;
  line-height: 24px !important;
  color: rgba(25, 24, 24, 0.88) !important;
  text-rendering: optimizeLegibility;
}

.primary-text-medium-1 {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem !important;
  letter-spacing: normal !important;
  line-height: 24px !important;
  color: rgba(25, 24, 24, 0.64) !important;
  text-rendering: optimizeLegibility;
}

.primary-text-medium-bold {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 500;
  font-size: 1rem !important;
  letter-spacing: normal !important;
  line-height: 24px !important;
  color: rgba(25, 24, 24, 1) !important;
  text-rendering: optimizeLegibility;
}


/* Secondary */
.secondary-text-h1 {
  font-family: "IBM Plex Serif", Arial, sans-serif;
  font-weight: 400;
  font-size: 64px !important;
  letter-spacing: -2.5px !important;
  line-height: 72px !important;
  color: rgba(247, 247, 242, 0.88) !important;
  text-rendering: optimizeLegibility;
}

/*********************
Components: badge
**********************/

.primary-badge {
  background-color: rgb(239, 237, 231) !important;
  border-radius: 16px !important;
  padding: 4px 8px !important;
}


/*********************
Section: announcement
**********************/


/*********************
Section: header
**********************/


.break-me-lg {
  display: block;
}

/*********************
Responsive CSS
**********************/
@media (max-width: 576px) { 

/*********************
Section: announcement
**********************/
  .secondary-text-medium-1 {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .primary-padding-y-1 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .hide {
    display: none !important;
  }

  /*********************
  Section: header
  **********************/

  .primary-padding-y-2 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .navbar-nav .nav-link {
    padding-left: 0px !important;
  }

  /*********************
  Section: hero
  **********************/

  .primary-padding-y-3 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .primary-text-h1 {
    font-size: 44px !important;
    letter-spacing: -2px !important;
    line-height: 48px !important;
  }

  .primary-text-medium {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .custom-btn-primary, .custom-btn-secondary {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .primary-padding-b-2 {
  padding-bottom: 48px !important;
  }

  .primary-padding-t-1 {
    padding-top: 16px !important;
  }
  
  .primary-padding-b-1 {
    padding-bottom: 16px !important;
  }

  .break-me-sm {
    display: block !important;
  }

  .hero-image-grid {
    gap: 12px !important;
  }

  /*********************
  Section: benefits
  **********************/

  .secondary-text-h2 {
    font-size: 32px !important;
    letter-spacing: -0.5px !important;
    line-height: 36px !important;
  }

  .secondary-text-h6 {
    font-size: 20px !important;
    letter-spacing: -0.25px !important;
    line-height: 28px !important;
  }

  .secondary-text-medium {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .px-2 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .cpb-1 {
    padding-bottom: 32px !important;
  }

  .primary-mb-1 {
    padding-bottom: 12px !important;
  }

  /*********************
  Section: service
  **********************/

  .primary-text-h2 {
    font-size: 32px !important;
    letter-spacing: -0.5px !important;
    line-height: 36px !important;
  }

  .primary-text-small {
    font-size: 8px !important;
    line-height: 10px !important;
  }

  .primary-text-h3 {
    font-size: 24px !important;
    letter-spacing: -1px !important;
    line-height: 28px !important;
  }

  .primary-text-medium-bold {
    font-size: 14px !important;
    letter-spacing: -1px !important;
    line-height: 20px !important;
  }

  .primary-text-small-1 {
    font-size: 12px !important;
    letter-spacing: normal !important;
    line-height: 16px !important;
  }

  .icon-wrap-feature {
    width: 40px !important;
    height: 40px !important;
  }

  .primary-mt-2 {
    padding-top: 16px !important;
  }
  
  .primary-mb-2 {
    padding-bottom: 16px !important;
  }

  .primary-padding-b-4 {
    padding-bottom: 32px !important;
  }

  .cmb-4 {
    margin-bottom: 16px !important;
  }

  .cmt-1 {
    margin-top: 32px !important;
  }

  .service-img-2 {
  object-fit: cover !important;
  object-position: center !important;
  }

  .sm-pb-16 {
    padding-bottom: 16px !important;
  }

  /*********************
  Section: how it works
  **********************/

    .how-it-works-card-content {
      padding: 24px !important;
    }

    .secondary-text-h4 {
    font-size: 24px !important;
    letter-spacing: -1px !important;
    line-height: 28px !important;
    }

    .secondary-text-medium-bold {
      font-size: 14px !important;
      letter-spacing: normal !important;
      line-height: 20px !important;
    }

    .secondary-text-small-1 {
      font-size: 14px !important;
      letter-spacing: normal !important;
      line-height: 20px !important;
    }

    .cpb-2 {
      padding-bottom: 12px !important;
    }

  /********************
  Section: pricing
  **********************/
  .primary-text-large {
    font-size: 16px !important;
    letter-spacing: normal !important;
    line-height: 24px !important;
  }

  .secondary-text-large-1 {
    font-size: 16px !important;
    letter-spacing: normal !important;
    line-height: 24px !important;
  }

  .pricing-price {
    font-size: 32px !important;
    letter-spacing: -0.5px !important;
    line-height: 36px !important;
  }

  .primary-text-medium {
    font-size: 14px !important;
    letter-spacing: normal !important;
    line-height: 20px !important;
  }

  .label-large {
    font-size: 10px !important;
    line-height: 12px !important;
  }

  .secondary-label-large {
    font-size: 10px !important;
    line-height: 12px !important;
  }

  .primary-text-small-2 {
    font-size: 12px !important;
    letter-spacing: normal !important;
    line-height: 16px !important;
  }

  .pricing-card {
  padding: 24px !important;
  }

  .pricing-card-dark {
  padding: 24px !important;
  }

  .primary-padding-y-4 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .primary-padding-b-5 {
    padding-bottom: 12px !important;
  }
  
  .custom-btn-white {
    font-size: 14px !important;
    letter-spacing: normal !important;
    line-height: 20px !important;
  }

  /********************
  Section: review
  **********************/

  .review-row {
    gap: 12px !important;
  }

  .review-row > .review-card,
  .review-row > .review-video-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .review-video-col {
    min-height: 718px !important;
  }

  .review-card {
    padding: 32px !important;
  }

  .brand-logo {
    width: 120px !important;
  }

  .primary-text-h4 {
    font-size: 24px !important;
    letter-spacing: -1px !important;
    line-height: 28px !important;
  }

  .primary-text-medium-1 {
    font-size: 14px !important;
    letter-spacing: normal !important;
    line-height: 20px !important;
  }


  /********************
  Section: CTA
  **********************/
  .primary-padding-x-y-2 {
    padding: 32px !important;
  }

  .user-image {
    width: 30% !important;
  }

  .bi-whatsapp,
  .bi-envelope {
    width: 12px !important;
    height: 12px !important;
  }

  .bi-upwork {
    width: 24px !important;
    height: 24px !important;
  }

  .cta-form {
    row-gap: 16px !important;
  }

  .label-large-1 {
    font-size: 10px !important;
    letter-spacing: 0.75px !important;
    line-height: 12px !important;
  }

  .cta-form-input {
    font-size: 14px !important;
    letter-spacing: normal !important;
    line-height: 20px !important;
  }

  /********************
  Section: footer
  **********************/
  .primary-padding-y-5 {
    padding-top: 64px !important;
    padding-bottom: 24px !important;
  }

  .secondary-text-large-2 {
    font-size: 16px !important;
    letter-spacing: normal !important;
    line-height: 24px !important;
  }

  .secondary-text-small-2 {
    font-size: 14px !important;
    letter-spacing: normal !important;
    line-height: 20px !important;
  }

  .primary-padding-t-3 {
    padding-top: 32px !important;
  }

  .break-me-lg {
    display: none;
  }

  .footer-nav-group {
    row-gap: 32px !important;
  }

  /********************
  Page: footer
  **********************/

  .primary-padding-y-6 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .cmb-5 {
    margin-bottom: 16px !important;
  }
}

/*********************
Page: contact
**********************/
.contact-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}

@media (min-width: 992px) {
  .contact-left {
    padding-right: 64px;
  }
}

.contact-profile {
  /* margin-top: 24px; */
  padding-top: 24px;
}

.contact-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.contact-card {
  background-color: rgb(239, 237, 231) !important;
  border: 1px solid rgba(25, 24, 24, 0.16);
  border-radius: 16px;
}

.contact-info-card {
  flex: 1 1 170px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
  overflow-wrap: anywhere;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* .contact-info-card:hover {
  background-color: rgba(25, 24, 24, 0.08);
  border-color: rgba(25, 24, 24, 0.32);
} */

.contact-form-card {
  padding: 32px;
}

.contact-form-intro {
  padding-bottom: 32px;
}

.contact-form-textarea {
  min-height: 240px;
}

/* Consent checkbox (round, matches the input styling) */
.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contact-consent label {
  margin-bottom: 0;
  cursor: pointer;
}

.contact-consent a {
  color: rgba(25, 24, 24, 0.88);
  text-decoration: underline;
}

.contact-checkbox {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  cursor: pointer;
  background-color: rgba(25, 24, 24, 0.08);
  border: 1px solid rgba(25, 24, 24, 0.16);
  border-radius: 50%;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.contact-checkbox:checked {
  background-color: rgb(25, 24, 24);
  border-color: rgb(25, 24, 24);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f7f7f2'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z'/%3E%3C/svg%3E");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.contact-checkbox:focus-visible {
  outline: 2px solid rgba(25, 24, 24, 0.64);
  outline-offset: 2px;
}

@media (max-width: 576px) {
  .contact-left {
    gap: 32px;
  }

  .contact-profile {
    padding-top: 16px;
  }

  .contact-info-card {
    flex-basis: 100%;
    padding: 24px;
  }

  .contact-form-card {
    padding: 24px;
  }

  .contact-page-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .contact-page-icon-upwork {
    width: 32px !important;
    height: 32px !important;
  }

  .primary-text-medium-bold {
    font-size: 14px !important;
    letter-spacing: normal !important;
    line-height: 20px !important;
  }

  .contact-cards {
    gap: 12px !important;
  }

  .contact-form-intro {
    padding-top: 0px !important;
    padding-bottom: 24px;
  }
}

/*********************
Page: privacy policy
**********************/

@media (min-width: 992px) {
  .policy-title {
    margin-bottom: 0 !important;
  }
}

.policy-updated {
  /* margin: 0 0 56px; */
  padding-bottom: 48px;
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: rgba(25, 24, 24, 0.88);
}

/* .policy-section + .policy-section {
  margin-top: 56px;
} */

.policy-heading {
  margin: 0 0 24px;
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  color: rgba(25, 24, 24, 0.88);
}

.policy-text,
.policy-list {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: rgba(25, 24, 24, 0.64);
}

.policy-text {
  margin: 0 0 24px;
}

.policy-list {
  margin: 0;
  padding-left: 20px;
}

.policy-list li + li {
  margin-top: 5px;
}

.policy-email {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: rgba(25, 24, 24, 0.64);
  text-decoration: underline;
}

.policy-email:hover {
  color: rgba(25, 24, 24, 0.88);
}


@media (max-width: 576px) {
  .policy-updated {
    font-size: 14px;
    letter-spacing: normal;
    line-height: 20px;
    padding-bottom: 32px !important;
  }

  .primary-mb-2 {
    padding-bottom: 16px !important;
  }

  .policy-title {
    padding-bottom: 16px !important;
  }
}

/*********************
Page: faq
**********************/

.faq-header {
  text-align: center;
}

.faq-subtitle {
  margin-top: 16px;
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: rgba(25, 24, 24, 0.88);
}

.faq-accordion {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-accordion .faq-item {
  background-color: rgb(225, 222, 216);
  border: 0;
  border-radius: 12px;
  overflow: hidden;
}

.faq-accordion .faq-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 16px;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 24px;
  text-align: left;
  color: rgba(25, 24, 24, 0.88);
}

.faq-accordion .faq-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: none;
  color: rgba(25, 24, 24, 0.88);
}

.faq-accordion .faq-button:focus {
  box-shadow: none;
}

.faq-accordion .faq-button:focus-visible {
  outline: 2px solid rgba(25, 24, 24, 0.64);
  outline-offset: -2px;
}

/* Pill-shaped +/- toggle */
.faq-accordion .faq-button::after {
  flex: none;
  width: 36px;
  height: 24px;
  margin-left: 0;
  border: 1px solid rgba(25, 24, 24, 0.24);
  border-radius: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23191818' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M6 2v8M2 6h8'/%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
  transform: none;
}

.faq-accordion .faq-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23191818' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M2 6h8'/%3E%3C/svg%3E");
  transform: none;
}

.faq-accordion .faq-answer {
  padding: 8px 16px 20px;
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: rgba(25, 24, 24, 0.88);
}

.faq-accordion .faq-answer a {
  color: rgba(25, 24, 24, 0.88);
  text-decoration: underline;
}

@media (min-width: 768px) {
  .faq-accordion .faq-item {
    border-radius: 16px;
  }

  .faq-accordion .faq-button {
    padding: 24px
  }

  .faq-accordion .faq-answer {
    padding: 8px 24px 26px;
  }
}


@media (max-width: 576px) {
 .primary-padding-b-8 {
    padding-bottom: 24px !important;
  }

  .faq-accordion {
    gap: 12px;
  }
}


/*********************
Section: case studies
**********************/
.case-studies-row {
  display: flex;
  flex-wrap: wrap;
  row-gap: 16px;
  column-gap: 16px;
  row-gap: 32px;
}

.case-studies-row > .case-study-col {
  flex: 0 0 calc(50% - 12px);
  max-width: calc(50% - 12px);
}

.case-study-card {
  display: block;
  flex-direction: column;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background-color: rgb(239, 237, 231);
  border: 0.2px solid rgba(25, 24, 24, 0.16) !important;
}

.case-study-card-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.case-study-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-study-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 32px;
}

.case-study-card-footer {
  margin-top: auto;
  /* padding-top: 24px; */
}

.case-study-brand-logo {
  height: 32px !important;
}

@media (max-width: 576px) {

  /*********************
  Section: case studies
  **********************/
  .case-studies-row {
    gap: 16px;
  }

  .case-studies-row > .case-study-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .case-study-card-body {
    padding: 24px !important;
  }

  .primary-text-h5 {
    font-size: 20px !important;
    line-height: 24px !important;
  }

}

/*********************
Section: case study
**********************/

.case-study-hero {
  background-image: linear-gradient(rgba(25, 24, 24, 0.5), rgba(25, 24, 24, 0.25)), url("../img/pudl-case-study-1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  height: 84vh;
}

.case-study-brand-logo {
  height: 32px;
}

.case-study-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-study-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(25, 24, 24, 0.05) 0%, rgba(25, 24, 24, 0.15) 55%, rgba(25, 24, 24, 0.75) 100%);
  z-index: 1;
}

.case-study-hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 48px;
}

.case-study-hero-title {
  max-width: 620px;
  color: rgba(247, 247, 242, 0.95) !important;
}

.case-study-hero-brand {
  white-space: nowrap;
  color: rgba(247, 247, 242, 0.88) !important;
}

.case-study-content {
  max-width: 680px;
  margin: 0 auto;
}

.case-study-meta-row {
  display: flex;
  flex-wrap: wrap;
  /* gap: 24px 48px; */
  column-gap: 100px;
}

/* .case-study-meta-item {
  min-width: 96px;
} */

/* Fix: keep the inline body image inside the reading column instead of overflowing it */
.case-study-inline-img-wrap {
  width: 100%;
}

.case-study-inline-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  border:  0.2px solid rgba(25, 24, 24, 0.16) !important;
}

.case-study-list {
  padding-left: 20px;
  margin: 0;
}

.case-study-list li {
  margin-bottom: 8px;
}

.case-study-list li:last-child {
  margin-bottom: 0;
}

/* .case-study-quote {
  border-left: 3px solid rgba(25, 24, 24, 0.16);
  padding-left: 24px;
  margin: 0;
} */

.case-study-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 48px;
  border-top: 1px solid rgba(25, 24, 24, 0.16);
  padding-top: 32px;
}

.case-study-stat {
  min-width: 140px;
}

@media (max-width: 576px) {

  /*********************
  Page: case study
  **********************/

  .case-study-hero {
    height: 55vh !important;
  }

  .case-study-hero-content {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 24px !important;
  }

  .case-study-hero-title {
    max-width: 100% !important;
  }

  .case-study-meta-row {
    gap: 16px 32px !important;
  }

  .secondary-text-h1 {
    font-size: 40px !important;
    letter-spacing: -2px !important;
    line-height: 48px !important;
  }

}

.reviews-hero-img {
  border-radius: 16px !important;
  width: 900px !important;
}


@media (max-width: 576px) {
    .primary-padding-t-2 {
      padding-top: 64px !important;
    }

   .break-me-sm {
    display: block !important;
  }
}

.about-card {
  background-image: url("../img/nafio-nabi.png");
  width: 60%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top; /* center the image within the div */
  border: 1px solid rgba(25, 24, 24, 0.16) !important;
  border-radius: 16px;
  margin: 0 auto; /* center the div itself horizontally in its column */
}

.about-brands-img {
  max-width: 100px;
}

@media (max-width: 576px) {
    .about-card {
      width: 100% !important;
      height: 375px !important;
      margin: 0 !important;
    }
}