/* ===========================================================
style.css — Annotated version
- Only comments were added for clarity (section-wise + responsive notes).
- NO code changes, NO deletions.
- Comments highlight selectors that are reused across sections/media queries.
=========================================================== */

/* =========================
HEADER / NAV
NOTE: .header-right, .nav-toggle, .nav-toggle span are used in responsive blocks below too.
========================= */

html.v2 {
  scroll-behavior: unset !important;
}
body{
  background-color: var(--color-body-bg);
}
.mob-button{
  display:none; 
}

ul li {
  list-style: none;
}

header.v2 {
  z-index: 100;
  position: sticky;
  top: 0;
  padding: 20px 0;
}

.hero-v2-header {
  display: flex;
  width: 100%;
  gap: 24px;
  align-items: center;
}

/* header-left reused in footer/header contexts */
header .header-left figure {
  width: 150px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 24px;
  z-index: 25;
  position: relative;
}

/* header-right used both desktop & mobile (see responsive below) */
.header-right {
  width: 100%;
}

.header-right .nav-menu-v2 ul {
  display: flex;
  align-items: center;
  /* gap: 24px; */
  justify-content: space-between;
  width: 100%;
  max-width: 379px;
  gap: 10px;
}

.header-right .nav-menu-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: all ease 0.5s;
}

/* Nav button wrapper reused in mobile nav layout */
.Nav-button-wrapper {
  display: flex;
  align-items: center;
  gap: 24px;
}

.Nav-button-wrapper .button-wrapper-2 {
  display: flex;
  align-items: center;
  gap: 10px;
}


/* =========================
BURGER / NAV TOGGLE
- .nav-toggle and .nav-toggle.open are referenced in mobile media query below.
========================= */

/*  */

/* Burger Button */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 28px;
  height: 3px;
  background: #fff;
  transition: 0.3s;
  position: relative;
  z-index: 10;
}

/* =========================
RESPONSIVE: HEADER (max-width: 991px)
- Reuses and overrides .header-right, .nav-toggle, .Nav-button-wrapper
- Commented so you can see cross-usage
========================= */
@media (max-width: 991px) {
  .header-right .nav-menu-v2 {
    position: absolute;
    top: 0px;
    right: 0;
    width: 100%;
    background: #aa3c2863;
    backdrop-filter: blur(35px);
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    overflow: hidden;
    max-height: 0;
  }

  /* .nav-menu-v2.active toggled by JS (mobile open) */
  .header-right .nav-menu-v2.active {
    display: flex;
    height: auto;
    max-height: 500px;
    z-index: 20;
  }

  .header-right .nav-menu-v2 ul {
    padding-top: 90px;
  }

  /* these padding rules affect both menu list and call-to-action buttons */
  .header-right .nav-menu-v2 ul,
  .Nav-button-wrapper {
    padding-left: 30px;
    padding-right: 15px;
  }

  .Nav-button-wrapper {
    padding-bottom: 55px;
  }

  .header-right .nav-menu-v2 ul,
  .Nav-button-wrapper,
  .Nav-button-wrapper .button-wrapper-2 {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-right {
    width: auto;
  }

  .hero-v2-header {
    justify-content: space-between;
  }

  .nav-toggle {
    display: flex;
    z-index: 25;
    position: relative;
  }

  /* Burger to Cross: open class changes */
  .nav-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .nav-toggle.open span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
}

/* =========================
HERO SECTION (top)
- Many hero-* classes are also adjusted in responsive queries later.
- Keep an eye on duplicated intent across breakpoints.
========================= */

.hero-main-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
  gap: 12px;
  /* padding: 72px 0 458px; */
  padding: 72px 0 0;
  margin-bottom: 0;
}

.hero-absolute-images {
  /* height: 79vh; */
  width: 72vw;
  margin: 0 auto;
  max-width: 100%;
  /* background-color: red; */
}

.hero-wrapper-left {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 24px;
  max-width: 565px;
  width: 100%;
}

.hero-content-v2 {
  max-width: 807px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.hero-button-wrapper-v2 {
  display: flex;
  gap: 10px;
}

.heading-1 {
  font-size: 48px;
  line-height: 63px;
  letter-spacing: -1.5px;
  margin:0;
}

/* field-para is used in multiple sections (hero, features text) */
.field-para {
  width: 100%;
  max-width: 524px;
}

/* hero-top-para reused as pill style in other components (see .up-to-para) */
.hero-top-para {
  padding: 10px 18px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 200px;
}

.hero-top-data {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-lower-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 12;
}

.hero-btn-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* hero-vector-left positioned graphical asset (also similar to footer-bg-image) */
.hero-vector-left {
  position: absolute;
  z-index: 10;
  bottom: -49px;
  left: -215px;
  aspect-ratio: 606:633;
}

.hero-vector-left svg,
.hero-vector-left img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center; 
}

.hero-wrapper-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-right-image-wrap {
  max-width: 436px;
  width: 100%;
}

.hero-lower-content .hero-professionals {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-main-img {
  width: 100%;
  height: auto;
}

/* positioned hero sub-images — repeated/responsive adjustments below */
.hero-sub-image-1 {
  width: 25.5vw;
  max-width: 430px;
  right: 50%;
  position: absolute;
  transform: translate(30%, -35vw);
}

.hero-sub-img {
  width: 100%;
}

.hero-sub-image-2 {
  position: absolute;
  max-width: 272px;
  width: 100%;
  left: -25%;
  width: 18vw;
}

.hero-sub-img-2 {
  width: 100%;
}

/* NOTE: hero-sub-image-3 & -4 have transforms tuned for large screens and are adjusted in mobile queries */
.hero-sub-image-3 {
  width: 22.8vw;
  max-width: 379px;
  right: 50%;
  position: absolute;
  transform: translate(27.5%, -224%);
  /* transform: translate(28%, -10.2vw); */
}

.hero-sub-img-3 {
  width: 100%;
}

.hero-sub-image-4 {
  width: 22.8vw;
  max-width: 379px;
  right: 50%;
  position: absolute;
  transform: translate(145%, -5.4vw);
}

.hero-sub-img-4 {
  width: 100%;
}

.hero-section-padding {
  padding-bottom: 281px;
  padding-top:100px;
}

.hero-bottom {
  margin-top: -211px;
}

/* Medium adjustments placeholder — specific hero tweaks live in mobile queries */
@media (max-width:1440px) {
  /* .hero-sub-image-4 {
  margin-top: 0.7%;
}

  .hero-sub-image-3 {
  margin-top: 0.6%;
} */
}


/* =========================
BRAND MARQUEE (top)
- Note there is another marquee block later (.marquee-group) — similar patterns reused.
========================= */

/* Marquee Styles */

.brand-marquee-wrapper {
  padding: 70px 0 120px;
  position: relative;
  width: 100%;
  max-width: 100vw;
}

.brand-marquee {
  position: relative;
  overflow: hidden;
  --gap: 2rem;
  display: flex;
  user-select: none;
  gap: var(--gap);
}

/* brand-marquee-group animates horizontally (duplicate keyframes used later) */
.brand-marquee-group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
  min-width: 100%;
  animation: scroll 30s linear infinite;
}

/* reverse modifier for alternate direction */
.marquee-reverse .brand-marquee-group {
  animation-direction: reverse;
  animation-delay: -3s;
}

/* logo item card reused pattern across different marquees */
.marquee-logo-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  background: white;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

/* marquee animation keyframes (reused later) */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

/* Respect user reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .brand-marquee-group {
    animation-duration: 60s;
  }
}

/* Small screens — same marquee group uses faster timing */
@media (max-width: 768px) {
  .brand-marquee-group {
    animation-duration: 20s;
  }

  .marquee-logo-item {
    padding: 0.75rem 1.5rem;
  }
}


/* =========================
HERO DASHBOARD / ABSOLUTE IMAGES
- .hero-dashboard rules are overridden in mobile queries below (.hero-dashboard .dashboard-img)
========================= */
.hero-dashboard {
  /* position: absolute; */
  top: calc(100% - 392px);
  filter: drop-shadow(40px 24px 26px #37120b1a);
  width: 100%;
  display: flex;
  /* transform: translateY(25px); */
}

.hero-dashboard .dashboard-img {
  margin: 0 auto;
  max-width: 72vw;
  width: 100%;
}

/* mobile-specific dashboard image is shown in small-screen queries */
.hero-dashboard .mobile-dashboard-img {
  display: none;
}

/* =========================
MAXIMIZE SECTION
========================= */
.maximize-wrapper-v2 {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.maximize-heading {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-end;
}

/* maximize-title may be referenced in other layout blocks */
.maximize-title {
  max-width: 516px !important;
  width: 100%;
}

.maximize-content-v2 {
  display: flex;
  align-items: center;
  gap: 22px;
}


.maximize-left-v2 {
  max-width: 591px;
  height: 764px;
  width: 100%; 
  display: flex;
  flex-direction: column;
  position: relative; 
  border-radius: 20px;
  overflow: hidden;
}

.maximize-upper-image-wrapper {
  max-width: 100%;
  width: 100%;
  height: auto;
}

.maxi-image-1 {
  width: 100%;
  height: 100%;
}

.maxi-image-2 {
  width: 100%;
  height: 100%;
}

.maximize-lower-image-wrapper {
  max-width: 585px;
  width: 100%;
  position: absolute;
  bottom: -6px;
  left: 10px;
}

.maximize-right-v2 {
  max-width: 670px;
  width: 100%;
}

.right-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, 372px);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.right-grid-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border-radius: 20px;
  background-color: white;
  position: relative;
  padding: 20px;
}

.circle-eclipse {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #aa3c2820;
  position: absolute;
}

/* Corner positions reused pattern for decorative dots */
.circle-eclipse.top-left {
  top: 16px;
  left: 16px;
}

.circle-eclipse.top-right {
  top: 16px;
  right: 16px;
}

.circle-eclipse.bottom-left {
  bottom: 16px;
  left: 16px;
}

.circle-eclipse.bottom-right {
  bottom: 16px;
  right: 16px;
}

.right-icon {
  width: 100%;
  height: 100%;
}

.right-grid-lower {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.right-grid-para {
  max-width: 151px;
  width: 100%;
  line-height: 26px !important;
  text-align: center;
}
.right-image-grid .right-grid-card:nth-child(3) .right-grid-para{
  max-width: 350px;
}
.max-width-2 {
  max-width: 260px;
  width: 100%;
}

/* =========================
REVIEW / SWIPER
- .feature-slider and .swiper classes are used in JS initialization; keep selectors intact.
========================= */
.feature-slider {
  width: 100%;
}

.swiper {
  overflow: visible;
}

.swiper-wrapper {
  display: flex;
}

.feature-slider .swiper-slide {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  height: auto;
  /* gap: 20px; */
  max-width: 440px;
}

.swiper-wrapper .card-1,
.swiper-wrapper .card-2,
.swiper-wrapper .card-3,
.swiper-wrapper .card-4 {
  width: 100%;
  /* max-width: 440px; */
  height: auto;
  background-color: #ffffff;
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 84px;
}

/* =========================
REVIEW GRID (before)
========================= */
.review .section-wrapper {
  margin: 120px 0;
}

.rating-star {
  display: flex;
  gap: 1px;
}

.review .review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 390px);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.review .review-card {
  padding: 48px 43px 38px 40px;
  backdrop-filter: blur(19.64px);
  background-color: var(--color-light);
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 20px;
}

.review .highlight {
  background-color: #aa3c285c;
}

.review .review-footer {
  display: flex;
  gap: 12px;
  align-items: center;
}

.review .reviewer-details p {
  display: flex;
  align-items: center;
  gap: 4px;
  margin:0;
}

.review .review-content {
  display: flex;
  gap: 16px;
  flex-direction: column;
}

.review .review-vector {
  position: absolute;
  left: -33px;
}

/* =========================
PRODUCTIVITY / FEATURES
========================= */
.productivity-upper-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 363px;
  width: 100%;
}

.highlighter {
  background-color: rgba(170, 60, 40, 0.16);
  border-radius: 10px;
}

.productivity-left-v2 {
  gap: 24px;
}

.less-image {
  position: relative;
}


/* =========================
PLANS SECTION
- .plan-* classes reused across breakpoint overrides later.
========================= */
.plans-section {
  background-image: linear-gradient(rgba(170, 60, 40, 1) 0%,
    rgba(170, 60, 40, 0.5) 100%),
    url(../images/plan-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 90px 0;
  margin: 120px 0;
}

.plan-section-wrapper {
  /* margin: 120px 0; */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  position: relative;
}

.plan-section-vector {
  position: absolute;
  right: 94px;
  top: -97px;
}

.plan-vector {
  width: 100%;
}

.plan-title {
  max-width: 1197px;
  width: 100%;
  display: flex;
  /* gap: 218px; */
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.plan-h2 {
  max-width: 100%;
  width: 100%;
  color: #ffffff;
}

.plan-para {
  max-width: 427px;
  width: 100%;
}

.plan-grid-cards {
  display: flex;
  gap: 20px;
}

.plan-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 160px;
  background-color: white;
  border-radius: 20px;
  padding: 48px;
  position: relative;
  max-width: 440px;
  width: 100%;
  /* height: 534px; */
}

.plan-card a {
  width: max-content;
}

.plan-card-vector {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 232px;
  width: 100%;
  height: auto;
}

.plan-top-data {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.plan-card-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

/* pill style used in header and plan elements (.hero-top-para, .up-to-para) */
.up-to-para {
  padding: 10px 18px;
  background-color: #aa3c2810;
  border-radius: 200px;
  color: #aa3c28;
}

.paln-text {
  font-size: 22px;
  line-height: 28px;
}

.plan-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 348px;
  width: 100%;
}

.plan-text {
  font-size: 22px;
  line-height: 28px;
}

.plan-card-btn {
  background-color: #aa3c28;
  color: #ffffff;
  padding: 12px 22px;
  border-radius: 15px;
}



/* features section  */

.feature-content {
  gap: 10px;
}

.features .feature {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.features-wrapper {
  gap:100px;
}

.features ul {
  gap: 8px;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
}

.features li {
  gap: 8px;
  display: flex;
  align-items: center;
}

.feature-image { 
  width: 100%;
  display: flex;
  justify-content: center; 
}

.feature-image-1 {
  padding-top: 25px;
}

.feature-image-1 img {
  transform: translateY(22px);
}

.feature-image-2 {
  padding-top: 3px;
}

.feature-image-2 img {
  transform: translateY(41px);
}

.feature-image-3 {
  padding-top: 12px;
}

.feature-image-3 img {
  transform: translateY(42px);
}

.feature-image-4 {
  padding-top: 54px;
}

.features-wrapper > div:nth-child(1) .feature-image img {
  max-width: 100%;
}
.features-wrapper > div:nth-child(1) .feature-image{

}
.features-wrapper > div:nth-child(2) {
  margin-top: -20px;
}
.features-wrapper > div:nth-child(3) {
  margin-top: -30px;
}
.features-wrapper > div:nth-child(4) {
  margin-top: -60px;
}
.features-wrapper > div:nth-child(2) .feature-image img {
  max-width: 100%;
}
.features-wrapper > div:nth-child(3) {

}
.features-wrapper > div:nth-child(3) .feature-image img {
  max-width: 100%;
}
.features-wrapper > div:nth-child(4) .feature-image img { 
  max-width: 100%;
}
.features-wrapper > div:nth-child(4) .feature-image{
  padding-top: 0;
}
.features-wrapper > div:nth-child(4) {

}




.built-right-img-1 {
  transform: translateY(21px);
}

.built-right-img-3 {
  transform: translateY(42px);
}

/* build-smart wrapper uses plan/feature background patterns — reused visuals */
.build-smart-wrapper-v2 {
  background-image: linear-gradient(90deg,
    rgba(170, 60, 40, 0.8) 7%,
    rgba(170, 60, 40, 0.5) 100%),
    url('https://25848238.fs1.hubspotusercontent-eu1.net/hubfs/25848238/raw_assets/public/buildbite_2025/images/build-bg.png');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      padding: 90px 0;
      padding-left: 70px;
      padding-right: 42px;
      border-radius: 20px;
      }

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

.build-left-v2 {
  max-width: 487px;
  width: 100%;
}

.build-right-v2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 470px;
  width: 100%;
  align-items: flex-start;
}

.simple-para-v2 {
  max-width: 449px;
  width: 100%;
}


/* =========================
BEFORE / AFTER SECTION
========================= */

.before-after-wrapper-v2 {
  margin: 120px 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.before-left-heading-v2 {
  display: flex;
  flex-direction: column;
}

.before-left-title-v2 {
  max-width: 476px;
  width: 100%;
}

.before-left-para-v2 {
  max-width: 410px;
  width: 100%;
}

.before-after-box-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.before-card {
  background-color: rgba(170, 60, 40, 0.09);
  padding: 38px 38px 0;
  border-radius: 20px;
}

.card-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.before-card-data {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 382px;
  width: 100%;
}

/* before-scene buttons — kept as-is for JS that moves them */
#scene {
  position: relative;
  width: 100%;
  height: 500px;
  border-radius: 8px;
  overflow: hidden;
  z-index: 10;
}

.button {
  position: absolute;
  padding: 6px 14px;
  font-size: 14px;
  background: #aa3c28;
  color: white;
  border: 1px solid #ddd;
  border-radius: 18px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  user-select: none;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button:active {
  cursor: grabbing;
}

.before-bg-image {
  position: absolute;
  /* max-width: 518px; */
  z-index: 2;
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  justify-content: center;
}

.before-bg-image image {
  width: 100%;
}

.after-card {
  background-color: #aa3c28;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
  overflow: hidden;
  min-height: 565px;
}

.after-card-image {
  max-width: 425px;
  width: 100%;
  bottom: 0px;
  position: relative;
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  aspect-ratio: 525 / 413;
  padding: 0 20px;
  margin: 0 auto;
}

.after-img {
  width: 100%;
  height: 100%;
}

/* =========================
AFTER MARQUEE (within Before/After)
- This block intentionally mirrors the top brand marquee pattern.
- Note: keyframes "scroll" already defined above — duplicated in original file and retained.
========================= */

.after-marquee-wrapper {
  max-width: 515px;
  width: 100%;
}

.marquee-container {
  position: relative;
  width: 100%;
}

.marquee-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.marquee {
  position: relative;
  overflow: hidden;
  --gap: 1rem;
  display: flex;
  user-select: none;
  gap: var(--gap);
}

.marquee-group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
  min-width: 100%;
  animation: scroll 30s linear infinite;
}

.marquee-reverse .marquee-group {
  animation-direction: reverse;
  animation-delay: -3s;
}

.marquee-logo-item {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  background: white;
  border-radius: 15px;
  transition: all 0.3s ease;
}

.marquee-icon-wrap {
  width: 18px;
  height: 18px;
}

.marquee-icon {
  width: 100%;
}

.marquee-text {
  font-size: 14px;
  line-height: 16px;
}

.marquee-logo-item:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

.marquee-overlay-left {
  height: 78px;
  width: 100%;
  max-width: 278px;
  background: linear-gradient(90deg, #F7F9FA, #F7F9FA00);
  position: absolute;
  left: 0;
}

.marquee-overlay-right {
  height: 78px;
  width: 100%;
  max-width: 278px;
  background: linear-gradient(90deg, #F7F9FA00, #F7F9FA);
  position: absolute;
  right: 0;
}


.after-left-line {
  height: 86px;
  width: 6px;
  background: linear-gradient(#A32A1400, #A32A14, #A32A14, #A32A1400);
  position: absolute;
  top: 50%;
  transform: translate(-100%, -50%);
}

.after-right-line {
  height: 86px;
  width: 6px;
  background: linear-gradient(#A32A1400, #A32A14, #A32A14, #A32A1400);
  position: absolute;
  top: 50%;
  transform: translate(100%, -50%);
  right: 0;
}

/* duplicate keyframes kept to reflect original file's duplication */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

/* Respect reduced-motion for duplicate marquee grouping */
@media (prefers-reduced-motion: reduce) {
  .marquee-group {
    animation-duration: 60s;
  }
}

/* Responsive adjustments (duplicate pattern for second marquee) */
@media (max-width: 768px) {
  .marquee-group {
    animation-duration: 20s;
  }

  .marquee-logo-item {
    padding: 0.75rem 1.5rem;
  }
}

/* =========================
SECTION HEADER HELPERS
========================= */
.section-header .padding {
  padding-left: 15px;
  padding-right: 15px;
}

/* =========================
GET_STARTED SECTION
========================= */
.step-btn-v2 {
  z-index: 10;
}

.get_started_padding {
  padding: 90px 102.5px;
}

.get-heading {
  z-index: 10;
}

.get-started-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.get-started-main-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* steps-wrapper grid is complex and referenced in responsive queries later */
.get_started .steps-wrapper {
  display: grid;
  grid-template-columns:
    minmax(80px, 176px) auto minmax(80px, 163px) auto minmax(80px, 254px) auto minmax(120px, 288px);
  grid-template-rows: auto;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  align-items: center;
  position: relative;
  z-index: 10;
}

.get_started .step {
  align-items: flex-start;
  gap: 16px;
}

.get_started .step-4 .h4 {
  max-width: 288px;
}

.get_started .step-button {
  padding: 10px 18px;
  background-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  border-radius: 200px;
}

.get_startedVector {
  position: absolute;
  left: 64px;
  top: 0;
}

.get_started .section-header {
  gap: 16px;
  display: flex;
  flex-direction: column;
}

.get_started .arrow2 {
  display: none;
}

.get-image-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  background: linear-gradient(90deg,
    rgba(170, 60, 40, 1) 0%,
    rgba(170, 60, 40, 0.5) 100%);
}

.get-started-bg-v2 {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
}

.get-bg-image-v2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
CALCULATE / ROI SECTION
- .calculate is hidden by default (display: none) — JS may toggle it.
========================= */

.calculate {
  display:
    none;
}

.calculate-wrapper-v2 {
  margin: 120px 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.calculate-contant-wrapper-v2 {
  display: flex;
  justify-content: space-between;
}

.calculate-left-v2 {
  display: flex;
  flex-direction: column;
  gap: 92px;
}

.left-title-v2 {
  max-width: 412px;
  width: 100%;
}

.text-h3 {
  font-size: 36px;
  line-height: 48px;
  letter-spacing: -1px;
}

.left-para-v2 {
  max-width: 348px;
  width: 100%;
}

.calculate-right-v2 {
  display: flex;
  flex-direction: column;
  gap: 59px;
}

.right-box-v2 {
  background-color: #aa3c28;
  padding: 38px;
  border-radius: 20px;
  position: relative;
  max-width: 440px;
  height: 410px;
  width: 100%;
  display: flex;
  gap: 43px;
  flex-direction: column;
  justify-content: flex-end;
}

.right-para-v2 {
  max-width: 244px;
  width: 100%;
}

.currency-selector {
  position: relative;
  display: inline-block;
}

.select-currency {
  appearance: auto;
  z-index: 9999;
  position: relative;
  background-color: transparent;
  padding: 12px 16px 12px 22px;
  border-radius: 15px;
  background: linear-gradient(#ffffff 0%, #ffffff 100%);
  backdrop-filter: blur(8px);
  appearance: none;
  /* remove default arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
}

.select-wrapper::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 12px;
  height: 12px;
  background: url("../images/arrow-down.svg");
  background-size: contain;
  transform: translateY(-50%);
  pointer-events: none;
}

.select-currency option {
  font-size: 16px;
  line-height: 25.6px;
  color: #ffffff;
}

.vector-currency {
  position: absolute;
  bottom: 0;
  right: 0;
}

.next-btn {
  width: 100%;
  max-width: 144px;
}

.next-arrow {
  width: 20px;
  height: 20px;
}

.next-link {
  gap: 6px;
}

.next-link svg path {
  transition: fill 0.3s ease;
}

.next-link:hover svg path {
  stroke: #aa3c28 !important;
}

/* =========================
COMPARISON SECTION
- .comparison-grid uses nested grid areas; some selectors repeated in responsive blocks.
========================= */

.comparison-wrapper {
  display: flex;
  justify-content: space-between;
  margin: 120px 0;
  /* gap: 82px; */
  align-items: flex-end;
}

.comparison-wrapper .section-header {
  max-width: 500px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 38px;
  align-items: flex-start;
}

.comparison-grid {
  display: grid;
  grid-template-columns: minmax(270px, 1fr) minmax(180px, 1fr) minmax(120px,
    1fr);
  grid-template-rows: auto;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  max-width: 703px;

  .main-heading,
  .feature-row .row-item2,
  .feature-row .row-item3 {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .main-heading {
    padding: 26px 15px;
  }

  .heading {
    padding: 11px 30px 11px 28px;
  }
}

.grid-item-1 {
  grid-area: 1 / 2 / 2 / 3;
}

.grid-item-2 {
  grid-area: 1 / 3 / 2 / 4;
}

.grid-item-3 {
  grid-area: 2 / 1 / 3 / 4;
}

.grid-item-4 {
  grid-area: 3 / 1 / 4 / 4;
}

.grid-item-5 {
  grid-area: 4 / 1 / 5 / 4;
}

.grid-item-6 {
  grid-area: 5 / 1 / 6 / 4;
  padding-bottom: 38px;
}

.grid-item-7 {
  grid-area: 1 / 2 / 6 / 3;
  background-color: white;
  position: relative;
  z-index: -1;
  box-shadow: -6px 8px 32px 0px #aa3c2814;
  border-radius: 20px;
}

/* comparison section */

.comparison-wrapper {
  display: flex;
  justify-content: space-between;
  margin: 120px 0;
  /* gap: 82px; */
  align-items: flex-end;
}

.comparison-wrapper .section-header {
  max-width: 500px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 38px;
  align-items: flex-start;
}

.comparison-grid {
  display: grid;
  /* grid-template-columns: repeat(3, 1fr); */
  grid-template-columns: minmax(270px, 1fr) minmax(180px, 1fr) minmax(120px, 1fr);
  grid-template-rows: auto;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  max-width: 703px;


  .main-heading,
  .parent-2 .div2,
  .parent-2 .div3 {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .main-heading {
    padding: 26px 15px;
  }

  .heading {
    padding: 11px 30px 11px 28px;
  }
}

.div1 {
  grid-area: 1 / 2 / 2 / 3;
}

.div2 {
  grid-area: 1 / 3 / 2 / 4;
}

.comparison-grid > div:nth-child(3) {
  grid-area: 2 / 1 / 3 / 4;
}

.comparison-grid > div:nth-child(4) {
  grid-area: 3 / 1 / 4 / 4;
}

.comparison-grid > div:nth-child(5) {
  grid-area: 4 / 1 / 5 / 4;
}
.comparison-grid > div:nth-child(6) {
  grid-area: 5 / 1 / 6 / 4;
  padding-bottom: 38px;
}

.comparison-grid > div:nth-child(7) {
  grid-area: 1 / 2 / 6 / 3;
  background-color: white;
  position: relative;
  z-index: -1;
  box-shadow: -6px 8px 32px 0px #AA3C2814;
  border-radius: 20px;
}





.comparison-grid .parent-2 {
  display: grid;
  /* grid-template-columns: repeat(3, 1fr); */
  grid-template-columns: minmax(270px, 1fr) minmax(180px, 1fr) minmax(120px, 1fr);

  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;


  .div1 {
    grid-area: 1 / 1 / 2 / 2;
  }

  .div2 {
    grid-area: 1 / 2 / 2 / 3;
    background-color: white;
  }

  .div3 {
    grid-area: 1 / 3 / 2 / 4;
  }
}

.comparison-grid .parent-2.bg {
  background: linear-gradient(90deg, rgba(245, 232, 229, 0) 0%, rgba(245, 232, 229, 1) 50%, rgba(245, 232, 229, 0) 100%);
}
.comparison-grid > div:last-child .parent-2 {
  display: none;
}

/* =========================
REMINDERS
========================= */
.reminders {
  margin: 120px 0;
}

/* reminders section */
.reminders-main-image img{
  max-width:600px; 
}
.reminders .reminders-wrapper {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.reminders-wrapper .section-header {
  align-items: flex-start;
  max-width: 464px;
  gap: 16px;
}

.reminders-wrapper .section-header button {
  margin: 8px 0 16px;
}

.reminders-wrapper .payment-logos {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: center;
}

.reminders-wrapper .reminders-main-image {
  filter: drop-shadow(35px 21px 22px #37120B1A);

}

/* =========================
FAQ
========================= */
.faq-wrapper .section-header {
  max-width: 231px;
}

.faq-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 137px;
  margin: 120px 0;
}

.faq-items-wrapper {
  width: 100%;
}

.faq-item {
  border-bottom: 1px solid rgba(15, 5, 3, 0.1);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: all 0.8s ease;
  /* padding: 0 16px; */
}

.faq-answer p {
  margin-bottom: 20px;
}

/* active class toggles expansion */
.faq-item.active .faq-answer {
  max-height: 400px;
}

/* =========================
FOOTER
========================= */
.footer-v2 {
  background-color: #aa3c28;
  padding-top: 90px;
  padding-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.footer-main-wrapper-v2 {
  display: flex;
  flex-direction: column;
  gap: 132px;
}

.footer-wrapper-v2 {
  display: flex;
  gap: 65px;
}

.footer-left-para {
  max-width: 345px;
  width: 100%;
}

.footer-left-block-v2 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.play-store-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-store {
  display: inline-block;
  width: 140px;
  height: 44px;
  background-color: #2f0700;
  border-radius: 10px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* app-store src selectors kept (rare usage but preserved) */
.app-store[src*="App-Store"] {
  background-image: url("../images/App-Store.png");
}

.app-store[src*="Play-store"] {
  background-image: url("../images/Play-store.png");
}

.links-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-links-box-v2 {
  display: flex;
  gap: 70px;
}

.links-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* social-links pattern reused in header/button areas */
.social-links {
  display: flex;
  color: #ffffff;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  padding: 10px 18px;
  border-radius: 15px;
  background: linear-gradient(rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.1) 100%);
  backdrop-filter: blur(8px);
}

.social-links:hover {
  color: #aa3c28 !important;
  background-color: white;
}

.social-links svg path {
  transition: fill 0.3s ease;
}

.social-links:hover svg path {
  fill: #aa3c28 !important;
}

.footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 10;
}

.footer-line-divide {
  width: 1px;
  height: 16px;
  background-color: rgba(255, 255, 255, 0.2);
}

.footer-bg-image {
  position: absolute;
  right: 0;
  bottom: -50px;
  pointer-events: none;
}

/* =========================
RESPONSIVE BREAKPOINTS (comments added to each)
- Each media block contains comments noting any classes that are reused/mutated.
========================= */

/* <= 1123px
Notes: hero-content-v2 constrained here; other sections may rely on same selector */
@media (max-width: 1123px) {
  .hero-content-v2 p {
    max-width: 450px;
  }

  .hero-content-v2 {
    max-width: 400px;
  }
}

/* <= 1024px
Notes: Many layout changes — plan-card, footer, get_started — same classes are adjusted here.
Keep an eye on .plan-card, .footer-* and .get_started rules being overridden.
*/
@media (max-width: 1024px) {

  /* .hero-sub-image-2 {
  left: -5vw;
} */

  .plan-text {
    font-size: 18px;
    line-height: 1.2;
  }

  .get_started_padding {
    padding: 80px 60px;
  }

  .review .review-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .automation-grid {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 372px);
  }

  /* steps-wrapper reduced columns for tablet */
  .get_started .steps-wrapper {
    grid-template-columns: minmax(80px, 176px) auto minmax(80px, 163px);
    grid-template-rows: repeat(2, auto);
  }

  .get_started .bigArrow2 {
    display: none;
  }

  /* comparison layout becomes vertical on tablet */
  .comparison .comparison-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
  }

  .comparison-wrapper .section-header {
    width: 100%;
    max-width: unset;
    text-align: center;
    align-items: center;
  }

  .comparison-wrapper .section-header h2 {
    max-width: 100%;
  }

  .comparison-grid {
    max-width: none;
    width: 100%;
  }

  .feature .align-content-end.feature-content {
    align-content: flex-start;
  }

  .section-header-2 h2 {
    max-width: 100% !important;
  }

  .review .section-header {
    text-align: center;
  }

  .faq-wrapper {
    gap: 30px;
  }

  .plan-card-title {
    flex-direction: column;
    align-items: flex-start;
  }

  .plan-card {
    gap: 50px;
    padding: 24px;
    max-width: 440px;
  }

  .footer-links-box-v2 {
    gap: 30px;
  }

  .footer-wrapper-v2 {
    gap: 30px;
  }

  .footer-bottom {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* footer social moves to center on tablet */
  .footer-social {
    order: -1;
    flex-grow: 1;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .heading-1 {
    font-size: 45px;
    line-height: 1.2;
    letter-spacing: -1.5px;
  }

  .feature-image-v2-2 {
    padding-left: 20px;
    padding-right: 10px;
  }

  .feature-image-v2-1 {
    padding-left: 62px;
    padding-right: 48px;
  }

  .feature-image-4 {
    padding: 27px 50px 0 50px;
  }

}

/* <= 768px
Notes: Major mobile adjustments; many hero/* and footer/* classes altered here.
Comments flag where earlier desktop rules are overridden.
*/
@media (max-width: 768px) {
  .hero-vector {
    left: -72px;
  }

  .hero-vector img {
    width: 200px;
  }

  .hero-img img {
    max-width: 450px;
    width: 100%;
    padding: 0 30px;
  }

  .hero-img {
    top: 69%;
  }

  .hero-wrapper {
    padding: 40px 0 280px;
    margin-bottom: 280px;
  }

  /* FAQ becomes column on smaller screens (same .faq-wrapper used earlier) */
  .faq-wrapper {
    flex-direction: column;
    gap: 48px;
  }

  .faq-wrapper .section-header {
    max-width: unset;
    width: 100%;
    text-align: center;
  }

  .footer-vector img {
    width: 250px;
  }

  .after-card-image {
    aspect-ratio: 425 / 300;
    padding: 0 35px;
  }

  /* layout adjustments for automation cards */
  .automation .automation-card {
    padding: 20px;
    width: 100%;
    gap: 15px;
  }

  /* comparison grid simplifies */
  .comparison-grid,
  .comparison-grid .feature-row {
    grid-template-columns: minmax(120px, 1fr) minmax(90px, 1fr) minmax(90px,
      1fr);
  }

  .comparison-grid .main-heading img {
    width: 100%;
  }

  /* review becomes single column on tablet */
  .review .review-grid {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(6, auto);
  }

  .review .review-card {
    padding: 20px;
  }

  .automation-grid {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }

  .comparison-grid {
    .heading {
      padding: 10px 5px 10px 5px;
    }
  }

  /* reminders stack */
  .reminders .reminders-wrapper {
    flex-direction: column-reverse;
  }

  .footer-vector img {
    width: 150px;
  }

  .get_started_padding {
    padding: 60px 20px;
  }

  .review .section-wrapper,
  .automation .section-wrapper,
  .comparison-wrapper,
  .faq-wrapper {
    margin: 80px 0;
  }

  .get_startedVector {
    left: 0;
  }

  .get_startedVector img {
    width: 200px;
  }

  /* before-after switches to single column (same selectors as desktop) */
  .before-after-box-v2 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  /* #scene height reduced for tablet (same ID used earlier) */
  #scene {
    height: 350px;
  }

  .after-card {
    padding-bottom: 350px;
  }

  .after-marquee-wrapper {
    max-width: 100%;
  }

  .footer-wrapper-v2 {
    display: flex;
    /* gap: 65px; */
  }

  .build-smart-wrapper-v2 {
    padding: 60px 0;
    padding-left: 40px;
    padding-right: 40px;
  }

  .build-right-v2 {
    flex-direction: column-reverse;
  }

  .plan-info {
    gap: 10px;
  }

  .build-flex-content {
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
  }

  .wrapper-padding-v2 {
    padding: 0 0px;
  }

  /* duplicate brand-marquee-wrapper adjustments for smaller screen */
  .brand-marquee-wrapper {
    padding: 50px 0 80px;
  }

  .plans-section {
    padding: 60px 0;
  }

  .brand-marquee-wrapper {
    padding: 40px 0 60px;
  }

  /* many section margins tightened for tablet */
  .faq-wrapper,
  .reminders,
  .comparison-wrapper,
  .calculate-wrapper-v2,
  .before-after-wrapper-v2,
  .plans-section,
  .review .section-wrapper {
    margin: 60px 0;
  }

}

/* <= 767px
Notes: Mobile layout — hero becomes column and many images repositioned.
Watch for .hero-sub-image-* overrides which mirror desktop sizes above.
*/
@media (max-width: 767px) {
  .maximize-wrapper-v2,.section-wrapper,.before-after-wrapper-v2 { 
    gap: 36px;
  }
  .feature-content {
    gap: 10px;
    max-width: 488px;
  }
  .calculate-section {
    padding: 60px 0 50px; 
  } 
  .hero-main-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 60px;
  }
  .cta-sec {
    padding-bottom: 50px!important;
    padding-top: 50px!important;
  }
  .hero-section-padding { 
    padding-top: 60px;
  }
  .hero-wrapper-left {
    align-items: center;
    text-align: center;
  }

  .hero-lower-content {
    align-items: center;
  }

  .hero-top-data {
    align-items: center;
  }

  .hero-content-v2 {
    max-width: 100%;
    align-items: center;
  }

  .hero-lower-content .hero-professionals p {
    text-align: left;
  }

  .maximize-left-v2 {
    height: 100%;
  }

  .wrapper-padding-v2 {
    flex-direction: column;
  }

  .plan-grid-cards {
    flex-direction: column;
  }

  .plan-card {
    max-width: 100%;
  }

  .plan-top-data {
    gap: 20px;
  }

  .plan-grid-cards .up-to-para {
    font-size: 14px;
  }

  .plan-info {
    max-width: 100%;
  }

  .footer-wrapper-v2 {
    flex-direction: column;
  }

  .footer-main-wrapper-v2 {
    gap: 80px;
  }

  .footer-social {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-bottom-left {
    order: 3;
  }

  .right-grid-card .right-grid-upper {
    width: 100px;
  }

  .right-image-grid {
    grid-template-rows: repeat(2, 1fr);
  }

  .right-grid-lower {
    gap: 0;
  }

  /* hero animation adjustments */
  .hero-sub-image-2 {
    left: unset;
    bottom: 0;
    max-width: 207px;
    width: 100%;
    transform: translate(0, 50%);
  }

  /* dashboard image swap on mobile */
  .hero-dashboard .dashboard-img {
    display: none;
  }

  .hero-dashboard .mobile-dashboard-img {
    display: block;
  }

  .hero-absolute-images {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    width: 100%;
  }


  .hero-sub-image-1 {
    width: 85.5vw;
    max-width: unset;
    position: absolute;
    top: 15.5%;
    transform: translate(0, 0);
    left: auto;
    right: auto;
  }

  .hero-sub-image-3 {
    width: 76vw;
    max-width: unset;
    position: absolute;
    top: 69.5%;
    transform: translate(0, 0);
    left: auto;
    right: auto;
  }

  .hero-sub-image-4 {
    width: 76vw;
    max-width: unset;
    position: absolute;
    top: 86.15%;
    transform: translate(0, 0);
    left: auto;
    right: auto;
  }

  .hero-bottom {
    margin-top: -160px;
  }

  .hero-section-padding {
    padding-bottom: 231px;
  }

  .hero-absolute-images {
    width: 100%;
  }

}

/* <= 600px
Notes: Many feature/plan layouts convert to stacked/mobile forms.
Classes like .features .feature-v2 appear both above and here.
*/
@media (max-width: 600px) {



  .right-image-grid {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
  }

  .right-grid-card {
    border-radius: 10px;
  }

  .heading-1 {
    font-size: 35px;
    line-height: 1.2;
  }

  .brand-marquee-wrapper {
    padding: 40px 0 40px;
  }

  .maximize-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 25px;
  }

  .plan-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .productivity-upper-content {
    max-width: 100%;
  }

  .faq-wrapper {
    gap: 30px;
  }

  .maximize-wrapper-v2 {
    gap: 40px;
  }

  .swiper-wrapper .card-1,
  .swiper-wrapper .card-2,
  .swiper-wrapper .card-3,
  .swiper-wrapper .card-4 {
    gap: 35px;
    padding: 20px;
  }

  .after-card {
    padding-bottom: 285px !important;
  }

  .before-card {
    padding: 20px 20px 0;
  }

  .build-smart-wrapper-v2 {
    padding: 40px 0;
    padding-left: 30px;
    padding-right: 30px;
  }

  .build-flex-content {
    gap: 15px;
  }
}

/* <= 475px
Notes: smallest layouts — many assets resized here; footer and header compacted.
*/
@media (max-width: 475px) {

  .hero-sub-image-4,
  .hero-sub-image-3 {
    width: 73.5vw;
  }

  .hero-sub-image-1 {
    width: 81.5vw;
  }

  .reminders-wrapper .payment-logos {
    flex-wrap: wrap;
  }

  .hero {
    text-align: center;
  }

  .hero .align-center,
  .hero .hero-button-wrapper {
    flex-direction: column;
  }

  .footer-wrapper {
    padding: 45px 0 20px;
  }

  .footer-wrapper {
    gap: 30px;
  }

  .hero-img {
    top: 78%;
  }

  .hero-wrapper {
    padding: 40px 0 200px;
    margin-bottom: calc(100% - 100px);
  }

  .get_started .steps-wrapper {
    grid-template-columns: minmax(80px, 1fr);
    grid-template-rows: repeat(2, auto);
    width: 100%;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .get_started .bigArrow2 {
    display: block;
  }

  .get_started .arrow1 {
    display: block;
    transform: rotate(90deg) translateY(-21px);
    height: 65px;
  }

  .get_started .arrow2 {
    display: block;
  }

  .get_started .section-header {
    text-align: left;
    width: 100%;
  }

  .get_started .step {
    gap: 8px;
  }

  .hero .gap-12 {
    gap: 0;
  }

  .comparison-grid p.body-lg {
    font-size: 14px;
  }

  .footer-vector img {
    width: 80px;
  }

  .get_startedVector img {
    width: 150px;
  }

  .hero-vector {
    left: -28px;
    bottom: -8px;
  }

  .hero-vector img {
    width: 80px;
  }

  .footer-links-box-v2 {
    /* flex-direction: column; */
    flex-wrap: wrap;
  }

  .links-text {
    gap: 8px;
  }

  .hero-button-wrapper-v2 {
    flex-direction: column;
    align-items: center;
  }

  .brand-marquee-wrapper {
    padding: 40px 0 60px;
  }

  .plans-section {
    padding: 40px 0;
  }

  .faq-wrapper,
  .reminders,
  .comparison-wrapper,
  .calculate-wrapper-v2,
  .before-after-wrapper-v2,
  .plans-section,
  .review .section-wrapper {
    margin: 60px 0;
  }
  .marquee-overlay-right { 
    max-width: 50px; 
  }
  .marquee-overlay-left { 
    max-width: 50px; 
  }
}


@media (max-width:1023px) { 
  .features .feature {
    flex-direction: column-reverse; 
  }



}


@media screen and (max-width: 767px) {
  .features-wrapper>div:nth-child(4) .feature-image img {
    max-width: 100%;
  }
  .features-wrapper>div:nth-child(2) .feature-image img {
    max-width:100%;
  }
  .features-wrapper>div:nth-child(3) .feature-image img {
    max-width:100%;
    margin-bottom: -35px;
  }
  .features-wrapper>div:first-child .feature-image img {
    max-width: 100%;
    margin-bottom: -15px;
  }
  .features .feature-image { 
    max-width: 500px;
  }
  .features-wrapper>div:nth-child(4) {
    padding-top: 0;
  }


  .features-wrapper>div:nth-child(2) .feature-content {
    margin-top: -15px;
  }
  .rating-star img {
    width: 15px;
  }
  .reviewer-details span img{
    width: 12px;
  }
  .feature-image { 
    border-radius: 10px;
  }
  .features-wrapper {
    gap: 50px;
  }
  .features-wrapper>div:nth-child(2) {
    margin-top: 0;
  }
  .features-wrapper>div:nth-child(3) {
    margin-top: 0;
  }
  .features-wrapper>div:nth-child(4) {
    margin-top: 0;
  }
}



/* hero section */

.hero-professionals figure{max-width: 115px;}.video-popup,.video-wrapper iframe{top:0;left:0;width:100%;height:100%}.hover2.open-video:hover{color:#fff}.video-popup{display:none;position:fixed;background:rgba(0,0,0,.8);justify-content:center;align-items:center;z-index:9999}.video-popup-content{position:relative;width:80%;max-width:800px;background:#000;border-radius:10px;overflow:hidden}.video-wrapper{position:relative;padding-bottom:56.25%;height:0}.video-wrapper iframe{position:absolute}.video-popup-close{position:absolute;top:10px;right:15px;font-size:28px;color:#fff;cursor:pointer}@media (max-width:600px){.button-secondary{border-radius:10px;padding:8px 12px}}



/* before aftre css */

#scene {
  position: relative;
  width: 100%;
  height: 400px; 
  overflow: visible;
  background: transparent;
}

#scene .button {
  position: absolute;
  background: #AA3C28;
  border-radius: 8px;
  padding: 8px 16px;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

#scene .floating-button {
  position: absolute;
  background: #AA3C28;
  border-radius: 8px;
  padding: 8px 16px;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  pointer-events: none;
  z-index: 2;
}

#scene .floating-button img.icon {
  width: 20px;
  height: 20px;
}

#scene .button .icon {
  width: 20px;
  height: 20px;
}
.after-card-image {
  display: block; /* or flex */
  overflow: visible;
}

.after-img {
  width: 100%;
  height: auto;
  display: block;
}
.matter-scene-static {
  position: relative;
  width: 480px;
  height: 380px;
  background: #fdf7f6; /* optional background similar to image */
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 20px;
  border-radius: 8px;
}

/* Individual “button” blocks */
.floating-button {
  background: #AA3C28;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transform: rotate(calc(-8deg + 16deg * var(--r)));
}

/* small random rotation for each box */
.floating-button:nth-child(1) { --r: 0.2; }
.floating-button:nth-child(2) {
  --r: 0.2;
  bottom: 67px;
  right: 0;
}
.floating-button:nth-child(3) {
  --r: 0.3;
  bottom: 99px;
}
.floating-button:nth-child(4) {
  --r: -0.1;
  bottom: 128px;
  left: 6%;
}
.floating-button:nth-child(5) {
  --r: 1.2;
  right: 0;
  bottom: 162px;
}
.floating-button:nth-child(6) {
  --r: 0.8;
  bottom: 226px;
}
.floating-button:nth-child(7) { --r: 0.3; }

.icon {
  width: 16px;
  height: 16px;
}
@media (max-width: 768px) {
  #scene {
    height: 350px;
    max-width: 300px; 
    margin: auto;
  }
  #scene .button, #scene .floating-button { 
    font-size: 12px;
  }
  .floating-button:nth-child(2) {
    --r: 0.2;
    bottom: 59px;
    right: 0;
  }
  .floating-button:nth-child(5) {
    --r: 0.;
    bottom: 179px;
    right: 0;
  }
  .floating-button:nth-child(4) {
    --r: -0.;
    bottom: 140px;
    left: 6%;
  }
}



.insightsv2-hero{
  background-color: #AA3C28;
  padding-top: 150px;
  padding-bottom: 84px;
  position: relative;
}
.insightsv2-hero-grid{
  grid-column-gap: 50px; 
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  align-items: center;
}
.insightsv2-hero-left{
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}
.insightsv2-hero-left-label{
  background-color:rgba(255,255,255,10%) ;
  color: #fff;
  padding: 10px 18px;
  border-radius: 100px;
  font-size: 16px;
}
.insightsv2-hero-left-content{
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #fff;
  max-width: 565px;
}
.insightsv2-hero-left-content h1{
  font-size: 48px;
  font-weight: 600;
}
.insightsv2-hero-left-content p{
  font-size: 16px;
}
.insightsv2-hero-left-button{
  display: flex;
  padding-top: 8px;
}
.insightsv2-hero-rightbanner img{
  border-radius: 16px;  
  height: 100%;
  width: 100%;
  object-fit: cover; 
}
.insightsv2-hero-vector{
  position: absolute;
  left: 0;
  bottom: 0;
}

.blog-post-featured{
  max-width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}


.author-info{
  display: flex;
  gap: 12px;
  align-items: center;
  color:#fff;
}
.author-info-profile{
  width: 54px;
  display: flex;
  height: 54px;
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 20%);
  align-items: center;
  justify-content: center;

}

.author-info-profile img{
  width: 100%; 
  border-radius: 100px;
  overflow: hidden;
  object-fit: contain;
}
.author-info-details{
  display: flex;
  gap: 12px;
  align-items: center;
}
.author-info-linkedin{
  width: 24px;
  height: 24px;
}

.author-info-linkedin svg,
.author-info-linkedin img{
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: contain;
  object-position: center;
}
.author-info-divider{
  width:1px;
  flex: none;
  height: 25px;
  background:#fff;
}
.blog-post-metav2{
  color: #fff;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
}
.meta-item-date,.meta-item-time{
  display: flex;
  align-items: center;
  gap: 4px;
}

.meta-item-date svg,
.meta-item-date img,
.meta-item-time svg,
.meta-item-time img{
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  object-position: center;
}

.meta-separator{
  width:1px;
  flex: none;
  height: 16px;
  background:#fff;
}
.insightsv2-topbar{
  background: #F8EFEE;
  padding: 20px 0;
}
.insightsv2-topbar-wrapper{
  display: flex;
  font-size: 14px;
  gap: 6px;
  align-items: center;
}
.insightsv2-hero-left-label a:hover{
  color:#fff;
}

@media screen and (max-width: 991px) {
  .insightsv2-hero-left-content h1 {
    font-size: 35px;
  }
  .insightsv2-hero { 
    padding-bottom: 60px;
    padding-top: 120px; 
  }
  .insightsv2-hero-grid {
    grid-column-gap: 20px;
  }
  .insightsv2-hero-vector { 
    max-width: 250px;
    position: absolute;
    width: 100%;
  }
  .blogv1-content-wrapper {
    display: flex;
    gap: 40px;
    flex-direction: column;
  }
  .blogv1-content-left,.blogv1-content-right {
    width: 100%;
  }
  .blogv1-content {
    padding-bottom: 60px;
    padding-top: 60px;
  }
}

@media screen and (max-width: 767px) {
  .insightsv2-hero-grid { 
    display: flex;
    flex-direction: column-reverse;
    gap: 25px;
  }
  .insightsv2-hero-rightbanner img {
    border-radius: 15px;
  }
}


.blogv2-content{
  padding-top:60px;
  padding-bottom:120px;
}
.blogv2-content-wrapper { 
  display: flex;
  gap:40px;
}
.blogv2-content-left{
  width:30%; 
}
.blogv2-content-right{
  width:70%; 
}
.blogv2-content-left-inner{
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.toc-wrapper {
  background: #E6E6E1; 
  border-radius: 15px; 
  max-height: 70vh;
  overflow-y: auto; 
}

.toc-title {
  font-size: 24px;
  font-weight: 500; 
  padding-bottom: 0px;
  color: #0F0503;
}

#table-of-contents {
  list-style: none;
  padding: 0;
  margin: 0;
}

#table-of-contents li {
  margin-bottom: 10px;
  border-bottom: 1px solid #E0D5CF;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

#table-of-contents li a {
  text-decoration: none;
  color: rgba(15,5,3,70);
  font-size: 14px;
  transition: color 0.3s ease;
}

#table-of-contents li a:hover {
  color: #d43f3f;
}

#table-of-contents li a.active {
  font-weight: 600;
  color: #d43f3f;
}
.blogv2-content-left-block02{
  background: #AA3C28;
  color: #fff;
  border-radius: 15px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}



.social-share-block03 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.share-block03{
  width:44px;
  height:44px;
  display:flex;
  background:#E6E6E1;
}
.share-block03{
  width:44px;
  height:44px;
  display:flex;
  background:#E6E6E1;
  color:#0F0503;
  border-radius: 100px;
  align-items: center;
  justify-content: center;
}
.share-block03 .share-block03-img {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease ;
}
.share-block03:hover{
  background:#AA3C28;
  color:#fff;
}
.share-block03:hover .share-block03-img {
  transform: scale(1.1);
  opacity: 0.8;
}
.blogv2-content-right p {
  line-height: 1.4;
  margin: 0 0 15px!important;
}
.blogv2-content-right ul{
  padding-bottom: 15px; 
  padding-left: 20px;
}
.blogv2-content-right ul li{
  list-style: block;
  list-style-type: disc;
}
.blogv2-content-right ul a{
  color:#aa3c28;
}

.toc-wrapper {
  background: #e6e6e1;
  border-radius: 15px;
  max-height: 50vh;
  overflow-y: auto; 
  transition: max-height .4s ease;
  /* Scrollbar color for Firefox */
  scrollbar-width: thin;
  scrollbar-color: #aa3c28 #fff;
}

/* Scrollbar styling for WebKit browsers */
.toc-wrapper::-webkit-scrollbar {
  width: 8px;
}

.toc-wrapper::-webkit-scrollbar-track {
  background: #fff; /* Track background */
  border-radius: 10px;
}

.toc-wrapper::-webkit-scrollbar-thumb {
  background: #aa3c28; /* Scrollbar thumb */
  border-radius: 10px;
}

.toc-wrapper::-webkit-scrollbar-thumb:hover {
  background: #cc0000; /* On hover */
}
.blogv2-content-right article h2 , .blogv2-content-right article h2 span{
  font-size: 32px!important;
  color:#0F0503!important;
}
.blogv2-content-right article h3, .blogv2-content-right article h3 span{
  font-size: 24px!important;
  color:#0F0503!important;
}
.blogv2-content-right article h4, .blogv2-content-right article h4 span{
  font-size: 20px!important;
  color:#0F0503!important;
}
.blogv2-content-right article span{
  background-color: transparent!important;
}
.blogv2-content-right article ol{
  display: flex;
  gap: 15px;
  flex-direction: column;
  line-height: 1.4;
  padding-left: 20px;
}
.post-blogtable{
  width:100%;    overflow: auto;
}
.post-blogtable01 table td
{
  padding:15px;
}
.blog-post-body table td{
  padding: 12px;
  border: 1px solid #dddddd!important; 
  padding: 12px!important;
}
.blog-post-body table th{ 
  padding: 12px!important;
  border: 1px solid #dddddd!important;
  background-color: #aa3c28;
}
.blog-post-body p ,.blog-post-body p > span {
  color:#0f0503!important;
}
.blogv2-cta-content p,.subscribe-sectionv2-top p{
  color:#fff!important;
}
@media screen and (max-width: 991px) {
  .post-blogtable01 table
  {
    width:1000px !important;
  }
  .insightsv2-hero-left-content h1 {
    font-size: 35px;
  }
  .insightsv2-hero { 
    padding-bottom: 60px;
    padding-top: 120px; 
  }
  .insightsv2-hero-grid {
    grid-column-gap: 20px;
  }
  .insightsv2-hero-vector { 
    max-width: 250px;
    position: absolute;
    width: 100%;
  }
  .blogv2-content-wrapper {
    display: flex;
    gap: 50px;
    flex-direction: column;
  }
  .blogv2-content-left,.blogv2-content-right {
    width: 100%;
  }
  .blogv2-content {
    padding-bottom: 60px;
    padding-top: 60px;
  }
}

@media screen and (max-width: 767px) {
  .insightsv2-hero-grid { 
    display: flex;
    flex-direction: column-reverse;
    gap: 25px;
  }
  .insightsv2-hero-rightbanner img {
    border-radius: 15px;
  }
}
@media screen and (max-width: 600px){

}
@media screen and (max-width: 310px){
  .blog-post-metav2 { 
    font-size: 12px; 
  }

}



/* TOC Header */
.toc-header{ 
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

/* Toggle Button */
.toc-toggle{
  border: none;
  cursor: pointer;
  background: #f8efee;
  font-size: 22px;
  width: 30px;
  height: 30px;
  border-radius: 100px;
}

/* Hide minus initially */
.icon-minus{
  display:none;
}

/* Accordion Animation */


.toc-wrapper.closed{
  max-height:0;
}

/* Icon swap */
.toc-toggle.active .icon-plus{
  display:none;
}
.toc-toggle.active .icon-minus{
  display:inline;
}

/* TOC List */
#table-of-contents li{
  list-style:none;
  margin:10px 0;
}

#table-of-contents a{
  text-decoration:none;
  color:#1a1a1a;
}

#table-of-contents a:hover{
  text-decoration:underline;
}
#table-of-contents li.h2{ 
  font-size:14px;
  line-height: 1.5;
  letter-spacing: 0;
}
/* Indent H3 */
#table-of-contents li.h3{ 
  font-size:14px;
  line-height: 1.5;
  letter-spacing: 0;
}
html{
  scroll-behavior: smooth;
}

/* Offset for sticky header */
#blog-content h2,
#blog-content h3{
  scroll-margin-top: 100px;
}
.footer-v2 .links-column a:hover{
  color:#fff!important;
}
.footer-v2 .footer-bottom-right a:hover{
  color:#fff!important;
}


.related-blogs {
  background: #f9f9f9;
  padding: 80px 0;
  padding-top: 0;
}

.related-blogs-head {
  text-align: center;
  margin-bottom: 40px;
}

.related-blogs-head h2 {
  font-size: 32px;
  font-weight: 700;
  color: #222;
}

.related-blogs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.related-blogs-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.related-blogs-card:hover {
  transform: translateY(-6px);
}

.related-blogs-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.related-blogs-card-content {
  padding: 20px;
}

.related-blogs-card-content h3 {
  font-size: 18px;
  color: #AA3C28;
  margin-bottom: 10px;
}

.related-blogs-card-content p {
  font-size: 15px;
  color: #555;
}

.no-related-posts {
  text-align: center;
  color: #777;
  font-size: 16px;
}

@media (max-width: 991px) {
  .related-blogs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .related-blogs-head h2 { 
    font-size: 26px; 
  }
  .related-blogs-head {
    margin-bottom: 24px;
    text-align: center;
  }
}

@media (max-width: 575px) {
  .related-blogs-grid {
    grid-template-columns: 1fr;
  }
}

.latestv1tag-artical{
  padding-top:120px;
  padding-bottom:120px;
}

.latestv1tag-artical-wrapper{
  grid-column-gap: 40px;
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: 1fr .5fr;
  grid-template-rows: auto auto;
}
.latestv1tag-artical-category{
  max-width: 300px;
  margin: auto;
}

.latestv1tag-artical-head{
  max-width: 464px;
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column; 
  gap: 10px;
}
.latestv1tag-artical-head h2{
  font-size:40px;
}
.latestv1tag-artical-head p{
  font-size:16px;
}

.latestv1tag-artical-grid{  
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.latestv1tag-artical-block {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;
  position: relative;
  padding: 5px;
  padding-bottom: 40px;
}

.latestv1tag-artical-block:hover {
  transform: translateY(-5px);
}
.latestv1tag-artical-block-top{
  padding: 10px 20px 0px 20px;
  display: flex;
  font-size: 14px;
  gap: 8px;
}
.blog-category{
  backdrop-filter: blur(19.64px);
  background-color: rgba(0, 0, 0, 26%);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  left: 15px;
  padding: 10px 18px;
  position: absolute;
  top: 15px;
  z-index: 2;
}
.latestv1tag-artical-block-image img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 17px;
}
.latestv1tag-artical-block-top-inner {
  display: flex;
  gap: 4px;
}
.latestv1tag-artical-block-content {
  padding: 20px;
}
.latestv1tag-artical-block-content h2{
  font-size:18px;
}
.latestv1tag-artical-block-content p{
  font-size:16px;
}

.latestv1tag-artical-loadmore{
  text-align: center;
}

.latestv1tag-artical-loadmore button {
  background: #AA3C28;
  border-radius: 15px;
  color: #fff;
  display: inline-block;
  margin: 20px;
  padding: 12px 22px;
  text-decoration: none;
  font-size: 16px;  
  border: 1px solid #aa3c28;
}

.latestv1tag-artical-loadmore button:hover {
  background-color: var(--color-light);
  border: 1px solid #aa3c28;
  color: var(--color-secondary);
}

.latestv1tag-artical-block-content a,.blog-read-more{
  position: absolute;
  bottom: 20px;
  left: 20px;
  color:#AA3C28;
  font-size:16px;
}
.blog-category a:hover{
  color:#fff;
}
.insightsv1-topbar-right h2 {
  font-size: 40px;
}
.insightsv1-topbar-right-block h4{
  font-size: 16px;
}
.insightsv1-topbar-right {
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: sticky;
  top: 111px;
}
.insightsv1-topbar-right-grid{
  display: flex;
  flex-direction: column;
  gap:20px ;
  height: 100%;
  justify-content: space-between;
}
.insightsv1-topbar-right-block{
  display: flex; 
  gap:16px ;
  align-items: center;
}
.insightsv1-topbar-right-block-image{
  max-width: 130px;
}
.insightsv1-topbar-right-block-image img{
  border-radius:12px ;
}

/* Responsive */
@media (max-width: 991px) {
  .latestv1tag-artical-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .insightsv1-topbar-right,  .insightsv1-topbar-left {  
    gap: 8px;
  }
  .insightsv1-topbar-right-grid {
    display: flex;
    gap: 10px; 
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
  }
  .insightsv1-topbar-right-block {
    align-items: center;
    display: flex;
    gap: 16px;
    max-width: 369px;
  }
  .insightsv1-topbar-right h2 {
    font-size: 26px;
  }
  .latestv1tag-artical-wrapper { 
    display: flex;
    gap: 40px;
    flex-direction: column;
  }
  .latestv1tag-artical {
    padding-bottom:60px;
    padding-top: 60px;
  }
  .tag-hero-vector {
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%;
    max-width: 200px;
  }
  .tag-hero-section {
    background-color: #aa3c28;
    padding-bottom: 80px;
    padding-top: 130px;
    position: relative;
  }
}

@media (max-width: 575px) {
  .latestv1tag-artical-grid {
    grid-template-columns: 1fr;
  }
}

.blogv1-cta {
  align-items: flex-start;
  background: #32328C;
  border-radius: 20px;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  padding: 60px 40px;
  background-size: cover;
  background-repeat: no-repeat;
  flex-direction: column;
}

.blogv1-cta-content .blogv1-cta-head {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
}

.blogv1-cta-content .blogv1-cta-text {
  font-size: 18px;
  margin: 0;
}

.blogv1-cta-button {
  display:flex;
}


.blogv2-content-right .blogv1-cta p,.blogv2-content-right .blogv1-cta p>span {
  color: #fff !important;
} 

.blog-body header,.blog-body .header {
  min-height: auto;
}