/* ============================================================
   CHRONOTASK HOMEPAGE  PIXEL-PERFECT STYLES
   ============================================================ */

/*  RESET & BASE  */


.hamburger {
  width: 26px;
  height: 18px;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  right: 18px;
  position: relative;
  margin-left: 20px;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2.5px;
  background: #535353;
  border-radius: 50px;
  transition: .3s;
}

/* Hover Animation */
.hamburger:hover span:nth-child(1) {
  width: 70%;
}

.hamburger:hover span:nth-child(2) {
  width: 100%;
}

.hamburger:hover span:nth-child(3) {
  width: 70%;
  margin-left: auto;
}

@media (max-width: 768px) {
  .hamburger {
    display: flex;
    width: 26px;
    height: 18px;
  }
}

.hero-center-textai {
  font-size: 16px;
  line-height: 1.6;
  color: #111827;
  font-weight: 500;
}

.centertext3 {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #16ee33, #56aee9, #ebff0c);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.centertext4 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
  max-width: 760px;
}

.hero-center-textai2 {
  font-size: 13px;
  color: #3B82F6;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.hero-center-textai5 {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  position: absolute;
  left: 200px;
  bottom: -76px;
}

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

.rightoverlaycard {
  position: absolute;
  top: 122px;
  left: 105px;
}

.bluetick {
  position: relative;
  top: 76px;
  left: 67PX;
  width: 121px;
}

img.clock {
  left: -6px;
  z-index: 10;
  position: absolute;
  width: 44%;
  top: 65px;
}

body {
  font-family: 'Effra', sans-serif;
  color: #1F2937;
  background: #F9FAFB;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  font-family: inherit;
}

/*  REUSABLE  */
.pill-btn {
  display: inline-block;
  background: #F3F4F6;
  color: #6B7280;
  font-size: 18px;
  font-weight: 200;
  padding: 13px 18px;
  border-radius: 999px;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
  border: 1px solid #bcbcbc;
  box-shadow: 0px 12px 20px -6px;
  bottom: 16px;
  position: relative;
  margin-top: -16px;
}

span.solns {
  bottom: 23px;
  margin-top: 4px;
}

.section-heading {
  font-size: clamp(28px, 4vw, 60px);
  font-weight: 400;
  color: #111827;
  text-align: center;
  line-height: 1.15;
  padding-bottom: 30px;
}

.section-heading-people {
  font-size: clamp(28px, 4vw, 47px);
  font-weight: 400;
  color: #111827;
  text-align: center;
  line-height: 1.15;
  margin-bottom: 12px;
}

.section-sub {
  text-align: center;
  color: #6B7280;
  font-size: 19px;
  margin-bottom: 48px;
}

/* ============================================================
   SECTION 1  HERO
   ============================================================ */


/* ============================================================
   SECTION 1  HERO
   ============================================================ */
.section-hero {
  border: 1px solid #c9c8c8c4;
  position: relative;
  background-color: #f6f6f6;
  min-height: 655px;
  padding-bottom: 32px;
  overflow: hidden;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 30px;

  background-image:
    radial-gradient(circle at center,
      rgba(0, 0, 0, 0.09) 1.6px,
      transparent 1.6px),
    radial-gradient(circle at 50% 50%,
      rgba(76, 76, 76, 0) 20%,
      rgba(255, 255, 255, 0.77) 100%);

  background-size:
    8px 8px,
    100% 100%;
}

/* subtle dot texture */
.section-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#D1D5DB 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.35;
  pointer-events: none;
}

/*  Navbar  */
.navbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 11px 48px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-dots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: 18px;
  height: 18px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #111827;
}

.dot-blue {
  background: #2563EB;
}

.logo-text {
  font-size: 40px;
  font-weight: 500;
  color: #444545;
}


.nav-links {
  display: flex;
  gap: 36px;
}

.nav-links a {
  color: #6B7280;
  font-size: 14px;
  font-weight: 500;
  transition: color .2s;
  text-decoration: none;
}

.nav-links a:hover {
  color: #111827;
  border-bottom: 2px solid rgb(179, 179, 179);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-right: 50px;
}

.nav-signin {
  color: #6B7280;
  font-size: 14px;
  font-weight: 500;
}

.btn-getdemo {
  background: transparent;
  border: 1.5px solid #D1D5DB;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  transition: border-color .2s;
}

.btn-getdemo:hover {
  border-color: #9CA3AF;
}

/*  Industries Mega Menu (Desktop)  */
.navbar-container {
  position: relative;
  z-index: 1000;
  background: #fff;
}

.nav-item {
  position: relative;
}

.nav-item--industries {
  align-self: stretch;
  display: flex;
  align-items: center;
}

.nav-link--dropdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #6B7280;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s;
  position: relative;
  z-index: 2;
}

.nav-link--dropdown:hover {
  color: #111827;
}

.nav-chevron {
  transition: transform .25s ease;
  flex-shrink: 0;
}

.industries-mega-menu {
  display: none;
}

@media (min-width: 769px) {
  .nav-item--industries::after {
    content: "";
    position: absolute;
    left: -16px;
    right: -16px;
    top: 0;
    bottom: -28px;
    z-index: 1;
  }

  .nav-link--dropdown {
    padding: 22px 16px;
    margin: -22px -16px;
  }

  .navbar-container.industries-open .industries-mega-menu {
    display: block;
  }

  .navbar-container.industries-open .nav-chevron {
    transform: rotate(180deg);
  }

  .navbar-container.industries-open .nav-link--dropdown {
    color: #111827;
  }

  .industries-mega-menu {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #F3F4F6;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.1);
    padding-top: 12px;
    animation: megaMenuFadeIn .2s ease;
  }

  .industries-mega-menu::before {
    content: "";
    position: absolute;
    top: -28px;
    left: 0;
    right: 0;
    height: 28px;
  }

  @keyframes megaMenuFadeIn {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .industries-mega-inner {
    display: grid;
    grid-template-columns: 260px 1fr 1.4fr;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 48px 36px;
    min-height: 380px;
  }

  .industries-mega-intro {
    padding-right: 32px;
    border-right: 1px solid #F3F4F6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .industries-mega-intro h3 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    line-height: 1.35;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
  }

  .industries-mega-intro p {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.6;
    margin: 0 0 24px;
  }

  .industries-view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding: 10px 16px;
    background: #EFF6FF;
    color: #2563EB;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: background .2s;
  }

  .industries-view-all:hover {
    background: #DBEAFE;
    color: #1D4ED8;
  }

  .industries-mega-list {
    padding: 0 16px;
    border-right: 1px solid #F3F4F6;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .industry-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background .15s;
  }

  .industry-list-item:hover,
  .industry-list-item.active {
    background: #F0F7FF;
  }

  .industry-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .industry-icon--sales {
    background: #EFF6FF;
  }

  .industry-icon--roofing {
    background: #FFF7ED;
  }

  .industry-icon--realestate {
    background: #F0FDF4;
  }

  .industry-icon--recruiter {
    background: #F5F3FF;
  }

  .industry-icon--clinic {
    background: #F0FDFA;
  }

  .industry-icon--automotive {
    background: #EFF6FF;
  }

  .industry-list-label {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
  }

  .industry-list-arrow {
    color: #D1D5DB;
    flex-shrink: 0;
  }

  .industry-list-item:hover .industry-list-arrow,
  .industry-list-item.active .industry-list-arrow {
    color: #9CA3AF;
  }

  .industries-mega-preview {
    position: relative;
    padding-left: 28px;
    min-height: 320px;
  }

  .industry-preview-panel {
    display: none;
    grid-template-columns: 1fr 200px;
    gap: 20px;
    align-items: start;
    height: 100%;
  }

  .industry-preview-panel.active {
    display: grid;
  }

  .industry-preview-badge {
    display: inline-block;
    padding: 4px 10px;
    background: #EFF6FF;
    color: #2563EB;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    margin-bottom: 10px;
  }

  .industry-preview-content h4 {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
  }

  .industry-preview-content p {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.55;
    margin: 0 0 18px;
    max-width: 280px;
  }

  .industry-preview-features {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .industry-preview-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #374151;
    font-weight: 500;
  }

  .industry-preview-features li::before {
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Ccircle cx='9' cy='9' r='9' fill='%232563EB'/%3E%3Cpath d='M5.5 9L7.5 11L12.5 6.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  .industry-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: #2563EB;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: background .2s;
  }

  .industry-preview-btn:hover {
    background: #1D4ED8;
    color: #fff;
  }

  .industry-preview-visual {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 220px;
    align-self: center;
  }

  .industry-preview-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .industry-preview-card {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: #fff;
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 130px;
  }

  .preview-card-label {
    font-size: 11px;
    color: #6B7280;
    font-weight: 500;
  }

  .preview-card-value {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
  }

  .preview-card-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    width: fit-content;
    margin-top: 4px;
  }

  .preview-card-badge--up {
    background: #DCFCE7;
    color: #16A34A;
  }
}

@media (max-width: 768px) {
  .industries-mega-menu {
    display: none !important;
  }
}

/* Mobile filters (What's New page) */
.wn-mobile-filters {
  display: none;
  gap: 10px;
  margin-bottom: 16px;
}

.wn-mobile-filter-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  font-weight: 600;
  color: #111827;
}

.wn-mobile-filter-toggle .chev {
  margin-left: auto;
}

.wn-mobile-filter-panel {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  margin-top: 10px;
  padding: 12px;
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.06);
  max-height: 60vh;
  overflow: auto;
  transition: transform .18s ease, opacity .18s ease;
}

.wn-mobile-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.wn-mobile-filter-close {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

.wn-filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wn-filter-list li {
  padding: 10px 6px;
  border-radius: 10px;
}

.wn-filter-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #111827;
  padding: 8px 10px;
  border-radius: 8px;
}

.wn-filter-list li.active a {
  background: #EFF6FF;
  color: #2563EB;
}

@media (max-width: 900px) {
  .wn-mobile-filters {
    display: flex;
    flex-direction: column;
  }

  .wn-sidebar {
    display: none;
  }

  .wn-content-area {
    width: 100%;
  }
}

.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.75);
  backdrop-filter: blur(12px);
  display: none;
  align-items: flex-start;
  justify-content: flex-start;
  z-index: 9999;
  padding: 24px 16px;
}

.mobile-nav-overlay.active {
  display: flex;
}

.mobile-nav-inner {
  width: 100%;
  max-width: 980px;
  height: calc(100vh - 32px);
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 35px 80px rgba(15, 23, 42, 0.18);
  padding: 28px;
  animation: slideIn 0.28s ease-out;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mobile-nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.mobile-nav-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mobile-nav-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.mobile-nav-label {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.mobile-nav-close {
  background: transparent;
  border: none;
  color: #111827;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
}

.mobile-nav-actions-row {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.mobile-nav-actions-row .nav-signin,
.mobile-nav-actions-row .btn-getdemo {
  flex: 1 1 auto;
}

.mobile-nav-actions-row .btn-getdemo {
  min-width: 130px;
}

.mobile-nav-copy {
  margin-bottom: 20px;
}

.mobile-nav-copy h2 {
  font-size: 22px;
  margin-bottom: 12px;
  line-height: 1.05;
}

.explore {
  font-size: 18px;
}

.mobile-nav-copy p {
  color: #4B5563;
  line-height: 1.7;
  max-width: 720px;
}

.mobile-nav-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  flex: 1 1 auto;
  min-height: 0;
}

.mobile-nav-list,
.mobile-nav-cards {
  overflow: auto;
  padding-right: 4px;
  min-height: 0;
}

.mobile-nav-list {
  display: grid;
  gap: 10px;
}

@media (min-width: 760px) {
  .mobile-nav-grid {
    grid-template-columns: minmax(220px, 260px) 1.2fr;
  }

  .mobile-nav-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mobile-nav-list a {
  display: block;
  padding: 18px 20px;
  border-radius: 22px;
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
  color: #111827;
  font-weight: 600;
  transition: background .2s, border-color .2s;
}

.mobile-nav-list a.active,
.mobile-nav-list a:hover {
  background: #EFF6FF;
  border-color: #BFDBFE;
}

.mobile-nav-cards {
  display: grid;
  gap: 16px;
}

.mobile-nav-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
  min-height: 100px;
}

.featured-card {
  border-color: #DCEAFE;
  background: #F8FAFE;
}

.mobile-nav-card-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #EFF6FF;
  font-size: 20px;
}

.mobile-nav-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.mobile-nav-card p {
  margin-bottom: 10px;
  color: #4B5563;
  line-height: 1.6;
}

.mobile-nav-card a {
  color: #2563EB;
  font-weight: 700;
}

.mobile-nav-view-all {
  display: inline-flex;
  margin-top: 18px;
  color: #2563EB;
  font-weight: 700;
}

@keyframes slideIn {
  from {
    transform: translateY(-14px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/*  Hero wrapper  */
@keyframes slideIn {
  from {
    transform: translateY(-14px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/*  Hero wrapper  */
.hero-wrapper {
  position: relative;
  z-index: 5;
  max-width: 1100px;
  margin: 0 auto;
  min-height: 520px;
  padding-top: 48px;
}


.hero-center {
  position: relative;
  text-align: center;
  z-index: 6;
  width: 100%;
  margin: 0 auto;
  padding: 30px 0 30px;
}

.hero-center-logo-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  width: 105px;
  height: 105px;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.02);
  margin-bottom: 20px;
  border: 1px solid rgba(243, 244, 246, 0.8);
}

.zodo-center-icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.hero-title {
  margin-bottom: 20px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Whats New hero title variants */
.wn-hero-title {
  font-size: clamp(28px, 6vw, 48px);
  font-weight: 700;
  line-height: 1.05;
  color: #111827;
}

.wn-hero-title--mobile {
  display: none;
}

.wn-hero-title--desktop {
  display: block;
}

@media (max-width: 600px) {
  .wn-hero-title--desktop {
    display: none;
  }

  .wn-hero-title--mobile {
    display: block;
  }

  .wn-hero-title--mobile {
    font-size: 28px;
    line-height: 1.15;
  }
}

.hero-title-dark {
  display: block;
  font-size: clamp(34px, 5.5vw, 90px);
  font-weight: 400;
  color: #111827;
  font-family: 'Effra', sans-serif;
  letter-spacing: 3px;
}

.hero-title-light {
  display: block;
  font-size: clamp(30px, 5vw, 86px);
  font-weight: 400;
  color: #9CA3AF;
  margin-top: -6px;
  font-family: 'Effra', sans-serif;
}

.hero-sub {
  font-size: 19px;
  color: #6B7280;
  margin-bottom: 28px;
  font-weight: 400;
}

.btn-cta {
  background: #2f75da;
  color: #fff;
  font-size: 20px;
  font-weight: 200;
  padding: 13px 25px;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(37, 99, 235, .25);
  transition: background .2s, transform .1s, box-shadow .2s;
  margin-top: -16px;
  margin-bottom: 20px;
}

.btn-cta:hover {
  background: #1D4ED8;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(37, 99, 235, .3);
}


/*  SVG HERO FLOATING CARDS  */

/* Top Left: notes.svg + blue tick.svg overlaid */
.sticky-group {
  position: absolute;
  top: 20px;
  left: -171px;
  width: 397px;
  height: 260px;
  z-index: 7;
}

img.leftoverlaycard-svg {
  z-index: 10;
  position: absolute;
  left: -209px;
  width: 247px;
  top: 74px;
}

.hero-notes-svg {
  width: 269px;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.12));
}

.hero-bluetick-svg {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 90px;
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.14));
  z-index: 9;
}

/* Top Right: reminder.svg */
.reminders-group {
  position: absolute;
  top: 28px;
  right: -180px;
  height: 180px;
  z-index: 7;
}

.hero-reminder-svg {
  height: auto;
  width: 240px;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.10));
  left: 61px;
  position: absolute;
}

img.rightoverlaycard-svg.blankcutbox {
  left: 37px;
  position: relative;
}

/* Bottom Left: hero left box SVG backdrop + tasks card overlay */
.tasks-group-svg {
  position: absolute;
  left: -124px;
  width: 310px;
  z-index: 10;
  top: 446px;
}

.hero-leftbox-svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.07));
}

.tasks-content-overlay {
  position: absolute;
  top: 150px;
  right: -5px;
  width: 265px;
  z-index: 8;
}


.tasks-folder-card {
  padding: 16px 18px;
  position: relative;
}

.tasks-folder-card .card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #9CA3AF;
  margin-bottom: 14px;
}

/* Bottom Right: 100plusintegrations.svg */
.integrations-svg-group {
  position: absolute;
  bottom: -114px;
  right: -145px;
  width: 280px;
  z-index: 7;
}

.hero-integrations-svg {
  width: 260px;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.08));
}

/* Folder Card Styling (shared) */
.folder-card {
  background: #fff;
  border-radius: 0 16px 16px 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(243, 244, 246, 0.8);
}

.folder-tab {
  position: absolute;
  top: -16px;
  left: -1px;
  height: 17px;
  width: 90px;
  background: #fff;
  border-radius: 10px 10px 0 0;

  border-right: 1px solid rgba(243, 244, 246, 0.8);
  z-index: 2;
}

.folder-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -16px;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 100% 0%, transparent 15px, #fff 15px);
  z-index: 3;
}

/* Task item shared styles */
.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.task-item:last-child {
  margin-bottom: 0;
}

.task-item-left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
}

.task-num-badge {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  margin-top: 2px;
  flex-shrink: 0;
}

.task-num-badge.orange {
  background: #EF4444;
}

.task-num-badge.green {
  background: #10B981;
}

.task-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.task-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #374151;
}

.task-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-bar {
  width: 70px;
  height: 6px;
  background: #F3F4F6;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
}

.progress-fill.orange {
  background: #F97316;
}

.progress-fill.red-orange {
  background: #EF4444;
}

.progress-fill.blue {
  background: #2563EB;
}

.task-pct {
  font-size: 11px;
  font-weight: 600;
  color: #9CA3AF;
}

.task-date {
  font-size: 11px;
  color: #9CA3AF;
  font-weight: 500;
  margin-left: 4px;
}

.task-avatars {
  display: flex;
  margin-left: 8px;
}

.task-avatars img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -6px;
}

.task-avatars img:first-child {
  margin-left: 0;
}

.card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #9CA3AF;
  margin-bottom: 14px;
}

/* Integration logos (legacy) */
.integration-logos {
  display: flex;
  gap: 10px;
}

.int-logo {
  width: 52px;
  height: 52px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(243, 244, 246, 0.8);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.int-logo:hover {
  transform: translateY(-2px);
}

/* Reminder card legacy (not used but kept for structure) */
.reminder-card-content {
  padding: 14px 18px;
  position: relative;
  z-index: 4;
}

.reminder-header-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #9CA3AF;
  margin-bottom: 12px;
  text-align: right;
}

.reminder-meeting-title {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 3px;
}

.reminder-meeting-sub {
  font-size: 12px;
  color: #6B7280;
  margin-bottom: 14px;
}

.reminder-time-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.time-label {
  font-size: 10px;
  color: #9CA3AF;
  font-weight: 600;
}

.time-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #EFF6FF;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #2563EB;
  width: fit-content;
}


/* ============================================================
   SECTION 2  SOLUTIONS
   ============================================================ */

.sticky-card {
  position: absolute;
  inset: 0;
  background: #FEF9C3;
  /* post-it yellow */
  border-radius: 4px;
  padding: 24px 20px 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  transform: rotate(-3deg);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.sticky-pin {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: #EF4444;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.sticky-text {
  font-family: 'Effra', sans-serif;
  font-size: 17px;
  line-height: 1.35;
  color: #374151;
  font-weight: 500;
}

.sticky-badge-card {
  position: absolute;
  bottom: -5px;
  left: -20px;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-6deg);
  border: 1px solid rgba(243, 244, 246, 0.8);
  z-index: 8;
}

.checkbox-inner {
  width: 36px;
  height: 36px;
  background: #2563EB;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*  REMINDERS GROUP (Top Right)  */
.reminders-group {
  position: absolute;
  top: 40px;
  width: 266px;
  height: 190px;
  z-index: 7;
}


.reminder-bg-card {
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transform: rotate(4deg) scale(0.96);
  border: 1px solid rgba(229, 231, 235, 0.5);
}

.reminder-badge-card {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 56px;
  height: 56px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
  border: 1px solid rgba(243, 244, 246, 0.8);
}

.badge-stopwatch-svg {
  width: 28px;
  height: 28px;
}

.reminder-card {
  position: absolute;
  inset: 0;
  z-index: 8;
}

/* Folder Card Styling */
.folder-card {
  background: #fff;
  border-radius: 0 16px 16px 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(243, 244, 246, 0.8);
}

.folder-tab {
  position: absolute;
  top: -16px;
  left: -1px;
  height: 17px;
  width: 90px;
  background: #fff;
  border-radius: 10px 10px 0 0;
  border-top: 1px solid rgba(243, 244, 246, 0.8);
  border-left: 1px solid rgba(243, 244, 246, 0.8);
  border-right: 1px solid rgba(243, 244, 246, 0.8);
  z-index: 2;
}

.folder-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -16px;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 100% 0%, transparent 15px, #fff 15px);
  z-index: 3;
}

.reminder-card-content {
  padding: 14px 18px;
  position: relative;
  z-index: 4;
}

.reminder-header-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #9CA3AF;
  margin-bottom: 12px;
  text-align: right;
}

.reminder-meeting-title {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 3px;
}

.reminder-meeting-sub {
  font-size: 12px;
  color: #6B7280;
  margin-bottom: 14px;
}

.reminder-time-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.time-label {
  font-size: 10px;
  color: #9CA3AF;
  font-weight: 600;
}

.time-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #EFF6FF;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #2563EB;
  width: fit-content;
}

/*  TODAY'S TASKS CARD (Bottom Left)  */
.tasks-group {
  position: absolute;
  bottom: -15px;
  left: 10px;
  width: 275px;
  padding: 16px 18px;
  z-index: 7;
}

.tasks-group .card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #9CA3AF;
  margin-bottom: 14px;
}

.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.task-item:last-child {
  margin-bottom: 0;
}

.task-item-left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
}

.task-num-badge {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  margin-top: 2px;
}

.task-num-badge.orange {
  background: #EF4444;
  /* red/pinkish */
}

.task-num-badge.green {
  background: #10B981;
}

.task-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.task-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #374151;
}

.task-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-bar {
  width: 70px;
  height: 6px;
  background: #F3F4F6;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
}

.progress-fill.orange {
  background: #F97316;
}

.progress-fill.red-orange {
  background: #EF4444;
}

.progress-fill.blue {
  background: #2563EB;
}

.task-pct {
  font-size: 11px;
  font-weight: 600;
  color: #9CA3AF;
}

.task-date {
  font-size: 11px;
  color: #9CA3AF;
  font-weight: 500;
  margin-left: 4px;
}

.task-avatars {
  display: flex;
  margin-left: 8px;
}

.task-avatars img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -6px;
}

.task-avatars img:first-child {
  margin-left: 0;
}

/*  100+ INTEGRATIONS CARD (Bottom Right)  */
.integrations-group {
  position: absolute;
  bottom: -20px;
  right: 10px;
  width: 230px;
  padding: 16px 18px;
  z-index: 7;
}

.integrations-group .card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #9CA3AF;
  margin-bottom: 14px;
}

.integration-logos {
  display: flex;
  gap: 10px;
}

.int-logo {
  width: 52px;
  height: 52px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(243, 244, 246, 0.8);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.int-logo:hover {
  transform: translateY(-2px);
}

/* ============================================================
   SECTION 2  SOLUTIONS
   ============================================================ */
.section-solutions {
  background: rgb(255, 255, 255);
  padding: 80px 48px 60px;
  position: relative;
}

.solutions-top {
  text-align: center;
  margin-bottom: 48px;
}

.solutions-features {
  display: flex;
  gap: 32px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

.sol-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 300px;
  text-align: left;
}

.sol-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF7ED;
}

.sol-feature p {
  font-size: 14px;
  color: #4B5563;
  line-height: 1.6;
}

/* Mobile: keep the three solution feature boxes in a single row and fit width */
@media (max-width: 768px) {
  .solutions-features {
    flex-wrap: nowrap !important;
    gap: 12px !important;
    justify-content: space-between !important;
    align-items: flex-start;
    margin-top: 18px;
    padding: 0 8px;
    font-size: 8px;
  }

  .solutions-features .sol-feature {
    flex: 1 1 0%;
    max-width: none;
    min-width: 0;
    gap: 8px;
    padding: 6px 4px;
    align-items: center;
  }

  .solutions-features .sol-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
  }

  .solutions-features .sol-feature p {
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
  }

  /* Tighter spacing for very small screens */
  @media (max-width: 420px) {
    .solutions-features {
      gap: 8px !important;
    }

    .solutions-features .sol-icon {
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
    }

    .solutions-features .sol-feature p {
      font-size: 8px;
    }
  }
}

/* Dashboard Preview */
.dashboard-preview {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  border: 1px solid #E5E7EB;
  overflow: hidden;
  position: relative;
  left: 38px;
}

.dash-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid #F3F4F6;
  background: #fff;
}

.dash-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 12px;
}

.logo-dots-sm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  width: 14px;
}

.dot-sm {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #111827;
}

.dash-logo-text {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.dash-create-btn {
  background: #fff;
  border: 1.5px solid #D1D5DB;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.dash-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6B7280;
  background: #F9FAFB;
  padding: 6px 12px;
  border-radius: 8px;
}

.dash-right-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.dash-user {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #374151;
  font-weight: 500;
}

.dash-user img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.dash-customize {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Dashboard Content */
.dash-content {
  padding: 24px 28px;
  background: #F9FAFB;
}

.dash-greeting {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 20px;
}

.dash-widgets {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.widget {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.widget-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.widget-new {
  font-size: 12px;
  color: #2563EB;
  font-weight: 500;
  cursor: pointer;
}

/* Todo */
.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #F3F4F6;
}

.todo-item:last-child {
  border-bottom: none;
}

.checkbox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 2px solid #D1D5DB;
  border-radius: 4px;
  margin-top: 2px;
}

.checkbox.checked {
  background: #2563EB;
  border-color: #2563EB;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 5l2.5 2.5L8 3' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.todo-item.done .todo-text {
  text-decoration: line-through;
  color: #9CA3AF;
}

.todo-text {
  font-size: 12.5px;
  color: #374151;
  line-height: 1.5;
}

/* Time tracker */
.time-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time-display {
  font-size: 36px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -1px;
  margin: 12px 0;
}

.time-controls {
  display: flex;
  gap: 12px;
}

.time-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #F3F4F6;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

.time-btn:hover {
  background: #E5E7EB;
}

/* Activity */
.activity-toggle {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #9CA3AF;
}

.toggle-active {
  color: #111827;
  font-weight: 600;
  border-bottom: 2px solid #111827;
  padding-bottom: 2px;
}

.activity-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-label {
  font-size: 11px;
  color: #6B7280;
  flex: 0 0 24px;
}

.stat-val {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  flex: 0 0 30px;
}

.stat-bar {
  flex: 1;
  height: 5px;
  background: #E5E7EB;
  border-radius: 10px;
  overflow: hidden;
}

.stat-fill {
  height: 100%;
  border-radius: 10px;
}

.stat-fill.yellow {
  background: #EAB308;
}

.stat-fill.blue {
  background: #3B82F6;
}

.stat-fill.teal {
  background: #14B8A6;
}

.activity-chart {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

/* Assigned tasks */
.dash-assigned {
  background: #fff;
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.assigned-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.assigned-title {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.assigned-tabs {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: #9CA3AF;
}

.tab-active {
  color: #111827;
  font-weight: 600;
  border-bottom: 2px solid #111827;
  padding-bottom: 2px;
}

.assigned-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.assigned-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #F3F4F6;
}

.assigned-item:last-child {
  border-bottom: none;
}

.assigned-name {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.assigned-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-bar-sm {
  width: 80px;
  height: 5px;
  background: #E5E7EB;
  border-radius: 10px;
  overflow: hidden;
}

.pct {
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  width: 30px;
  text-align: right;
}

.assigned-avatars {
  display: flex;
}

.assigned-avatars img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -5px;
  object-fit: cover;
}

.assigned-avatars img:first-child {
  margin-left: 0;
}

/* Floating badges */
.float-badge {
  position: absolute;
  z-index: 10;
}

.badge-20 {
  bottom: 230px;
  left: 6px;
  width: 56px;
  height: 56px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #111827;
  box-shadow: 0 8px 25px rgba(0, 0, 0, .12);
}

.badge-check {
  bottom: 40px;
  right: 11px;
}

/* ============================================================
   SECTION 3  FEATURES (Crono Task matching layout)
   ============================================================ */
.section-features {
  background: #F3F4F6;
  padding: 72px 24px 60px;
  text-align: center;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 30px;
  border: 1px solid #c9c8c8c4;
}

img.zodo-nav-icon {
  width: 50px;
}

/*  ROW 1: Two equal feature cards  */
.features-row-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1380px;
  width: 100%;
  margin: 0 auto 24px;
}

.feat-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px 32px 36px;
  text-align: center;
  border: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  width: 75%;
  margin-left: 34px;
  max-height: 100%;
}

.feat-card2 {
  background: #fff;
  border-radius: 20px;
  padding: 40px 32px 36px;
  text-align: center;
  border: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  position: relative;
  right: 131px;
  width: 115%;
  max-height: 100%;
}

.feat-card-images {
  position: relative;
  width: 100%;
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Seamless Collaboration images */
.feat-img-workspace {
  width: 250px;
  height: auto;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.08));
}

.feat-img-marketing {
  width: 238px;
  height: auto;
  position: absolute;
  top: 50px;
  right: -15px;
  z-index: 2;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.10));
}

/* Time Management images */
.feat-time-images {
  justify-content: center;
  align-items: flex-start;
  gap: 0;
}

.feat-img-weekly {
  width: 200px;
  height: auto;
  position: absolute;
  left: -46px;
  top: 50px;
  z-index: 1;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.08));
}

.feat-img-meetings {
  width: 294px;
  height: auto;
  position: absolute;
  left: 45%;
  top: 0;
  transform: translateX(-40%);
  z-index: 2;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.08));
}

.feat-img-percent {
  width: 200px;
  height: auto;
  position: absolute;
  right: -45px;
  top: 40px;
  z-index: 1;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.08));
}

.feat-card-text {
  margin-top: auto;
  padding-top: 15px;
  text-align: center;
}

.feat-card-text2 {
  margin-top: auto;
  padding-top: 40px;
  text-align: center;
}

.feat-card-title {
  font-size: 32px;
  font-weight: 500;
  color: #111827;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.feat-card-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #6B7280;
  max-width: 360px;
  margin: 0 auto;
}

/*  ROW 2: Three-column layout  */
.features-row-2 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 10px;
  max-width: 1310px;
  width: 100%;
  margin: 0 auto;
}

.feat-row2-left {
  background: #fff;
  border-radius: 20px;
  padding: 40px 32px 36px;
  border: 1px solid #E5E7EB;
  text-align: left;
  max-height: 90%;
  min-width: 880px;
  overflow: hidden;
}

.feat-row2-left-inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto auto;
  gap: 20px 30px;
}

.feat-chevron-icon {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

.feat-row2-cards {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.feat-img-timeline {
  width: 100%;
  max-width: 497px;
  height: auto;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.06));
  position: relative;
  top: 33px;
  left: 90px;
}

.feat-img-tasks {
  width: 100%;
  max-width: 400px;
  height: auto;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.06));
  position: relative;
  top: -13px;
  left: 54px;
  min-width: 570px;
}

.feat-row2-text {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  text-align: left;
  padding-bottom: 55px;
}

.feat-row2-text .feat-card-title {
  text-align: left;
}

.feat-row2-text .feat-card-desc {
  text-align: left;
  margin: 0;
}

/* Right: Customizable Workspaces */
.feat-row2-right {
  background: #fff;
  border-radius: 20px;
  padding: 32px 28px 28px;
  border: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feat-row2-right-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.feat-img-customize {
  width: 100%;
  max-width: 444px;
  max-height: 90%;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.06));
  min-width: 442px;
}

/* Dashed grid boxes (placeholder cells below customizable workspaces) */
.feat-dashed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}

.feat-dashed-cell {
  aspect-ratio: 1.3;
  border: 2px dashed #D1D5DB;
  border-radius: 10px;
  background: transparent;
}

/* "and a lot more features" text */
.features-more-text {
  font-size: 18px;
  color: #000000;
  font-weight: 400;
  text-align: center;
  font-style: italic;
}

/* Collaboration mockup */
.collab-mockup {
  display: flex;
}

.workspace-panel {
  width: 45%;
  background: #fff;
  padding: 14px;
  border-right: 1px solid #F3F4F6;
}

.wp-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #9CA3AF;
  margin-bottom: 10px;
}

.wp-item {
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  color: #374151;
  margin-bottom: 4px;
}

.wp-item.active {
  background: #EFF6FF;
  color: #2563EB;
  font-weight: 500;
}

.team-panel {
  width: 55%;
  padding: 14px;
}

.tp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tp-header span:first-child {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.members-badge {
  font-size: 10px;
  background: #F3F4F6;
  padding: 2px 8px;
  border-radius: 10px;
  color: #6B7280;
}

.tp-invite {
  font-size: 12px;
  color: #2563EB;
  margin-bottom: 10px;
  font-weight: 500;
}

.tp-members {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.member img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}

.member span {
  font-size: 12px;
  color: #374151;
}

/* Meetings mockup */
.time-mockup {
  display: flex;
}

.meetings-panel {
  flex: 1;
  padding: 14px;
  background: #fff;
}

.mp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.mp-title {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
}

.mp-schedule {
  font-size: 10px;
  color: #9CA3AF;
  background: #F3F4F6;
  padding: 2px 8px;
  border-radius: 10px;
}

.meeting-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid #F3F4F6;
}

.meeting-row:last-child {
  border-bottom: none;
}

.meeting-day {
  text-align: center;
  width: 32px;
  flex-shrink: 0;
}

.day-num {
  display: block;
  font-size: 10px;
  color: #9CA3AF;
  font-weight: 600;
}

.day-date {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

.meeting-info {
  flex: 1;
}

.meeting-name {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: #374151;
}

.meeting-time {
  display: block;
  font-size: 10px;
  color: #9CA3AF;
  margin-top: 2px;
}

.meeting-icon {
  font-size: 14px;
}

.blue-icon-sm {
  color: #3B82F6;
}

.workload-panel {
  width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: #F9FAFB;
  border-left: 1px solid #F3F4F6;
}

.workload-label {
  font-size: 10px;
  font-weight: 600;
  color: #6B7280;
  margin-bottom: 8px;
}

.workload-chart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.workload-pct {
  position: absolute;
  font-size: 14px;
  font-weight: 800;
  color: #F97316;
}

/* Tracking mockup */
.tracking-mockup {
  display: flex;
  min-height: 220px;
}

.tracking-left {
  width: 50px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 16px;
  background: #fff;
}

.tracking-right {
  flex: 1;
  padding: 14px;
}

.timeline-panel {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
}

.timeline-header {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
}

.timeline-dates {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #9CA3AF;
  margin-bottom: 8px;
  padding: 0 4px;
}

.timeline-bars {
  position: relative;
  height: 38px;
  margin-bottom: 12px;
}

.timeline-bar {
  position: absolute;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 9px;
  font-weight: 600;
  color: #fff;
  gap: 4px;
}

.orange-bar {
  background: #F97316;
  top: 0;
}

.blue-bar {
  background: #3B82F6;
  top: 20px;
}

.bar-pct {
  font-size: 8px;
  opacity: .85;
}

.tasks-columns {
  display: flex;
  gap: 10px;
}

.task-col {
  flex: 1;
}

.col-header {
  font-size: 11px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 8px;
}

.task-mini-card {
  background: #F9FAFB;
  border-radius: 8px;
  padding: 8px 10px;
  border: 1px solid #F3F4F6;
}

.tmc-title {
  font-size: 11px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}

.tmc-meta {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

.tmc-tag {
  font-size: 9px;
  background: #EFF6FF;
  color: #2563EB;
  padding: 1px 5px;
  border-radius: 4px;
}

.tmc-footer {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 9px;
  color: #9CA3AF;
}

.tmc-date {
  flex: 1;
}

/* Workspace mockup */
.workspace-mockup {
  padding: 14px;
}

.cw-dashed {
  border: 2px dashed #D1D5DB;
  border-radius: 12px;
  padding: 16px;
  position: relative;
}

.cw-label {
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  margin-bottom: 12px;
}

.cw-widgets {
  display: flex;
  gap: 12px;
}

.cw-widget-item {
  flex: 1;
}

.cw-wlabel {
  font-size: 10px;
  font-weight: 600;
  color: #9CA3AF;
  margin-bottom: 6px;
}

.cw-timer-widget {
  background: #FBBF24;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}

.cw-time {
  font-size: 22px;
  font-weight: 800;
  color: #111827;
  display: block;
}

.cw-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 14px;
}

.cw-themes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;
}

.cw-themes-grid span {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: #D1D5DB;
  display: block;
}

.cw-themes-grid span:nth-child(odd) {
  background: #9CA3AF;
}

.cw-view-icons {
  display: flex;
  gap: 6px;
}

.cw-more {
  font-size: 11px;
  color: #9CA3AF;
  text-align: center;
  margin-top: 10px;
}

/* ============================================================
   SECTION 4  INTEGRATIONS
   ============================================================ */
.section-integrations {
  background: #F9FAFB;
  padding: 80px 48px;
  text-align: center;
  background-image:
    radial-gradient(#D1D5DB 1px, transparent 1px);
  background-size: 24px 24px;
}

.integrations-display {
  margin: 0 auto;
  position: relative;
}

.int-center-icon {
  width: 80px;
  height: 80px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 48px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.zodo-int-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.int-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  padding: 0 80px;
}

.int-row:last-child {
  margin-bottom: 0;
}

.int-item {
  flex: 1;
  min-width: 130px;
  height: 150px;
  background: #fff;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.int-item img {
  width: 85px;
  height: 85px;
  object-fit: contain;
}

.int-logo-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.int-item {
  background: #fff;
  border-radius: 14px;
  padding: 16px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transition: transform .2s, box-shadow .2s;
}

.int-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
}

.int-item img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.int-logo-box span {
  font-size: 11px;
  color: #6B7280;
  font-weight: 500;
}

/* ============================================================
   SECTION 5  HOW IT WORKS  (redesigned)
   ============================================================ */
.section-testimonials.section-how-it-works {
  background: linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 45%, #EFF6FF 100%);
  padding: 60px 32px 40px;
  min-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.section-testimonials.section-how-it-works .pill-btn {
  margin: 0 auto 30px;
}
.hiw-stage-icon {
    background: none;
}
.section-how-it-works::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -120px;
  width: 320px;
  height: 320px;
  background: rgba(37, 99, 235, 0.08);
  border-radius: 50%;
  filter: blur(20px);
}

.section-heading-people {
  color: #111827;
}

.section-how-it-works .section-sub {
  max-width: 800px;
  margin: 0 auto 32px;
  color: #4B5563;
}


.testimonial-card.testimonial-highlight {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.t-quote {
  font-size: 15px;
  color: #374151;
  line-height: 1.6;
  margin-bottom: 24px;
  font-weight: 500;
}

.t-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.t-author img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.t-name {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.t-role {
  font-size: 12px;
  color: #6B7280;
  margin-top: 2px;
}

.video-card-wrapper {
  position: relative;
  width: 100%;
}

.video-card {
  padding: 0;
  overflow: hidden;
  height: 360px;
  border: 1px solid #E5E7EB;
}

.video-placeholder {
  position: relative;
  height: 100%;
}

.video-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  padding: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
}

.btn-watch {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  pointer-events: auto;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-watch:hover {
  background: rgba(255, 255, 255, 0.35);
}

.yt-icon-float {
  position: absolute;
  right: -12px;
  bottom: 24px;
  z-index: 10;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.16));
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.yt-icon-float:hover {
  transform: scale(1.1);
}

.speech-bubble-float {
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.06));
  z-index: 10;
}

/* ============================================================
   SECTION 6  PRICING
   ============================================================ */
.section-pricing {
  background: #F9FAFB;
  padding: 80px 48px;
  text-align: center;
}

.pricing-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0 auto 32px;
  max-width: 520px;
}

input[type="radio"][name="pricing-cycle"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.pricing-toggle-pill {
  display: inline-flex;
  border: 1px solid #D1D5DB;
  border-radius: 999px;
  background: #fff;
  padding: 6px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.pricing-toggle-pill label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: #6B7280;
  transition: background .2s, color .2s, transform .2s;
}

#pricing-monthly:checked~.pricing-toggle .pricing-toggle-pill label[for="pricing-monthly"],
#pricing-yearly:checked~.pricing-toggle .pricing-toggle-pill label[for="pricing-yearly"] {
  background: #2563EB;
  color: #fff;
  box-shadow: 0 10px 25px rgba(37, 99, 235, .18);
  transform: translateY(-1px);
}

.pricing-toggle-pill label[for="pricing-monthly"] {
  margin-right: 4px;
}

.pricing-note {
  font-size: 13px;
  color: #6B7280;
  max-width: 360px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 1260px;
  margin: 48px auto 0;
  align-items: start;
}

.pricing-card {
  background: #fff;
  border-radius: 24px;
  padding: 36px 32px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, .08);
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pro-card {
  background: #2563EB !important;
  color: #fff;
  box-shadow: 0 12px 40px rgba(37, 99, 235, .35);
  transform: scale(1.04);
  margin-top: -12px;
  margin-bottom: -12px;
}

.pro-bolt {
  position: absolute;
  top: -28px;
  right: 16px;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
  transform: rotate(-14deg);
}

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

.pc-name {
  font-size: 20px;
  font-weight: 800;
}

.pro-card .pc-name {
  color: #fff;
}

.pc-tagline {
  font-size: 14px;
  color: #6B7280;
  margin: 0;
}

.pro-card .pc-tagline {
  color: rgba(255, 255, 255, .75);
}

.price-block {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 18px;
}

.monthly-price {
  display: flex;
}

.price-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B7280;
}

.price-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.price-amount {
  font-size: 44px;
  font-weight: 800;
  color: #111827;
}

.price-unit {
  font-size: 16px;
  font-weight: 500;
  color: #6B7280;
}

.yearly-price {
  display: none;
  gap: 10px;
}

.price-original-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.price-original {
  color: #6B7280;
  font-size: 16px;
  font-weight: 500;
  text-decoration: line-through;
}

.price-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #D1FAE5;
  color: #16A34A;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}

.price-current {
  color: #111827;
  font-size: 40px;
  font-weight: 800;
}

.price-sub {
  font-size: 13px;
  color: #6B7280;
}

.price-block .price-sub {
  margin-top: -6px;
}

#pricing-monthly:checked~.pricing-grid .monthly-price {
  display: flex;
}

#pricing-monthly:checked~.pricing-grid .yearly-price {
  display: none;
}

#pricing-yearly:checked~.pricing-grid .monthly-price {
  display: none;
}

#pricing-yearly:checked~.pricing-grid .yearly-price {
  display: flex;
}

.pro-card .price-amount,
.pro-card .price-current,
.pro-card .price-original,
.pro-card .price-unit,
.pro-card .price-label {
  color: #fff;
}

.pro-card .price-badge {
  background: rgba(255, 255, 255, 0.18);
  color: #D1FAE5;
}

.pro-card .price-label {
  color: rgba(255, 255, 255, 0.75);
}

.pro-card .price-amount {
  color: #fff;
}

.pro-card .price-current {
  color: #fff;
}

#pricing-yearly:checked~.pricing-grid .price-original {
  color: rgba(255, 255, 255, 0.7);
}

.pc-best {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: rgba(255, 255, 255, .95);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.12);
  margin-bottom: 12px;
}

.btn-getstarted {
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  margin: 16px 0 0;
  transition: transform .2s, opacity .2s;
  cursor: pointer;
}

.btn-getstarted.blue {
  background: #2563EB;
  color: #fff;
}

.btn-getstarted.white {
  background: #fff;
  color: #111827;
}

.btn-getstarted:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

.pc-features {
  list-style: none;
  margin-bottom: 16px;
}

.pc-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #374151;
  padding: 12px 0;
}

.pro-card .pc-features li {
  color: rgba(255, 255, 255, .9);
}

.check-icon {
  color: #22C55E;
  font-weight: 700;
  font-size: 14px;
}

.pro-card .check-icon {
  color: #86EFAC;
}

.pc-learn {
  font-size: 13px;
  color: #2563EB;
  font-weight: 500;
}

.pro-card .pc-learn {
  color: rgba(255, 255, 255, .85);
}

/* ============================================================
   SECTION 7  FOOTER
   ============================================================ */
.section-footer {
  border: 1px solid #c9c8c8c4;
  position: relative;
  background-color: #f6f6f6;
  min-height: 659px;
  padding-bottom: 60px;
  overflow: hidden;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 30px 30px 0px 0px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.09) 1.6px, transparent 1.6px), radial-gradient(circle at 50% 50%, rgba(76, 76, 76, 0) 20%, rgba(255, 255, 255, 0.77) 100%);
  background-size: 8px 8px, 100% 100%;
  padding: 60px 48px 30px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1271px;
  margin: 0 160px 40px;
  gap: 60px;
}

.footer-brand {
  max-width: 300px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.footer-heading {
  font-size: 53px;
  font-weight: 500;
  color: #444545;
  line-height: 1.25;
  width: 550px;
}

.footer-nav {
  display: flex;
  gap: 60px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-col a {
  font-size: 19px;
  color: #000000;
  font-weight: 500;
  transition: color .2s;
  position: relative;
  top: 77px;
  text-decoration: none;
}

.footer-col a:hover {
  color: #111827;
}

/* Footer icons */
.footer-icons-section {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 105px 40px;
  margin: 100px auto;
  max-width: 1300px;
  padding: 0 40px;
}

.footer-icon-item {
  width: 110px;
  height: 110px;
  background: #fff;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease;
  justify-self: center;
}

.footer-icon-item:hover {
  transform: scale(1.1) !important;
}

.footer-icon-item img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.footer-icon-item .icon-number {
  font-size: 48px;
  font-weight: 800;
  color: #111827;
}

.row-1 {
  grid-row: 1;
}

.row-2 {
  grid-row: 2;
}

.col-1 {
  grid-column: 1;
}

.col-2 {
  grid-column: 2;
}

.col-3 {
  grid-column: 3;
}

.col-4 {
  grid-column: 4;
}

.col-5 {
  grid-column: 5;
}

.col-6 {
  grid-column: 6;
}

.rotate--15 {
  transform: rotate(-15deg);
}

.rotate-0 {
  transform: rotate(0deg);
}

.rotate-5 {
  transform: rotate(5deg);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  margin-top: -40px;
  border-top: 3px solid #bdbdbd;
  padding-top: 20px;
}

.footer-bottom span {
  font-size: 16px;
  color: #9CA3AF;
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a {
  font-size: 16px;
  color: #9CA3AF;
  transition: color .2s;
}

.footer-legal a:hover {
  color: #374151;
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */




@media (max-width: 768px) {

  .pricing-toggle {
    margin: 0 auto -27px;
  }

  img.hero-tasks-svg {
    position: absolute;
    top: -402px;
    right: 85px;
    width: 55% !important;
  }

  .navbar {
    padding: 12px 16px;
  }

  .nav-links {
    display: none;
  }

  .dashboard-preview {
    position: relative;
    left: 0px;
  }

  .feat-card-desc {
    font-size: 13px;
  }

  /* Hero adjustments for mobile/tablet */
  .hero-wrapper {
    padding: 20px 12px;
    min-height: 420px;
  }

  .section-hero {
    min-height: 420px;
    padding: 28px 12px 24px;
    border-radius: 18px;
  }

  .hero-center {
    padding: 0px 8px 18px;
  }

  .hero-center-logo-card {
    width: 72px;
    height: 72px;
  }

  .zodo-center-icon {
    width: 64px;
    height: 64px;
  }

  .hero-title-dark {
    font-size: clamp(22px, 8vw, 38px);
    letter-spacing: 0;
  }

  .hero-title-light {
    font-size: clamp(18px, 6vw, 28px);
  }



  .btn-cta {
    padding: 12px 18px;
    font-size: 16px;
  }

  /* Show the hero decorative graphics on mobile with a clean stacked layout */
  .hero-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }


  .sticky-group,
  .leftoverlaycard,
  .bluetick,
  .reminders-group,
  .tasks-group-svg,
  .integrations-svg-group,
  .rightoverlaycard {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto 18px !important;
    display: block !important;
    opacity: 1 !important;
  }

  .sticky-group,
  .leftoverlaycard,
  .bluetick,
  .reminders-group,
  .rightoverlaycard {
    order: 2;
  }

  .tasks-group-svg,
  .integrations-svg-group {
    order: 3;
  }


  .hero-leftbox-svg,
  .hero-reminder-svg,
  .hero-integrations-svg,
  .hero-tasks-svg,
  .hero-bluetick-svg,
  .rightoverlaycard-svg {
    max-width: 100%;
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative !important;
  }

  /* added 8-7-26 4.50 pm  */
  .hero-integrations-svg {
    top: -116px !important;
  }

  img.hero-reminder-svg {
    left: 137px;
    bottom: 528px;
    width: 40%;
  }

  section.section-hero {
    height: 552px;
  }

  img.doublearrow {
    width: 27%;
    margin-top: -25px;
  }

  .centertext3555 {
    width: 143px;
  }

  h3.advancetexts {
    padding-top: 0px;
  }

  img.feat-img-tasks {
    top: -74px !important;
    position: relative !important;
    left: 40px !important;
  }

  .section-sub {
    margin-bottom: 0px;
  }

  .section-heading {
    padding-bottom: 10px;
  }

  img.feat-img-timeline {
    width: 89% !important;
    left: 53px !important;
    position: relative !important;
    bottom: 24px;
  }

  .getdemofree {
    margin-top: 0px !important;
    margin-bottom: -3px !important;
  }

  /* end */


  .hero-center-textai5 {
    left: auto;
    bottom: auto;
    margin-top: 24px;
    padding: 0 10px;
  }

  .hero-center-logo-card {
    margin: 0 auto 18px;
    position: relative;
    top: -12px;
  }

  /* Mobile-specific refinements for hero and solutions (max-width: 768px) */
  @media (max-width: 768px) {
    .section-hero {
      padding: 32px 18px;
    }

    .hero-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      padding-top: 8px;
    }







    .hero-tasks-svg,
    .rightoverlaycard-svg {
      box-shadow: 0 8px 30px rgba(16, 24, 40, 0.06);
      border-radius: 12px;
      width: 100% !important;
      height: auto !important;
    }

    .tasks-group-svg,
    .integrations-svg-group {
      max-width: 520px !important;
      margin: 0 auto 16px !important;
    }

    /* Solutions section mobile layout */
    .section-solutions {
      padding: 28px 18px;
    }

    .solutions-top {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      text-align: center;
    }



    .section-heading {
      font-size: 22px;
      line-height: 1.05;
      margin: 0;
    }

    .solutions-features {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-top: 12px;
      padding-bottom: 8px;
      margin-left: -10px;
      padding-left: 10px;
      scroll-snap-type: x mandatory;
    }

    .solutions-features::-webkit-scrollbar {
      display: none;
    }

    .solutions-features {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .sol-feature {
      flex: 0 0 240px;
      max-width: 240px;
      min-width: 220px;
      text-align: center;
      padding: 14px 12px;
      background: #ffffff;
      border-radius: 22px;
      box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
      scroll-snap-align: center;
    }

    .sol-icon {
      margin: 0 auto 10px;
      width: 56px;
      height: 56px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      box-shadow: 0 8px 30px rgba(16, 24, 40, 0.06);
    }

    .sol-feature p {
      font-size: 13px;
      color: #6B7280;
      line-height: 1.35;
      margin: 0;
    }
  }

  /* Keep tasks and integrations visible in normal flow: make them static full-width */
  .tasks-group-svg,
  .integrations-svg-group {
    width: 100% !important;
    max-width: 500px !important;
  }

  .tasks-group,
  .integrations-group {
    position: static;
    width: 100%;
    left: 0;
    right: 0;
    margin: 12px 0;
    display: block;
  }

  .solutions-features {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 18px;
    padding-left: 10px;
    margin-left: -10px;
    scroll-snap-type: x mandatory;
  }

  .solutions-features::-webkit-scrollbar {
    display: none;
  }

  .solutions-features {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .dash-widgets {
    grid-template-columns: 1fr;
  }

  .int-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
  }

  .pro-card {
    transform: scale(1);
  }

  .footer-top {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 20px;
  }

  .footer-brand {
    position: static;
    right: auto;
    flex: 1 1 100%;
    max-width: 100%;
    text-align: left;
    margin-bottom: 0;
  }

  .footer-logo {
    justify-content: flex-start;
    width: fit-content;
    margin-bottom: 16px;
  }

  .footer-heading {
    font-size: clamp(24px, 5vw, 32px);
    width: 100%;
    text-align: left;
    margin-bottom: 0;
    line-height: 1.25;
  }

  .footer-nav {
    display: grid;
    grid-template-columns: repeat(1, minmax(120px, 1fr));
    gap: 12px 3px;
    min-width: 100%;
    flex: 1 1 100%;
    position: static;
    top: auto;
    right: auto;
    padding-bottom: 70px;
  }

  .footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    align-items: flex-start;
    margin-left: -2px;
  }

  .footer-col a {
    position: static;
    top: 0;
    font-size: 15px;
    text-align: left;
    border-bottom: 1px solid #9c9c9c7a;
    width: 304px;
  }

  .footer-icons-section {
    position: relative;
    bottom: 90px;
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    gap: 20px;
    margin: auto;
    max-width: 520px;
    padding: 0 10px;
  }

  .footer-icons-section img {
    position: static !important;
    width: 88px !important;
    height: 88px !important;
    margin: 0 auto;
    display: block;
  }

  .footer-legal {
    flex-direction: row;
    gap: 50px;
  }

  .section-footer {
    padding: 40px 16px 30px;
    margin-left: 8px;
    margin-right: 8px;
    min-height: auto;
  }

  .section-hero,
  .section-solutions,
  .section-features,
  .section-integrations,
  .section-testimonials,
  .section-pricing,
  .section-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Final pixel-tuning for mobile hero & first-three solution boxes */
  @media (max-width: 768px) {
    .section-hero {
      padding-top: 18px;
      padding-bottom: 40px;
      margin-bottom: 12px;
    }

    .hero-title-dark {
      font-size: 36px;
      font-weight: 800;
      color: #0F1724;
      margin-bottom: 6px;
    }

    .hero-title-light {
      font-size: 20px;
      font-weight: 600;
      color: #88919A;
      display: block;
      margin-bottom: 8px;
    }







    /* Layout for the two small cards under hero (tasks + integrations) */
    .dashboard-preview {
      display: flex;
      gap: 14px;
      justify-content: center;
      align-items: flex-start;
      width: 100%;
      margin-top: 18px;
    }

    .tasks-group-svg,
    .integrations-svg-group {
      width: 100% !important;
      max-width: 520px !important;
      order: 4;
    }

    .hero-center {
      order: 1;
      width: 100%;
      z-index: 10;
    }

    .hero-center-textai5 {
      order: 2;
      margin-top: 0;
    }

    .tasks-group-svg,
    .integrations-svg-group {
      margin-top: 0 !important;
    }

    .hero-tasks-svg,
    .hero-reminder-svg,
    .hero-integrations-svg {
      border-radius: 12px;
      box-shadow: 0 12px 30px rgba(16, 24, 40, 0.06);
    }

    /* Solutions first three boxes displayed in one horizontal row */
    .solutions-features {
      display: flex;
      gap: 18px;
      justify-content: flex-start;
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-bottom: 8px;
      margin-left: -10px;
      padding-left: 10px;
      scroll-snap-type: x mandatory;
    }

    .solutions-features::-webkit-scrollbar {
      display: none;
    }

    .solutions-features {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .sol-feature {
      flex: 0 0 240px;
      max-width: 240px;
      min-width: 220px;
      scroll-snap-align: center;
    }

    .sol-icon {
      width: 56px;
      height: 56px;
    }
  }

  /* Features/cards spacing */
  .features-row-1 {
    grid-template-columns: 1fr;
  }

  .feat-card,
  .feat-card2 {
    width: 100%;
    margin: 0;
    right: 0;
    padding: 20px;
  }

  .feat-img-workspace,
  .feat-img-marketing,
  .feat-img-weekly,
  .feat-img-meetings,
  .feat-img-percent {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto 12px;
    transform: none;
  }

  .feat-card2 {
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .feat-card-images {
    display: flex !important;
    /* On narrow screens show images side-by-side for the first feature card */
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0px !important;
    min-height: auto !important;
    height: auto;
    width: 380px;
  }

  /* make the two images share the row with appropriate sizing */
  .feat-card .feat-card {
    position: relative !important;
    width: 48% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
  }



  .feat-img-marketing {
    position: relative !important;
    width: 48% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
  }

  .feat-img-workspace {
    position: relative !important;
    width: 48% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
  }

  /* keep other feature image overrides stacked full width */
  .feat-img-weekly,
  .feat-img-meetings,
  .feat-img-percent {
    position: static !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
  }

  .footer-icons-section img {
    width: 80px !important;
    height: 80px !important;
  }

  /* Fix Time Management Tools and Advanced Task Tracking images and layout */
  .feat-row2-left {
    min-width: 0 !important;
    /* Hide overflowing parts of large images so they stay inside the card on mobile */
    overflow: hidden !important;
    padding-bottom: 18px;
    /* clamp height so bottom parts of images are hidden under the box */
    max-height: 420px !important;
  }

  .feat-row2-left-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .feat-row2-left-inner>* {
    width: 100% !important;
  }

  .feat-row2-text {
    order: 2 !important;
    padding-bottom: 12px;
  }

  .feat-row2-cards {
    order: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: 100% !important;
    max-height: 223px;
  }

  img.feat-img-workspace {
    position: relative !important;
    right: -61px !important;
  }

  .feat-img-timeline,
  .feat-img-tasks,
  .feat-img-customize,
  .feat-img-workspace,

  .feat-img-weekly,
  .feat-img-meetings,
  .feat-img-percent {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 14px !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    min-width: 0 !important;
    display: block !important;
  }

  .feat-card-title {
    font-size: 22px;
    padding-top: 20px;
  }

  .feat-img-marketing {
    width: 97% !important;
    max-width: 100% !important;
    margin: 0 auto 14px !important;
    transform: none !important;
    left: auto !important;
    min-width: 0 !important;
    display: block !important;
  }

  img.feat-img-marketing {
    right: 35px !important;
    position: relative !important;
    top: 48px !important;
  }

  img.feat-img-weekly {
    width: 70% !important;
  }

  .feat-card-text2 {
    padding-top: 0px;
  }

  img.feat-img-percent {
    width: 70% !important;
  }

  .feat-row2-cards>* {
    width: 100% !important;
  }

  .feat-img-tasks,
  .feat-img-timeline,
  .feat-img-customize {
    max-width: 100% !important;
  }

  .feat-img-tasks img,
  .feat-img-timeline img,
  .feat-img-customize img {
    width: 100% !important;
    height: auto !important;
  }


  .features-row-2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  .feat-row2-left {
    width: 100% !important;
    min-width: 0 !important;
  }

  .feat-row2-left-inner {
    gap: 16px !important;
  }

  .feat-img-customize {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 20px !important;
    display: block !important;
  }

  .feat-img-tasks,
  .feat-img-timeline {
    margin: 0 auto 18px !important;
  }

  .feat-row2-cards img {
    width: 100%;
    height: auto !important;
  }

  /* Integrations grid adaptations */
  .int-row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 0 8px;
  }

  .int-item {
    flex: 1 1 calc(25% - 12px);
    max-width: calc(25% - 12px);
    min-width: 0;
    margin: 4px;
    height: 100px;
  }

  .int-item img {
    width: 48px;
    height: 48px;
  }

  @media (max-width: 420px) {
    .int-item {
      flex: 1 1 calc(25% - 10px);
      max-width: calc(25% - 10px);
      margin: 4px 3px;
    }
  }

  /* Testimonials/pricing to single column */
  .testimonials-columns {
    grid-template-columns: 1fr;
  }

  .testimonial-card,
  .testimonial-card-johnd,
  .testimonial-card-timetracking {
    padding: 20px;
  }

  .video-card {
    height: auto;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {

  /* Tablet: scale decorative floats and reduce overlap while keeping layout intact */
  .float-card {
    transform: scale(0.9);
  }

  .sticky-note {
    transform: rotate(-2deg) scale(0.9);
  }

  .sticky-group,
  .reminders-group,
  .tasks-group-svg,
  .integrations-svg-group {
    transform: scale(0.95);
    opacity: 0.98;
  }

  .hero-wrapper {
    max-width: 960px;
    padding-top: 40px;
  }

  .section-hero {
    min-height: 520px;
    padding-bottom: 40px;
  }

  .hero-center-logo-card {
    width: 88px;
    height: 88px;
  }

  .zodo-center-icon {
    width: 80px;
    height: 80px;
  }

  .hero-title-dark {
    font-size: clamp(28px, 6vw, 56px);
  }

  .hero-title-light {
    font-size: clamp(22px, 5vw, 48px);
    margin-top: 4px;
  }

  .int-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  /* Tablet: keep the hero graphics visible and contained inside the section */
  .sticky-group {
    top: 18px;
    left: 12px;
    width: 280px;
  }

  .leftoverlaycard {
    top: 64px;
    left: 0;
    width: 210px;
  }

  .bluetick {
    top: auto;
    left: 12px;
    width: 72px;
    margin-top: 12px;
  }

  .reminders-group {
    top: 24px;
    right: 12px;
    width: 260px;
  }

  .rightoverlaycard {
    top: 98px;
    right: 0;
    width: 220px;
  }

  .tasks-group-svg {
    left: 12px;
    top: auto;
    bottom: 16px;
    width: 270px;
  }

  .integrations-svg-group {
    right: 12px;
    bottom: 16px;
    width: 260px;
  }

  .hero-notes-svg,
  .hero-leftbox-svg,
  .hero-reminder-svg,
  .hero-integrations-svg,
  .hero-tasks-svg {
    max-width: 100%;
    width: 100%;
    height: auto;
  }
}


/* stay organised footer icons css */

img.message-icon {
  position: relative;
  top: 100px;
}

img.schedule-icon {
  position: relative;
  right: 90px;
}

img.flag-icon {
  position: relative;
  right: 62px;
  top: 44px;
}

img.calender-icon {
  position: relative;
  right: 60px;
}

img.bulb-icon {
  position: relative;
  right: 50px;
  top: 40px;
}

img.bluetick-icon {
  position: relative;
  left: 130px;
  top: 10px;
}


img.blackclock-icon {
  position: relative;
  bottom: 36px;
  left: 63px;
}

img.glasshour-icon {
  position: relative;
  left: 70px;
}

img.realclock-icon {
  position: relative;
  left: 58px;
  bottom: 39px;
}

img.doublearrowblue-icon {
  position: relative;
  top: 16px;
}

img.speech-bubble-icon {
  position: relative;
  right: 27px;
  width: 80%;
}


img.taskshare-icon {
  width: 60%;
}

.protext {
  color: #ffffff !important;
}

.price-original {
  color: #6B7280 !important;
}



@media (max-width: 768px) {

  .hero-notes-svg {
    max-width: 100%;
    width: 43%;
    height: auto;
    margin: 0 auto;
    position: absolute !important;
    right: 207px;
    top: -421px;
  }

  img.leftoverlaycard-svg {
    left: -44px;
    top: -430px;
    width: 35%;
  }

  img.bluetickgraphic {
    width: 17%;
    left: -19px !important;
    width: 16%;
    left: -17px !important;
    margin-top: 25px;
  }

  .clock {
    width: 54px !important;
    position: absolute !important;
    display: block;
    margin: 0 auto;
    top: -496px !important;
    left: 64% !important;

  }

  .hero-title-dark {
    font-size: 24px;
    font-weight: 600;
    color: #0F1724;
    margin-bottom: 6px;
    line-height: 1.05;
    display: block;

  }

  .hero-title-light {
    font-size: 23px;
    font-weight: 500;
    color: #88919A;
    padding-top: 2px;

  }

  .hero-sub {
    font-size: 12px;
    color: #6B7280;
    margin: 0px auto 14px;
    max-width: 540px;
    padding-bottom: 11px;
    margin-top: -14px;
    font-weight: 500;
    margin-bottom: 18px;

  }

  img.rightoverlaycard-svg.blankcutbox {
    left: 288px;
    position: relative;
    width: 24% !important;
    top: -631px;
  }

  .btn-cta {
    background: linear-gradient(180deg, #3B82F6, #2563EB);
    color: #fff;
    padding: 14px 22px;
    border-radius: 12px;
    border: none;
    font-size: 16px;
    box-shadow: 0 14px 40px rgba(37, 99, 235, 0.15);
    min-width: 140px;
  }

  .hero-center {
    order: 1;
    width: 100%;
    max-width: 720px;
    padding: 8px 12px;
    text-align: center;
    top: 57px;
  }

  .hero-reminder-svg {
    box-shadow: 0 8px 30px rgba(16, 24, 40, 0.06);
    border-radius: 12px;
    height: auto !important;
  }

  .blankcutbox {
    width: 50%;
    left: 65%;
    position: absolute !important;
    bottom: -127px;
  }

  .hero-center-textai5 {
    margin-top: 18px;
    padding: 14px;
    border-radius: 12px;
    top: 89px;
    width: min(920px, 100%);
    position: relative;
  }

  .hero-integrations-svg {
    border-radius: 12px;
    height: auto !important;
    width: 55%;
    position: relative !important;
    top: -560px !important;
    left: 88px;
  }

  .hero-center-textai5 .hero-center-textai2 {
    font-size: 11px;
    color: #2563EB;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .hero-center-textai5 .hero-center-textai {
    font-size: 9px;
    color: #111827;
    font-weight: 600;
    line-height: 1.3;
  }

  .centertext4 {
    padding: 10px 10px;
    min-width: 355px;
    gap: 4px;
    border: 1px solid rgba(0, 0, 0, 0.152)
  }

  .hero-center-textai5 .ai-icon {
    width: 50px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 10px;
    margin-left: 5px;
  }

  .hero-center-textai2 {
    font-size: 9px !important;
    letter-spacing: 0.19em;
  }

  .nav-actions {
    margin-right: 0px;
  }

  .section-sub {
    margin-bottom: 10px;

  }

  .footer-top {
    margin: 0 30px 40px;
  }

  img.doublearrowblue-icon {
    display: none;
  }

  .footer-bottom {
    flex-direction: column;
  }

  .pill-btn {
    padding: 8px 12px;
    display: inline-block;
    background: #F3F4F6;
    color: #6B7280;
    font-size: 18px;
    font-weight: 200;
    border-radius: 999px;
    margin-bottom: 16px;
    letter-spacing: 0.04em;
    border: 1px solid #bcbcbc;
    box-shadow: 0px 12px 20px -6px;
    bottom: 22px;
    position: relative;
    margin-top: -16px;
  }

  .btn-getdemo {
    font-size: 12px;
  }
}

/* ============================================================
   LARGE SCREEN RESPONSIVE - 1600+ desktop through 4K
   Scalable tokens + layout resets for hero, features, footer
   ============================================================ */

:root {
  --zodo-scale: 1;
  --zodo-content: 1100px;
  --zodo-hero-min-h: 616px;
  --zodo-section-gap: 80px;
  --zodo-side-margin: 15px;
  --zodo-section-max: 100%;
}

@media (min-width: 1600px) and (max-width: 1919px) {
  :root {
    --zodo-scale: 1.04;
    --zodo-content: 1180px;
    --zodo-hero-min-h: 660px;
    --zodo-side-margin: 20px;
  }
}

@media (min-width: 1920px) {
  :root {
    --zodo-scale: 1.12;
    --zodo-content: 1280px;
    --zodo-hero-min-h: 740px;
    --zodo-side-margin: 24px;
    --zodo-section-gap: 96px;
  }
}

@media (min-width: 2560px) {
  :root {
    --zodo-scale: 2.08;
    --zodo-content: 1864px;
    --zodo-hero-min-h: 1291px;
    --zodo-side-margin: 38px;
    --zodo-section-gap: 135px;

  }

}

/* ============================================================
   HOW IT WORKS — REDESIGNED COMPONENT STYLES
   ============================================================ */

/* ── Main two-column grid ── */
.hiw-main-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 24px;
  max-width: 1240px;
  margin: 36px auto 0;
  align-items: stretch;
}

/* ── Left: Workflow Flow Card ── */
.hiw-flow-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  background: #ffffff;
  border: 1px solid #e5eaf1;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
}

.hiw-flow-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 24px;
  border: 1.5px solid #d0dfff;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: #1666ff;
  margin: 0 auto 15px;
  background: #f5f8ff;
  max-width: fit-content;
}

.hiw-flow-badge svg {
  flex-shrink: 0;
}

/* ── Flow rows ── */
.hiw-flow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hiw-step-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid #e9eef5;
  border-radius: 14px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.hiw-step-box:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* Step icon badge inside boxes */
.hiw-step-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hiw-step-icon--blue {
  background: #eff6ff;
}

.hiw-step-icon--green {
  background: #ecfdf5;
}

.hiw-step-icon--amber {
  background: #fffbeb;
}

.hiw-step-icon--teal {
  background: #f0fdfa;
}

.hiw-step-icon--orange {
  background: #fff7ed;
}

.hiw-step-icon--violet {
  background: #f5f3ff;
}

.hiw-step-icon--emerald {
  background: #ecfdf5;
}

.hiw-step-icon--indigo {
  background: #eef2ff;
}

/* Dashed arrows between boxes */
.hiw-flow-arrow {
  color: #94a3b8;
  font-size: 18px;
  font-weight: 300;
  flex-shrink: 0;
  opacity: 0.7;
}

/* Dashed vertical connector between rows */
.hiw-flow-connector {
  display: flex;
  justify-content: center;
  height: 24px;
  margin: 2px 0;
}

/* ── Bottom of card: house + summary ── */
.hiw-flow-bottom {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px dashed #d4dde8;
}

.hiw-house-illustration {
  flex-shrink: 0;
  width: 180px;
  border-radius: 16px;
  overflow: hidden;
}

.hiw-house-illustration svg {
  width: 100%;
  height: auto;
  display: block;
}

.hiw-flow-summary {
  font-size: 15px;
  line-height: 1.75;
  color: #475569;
  margin: 0;
}

.hiw-flow-summary strong {
  color: #111827;
  font-weight: 700;
}

/* ── Right: Stages List ── */
.hiw-stages-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hiw-stage-item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 12px;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e9eef5;
  border-radius: 20px;
  padding: 14px 18px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.hiw-stage-item:hover {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}

/* Stage badge (kept same class name) */
.stage-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f0f5ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2563EB;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}

/* Stage icon (colored circle badge) */
.hiw-stage-icon {
  width: 38px;
  height: 34px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hiw-stage-icon--indigo{
width: 28px;
}
/* 
.hiw-stage-icon--blue {
  background: #d2e0ff;
}

.hiw-stage-icon--skyblue {
  background: #38bdf8;
}

.hiw-stage-icon--green {
  background: #d1ffe2;
}


.hiw-stage-icon--emerald {
  background: #10b981;
}

.hiw-stage-icon--amber {
  background: #f59e0b;
} */

/* Stage copy */
.hiw-stage-copy h3 {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

.hiw-stage-copy p {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.55;
}

/* ── Bottom Stats Bar ── */
.hiw-bottom-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1240px;
  margin: 36px auto 0;
  background: #ffffff;
  border: 1px solid #e9eef5;
  border-radius: 20px;
  padding: 28px 32px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}

.hiw-bottom-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.hiw-bottom-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hiw-bottom-icon--green {
  background: #ecfdf5;
}

.hiw-bottom-icon--blue {
  background: #eff6ff;
}

.hiw-bottom-icon--orange {
  background: #fff7ed;
}

.hiw-bottom-icon--pink {
  background: #fdf2f8;
}

.hiw-bottom-copy h4 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

.hiw-bottom-copy p {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}

/* ── Responsive: How It Works ── */
@media (max-width: 1024px) {
  .hiw-main-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

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

@media (max-width: 768px) {
  .section-testimonials.section-how-it-works {
    padding: 48px 20px;
  }

  .hiw-flow-card {
    padding: 20px;
  }

  .hiw-flow-row {
    gap: 8px;
  }

  .hiw-step-box {
    font-size: 12px;
    padding: 8px 12px;
  }

  .hiw-step-icon {
    width: 22px;
    height: 22px;
  }

  .hiw-step-icon svg {
    width: 12px;
    height: 12px;
  }

  .hiw-flow-bottom {
    flex-direction: column;
    text-align: center;
  }

  .hiw-house-illustration {
    width: 140px;
  }

  .hiw-stage-item {
    padding: 14px 16px;
    gap: 10px;
  }

  .stage-badge {
    width: 38px;
    height: 38px;
    font-size: 13px;
    border-radius: 10px;
  }

  .hiw-stage-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .hiw-bottom-bar {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .hiw-flow-badge {
    font-size: 13px;
    padding: 6px 14px;
  }

  .hiw-step-box {
    font-size: 11px;
    padding: 6px 10px;
    gap: 5px;
  }

  .hiw-step-icon {
    width: 20px;
    height: 20px;
  }

  .hiw-flow-arrow {
    font-size: 14px;
  }

  .hiw-flow-summary {
    font-size: 13px;
  }

  .hiw-stage-copy h3 {
    font-size: 14px;
  }

  .hiw-stage-copy p {
    font-size: 12px;
  }

  .stage-badge {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  .hiw-stage-icon {
    width: 34px;
    height: 34px;
  }

  .hiw-stage-icon svg {
    width: 18px;
    height: 18px;
  }
}

@media (min-width: 3400px) {
  :root {
    --zodo-scale: 1.38;
    --zodo-content: 1680px;
    --zodo-hero-min-h: 920px;
    --zodo-section-max: 2800px;
  }
}

@media (min-width: 3840px) {
  :root {
    --zodo-scale: 1.55;
    --zodo-content: 1920px;
    --zodo-hero-min-h: 1080px;
    --zodo-section-max: 3200px;
    --zodo-section-gap: 140px;
  }
}

@media (min-width: 1600px) {

  .navbar {
    width: 100%;
    padding: calc(11px * var(--zodo-scale)) calc(48px * var(--zodo-scale));
    max-width: var(--zodo-section-max);
    margin-left: auto;
    margin-right: auto;
  }

  .nav-logo img {
    width: calc(150px * var(--zodo-scale));
    height: auto;
  }

  .nav-links {
    gap: calc(36px * var(--zodo-scale));
  }

  .nav-links a,
  .nav-signin {
    font-size: clamp(14px, 1.75vw, 35px);
    text-decoration: none;
  }

  .btn-getdemo {
    padding: calc(8px * var(--zodo-scale)) calc(20px * var(--zodo-scale));
    font-size: clamp(14px, 1.75vw, 31px);
  }

  /*  Hero  */
  .section-hero {
    overflow: hidden;
    margin-left: 15px;
    margin-right: 15px;
    min-height: var(--zodo-hero-min-h);
    border-radius: 30px;
    background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.09) 1.6px, transparent 1.6px), radial-gradient(circle at 50% 50%, rgba(76, 76, 76, 0) 20%, rgba(255, 255, 255, 0.77) 100%);
  }

  .hero-wrapper {
    max-width: var(--zodo-content);
    min-height: calc(520px * var(--zodo-scale));
    padding-top: calc(48px * var(--zodo-scale));
    padding-bottom: calc(80px * var(--zodo-scale));
  }

  .hero-center-logo-card {
    width: calc(105px * var(--zodo-scale));
    height: calc(105px * var(--zodo-scale));
    margin-bottom: calc(20px * var(--zodo-scale));
    border-radius: calc(16px * var(--zodo-scale));
  }

  .zodo-center-icon {
    width: calc(100px * var(--zodo-scale));
    height: calc(100px * var(--zodo-scale));
  }

  .hero-title-dark {
    font-size: clamp(72px, 4.8vw, 140px);
    letter-spacing: calc(3px * var(--zodo-scale));
  }

  .hero-title-light {
    font-size: clamp(68px, 4.5vw, 132px);
    margin-top: calc(-6px * var(--zodo-scale));
  }

  .hero-sub {
    font-size: clamp(19px, 1.15vw, 28px);
    margin-bottom: calc(28px * var(--zodo-scale));
  }

  .btn-cta {
    font-size: clamp(20px, 2.1vw, 38px);
    padding: calc(18px * var(--zodo-scale)) calc(28px * var(--zodo-scale));
    border-radius: calc(10px * var(--zodo-scale));
  }

  .hero-center-textai5 {
    left: 47%;
    transform: translateX(-50%);
    width: min(calc(960px * var(--zodo-scale)), 73%);
    bottom: calc(-150px * var(--zodo-scale));
  }

  .centertext4 {
    max-width: calc(760px * var(--zodo-scale));
    padding: calc(14px * var(--zodo-scale)) calc(24px * var(--zodo-scale));
    gap: calc(12px * var(--zodo-scale));
    border-radius: calc(18px * var(--zodo-scale));
  }

  .hero-center-textai {
    font-size: clamp(16px, 1.95vw, 34px);
  }

  img.ai-icon {
    width: 150px;
  }

  .hero-center-textai2 {
    font-size: clamp(13px, 1.75vw, 35px);
  }

  /* Hero floating graphics  scaled positions & sizes */
  .sticky-group {
    top: calc(20px * var(--zodo-scale));
    left: calc(-171px * var(--zodo-scale));
    width: calc(397px * var(--zodo-scale));
    height: calc(260px * var(--zodo-scale));
  }

  .hero-notes-svg {
    width: calc(269px * var(--zodo-scale));
  }

  img.leftoverlaycard-svg {
    left: calc(-209px * var(--zodo-scale));
    width: calc(247px * var(--zodo-scale));
    top: calc(74px * var(--zodo-scale));
  }

  .bluetick {
    top: calc(76px * var(--zodo-scale));
    left: calc(67px * var(--zodo-scale));
    width: calc(121px * var(--zodo-scale));
  }

  .reminders-group {
    top: calc(28px * var(--zodo-scale));
    right: calc(-180px * var(--zodo-scale));
    height: calc(180px * var(--zodo-scale));
    width: calc(266px * var(--zodo-scale));
  }

  .hero-reminder-svg {
    width: calc(240px * var(--zodo-scale));
  }

  img.clock {
    top: calc(65px * var(--zodo-scale));
  }

  .rightoverlaycard {
    top: calc(122px * var(--zodo-scale));
    left: calc(138px * var(--zodo-scale));
  }

  .tasks-group-svg {
    left: calc(-124px * var(--zodo-scale));
    top: calc(486px * var(--zodo-scale));
    width: 100% !important;
  }

  img.rightoverlaycard-svg.blankcutbox {
    min-width: 215px;
  }

  .integrations-svg-group {
    bottom: calc(-108px * var(--zodo-scale));
    right: calc(-145px * var(--zodo-scale));
    width: calc(280px * var(--zodo-scale));
  }

  .hero-integrations-svg {
    width: calc(270px * var(--zodo-scale));
  }

  /*  Typography  */
  .section-heading {
    font-size: clamp(52px, 3.2vw, 88px);
    padding-bottom: calc(30px * var(--zodo-scale));
  }

  .section-heading-people {
    font-size: clamp(44px, 5.8vw, 85px);
  }

  .section-how-it-works .section-sub {
    font-size: 44px !important;
    max-width: 70%;
  }

  .section-sub {
    font-size: clamp(40px, 2.1vw, 40px);
    margin-bottom: calc(48px * var(--zodo-scale));
    max-width: calc(800px * var(--zodo-scale));
    margin-left: auto;
    margin-right: auto;
  }

  .pill-btn {
    font-size: clamp(38px, 1vw, 22px);
    padding: calc(13px * var(--zodo-scale)) calc(18px * var(--zodo-scale));
  }

  /*  Solutions  */
  .section-solutions {
    width: 100%;
    padding: var(--zodo-section-gap) calc(48px * var(--zodo-scale)) calc(60px * var(--zodo-scale));
    max-width: var(--zodo-section-max);
    margin-left: auto;
    margin-right: auto;
  }

  .solutions-features {
    gap: calc(32px * var(--zodo-scale));
    max-width: calc(1400px * var(--zodo-scale));
    margin-left: auto;
    margin-right: auto;
  }

  .sol-feature {
    max-width: calc(340px * var(--zodo-scale));
  }

  .sol-feature p {
    font-size: clamp(29px, 0.85vw, 18px);
  }

  .sol-icon {
    width: calc(42px * var(--zodo-scale));
    height: calc(42px * var(--zodo-scale));
  }

  img.taskshare-icon {
    width: 60%;
  }

  /*  Dashboard  */
  .dashboard-preview {
    left: 0;
    max-width: calc(1280px * var(--zodo-scale));
    margin-left: auto;
    margin-right: auto;
    border-radius: calc(20px * var(--zodo-scale));
  }

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

  /*  Features  reset hacks + scale images  */
  .section-features {
    width: 100%;
    padding: calc(72px * var(--zodo-scale)) calc(24px * var(--zodo-scale)) calc(60px * var(--zodo-scale));
    max-width: var(--zodo-section-max);
    margin-left: auto;
    margin-right: auto;
  }

  .features-row-1 {
    max-width: calc(1380px * var(--zodo-scale));
    gap: calc(24px * var(--zodo-scale));
    margin-left: auto;
    margin-right: auto;
  }

  .feat-card,
  .feat-card2 {
    width: 100%;
    margin: 0;
    right: 0;
    padding: calc(40px * var(--zodo-scale)) calc(32px * var(--zodo-scale)) calc(36px * var(--zodo-scale));
    border-radius: calc(20px * var(--zodo-scale));
  }

  .features-row-1 {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .feat-card-images {
    min-height: calc(300px * var(--zodo-scale));
  }

  .feat-img-workspace {
    width: calc(250px * var(--zodo-scale));
  }

  .feat-img-marketing {
    width: calc(238px * var(--zodo-scale));
    top: calc(50px * var(--zodo-scale));
    right: calc(-15px * var(--zodo-scale));
  }

  .feat-img-weekly {
    width: calc(200px * var(--zodo-scale));
    left: calc(-46px * var(--zodo-scale));
    top: calc(50px * var(--zodo-scale));
  }

  .feat-img-meetings {
    width: calc(294px * var(--zodo-scale));
    transform: translateX(-40%);
  }

  .feat-img-percent {
    width: calc(200px * var(--zodo-scale));
    right: calc(-45px * var(--zodo-scale));
    top: calc(40px * var(--zodo-scale));
  }

  .feat-card-title {
    font-size: clamp(47px, 5.8vw, 60px);
  }

  .tasksharee2-icon {
    width: calc(22px * var(--zodo-scale));
    height: calc(22px * var(--zodo-scale));
  }

  .tasksharee-icon {
    width: calc(22px * var(--zodo-scale));
    height: calc(22px * var(--zodo-scale));
  }

  .feat-card-desc {
    font-size: clamp(19px, 4.9vw, 32px);
    max-width: calc(360px * var(--zodo-scale));
  }

  .features-row-2 {
    max-width: calc(1310px * var(--zodo-scale));
    gap: calc(10px * var(--zodo-scale));
    margin-left: auto;
    margin-right: auto;
  }

  .feat-row2-left {
    min-width: 0;
    max-width: 100%;
    padding: calc(40px * var(--zodo-scale)) calc(32px * var(--zodo-scale)) calc(36px * var(--zodo-scale));
    border-radius: calc(20px * var(--zodo-scale));
  }

  .feat-row2-left-inner {
    grid-template-columns: calc(200px * var(--zodo-scale)) 1fr;
    gap: calc(20px * var(--zodo-scale)) calc(30px * var(--zodo-scale));
  }

  img.doublearrow {
    width: calc(100px * var(--zodo-scale));
    max-width: 100%;
  }

  .feat-img-timeline {
    max-width: calc(497px * var(--zodo-scale));
    top: calc(33px * var(--zodo-scale));
    left: calc(90px * var(--zodo-scale));
    min-width: 0;
  }

  .feat-img-tasks {
    max-width: calc(570px * var(--zodo-scale));
    min-width: 0;
    top: calc(-13px * var(--zodo-scale));
    left: calc(54px * var(--zodo-scale));
  }

  .feat-img-customize {
    max-width: calc(444px * var(--zodo-scale));
    min-width: 0;
    width: 100%;
  }

  .features-more-text {
    font-size: clamp(18px, 2.05vw, 44px);
    margin-top: calc(16px * var(--zodo-scale));
  }

  /*  Integrations  */
  .section-integrations {
    width: 100%;
    padding: var(--zodo-section-gap) calc(48px * var(--zodo-scale));
    max-width: var(--zodo-section-max);
    margin-left: auto;
    margin-right: auto;
  }

  .integrations-display {
    max-width: calc(1280px * var(--zodo-scale));
    margin-left: auto;
    margin-right: auto;
  }

  .int-center-icon {
    width: calc(80px * var(--zodo-scale));
    height: calc(80px * var(--zodo-scale));
    margin-bottom: calc(48px * var(--zodo-scale));
    border-radius: calc(20px * var(--zodo-scale));
  }

  .zodo-int-icon {
    width: calc(50px * var(--zodo-scale));
    height: calc(50px * var(--zodo-scale));
  }

  .int-row {
    padding: 0 calc(80px * var(--zodo-scale));
    gap: calc(24px * var(--zodo-scale));
    max-width: calc(1200px * var(--zodo-scale));
    margin-left: auto;
    margin-right: auto;
  }

  .int-item {
    min-width: calc(130px * var(--zodo-scale));
    height: calc(150px * var(--zodo-scale));
    border-radius: calc(24px * var(--zodo-scale));
  }

  .int-item img {
    width: calc(60px * var(--zodo-scale));
    height: calc(60px * var(--zodo-scale));
  }

  /*  Workflow (redesigned)  */
  .section-testimonials.section-how-it-works {
    width: 100%;
    padding: var(--zodo-section-gap) calc(48px * var(--zodo-scale));
    max-width: var(--zodo-section-max);
    margin-left: auto;
    margin-right: auto;
  }

  .hiw-main-grid {
    max-width: calc(1240px * var(--zodo-scale));
    gap: calc(32px * var(--zodo-scale));
  }

  .hiw-flow-card {
    padding: calc(32px * var(--zodo-scale));
    border-radius: calc(24px * var(--zodo-scale));
  }

  .hiw-step-box {
    font-size: clamp(26px, 1.5vw, 28px);
    padding: calc(10px * var(--zodo-scale)) calc(18px * var(--zodo-scale));
    border-radius: calc(14px * var(--zodo-scale));
  }

  .hiw-step-icon {
    width: calc(30px * var(--zodo-scale));
    height: calc(30px * var(--zodo-scale));
    border-radius: calc(8px * var(--zodo-scale));
  }

  .hiw-flow-summary {
    font-size: clamp(24px, 1.6vw, 34px);
  }

  .stage-badge {
    font-size: clamp(26px, 1.4vw, 28px);
    width: calc(48px * var(--zodo-scale));
    height: calc(48px * var(--zodo-scale));
  }

  .hiw-stage-icon {
    width: calc(48px * var(--zodo-scale));
    height: calc(48px * var(--zodo-scale));
    border-radius: calc(14px * var(--zodo-scale));
  }

  .hiw-stage-copy h3 {
    font-size: clamp(30px, 1.6vw, 34px);
  }

  .hiw-stage-copy p {
    font-size: clamp(24px, 1.3vw, 28px);
  }

  .hiw-bottom-bar {
    max-width: calc(1240px * var(--zodo-scale));
    gap: calc(20px * var(--zodo-scale));
    padding: calc(28px * var(--zodo-scale)) calc(32px * var(--zodo-scale));
    border-radius: calc(20px * var(--zodo-scale));
  }

  .hiw-bottom-copy h4 {
    font-size: clamp(28px, 1.4vw, 30px);
  }

  .hiw-bottom-copy p {
    font-size: clamp(22px, 1.2vw, 26px);
  }

  /* ── Pricing ── */
  .section-pricing {
    width: 100%;
    padding: var(--zodo-section-gap) calc(48px * var(--zodo-scale));
    max-width: var(--zodo-section-max);
    margin-left: auto;
    margin-right: auto;
  }

  .section-pricing .pill-btn {
    margin-bottom: calc(20px * var(--zodo-scale));
  }

  .section-pricing .section-heading {
    font-size: clamp(52px, 3.2vw, 88px);
    padding-bottom: calc(18px * var(--zodo-scale));
    margin-bottom: calc(8px * var(--zodo-scale));
  }

  .pricing-toggle {
    gap: calc(14px * var(--zodo-scale));
    margin-bottom: calc(40px * var(--zodo-scale));
    max-width: calc(520px * var(--zodo-scale));
  }

  .pricing-toggle-pill {
    padding: calc(6px * var(--zodo-scale));
    border-radius: 999px;
  }

  .pricing-toggle-pill label {
    min-width: calc(130px * var(--zodo-scale));
    padding: calc(12px * var(--zodo-scale)) calc(24px * var(--zodo-scale));
    font-size: clamp(15px, 1.9vw, 38px);
    border-radius: 999px;
  }

  .pricing-note {
    font-size: clamp(13px, 1.8vw, 44px);
    max-width: calc(420px * var(--zodo-scale));
    line-height: 1.5;
  }

  .pricing-grid {
    width: 100%;
    max-width: min(94vw, calc(1500px * var(--zodo-scale)));
    gap: calc(32px * var(--zodo-scale));
    margin-top: calc(48px * var(--zodo-scale));
    align-items: stretch;
  }

  .pricing-card {
    padding: calc(40px * var(--zodo-scale)) calc(36px * var(--zodo-scale));
    border-radius: calc(24px * var(--zodo-scale));
    gap: calc(24px * var(--zodo-scale));
    min-height: calc(520px * var(--zodo-scale));
  }

  .pro-card {
    transform: scale(1.04);
    margin-top: calc(-12px * var(--zodo-scale));
    margin-bottom: calc(-12px * var(--zodo-scale));
    box-shadow: 0 calc(12px * var(--zodo-scale)) calc(40px * var(--zodo-scale)) rgba(37, 99, 235, .35);
  }

  .pro-bolt {
    top: calc(-28px * var(--zodo-scale));
    right: calc(16px * var(--zodo-scale));
    width: calc(60px * var(--zodo-scale));
    height: calc(60px * var(--zodo-scale));
    border-radius: calc(10px * var(--zodo-scale));
  }

  .pro-bolt svg {
    width: calc(52px * var(--zodo-scale));
    height: calc(45px * var(--zodo-scale));
  }

  .pc-header {
    gap: calc(16px * var(--zodo-scale));
  }

  .pc-name {
    font-size: clamp(20px, 2.2vw, 60px);
  }

  .pc-tagline {
    font-size: clamp(14px, 1.85vw, 44px);
  }

  .price-label {
    font-size: clamp(12px, 1.75vw, 28px);
  }

  .price-amount {
    font-size: clamp(44px, 2.8vw, 68px);
  }

  .price-current {
    font-size: clamp(40px, 2.5vw, 62px);
  }

  .price-unit {
    font-size: clamp(16px, 2vw, 40px);
  }

  .price-original {
    font-size: clamp(40px, 1vw, 19px);
  }

  .price-badge {
    font-size: clamp(30px, 0.75vw, 14px);
    padding: calc(4px * var(--zodo-scale)) calc(10px * var(--zodo-scale));
  }

  .price-sub {
    font-size: clamp(13px, 1.8vw, 31px);
  }

  .pc-best {
    font-size: clamp(22px, 1.8vw, 36px);
    padding: calc(8px * var(--zodo-scale)) calc(14px * var(--zodo-scale));
    margin-bottom: calc(12px * var(--zodo-scale));
  }

  .pricing-card .btn-getstarted {
    padding: calc(14px * var(--zodo-scale)) calc(16px * var(--zodo-scale));
    border-radius: calc(14px * var(--zodo-scale));
    font-size: clamp(36px, 0.95vw, 18px);
    margin-top: calc(16px * var(--zodo-scale));
  }

  .pc-features {
    margin-bottom: calc(16px * var(--zodo-scale));
  }

  .pc-features li {
    font-size: clamp(19px, 2.95vw, 33px);
    padding: calc(12px * var(--zodo-scale)) 0;
    gap: calc(8px * var(--zodo-scale));
  }

  .check-icon {
    font-size: clamp(14px, 0.85vw, 17px);
  }

  .pc-learn {
    font-size: clamp(16px, 2.8vw, 43px);
    text-decoration: none;
  }

  /*  Footer  */
  .section-footer {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--zodo-section-max);
    padding: calc(60px * var(--zodo-scale)) calc(48px * var(--zodo-scale)) calc(30px * var(--zodo-scale));
    min-height: calc(659px * var(--zodo-scale));
  }

  .footer-top {
    max-width: calc(1271px * var(--zodo-scale));
  }

  img.zodo-nav-icon {
    width: 200px;
  }

  .logo-text {
    font-size: 101px;
  }

  .footer-heading {
    font-size: clamp(53px, 5vw, 82px);
    width: 900px;

  }

  .footer-col a {
    font-size: clamp(19px, 2.1vw, 44px);
    top: calc(36px * var(--zodo-scale));
  }

  .footer-icons-section {
    max-width: calc(1300px * var(--zodo-scale));
    gap: calc(105px * var(--zodo-scale)) calc(40px * var(--zodo-scale));
    margin: calc(100px * var(--zodo-scale)) auto;
  }

  .footer-icons-section img {
    width: calc(110px * var(--zodo-scale)) !important;
    height: calc(110px * var(--zodo-scale)) !important;
  }

  /* Footer icon offsets  scaled */
  img.message-icon {
    top: calc(100px * var(--zodo-scale));
  }

  img.schedule-icon {
    right: calc(90px * var(--zodo-scale));
  }

  img.flag-icon {
    right: calc(62px * var(--zodo-scale));
    top: calc(44px * var(--zodo-scale));
  }

  img.calender-icon {
    right: calc(60px * var(--zodo-scale));
  }

  img.bulb-icon {
    right: calc(50px * var(--zodo-scale));
    top: calc(40px * var(--zodo-scale));
  }

  img.bluetick-icon {
    left: calc(130px * var(--zodo-scale));
    top: calc(10px * var(--zodo-scale));
  }

  img.blackclock-icon {
    bottom: calc(36px * var(--zodo-scale));
    left: calc(63px * var(--zodo-scale));
  }

  img.glasshour-icon {
    left: calc(70px * var(--zodo-scale));
  }

  img.realclock-icon {
    left: calc(58px * var(--zodo-scale));
    bottom: calc(39px * var(--zodo-scale));
  }

  img.doublearrowblue-icon {
    top: calc(16px * var(--zodo-scale));
  }

  .footer-bottom {
    max-width: calc(1000px * var(--zodo-scale));
  }

}




/* Starting product page css from here */

/* ============================================================
   PRODUCT PAGE STYLES
   ============================================================ */

/* Navbar Adjustments */
.active-nav {
  color: #111827 !important;
  font-weight: 600 !important;
}

/* Base resets for product page */
.pp-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #2563EB;
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  padding: 12px 24px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.1), 0 2px 4px -1px rgba(37, 99, 235, 0.06);
}

.pp-btn-primary:hover {
  background: #1D4ED8;
  transform: translateY(-1px);
  box-shadow: 0 6px 8px -1px rgba(37, 99, 235, 0.2), 0 4px 6px -1px rgba(37, 99, 235, 0.1);
  color: #fff;
}

.pp-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #2563EB;
  font-weight: 600;
  border-radius: 8px;
  border: 1.5px solid #E5E7EB;
  padding: 12px 24px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.pp-btn-secondary:hover {
  border-color: #2563EB;
  background: rgba(37, 99, 235, 0.04);
  color: #2563EB;
}

/* Hero Section */
.pp-hero {
  background: linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%);
  padding: 40px 24px 0;
  overflow: hidden;
}

.pp-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.pp-hero-text {
  flex: 0.85;
  text-align: left;
}

.pp-hero-label {
  display: inline-block;
  color: #3e7bff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.pp-hero-title {
  font-size: clamp(40px, 1.5vw, 63px);
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.pp-hero-title-accent {
  color: #2563EB;
}

.pp-hero-desc {
  font-size: 18px;
  line-height: 1.6;
  color: #4B5563;
  margin-bottom: 40px;
  max-width: 500px;
}

.pp-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}

.pp-hero-visual {
  flex: 1.15;
  position: relative;
}

.pp-dashboard-wrapper {
  position: relative;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: none;
  background: #fff;
  transform: translateY(20px);
  width: 110%;
}

.pp-dashboard-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Trusted By */
.pp-trusted {
  padding: 64px 24px;
  background: #fff;
  text-align: center;
  border-bottom: 1px solid #F3F4F6;
}

.pp-trusted-label {
  font-size: 16px;
  color: #3e3e3e;
  margin-bottom: 36px;
  font-weight: 600;
}

.pp-trusted-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 132px;
  max-width: 1331px;
  margin: 0 auto;
}

.pp-logo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #6B7280;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.pp-logo-item:hover {
  opacity: 1;
}

.pp-logo-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.1;
}

.pp-logo-name {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: #626262;
}

.pp-logo-sub {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #626262;
}

/* Features Section */
.pp-features {
  padding: 10px 10px;
  background: #FAFAFA;
}

.pp-features-header {
  text-align: center;
  margin-bottom: 64px;
}

.pp-features-title {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 700;
  color: #111827;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.pp-features-subtitle {
  font-size: 18px;
  color: #4B5563;
}

.pp-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.pp-feature-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  border: 1px solid #F3F4F6;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.pp-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .06), 0 6px 12px rgba(0, 0, 0, .04);
  border-color: #E5E7EB;
}

.pp-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.pp-feature-icon--blue {
  background: #EFF6FF;
}

.pp-feature-icon--indigo {
  background: #EEF2FF;
}

.pp-feature-icon--emerald {
  background: #ECFDF5;
}

.pp-feature-icon--amber {
  background: #FEF3C7;
}

.pp-feature-icon--rose {
  background: #FFE4E6;
}

.pp-feature-icon--cyan {
  background: #ECFEFF;
}

.pp-feature-name {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px;
}

.pp-feature-desc {
  font-size: 15px;
  color: #4B5563;
  line-height: 1.6;
  margin-bottom: 24px;
  flex-grow: 1;
}

.pp-feature-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2563EB;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: gap 0.2s;
}

.pp-feature-link:hover {
  gap: 10px;
}

/* Built For Mid-Sized Section */
.pp-built {
  padding: 10px 24px;
  background: #fff;
  overflow: hidden;
}

.pp-built-inner {
  display: flex;
  align-items: center;
  gap: 64px;
  max-width: 1200px;
  margin: 0 auto;
}

.pp-built-text {
  flex: 1;
  max-width: 500px;
}

.pp-built-title {
  font-size: clamp(32px, 2vw, 29px);
  font-weight: 700;
  color: #111827;
  margin-bottom: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.pp-built-desc {
  font-size: 20px;
  color: #4B5563;
  line-height: 1.6;
  margin-bottom: 32px;
  letter-spacing: 0.05px;
}

.pp-built-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pp-built-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: #374151;
  font-weight: 500;
}

.pp-check-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-built-visual {
  flex: 1;
  position: relative;
}

.pp-devices-mockup {
  position: relative;
  width: 150%;
  max-width: 800px;
}

.pp-built-img {
  width: 100%;
  height: auto;
  /* filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.15)); */
}

/* Integrations Section */
.pp-integrations {
  padding: 0px 24px;
  background: #FAFAFA;
}

.pp-integrations-header {
  text-align: center;
  margin-bottom: 20px;
}

.pp-integrations-title {
  font-size: clamp(23px, 2vw, 28px);
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.pp-integrations-subtitle {
  font-size: 18px;
  color: #4B5563;
}

.pp-integrations-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 72px;
  max-width: 1204px;
  margin: 0 auto;
}

.pp-integration-item {
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  width: 180px;
  border: 1px solid #F3F4F6;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
  transition: all 0.3s ease;
}

.pp-integration-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .06), 0 6px 12px rgba(0, 0, 0, .04);
}

.pp-integration-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-integration-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pp-integration-icon--more {
  background: #EFF6FF;
  border-radius: 16px;
}

.pp-integration-name {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
}

.pp-integration-desc {
  font-size: 13px;
  color: #6B7280;
}

/* CTA Section */
.pp-cta {
  padding: 40px 24px;
  background: #fff;
}

.pp-cta-inner {
  background: #2563EB;
  background-image: radial-gradient(circle at 100% 0%, #3B82F6 0%, transparent 50%), radial-gradient(circle at 0% 100%, #1D4ED8 0%, transparent 50%);
  border-radius: 24px;
  padding: 30px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.pp-cta-icon {
  padding: 15px;
  background: #fff;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.pp-cta-content {
  flex: 1;
  margin: 0 48px;
  z-index: 2;
}

.pp-cta-title {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.pp-cta-desc {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
}

.pp-cta-btn {
  background: #fff;
  color: #2563EB;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  flex-shrink: 0;
  z-index: 2;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.pp-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Media Queries for Product Page */
@media (max-width: 1024px) {
  .pp-hero-inner {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .pp-hero-text {
    flex: none;
    max-width: 800px;
    text-align: left;
  }

  .pp-hero-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .pp-hero-actions {
    justify-content: center;
  }

  .pp-dashboard-wrapper {
    width: 100%;
    transform: translateY(0);
    margin-top: 15px;
  }

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

  .pp-built-inner {
    flex-direction: column;
    text-align: center;
  }

  .pp-built-text {
    max-width: 100%;
  }

  .pp-built-checklist {
    align-items: center;
  }

  .pp-built-checklist li {
    justify-content: center;
  }

  .pp-devices-mockup {
    width: 100%;
    max-width: 100%;
  }

  .pp-cta-inner {
    flex-direction: column;
    text-align: center;
    padding: 48px 32px;
  }

  .pp-cta-content {
    margin: 32px 0;
  }
}

@media (max-width: 768px) {
  .pp-integration-icon img {
    width: 60%;
    height: 83%;
  }

  /* Section Padding Resets */
  .pp-hero {
    padding: 40px 40px 0;
  }

  .pp-trusted {
    padding: 40px 40px;
  }

  .pp-features,
  .pp-built,
  .pp-integrations,
  .pp-cta {
    padding: 10px 40px;
  }

  /* Hero Compact */
  .pp-hero-label {
    margin-bottom: 16px;
    font-size: 12px;
  }

  .pp-hero-title {
    font-size: 36px;
    line-height: 1.15;
    margin-bottom: 16px;
  }

  .pp-hero-desc {
    font-size: 20px;
    margin-bottom: 24px;
  }

  .pp-hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .pp-btn-primary,
  .pp-btn-secondary {
    width: 100%;
    padding: 12px 20px;
    font-size: 18px;
  }

  /* Trusted By Compact */
  .pp-trusted-label {
    margin-bottom: 24px;
    font-size: 15px;
    max-width: 230px;
    margin-left: 45px;

  }

  .pp-trusted-logos {
    gap: 24px;
    justify-content: center;
  }

  .pp-logo-item {
    gap: 8px;
    width: 45%;
    justify-content: flex-start;
  }

  .pp-logo-item svg {
    width: 16px;
    height: 16px;
  }

  .pp-logo-name {
    font-size: 13px;
  }

  .pp-logo-sub {
    font-size: 9px;
  }

  /* Features Compact */
  .pp-features-header {
    margin-bottom: 40px;
    text-align: left;
  }

  .pp-features-title {
    font-size: 26px;
    margin-bottom: 12px;
  }

  .pp-features-subtitle {
    font-size: 15px;
  }

  .pp-features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pp-feature-card {
    padding: 24px;
    border-radius: 12px;
  }

  .pp-feature-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
  }

  .pp-feature-icon svg {
    width: 20px;
    height: 20px;
  }

  .pp-feature-name {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .pp-feature-desc {
    font-size: 14px;
    margin-bottom: 16px;
  }

  /* Built For Compact */
  .pp-built-inner {
    gap: 32px;
    text-align: left;
  }

  .pp-built-title {
    font-size: 26px;
    margin-bottom: 16px;
  }

  .pp-built-desc {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .pp-built-checklist {
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 12px;
  }

  .pp-built-checklist li {
    justify-content: flex-start;
    font-size: 14px;
  }

  .pp-built-text .pp-btn-primary {
    width: 100%;
  }

  /* Integrations Compact */
  .pp-integrations-header {
    margin-bottom: 40px;
  }

  .pp-integrations-title {
    font-size: 20px;
    margin-bottom: 15px;
  }

  .pp-integrations-subtitle {
    font-size: 15px;
  }

  .pp-integrations-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }

  .pp-integration-item {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
  }

  .pp-integration-icon {
    width: 35px;
    height: 25px;
    margin-bottom: 12px;
  }

  .pp-integration-name {
    font-size: 10px;
    margin-bottom: 4px;
  }

  .pp-integration-desc {
    font-size: 9px;
  }

  /* CTA Compact */
  .pp-cta-inner {
    padding: 40px 24px;
    border-radius: 16px;
  }

  .pp-cta-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto;
  }

  .pp-cta-icon img {
    width: 32px;
    height: 32px;
  }

  .pp-cta-content {
    margin: 24px 0;
  }

  .pp-cta-title {
    font-size: 24px;
  }

  .pp-cta-desc {
    font-size: 15px;
  }

  .pp-cta-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
    font-size: 15px;
  }
}

/* Large Screens */
@media (min-width: 1600px) {

  .pp-hero-inner,
  .pp-features-grid,
  .pp-built-inner,
  .pp-cta-inner {
    max-width: calc(1200px * var(--zodo-scale));
  }

  .pp-hero-text {
    max-width: calc(800px * var(--zodo-scale));
    margin-bottom: calc(64px * var(--zodo-scale));
  }

  .pp-hero-title {
    font-size: calc(64px * var(--zodo-scale));
    margin-bottom: calc(24px * var(--zodo-scale));
  }

  .pp-hero-desc {
    font-size: calc(18px * var(--zodo-scale));
    max-width: calc(600px * var(--zodo-scale));
    margin-bottom: calc(40px * var(--zodo-scale));
  }

  .pp-dashboard-wrapper {
    transform: translateY(calc(20px * var(--zodo-scale)));
  }

  .pp-features,
  .pp-built,
  .pp-integrations,
  .pp-cta {
    padding: calc(100px * var(--zodo-scale)) calc(24px * var(--zodo-scale));
  }

  .pp-feature-card {
    padding: calc(32px * var(--zodo-scale));
  }

  .pp-feature-icon {
    width: calc(48px * var(--zodo-scale));
    height: calc(48px * var(--zodo-scale));
  }

  .pp-feature-name,
  .pp-integration-name {
    font-size: calc(20px * var(--zodo-scale));
  }

  .pp-feature-desc,
  .pp-integration-desc {
    font-size: calc(15px * var(--zodo-scale));
  }

  .pp-built-title,
  .pp-features-title,
  .pp-integrations-title,
  .pp-cta-title {
    font-size: calc(40px * var(--zodo-scale));
  }

  .pp-built-desc,
  .pp-features-subtitle,
  .pp-integrations-subtitle,
  .pp-cta-desc {
    font-size: calc(18px * var(--zodo-scale));
  }

  .pp-built-checklist li {
    font-size: calc(15px * var(--zodo-scale));
  }

  .pp-integration-item {
    width: calc(180px * var(--zodo-scale));
    padding: calc(32px * var(--zodo-scale)) calc(24px * var(--zodo-scale));
  }

  .pp-integration-icon {
    width: calc(64px * var(--zodo-scale));
    height: calc(64px * var(--zodo-scale));
  }

  .pp-cta-icon {
    width: calc(80px * var(--zodo-scale));
    height: calc(80px * var(--zodo-scale));
  }

  .pp-cta-inner {
    padding: calc(64px * var(--zodo-scale)) calc(48px * var(--zodo-scale));
  }
}

/* ============================================================
   WHAT'S NEW PAGE STYLES
   ============================================================ */

/* Global Resets for Whats New */
.whats-new-page {
  background-color: #FAFAFA;
  color: #111827;
  -webkit-font-smoothing: antialiased;
}

.whats-new-page button {
  font-family: inherit;
  cursor: pointer;
}

/* Hero Section */
.wn-hero {
  background: #FFFFFF;
  padding: 40px 24px 40px;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #F3F4F6;
  overflow: hidden;
}

.wn-hero-inner {
  max-width: 1200px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 64px;
}

.wn-hero-content {
  flex: 0.9;
}

.wn-hero-label {
  display: inline-block;
  color: #2563EB;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.wn-hero-title {
  font-size: clamp(41px, 2vw, 28px);
  font-weight: 800;
  line-height: 1.15;
  color: #111827;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.wn-hero-desc {
  font-size: 19px;
  line-height: 1.6;
  color: #4B5563;
  margin-bottom: 40px;
  max-width: 398px;
}

.wn-hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.wn-btn-primary {
  background: #2563EB;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
}

.wn-btn-primary:hover {
  background: #1D4ED8;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px -2px rgba(37, 99, 235, 0.3);
}

.wn-btn-primary i {
  width: 18px;
  height: 18px;
}

.wn-btn-secondary {
  background: #fff;
  color: #2563EB;
  border: 1px solid #BFDBFE;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.wn-btn-secondary:hover {
  background: #EFF6FF;
  border-color: #2563EB;
}

.wn-btn-secondary i {
  width: 18px;
  height: 18px;
}

.wn-btn-outline {
  background: #fff;
  color: #2563EB;
  border: 3px solid #2563EB;
  padding: 12px 32px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.2s ease;
  width: 35%;
}

.wn-btn-outline:hover {
  background: #EFF6FF;
  border-color: #2563EB;
}

/* Hero Visual Mockup */
.wn-hero-visual {
  flex: 1.1;
  position: relative;
}

.wn-mockup-wrapper {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
  display: flex;
  overflow: hidden;
  height: 400px;
  width: 115%;
  transform: translateY(20px);
}

.wn-mockup-sidebar {
  width: 200px;
  background: #FFFFFF;
  border-right: 1px solid #E5E7EB;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
}

.wn-mockup-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  padding: 0 8px;
}

.wn-logo-icon svg {
  width: 24px;
  height: 24px;
}

.wn-logo-text {
  font-weight: 700;
  font-size: 15px;
  color: #111827;
}

.wn-mockup-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wn-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #4B5563;
}

.wn-nav-item.active {
  background: #EFF6FF;
  color: #2563EB;
  font-weight: 600;
}

.wn-nav-item i {
  width: 16px;
  height: 16px;
}

.wn-mockup-main {
  flex: 1;
  padding: 32px;
  background: #F9FAFB;
}

.wn-mockup-header {
  font-weight: 700;
  font-size: 20px;
  color: #111827;
  margin-bottom: 24px;
}

.wn-mockup-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wn-mockup-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.wn-mcard-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wn-mcard-icon i {
  width: 20px;
  height: 20px;
}

.wn-mcard-icon.green {
  background: #ECFDF5;
  color: #10B981;
}

.wn-mcard-icon.blue {
  background: #EFF6FF;
  color: #2563EB;
}

.wn-mcard-icon.yellow {
  background: #FEF3C7;
  color: #F59E0B;
}

.wn-mcard-icon.purple {
  background: #F3E8FF;
  color: #8B5CF6;
}

.wn-mcard-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wn-mline {
  height: 6px;
  background: #E5E7EB;
  border-radius: 3px;
}

.wn-mline.w-30 {
  width: 30%;
}

.wn-mline.w-40 {
  width: 40%;
}

.wn-mline.w-50 {
  width: 50%;
}

.wn-mline.w-60 {
  width: 60%;
}

.wn-mline.w-70 {
  width: 70%;
}

.wn-mline.w-75 {
  width: 75%;
}

.wn-mline.w-80 {
  width: 80%;
}

.wn-mline.w-85 {
  width: 85%;
}

.wn-mline.w-90 {
  width: 90%;
}

.wn-mcard-arrow {
  color: #9CA3AF;
  width: 20px;
  height: 20px;
}

.wn-floating-icon {
  position: absolute;
  top: 180px;
  right: 13px;
  background: #2563EB;
  color: #fff;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.4);
  transform: rotate(5deg);
  z-index: 10;
}

.wn-floating-icon i {
  width: 32px;
  height: 32px;
}

/* Main Content Area */
.wn-main {
  padding: 12px 4px 40px 148px;
  display: flex;
  justify-content: center;
}

.wn-main-inner {
  max-width: 1416px;
  width: 100%;
  display: flex;
  gap: 64px;
}

/* Sidebar */
.wn-sidebar {
  width: 240px;
  flex-shrink: 0;
}

.wn-filter-group {
  margin-bottom: 40px;
}

.wn-filter-title {
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-left: 12px;
}

.wn-filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wn-filter-list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: #4B5563;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
  border-left: 2px solid transparent;
}

.wn-filter-list li a:hover {
  background: #F3F4F6;
  color: #111827;
}

.wn-filter-list li.active a {
  color: #2563EB;
  font-weight: 600;
  border-left-color: #2563EB;
  background: #F8FAFC;
}

.wn-filter-list li a i {
  width: 18px;
  height: 18px;
  color: #6B7280;
}

.wn-filter-list li.active a i {
  color: #2563EB;
}

.wn-count {
  margin-left: auto;
  font-size: 12px;
  color: #333333;
  font-weight: 500;
  padding: 5px;
  border-radius: 15px;
  background-color: #e6e6e6;
}

/* Content Area */
.wn-content-area {
  flex: 1;
  max-width: 1000px;
}

.wn-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.wn-search-bar {
  position: relative;
  width: 320px;
}

.wn-search-bar input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 14px;
  color: #111827;
  outline: none;
  transition: border-color 0.2s;
  font-family: 'Inter', sans-serif;
  background: #FFFFFF;
}

.wn-search-bar input:focus {
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.wn-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #9CA3AF;
  width: 18px;
  height: 18px;
}

.wn-sort-dropdown select {
  padding: 12px 36px 12px 16px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  outline: none;
  cursor: pointer;
  appearance: none;
  font-family: 'Inter', sans-serif;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* Timeline */
.wn-timeline-container {
  position: relative;
}

.wn-month-group {
  margin-bottom: 64px;
}

.wn-month-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 32px;
}

.wn-timeline {
  position: relative;
  padding-left: 20px;
}

.wn-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 5px;
  background: #ededed;
}

.wn-update-card-wrapper {
  position: relative;
  margin-bottom: 32px;
}

.wn-update-card-wrapper:last-child {
  margin-bottom: 0;
}

.wn-timeline-dot {
  position: absolute;
  left: -21px;
  top: 36px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #E5E7EB;
  z-index: 2;
  border: 2px solid #FFFFFF;
}

.dot-blue {
  background: #3B82F6;
}

.dot-green {
  background: #10B981;
}

.dot-teal {
  background: #06B6D4;
}

.dot-purple {
  background: #8B5CF6;
}

.dot-red {
  background: #EF4444;
}

.dot-yellow {
  background: #F59E0B;
}

.wn-update-card {
  background: #FFFFFF;
  border: 1px solid #F3F4F6;
  border-radius: 12px;
  padding: 18px;
  display: flex;
  gap: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  cursor: pointer;
}

.wn-update-card:hover {
  border-color: #E5E7EB;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .04), 0 6px 12px rgba(0, 0, 0, .02);
  transform: translateY(-2px);
}

.wn-update-card:hover .wn-card-arrow {
  color: #2563EB;
  transform: translateX(4px);
}

.wn-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wn-card-icon i {
  width: 32px;
  height: 32px;
}

.bg-blue-light {
  background: #EFF6FF;
}

.text-blue {
  color: #2563EB;
}

.bg-green-light {
  background: #ECFDF5;
}

.text-green {
  color: #10B981;
}

.bg-teal-light {
  background: #E0F2FE;
}

/* using light blue for teal */
.text-teal {
  color: #0EA5E9;
}

.bg-purple-light {
  background: #F3E8FF;
}

.text-purple {
  color: #8B5CF6;
}

.bg-red-light {
  background: #FEF2F2;
}

.text-red {
  color: #EF4444;
}

.bg-yellow-light {
  background: #FFFBEB;
}

.text-yellow {
  color: #F59E0B;
}

.wn-card-body {
  flex: 1;
}

.wn-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}

.badge-new {
  background: #EFF6FF;
  color: #2563EB;
}

.badge-improvement {
  background: #ECFDF5;
  color: #10B981;
}

.badge-bug {
  background: #FEF2F2;
  color: #EF4444;
}

.wn-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px;
}

.wn-card-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #4B5563;
  margin-bottom: 16px;
}

.wn-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #6B7280;
  font-weight: 500;
}

.wn-dot-separator {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #D1D5DB;
}

.wn-card-arrow {
  display: flex;
  align-items: center;
  color: #9CA3AF;
  transition: all 0.2s ease;
}

.wn-card-arrow i {
  width: 20px;
  height: 20px;
}

.wn-load-more {
  text-align: left;
  /* margin-top: 48px; */
}

/* CTA Section */
.wn-cta-section {
  display: flex;
  justify-content: center;
  padding: 0px 32px 38px 30px;
  background: #FFFFFF;
}

/* mail icon whatsa new  */
.wn-cta-icon-wrapper {
  width: 80px;
  height: 80px;
  background: #EFF6FF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mail-icon {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

/* end mail icon cs  */
.wn-cta-inner {
  max-width: 1240px;
  width: 100%;
  background: #e1f0ff;
  border-radius: 16px;
  padding: 48px;
  display: flex;
  align-items: center;
  gap: 40px;
}

.wn-cta-text {
  flex: 1;
}

.wn-cta-title {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px;
}

.wn-cta-desc {
  font-size: 15px;
  color: #4B5563;
  line-height: 1.6;
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .wn-hero-inner {
    flex-direction: column;
    text-align: left;
    gap: 40px;
  }

  .wn-hero-desc {
    margin: 0 auto 40px;
  }

  .wn-hero-actions {
    justify-content: center;
  }

  .wn-hero-visual {
    width: 100%;
    max-width: 600px;
  }

  .wn-mockup-wrapper {
    width: 100%;
    transform: translateY(0);
  }

  .wn-main-inner {
    flex-direction: column;
    gap: 2px;
  }

  .wn-sidebar {
    width: 100%;
    display: flex;
    gap: 48px;
  }

  .wn-filter-group {
    flex: 1;
    margin-bottom: 0;
  }

  .wn-cta-inner {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .wn-filter-group {
    display: none;
  }

  .wn-hero {
    padding: 11px 30px 6px 30px;
  }

  .wn-btn-outline.wn-btn-outline {
    background: #fff;
    color: #2563EB;
    border: 3px solid #2563EB;
    padding: 12px 32px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.2s ease;
    width: 85%;
    margin-left: 25px;
  }

  .wn-hero-title {
    font-size: 28px;
    margin-bottom: 16px;
  }

  .wn-hero-title {
    font-weight: 700;
  }

  .wn-hero-desc {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .wn-hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .wn-btn-primary,
  .wn-btn-secondary {
    width: 100%;
    justify-content: center;
  }


  .wn-mockup-sidebar {
    display: none;
    /* Hide sidebar on mobile for mockup */
  }

  .wn-main {
    padding: 30px 30px;
  }

  .wn-sidebar {
    flex-direction: column;
    gap: 32px;
  }

  .wn-toolbar {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .wn-search-bar {
    width: 100%;
  }

  .wn-sort-dropdown select {
    width: 100%;
  }

  .wn-update-card {
    flex-direction: column;
    padding: 10px;
    gap: 5px;
  }

  .wn-card-arrow {
    display: none;
  }

  .wn-cta-inner {
    padding: 32px 24px;
  }

  .wn-cta-action {
    width: 100%;
  }

  .wn-cta-action .wn-btn-primary {
    width: 100%;
  }
}

/* End of whats new page css */

/* css for get demo pagere here */
:root {
  --bd-bg: #F5F7FA;
  --bd-muted: #6B7280;
  --bd-primary: #2563EB;
  --bd-accent: #0B63FF;
  --bd-card: #FFFFFF;
  --bd-radius: 18px;
  --bd-input-border: #E8EEF6;
  --bd-shadow: 0 20px 50px rgba(16, 24, 40, 0.08);
}

/* Page wrapper */
.bd-page {
  font-family: Inter, system-ui, Arial, sans-serif;
  color: #0f1724;
  background: var(--bd-bg);
  padding: 20px 20px 32px;
}

.bd-hero {
  max-width: 1280px;
  margin: 0 auto 32px;
}

.bd-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 450px;
  gap: 32px;
  align-items: start;
}

.bd-hero-left {
  padding: 8px 0;
}

.bd-label {
  color: var(--bd-primary);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 14px;
}

.bd-title {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  margin: 0 0 30px;
  font-weight: 800;
  color: #0F1724;
  letter-spacing: -0.02em;
}

.bd-accent {
  color: var(--bd-primary);
}

.bd-sub {
  color: var(--bd-muted);
  max-width: 540px;
  margin-bottom: 40px;
  font-size: 16px;
  line-height: 1.6;
}

.bd-benefits {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 100%;
}

.bd-benefits li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  color: #374151;
}

.bd-benefits li strong {
  display: block;
  color: #111827;
  font-size: 16px;
  margin-bottom: 6px;
}

.diffsize {
  font-size: 18px !important;
}

.pbottom {
  padding-bottom: 5px;
}

.bd-benefits li span {
  display: block;
  color: #518bff;
  font-size: 34px;
  line-height: 1.6;
}

.bd-ib-icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #EFF6FF;
  align-items: center;
  justify-content: center;
  color: var(--bd-primary);
  font-size: 20px;
  flex-shrink: 0;
}

/* Form Card */
.bd-form-card {
  background: var(--bd-card);
  border-radius: 20px;
  padding: 24px 20px;
  border: 1px solid rgba(16, 24, 40, 0.06);
  box-shadow: var(--bd-shadow);
}

.bd-form h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #111827;
}

.bd-form-desc {
  color: var(--bd-muted);
  margin-bottom: 14px;
  font-size: 14px;
}

.bd-grid {
  display: grid;
  gap: 12px;
}

.bd-grid-2 {
  grid-template-columns: 1fr 1fr;
}

.bd-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.bd-field input,
.bd-field select,
.bd-field textarea {
  height: 46px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--bd-input-border);
  outline: none;
  font-size: 15px;
  background: #fff;
  color: #111827;
  width: 100%;
}

.bd-field input::placeholder,
.bd-field textarea::placeholder {
  color: #9CA3AF;
}

.bd-field textarea {
  min-height: 60px;
  height: auto;
  padding: 10px 14px;
  resize: vertical;
}

.bd-field input:focus,
.bd-field select:focus,
.bd-field textarea:focus {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  border-color: var(--bd-primary);
}

.bd-label-small {
  font-size: 13px;
  color: #374151;
  font-weight: 600;
}

.bd-phone-field {
  position: relative;
}

.bd-phone-field .bd-phone-inner {
  display: flex;
  gap: 8px;
}

.bd-phone-field .bd-phone-inner input {
  flex: 1;
}

.bd-country-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--bd-input-border);
  background: #fff;
  flex-shrink: 0;
}

.bd-country-btn .bd-flag {
  font-size: 18px;
}

.bd-country-dd {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 12px 36px rgba(16, 24, 40, 0.08);
  z-index: 50;
  min-width: 140px;
}

.bd-country-opt {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}

.bd-country-opt:hover {
  background: #F3F6FF;
}

/* Interest cards */
.bd-interest {
  border: none;
  margin: 12px 0 8px;
  padding: 0;
}

.bd-interest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.bd-int-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1.5px solid #E5E7EB;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  text-align: left;
}

.bd-int-card:focus {
  outline: 2px solid rgba(37, 99, 235, 0.12);
}

.bd-int-card--active {
  border-color: var(--bd-primary);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
  background: #FAFCFF;
}

.bd-int-card--active::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--bd-primary);
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
}

.bd-int-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #EFF6FF;
  color: var(--bd-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.bd-form-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 10px;
}

.bd-btn-primary {
  background: linear-gradient(180deg, #3B82F6, var(--bd-primary));
  color: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.20);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.bd-btn-primary span {
  flex: 1;
  text-align: center;
}

.bd-btn-primary i {
  font-size: 18px;
  opacity: 0.95;
}

.bd-privacy {
  color: var(--bd-muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.bd-privacy i {
  font-size: 12px;
  color: #9CA3AF;
}

/* Section headings */
.bd-section-heading {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700;
  color: #111827;
  text-align: center;
  line-height: 1.2;
  margin: 0 0 36px;
  letter-spacing: -0.02em;
}

/* Demo cards */
.bd-demos {
  max-width: 1280px;
  margin: 0 auto 72px;
}

.bd-demos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

.bd-demo-card {
  background: #fff;
  border-radius: 20px;
  padding: 28px 24px 0;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.bd-demo-card--blue {
  background: linear-gradient(180deg, #F8FBFF 0%, #EEF4FF 100%);
}

.bd-demo-card--green {
  background: linear-gradient(180deg, #F7FFF9 0%, #ECFFF0 100%);
}

.bd-demo-card--amber {
  background: linear-gradient(180deg, #FFFDF8 0%, #FFF7ED 100%);
}

.bd-demo-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bd-demo-head h4 {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.bd-demo-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.bd-demo-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.bd-demo-icon--blue {
  background: #DBEAFE;
}

.bd-demo-icon--green {
  background: #D1FAE5;
}

.bd-demo-icon--amber {
  background: #FFEDD5;
}

.bd-demo-desc {
  color: var(--bd-muted);
  font-size: 14px;
  line-height: 1.65;
}

.bd-demo-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-weight: 500;
  font-size: 14px;
  color: #374151;
}

.bd-demo-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.bd-demo-list li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 11px;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--pricing-primary-blue);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bd-demo-card--green .bd-demo-list li::before {
  background: #10B981;
  color: ffffff;
}

.bd-demo-card--amber .bd-demo-list li::before {
  background: #F97316;
color: ffffff;
}

.bd-demo-visual {
  position: relative;
  height: 150px;
  margin-top: auto;
  overflow: hidden;
}

.bd-demo-visual img {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 92%;
  max-width: 280px;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -8px 32px rgba(16, 24, 40, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom: none;
}

.bd-int-icon--logo img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.bd-int-icon--logo {
  background: #FFF7ED;
}

/* What to expect section */
.bd-what {
  max-width: 1280px;
  margin: 0 auto;
}

.bd-what-inner {
  display: grid;
  gap: 28px;
}

.bd-what-row {
  display: grid;
  grid-template-columns: minmax(280px, 850px) minmax(320px, 1fr);
  gap: 32px;
  align-items: start;
}

.bd-what-top {
  display: grid;
  gap: 24px;
}

.bd-what-heading {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  color: #111827;
  text-align: left;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.02em;
}

.bd-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  position: relative;
  padding: 4px 0;
}

.bd-timeline::before {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  top: 28px;
  height: 2px;
  background-image: radial-gradient(#93C5FD 2px, transparent 3px);
  background-size: 14px 4px;
  background-repeat: repeat-x;
  z-index: 0;
}

.bd-tl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  position: relative;
  z-index: 1;
  padding-top: 28px;
}

.bd-tl-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bd-primary);
  border: none;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.16);
}

.bd-tl-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.12);
  color: var(--bd-primary);
  display: grid;
  place-items: center;
  font-size: 24px;
}

.bd-tl-meta {
  font-size: 13px;
  color: var(--bd-muted);
  line-height: 1.55;
  max-width: 160px;
}

.bd-tl-meta strong {
  display: block;
  color: #111827;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.bd-tl-meta span {
  display: block;
}

.bd-testi-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 32px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
  max-width: 400px;
}

.bd-testi-label {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 10px;
}

.bd-stars {
  color: #F59E0B;
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.bd-quote {
  color: #374151;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.65;
  font-style: italic;
  margin: 0 0 20px;
}

.bd-testimonial-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}

.bd-testimonial-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.bd-testimonial-logo {
  width: 73px;
  height: 48px;
  border-radius: 16px;
  background: rgba(59, 130, 246, 0.12);
  color: var(--bd-primary);
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
}

.bd-testimonial-brand strong {
  display: block;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #111827;
}

.bd-testimonial-brand span {
  display: block;
  font-size: 13px;
  color: #6B7280;
}

.bd-testi-link {
  color: var(--bd-primary);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.bd-testi-link:hover {
  text-decoration: underline;
}

/* CTA banner (inside what section) */
.bd-cta-inner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #2563EB 0%, #1D4ED8 100%);
  color: #fff;
  border-radius: 20px;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.bd-cta-inner::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 220px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.25) 2px, transparent 3px);
  background-size: 16px 16px;
  pointer-events: none;
}

.bd-cta-visual {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.bd-cta-visual img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  display: block;
}

.bd-cta-copy {
  flex: 1;
  position: relative;
  z-index: 1;
}

.bd-cta-copy h3 {
  margin: 0 0 6px;
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  color: #fff;
}

.bd-cta-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 1.5;
  max-width: 520px;
}

.bd-cta-btn {
  flex-shrink: 0;
  background: #fff;
  color: var(--bd-primary);
  padding: 14px 24px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  transition: transform .15s, box-shadow .15s;
}

.bd-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Animations */
@keyframes bd-fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.bd-demo-card,
.bd-form-card,
.bd-tl-step,
.bd-testi-card,
.bd-cta-inner {
  will-change: transform, opacity;
}

/* Responsive */
@media (max-width: 1100px) {
  .bd-hero-inner {
    grid-template-columns: 1fr 440px;
    gap: 32px;
  }

  .bd-what-row {
    grid-template-columns: 1fr;
  }

  .bd-what-top {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 1024px) {
  .bd-hero-inner {
    grid-template-columns: 1fr;
  }

  .bd-form-card {
    max-width: 560px;
    margin: 0 auto;
  }

  .bd-demos-grid {
    grid-template-columns: 1fr 1fr;
  }

  .bd-timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .bd-timeline::before {
    display: none;
  }
}

@media (max-width: 768px) {
  .bd-page {
    padding: 32px 16px 56px;
  }

  .diffsize {
    font-size: 12px !important;
  }

  .bd-grid-2 {
    grid-template-columns: 1fr;
  }

  .bd-interest-grid {
    grid-template-columns: 1fr;
  }

  .bd-demos-grid {
    grid-template-columns: 1fr;
  }
.bd-ib-icon {
  width: 44px;
  height: 55px;
}
  .bd-timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 520px;
    margin: 0 auto;
  }
.bd-sub {
  margin-bottom: 20px;
}
  .bd-testi-card {
    padding: 22px 20px;
  }
.bd-benefits li span {
  font-size: 26px;
}
.bd-title {
  margin: 0 0 20px;
      font-size: clamp(25px, 2vw, 37px);
}
  .bd-cta-inner {
    flex-direction: column;
    text-align: center;
    padding: 28px 24px;
  }

  .bd-cta-copy p {
    max-width: none;
  }

  .bd-cta-btn {
    width: 100%;
    text-align: center;
  }

  .bd-author-info {
    justify-content: center;
  }
}

/* end css for get demo page */

/* ============================================================
   CONTACT US PAGE STYLES
   ============================================================ */

.contact-page {
  background-color: #FAFAFA;
  color: #111827;
  -webkit-font-smoothing: antialiased;
  font-family: 'Inter', sans-serif;
}

.contact-page a {
  text-decoration: none;
}

.contact-page button {
  font-family: inherit;
  cursor: pointer;
}

.contact-page input,
.contact-page textarea,
.contact-page select {
  font-family: inherit;
}

.cp-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Hero & Form Section */
.cp-hero {
  position: relative;
  background: #FFFFFF;
  padding: 20px 0 64px;
  overflow: hidden;
}

.cp-hero-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  background-image: radial-gradient(#E5E7EB 2px, transparent 2px);
  background-size: 20px 20px;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at top left, black, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at top left, black, transparent 70%);
}

.cp-hero-inner {
  display: flex;
  gap: 64px;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

/* Hero Text Side */
.cp-hero-text {
  flex: 0.85;
  padding-top: 24px;
}

.cp-label {
  display: inline-block;
  color: #2563EB;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.cp-title {
  font-size: clamp(40px, 4.5vw, 56px);
  font-weight: 800;
  line-height: 1.15;
  color: #111827;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.cp-desc {
  font-size: 18px;
  line-height: 1.6;
  color: #4B5563;
  margin-bottom: 40px;
}

.cp-benefits {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cp-benefits li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  color: #374151;
  font-weight: 500;
}

.cp-check-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #2563EB;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563EB;
}

.cp-check-icon i {
  width: 14px;
  height: 14px;
  stroke-width: 3px;
}

/* Form Side */
.cp-hero-form {
  flex: 1.15;
}

.cp-form-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 15px 35px 20px 35px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.03);
}

.cp-form-title {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 32px;
}

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

.cp-form-row {
  display: flex;
  gap: 24px;
}

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

.cp-form-group label {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.cp-required {
  color: #EF4444;
}

.cp-form-group input,
.cp-form-group textarea,
.cp-form-group select {
  padding: 12px 16px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 15px;
  color: #111827;
  outline: none;
  transition: all 0.2s;
  background: #FFFFFF;
}

.cp-form-group input::placeholder,
.cp-form-group textarea::placeholder {
  color: #9CA3AF;
}

.cp-form-group input:focus,
.cp-form-group textarea:focus,
.cp-form-group select:focus {
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.cp-select-wrapper {
  position: relative;
}

.cp-select-wrapper select {
  width: 100%;
  appearance: none;
  cursor: pointer;
}

.cp-select-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #6B7280;
  pointer-events: none;
  width: 18px;
  height: 18px;
}

.cp-form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.cp-char-count {
  font-size: 12px;
  color: #9CA3AF;
  text-align: right;
  margin-top: -4px;
}

.cp-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  gap: 24px;
}

.cp-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  position: relative;
  flex: 1;
}

.cp-checkbox-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.cp-checkbox-custom {
  width: 20px;
  height: 20px;
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-top: 2px;
}

.cp-checkbox-label input:checked~.cp-checkbox-custom {
  background: #2563EB;
  border-color: #2563EB;
}

.cp-checkbox-label input:checked~.cp-checkbox-custom::after {
  content: "";
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

.cp-checkbox-text {
  font-size: 14px;
  color: #4B5563;
  line-height: 1.5;
}

.cp-checkbox-text a {
  color: #2563EB;
  font-weight: 500;
}

.cp-checkbox-text a:hover {
  text-decoration: underline;
}

.cp-btn-primary {
  background: #2563EB;
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
}

.cp-btn-primary:hover {
  background: #1D4ED8;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px -2px rgba(37, 99, 235, 0.3);
}

.cp-btn-primary i {
  width: 18px;
  height: 18px;
}

/* Other Ways To Reach Us */
.cp-methods {
  padding: 0px 0;
  background: #FAFAFA;
  margin-bottom: 40px;
}

.cp-section-title {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 30px;
}

.cp-methods-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.cp-method-card {
  background: #FFFFFF;
  border: 1px solid #F3F4F6;
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
  transition: all 0.3s;
}

.cp-method-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .06), 0 6px 12px rgba(0, 0, 0, .04);
  border-color: #E5E7EB;
}

.cp-method-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.cp-method-icon i {
  width: 24px;
  height: 24px;
}

.cp-method-icon.green {
  background: #ECFDF5;
  color: #10B981;
}

.cp-method-icon.blue {
  background: #EFF6FF;
  color: #2563EB;
}

.cp-method-title {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px;
}

.cp-method-desc {
  font-size: 14px;
  line-height: 1.5;
  color: #4B5563;
  margin-bottom: 24px;
  min-height: 42px;
}

.cp-method-link {
  font-size: 15px;
  font-weight: 600;
  color: #2563EB;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}

.cp-method-link:hover {
  gap: 10px;
}

.cp-method-link i {
  width: 16px;
  height: 16px;
}

/* Bottom Grid Layout */
.cp-bottom {
  padding: 0 0 80px;
  background: #FAFAFA;
}

.cp-bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

/* Map Section */
.cp-map-section {
  grid-column: 1 / 2;
  height: 100%;
}

.cp-map-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.cp-map-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cp-map-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
}

.cp-map-marker {
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -100%);
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 4px 6px rgba(37, 99, 235, 0.3));
}

.cp-map-card {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: #FFFFFF;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  max-width: 280px;
}

.cp-map-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
}

.cp-map-card-address {
  font-size: 13px;
  line-height: 1.5;
  color: #4B5563;
  margin-bottom: 16px;
}

.cp-map-card-link {
  font-size: 14px;
  font-weight: 600;
  color: #2563EB;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Office Details */
.cp-office-section {
  grid-column: 2 / 3;
}

.cp-office-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
  height: 100%;
  border: 1px solid #F3F4F6;
}

.cp-office-title {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 32px;
}

.cp-office-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cp-office-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.cp-office-list i {
  color: #2563EB;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.cp-office-list strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}

.cp-office-list p,
.cp-office-list span {
  font-size: 15px;
  line-height: 1.5;
  color: #4B5563;
}

.cp-social-links {
  display: flex;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid #F3F4F6;
}

.cp-social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4B5563;
  transition: all 0.2s;
}

.cp-social-icon:hover {
  background: #F3F4F6;
  color: #111827;
}

/* FAQ Section */
.cp-faq-section {
  grid-column: 1 / 2;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
  border: 1px solid #F3F4F6;
}

.cp-faq-title {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 24px;
}

.cp-faq-item {
  border-bottom: 1px solid #F3F4F6;
}

.cp-faq-item:last-of-type {
  border-bottom: none;
  margin-bottom: 24px;
}

.cp-faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  background: none;
  border: none;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  text-align: left;
}

.cp-faq-icon {
  width: 20px;
  height: 20px;
  color: #9CA3AF;
  transition: transform 0.3s;
}

.cp-faq-trigger[aria-expanded="true"] .cp-faq-icon {
  transform: rotate(180deg);
}

.cp-faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.cp-faq-trigger[aria-expanded="true"]+.cp-faq-content {
  max-height: 150px;
}

.cp-faq-content p {
  padding-bottom: 20px;
  color: #4B5563;
  font-size: 14px;
  line-height: 1.6;
}

.cp-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #2563EB;
}

/* CTA Section */
.cp-cta-section {
  grid-column: 2 / 3;
}

.cp-cta-card {
  background: #F8FAFC;
  border-radius: 16px;
  padding: 40px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.cp-cta-icon-wrapper {
  width: 56px;
  height: 56px;
  background: #2563EB;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
  box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
}

.cp-cta-content {
  position: relative;
  z-index: 2;
}

.cp-cta-title {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px;
}

.cp-cta-desc {
  font-size: 15px;
  color: #4B5563;
  line-height: 1.5;
  margin-bottom: 24px;
  max-width: 90%;
}

.cp-cta-pattern {
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  background-image: radial-gradient(#BFDBFE 2px, transparent 2px);
  background-size: 16px 16px;
  opacity: 0.6;
  border-radius: 50%;
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .cp-hero-inner {
    flex-direction: column;
    gap: 48px;
  }

  .cp-hero-text {
    flex: none;
    max-width: 100%;
    text-align: left;
  }

  .cp-desc {
    margin: 0 auto 40px;
  }

  .cp-benefits {
    align-items: center;
  }

  .cp-hero-form {
    flex: none;
    width: 100%;
  }

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

  .cp-bottom-grid {
    grid-template-columns: 1fr;
  }

  .cp-map-wrapper {
    min-height: 400px;
  }
}

@media (max-width: 768px) {
  .cp-container {
    padding: 0 20px;
  }

  .cp-hero-text {
    padding-top: 10px;
  }

  /* Hero Section */
  .cp-hero {
    padding: 0px 30px;
  }

  .cp-hero-bg-pattern {
    display: none;
  }

  .cp-hero-inner {
    gap: 32px;
  }

  .cp-label {
    font-size: 12px;
    margin-bottom: 16px;
  }

  .cp-title {
    margin-bottom: 16px;
    line-height: 1.2;
    font-weight: 700;
    font-size: clamp(35px, 2.5vw, 18px);
  }

  .cp-desc {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
  }

  .cp-benefits {
    gap: 12px;
    align-items: flex-start;
  }

  .cp-benefits li {
    font-size: 14px;
    text-align: left;
  }

  .cp-check-icon {
    width: 20px;
    height: 20px;
  }

  .cp-check-icon i {
    width: 12px;
    height: 12px;
  }

  /* Form Card */
  .cp-form-card {
    padding: 24px 20px;
    border-radius: 12px;
  }

  .cp-form-title {
    font-size: 20px;
    margin-bottom: 24px;
  }

  .cp-form {
    gap: 20px;
  }

  .cp-form-row {
    flex-direction: column;
    gap: 20px;
  }

  .cp-form-group label {
    font-size: 13px;
  }

  .cp-form-group input,
  .cp-form-group textarea,
  .cp-form-group select {
    padding: 14px 16px;
    font-size: 15px;
  }

  .cp-form-group textarea {
    min-height: 100px;
  }

  .cp-char-count {
    font-size: 11px;
  }

  .cp-form-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin-top: 4px;
  }

  .cp-checkbox-text {
    font-size: 13px;
    line-height: 1.4;
  }

  .cp-btn-primary {
    width: 100%;
    padding: 16px 24px;
    font-size: 15px;
  }

  /* Methods Section */
  .cp-methods {
    padding: 48px 0;
  }

  .cp-section-title {
    font-size: 24px;
    margin-bottom: 32px;
  }

  .cp-methods-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cp-method-card {
    padding: 24px 20px;
    border-radius: 12px;
  }

  .cp-method-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
  }

  .cp-method-icon i {
    width: 20px;
    height: 20px;
  }

  .cp-method-title {
    font-size: 16px;
    margin-bottom: 8px;
  }

  .cp-method-desc {
    font-size: 13px;
    margin-bottom: 16px;
    min-height: auto;
  }

  .cp-method-link {
    font-size: 14px;
  }

  /* Bottom Section */
  .cp-bottom {
    padding: 0 0 48px;
  }

  .cp-bottom-grid {
    gap: 0px;
  }

  /* Map */
  .cp-map-wrapper {
    min-height: 300px;
    border-radius: 12px;
  }

  .cp-map-marker {
    width: 32px;
    height: 32px;
  }

  .cp-map-card {
    position: relative;
    bottom: auto;
    left: auto;
    margin: -32px 20px 20px !important;
    padding: 20px;
    border-radius: 12px;
    max-width: none;
  }

  .cp-map-card-title {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .cp-map-card-address {
    font-size: 12px;
    margin-bottom: 12px;
  }

  .cp-map-card-link {
    font-size: 13px;
  }

  /* Office */
  .cp-office-card {
    padding: 24px 20px;
    border-radius: 12px;
  }

  .cp-office-title {
    font-size: 20px;
    margin-bottom: 24px;
  }

  .cp-office-list {
    gap: 20px;
    margin-bottom: 24px;
  }

  .cp-office-list li {
    gap: 12px;
  }

  .cp-office-list i {
    width: 20px;
    height: 20px;
  }

  .cp-office-list strong {
    font-size: 14px;
  }

  .cp-office-list p,
  .cp-office-list span {
    font-size: 13px;
  }

  .cp-social-links {
    gap: 10px;
    padding-top: 20px;
  }

  .cp-social-icon {
    width: 36px;
    height: 36px;
  }

  /* FAQ */
  .cp-faq-section {
    padding: 24px 20px;
    border-radius: 12px;
  }

  .cp-faq-title {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .cp-faq-trigger {
    font-size: 14px;
    padding: 16px 0;
  }

  .cp-faq-icon {
    width: 18px;
    height: 18px;
  }

  .cp-faq-content p {
    font-size: 13px;
    padding-bottom: 16px;
  }

  .cp-view-all {
    font-size: 13px;
  }

  /* CTA */
  .cp-cta-card {
    padding: 24px 20px;
    border-radius: 12px;
  }

  .cp-cta-icon-wrapper {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
  }

  .cp-cta-icon-wrapper i {
    width: 20px;
    height: 20px;
  }

  .cp-cta-title {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .cp-cta-desc {
    font-size: 14px;
    margin-bottom: 20px;
    max-width: 100%;
  }

  .cp-cta-pattern {
    width: 150px;
    height: 150px;
    bottom: -30px;
    right: -30px;
  }
}

@media (max-width: 480px) {
  .cp-container {
    padding: 0 30px;
  }

  .cp-hero {
    padding: 0px 0 40px;
  }

  .cp-title {
    font-size: clamp(34px, 1.5vw, 16px);
  }

  .cp-desc {
    font-size: 14px;
  }

  .cp-form-card {
    padding: 20px 16px;
  }

  .cp-form-title {
    font-size: 18px;
  }

  .cp-form-group input,
  .cp-form-group textarea,
  .cp-form-group select {
    padding: 12px 14px;
    font-size: 14px;
  }

  .cp-method-card {
    padding: 20px 16px;
  }

  .cp-map-card {
    margin: -28px 16px 16px;
    padding: 16px;
  }

  .cp-office-card,
  .cp-faq-section,
  .cp-cta-card {
    padding: 20px 16px;
  }
}

/* End of contact us page css */


/* ============================================================
   ZODO ABOUT US PAGE — PIXEL-PERFECT STYLES
   ============================================================ */

/* CSS Variables */
:root {
  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Color Palette */
  --color-primary: #0066FF;
  --color-primary-hover: #0052cc;
  --color-primary-light: #EFF6FF;
  --color-text-dark: #0F172A;
  --color-text-muted: #6B7280;
  --color-text-light: #1F2937;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-bg-light: #F8FAFC;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --max-width: 1350px;
}

.abb-hero-desc {
  font-size: 16px;
  line-height: 1.6;
  color: #4B5563;
  margin-bottom: 15px;
  max-width: 500px;
  font-weight:500;
}


/* Page Wrapper Scope */
.about-page-wrapper {
  font-family: var(--font-inter);
  color: var(--color-text-light);
  background-color: #FFFFFF;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.abb-hero-title {
  font-size: clamp(32px, 1.5vw, 46px);
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: 15px;
}

/* Base Components & Spacing */
.about-container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.about-section {
  padding: 20px 0;
  position: relative;
}

/* Badges & Text styles */
.about-badge {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  display: inline-block;
}

.about-title {
  font-size: clamp(25px, 2.5vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-text-dark);
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.about-desc {
  font-size: 16px;
  line-height: 1.6;
  color: #3c3c3c;
  margin-bottom: 20px;
  font-weight: 500;
}

/* Buttons */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  transition: var(--transition-smooth);
  cursor: pointer;
  text-decoration: none;
  gap: 8px;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 102, 255, 0.3);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background-color: #FFFFFF;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-secondary:hover {
  background-color: var(--color-primary-light);
  transform: translateY(-2px);
}

.btn-secondary:active {
  transform: translateY(0);
}

/* ==========================================
   1. HERO SECTION
   ========================================== */
.about-hero {
  padding: 47px 0 16px 0;
  background-color: #FFFFFF;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 700px);
  gap: 64px;
  align-items: center;
  justify-content: space-between;
}

.hero-content {
  max-width: 560px;
}

.hero-content .about-title {
  margin-bottom: 24px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

.hero-illustration {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.dashboard-mockup-wrapper {
  width: 100%;
  max-width: 720px;
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  background: #FFFFFF;
  transition: var(--transition-smooth);
}

.dashboard-mockup-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

.dashboard-mockup-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ==========================================
   2. PARTNER LOGOS
   ========================================== */
.about-partners {
  padding: 0px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background-color: #FFFFFF;
  text-align: center;
  padding-bottom:15px;
}

.partners-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 24px;
}

.partners-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.partner-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
  color: #1F2937;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.5;
  transition: var(--transition-smooth);
  cursor: pointer;
}

.partner-logo i {
  font-size: 20px;
  color: #374151;
}

.partner-logo:hover {
  opacity: 0.9;
  transform: scale(1.05);
}

/* ==========================================
   3. COMPANY JOURNEY
   ========================================== */
.about-journey {
  background-color: #FFFFFF;
}

.journey-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.journey-image-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0, 0, 0, 0.05);
  aspect-ratio: 3/2;
}

.journey-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.journey-image-wrapper:hover .journey-image {
  transform: scale(1.04);
}

.journey-content {
  max-width: 520px;
}

.journey-content .about-title {
  margin-bottom: 20px;
}

.journey-content .about-desc {
  margin-bottom: 16px;
  font-size: 15px;
}

.journey-content .btn-secondary {
  margin-top: 24px;
}

/* ==========================================
   4. STATISTICS BANNER
   ========================================== */
.stats-banner {
  background-color: var(--color-primary-light);
  border: 1px solid rgba(0, 102, 255, 0.08);
  border-radius: 20px;
  padding: 40px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  text-align: left;
  margin-top: 60px;
  box-shadow: 0 4px 20px rgba(0, 102, 255, 0.02);
}

.stat-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 20px 20px;
  background-color: #FFFFFF;
  border-radius: 18px;
  border: 1px solid rgba(0, 102, 255, 0.1);
  min-height: 132px;
  overflow: hidden;
}

.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -12px;
  top: 16%;
  height: 68%;
  width: 1px;
  background-color: rgba(0, 102, 255, 0.15);
}

.stat-icon {
  width: 35px;
  height: 35px;
  min-width: 35px;
  border-radius: 12px;
  background: rgba(0, 102, 255, 0.08);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}

.stat-item:hover .stat-icon {
  background: var(--color-primary);
  color: #FFFFFF;
  transform: scale(1.05);
}

.stat-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

.stat-number {
  font-size: 32px;
  font-weight: 800;
  color: var(--color-text-dark);
  line-height: 1.1;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

/* ==========================================
   5. COMPANY VALUES
   ========================================== */
.about-values {
  background-color: #FFFFFF;
}

.values-header {
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}

.values-subtitle {
  font-size: 16px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.value-card {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
}

.value-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(0, 102, 255, 0.15);
}

.value-icon-box {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: 20px;
  transition: var(--transition-smooth);
}

.value-card:hover .value-icon-box {
  transform: rotate(10deg) scale(1.05);
}

/* Value specific icon backgrounds */
.value-card--customer .value-icon-box {
  background-color: #ECFDF5;
  color: #10B981;
}

.value-card--innovation .value-icon-box {
  background-color: #EFF6FF;
  color: #3B82F6;
}

.value-card--integrity .value-icon-box {
  background-color: #F5F3FF;
  color: #8B5CF6;
}

.value-card--excellence .value-icon-box {
  background-color: #FFF7ED;
  color: #F97316;
}

.value-card--together .value-icon-box {
  background-color: #FDF2F8;
  color: #EC4899;
}

.value-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 12px;
}

.value-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ==========================================
   6. PRODUCT SHOWCASE
   ========================================== */
.about-product-showcase {
  background-color: var(--color-bg-light);
}

.product-showcase-card {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: 56px;
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

.product-info .about-title {
  font-size: clamp(26px, 3.5vw, 36px);
  margin-bottom: 16px;
}

.product-info .about-desc {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 28px;
}

.product-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  margin-bottom: 36px;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-dark);
}

.checklist-item i {
  color: var(--color-primary);
  font-size: 14px;
}

.product-preview-box {
  background-color: var(--color-bg-light);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 18px;
  padding: 40px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.01);
}

.product-logo-wrapper {
  margin-bottom: 8px;
}

.product-logo-text {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-text-dark);
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-logo-badge {
  font-size: 14px;
  font-weight: 700;
  color: black;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.product-preview-tagline {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 32px;
}

.product-preview-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  width: 100%;
}

.product-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: var(--transition-smooth);
}

.product-grid-item:hover {
  transform: translateY(-3px);
}

.product-grid-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: #EFF6FF;
  border: 1px solid rgba(0, 102, 255, 0.08);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: 8px;
  transition: var(--transition-smooth);
}

.product-grid-item:hover .product-grid-icon {
  background-color: var(--color-primary);
  color: #FFFFFF;
}

.product-grid-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* ==========================================
   7. TEAM SECTION
   ========================================== */
.about-team {
  background-color: #FFFFFF;
}

.team-header {
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 35px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.team-card {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
}

.team-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(0, 102, 255, 0.15);
}

.team-image-box {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  background-color: #F3F4F6;
}

.team-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.team-card:hover .team-img {
  transform: scale(1.05);
}

.team-info {
  padding: 16px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.team-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 4px;
}

.team-role {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.team-social {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #0077B5;
  font-size: 15px;
  transition: var(--transition-smooth);
}

.team-social:hover {
  opacity: 0.8;
  transform: scale(1.1);
}

.team-cta-wrapper {
  text-align: center;
}

/* ==========================================
   8. CTA BANNER
   ========================================== */
.about-cta {
  background-color: var(--color-primary-light);
  border: 1px solid rgba(0, 102, 255, 0.08);
  border-radius: 20px;
  padding: 40px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  box-shadow: 0 4px 20px rgba(0, 102, 255, 0.01);
}

.cta-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.cta-icon-box {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 102, 255, 0.25);
  animation: floatRocket 3s ease-in-out infinite;
}

@keyframes floatRocket {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

.cta-text-wrapper {
  max-width: 500px;
}

.cta-headline {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.cta-subtext {
  font-size: 14px;
  color: var(--color-text-muted);
}

/* ==========================================
   RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================== */

/* Max Width 1440px */
@media (max-width: 1440px) {
  .about-container {
    max-width: 1140px;
  }
}

/* Max Width 1280px */
@media (max-width: 1280px) {
  .about-container {
    max-width: 1024px;
  }

  .hero-grid {
    gap: 48px;
  }

  .journey-grid {
    gap: 48px;
  }
}

/* Max Width 1024px — Laptop Breakpoint */
@media (max-width: 1024px) {
  .about-container {
    max-width: 960px;
  }

  .about-section {
    padding: 80px 0;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hero-content {
    max-width: 100%;
    text-align: left;
  }

  .hero-content .about-title {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-illustration {
    justify-content: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  .dashboard-mockup-wrapper {
    max-width: 100%;
  }

  .journey-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .journey-content {
    max-width: 100%;
    text-align: left;
  }

  .journey-image-wrapper {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  .stats-banner {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    padding: 32px 24px;
  }

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

  .product-showcase-card {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 40px;
  }

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

/* Max Width 992px */
@media (max-width: 992px) {
  .about-container {
    max-width: 720px;
  }

  .partners-grid {
    justify-content: center;
    gap: 32px 48px;
  }
}

/* Max Width 768px — Tablet Breakpoint */
@media (max-width: 768px) {
  .about-container {
    max-width: 100%;
    padding-left: 30px;
    padding-right: 30px;
  }
.abb-hero-title {
  font-size: clamp(25px, 1.5vw, 46px);
}

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

  .about-title {
    font-size: 28px;
    margin-bottom: 16px;
  }

  .about-badge {
    margin-bottom: 12px;
  }

  .hero-illustration {
    justify-content: center;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 8px;
  }

  .dashboard-mockup-wrapper {
    width: 100%;
    max-width: 100%;
  }

  .dashboard-mockup-img {
    width: 100%;
    height: auto;
    min-width: 0;
    object-fit: contain;
    display: block;
  }

  .stats-banner {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 24px;
  }

  .stat-item {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px;
    min-height: auto;
  }

  .stat-item:not(:last-child)::after {
    display: none !important;
  }

  .stat-content {
    align-items: center;
  }

  .stat-number {
    font-size: 26px;
  }

  .stat-icon {
    width: 35px;
    height: 35px;
    font-size: 16px;
    margin-bottom: 0;
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .team-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .about-cta {
    flex-direction: column;
    text-align: center;
    gap: 28px;
    padding: 32px 24px;
  }

  .cta-left {
    flex-direction: column;
    gap: 16px;
  }

  .cta-text-wrapper {
    max-width: 100%;
  }

  .cta-icon-box {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}

/* Max Width 576px — Mobile Grid & Swiper */
@media (max-width: 576px) {
  .about-section {
    padding: 20px 0;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top:5px;
  }

  .hero-illustration {
    justify-content: center;
    width: 100%;
  }

  .dashboard-mockup-wrapper {
    max-width: 100%;
  }

  .dashboard-mockup-img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary {
    width: 100%;
    padding: 12px 20px;
  }

  .partners-grid {
    gap: 16px 24px;
    justify-content: center;
  }

  .partner-logo {
    font-size: 11px;
    gap: 6px;
  }

  .partner-logo svg {
    width: 18px;
    height: 18px;
  }

  /* Compact structured layout for Values (no horizontal overflow) */
  .values-header {
    margin-bottom: 24px;
    align-items:left;
  }

  .values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .value-card {
    padding: 16px 12px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
  }

  .value-card:last-child {
    grid-column: span 2;
    /* Centered 5th item */
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .value-icon-box {
    width: 36px;
    height: 36px;
    font-size: 16px;
    margin-bottom: 12px;
  }

  .value-title {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .value-desc {
    font-size: 11.5px;
    line-height: 1.4;
  }

  /* 3-column + 2-column compact centered wrap layout for stats (no overflow) */
  .stats-banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 12px;
    padding: 20px 12px;
    border-radius: 16px;
  }

  .stat-item {
    flex: 0 0 calc(33.33% - 8px);
    /* Fits 3 items on row 1 */
    min-width: 85px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 12px;
  }

  .stat-item:not(:last-child)::after {
    display: none !important;
  }

  .stat-content {
    align-items: center;
  }

  .stat-icon {
    width: 35px;
    height: 35px;
    font-size: 14px;
    margin-bottom: 0;
  }

  .stat-number {
    font-size: 20px;
    margin-bottom: 2px;
  }

  .stat-label {
    font-size: 11px;
    white-space: normal;
  }

  .product-checklist {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .product-preview-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }

  .product-grid-icon {
    width: 36px;
    height: 36px;
    font-size: 14px;
    margin-bottom: 4px;
  }

  .product-grid-label {
    font-size: 9px;
  }

  .product-preview-box {
    padding: 24px 16px;
  }

  .product-showcase-card {
    padding: 32px 16px;
    border-radius: 16px;
  }

  /* 2-column compact team directory layout */
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 32px;
  }

  .team-card {
    border-radius: 12px;
  }

  .team-info {
    padding: 12px 8px;
  }

  .team-name {
    font-size: 13px;
  }

  .team-role {
    font-size: 10px;
    margin-bottom: 8px;
  }

  .team-social {
    font-size: 14px;
  }
}

/* Max Width 400px — Extra Small Mobile */
@media (max-width: 400px) {
  .about-title {
    font-size: 24px;
  }

  .stats-banner {
    padding: 16px 8px;
    gap: 12px 8px;
  }

  .stat-item {
    flex: 0 0 calc(50% - 6px);
    /* 2 items per row on tiny devices */
  }

  .product-preview-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 8px;
  }
}

/* Smooth Entrance Scroll Animations */
.animate-fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fallback default when JS is not active */
.no-js .animate-fade-up {
  opacity: 1;
  transform: translateY(0);
}

/* end for about us css */

/* ==========================================================
BLOG PAGE STARTS CSS HERE
========================================================== */

/* Blog CSS Variables */
:root {
  --blog-bg: #FFFFFF;
  --blog-secondary: #F8FAFC;
  --blog-card-bg: #FFFFFF;
  --blog-primary: #2563EB;
  --blog-border: #E6EAF2;
  --blog-text: #111827;
  --blog-text-sec: #667085;
  --blog-shadow: 0 10px 40px rgba(15, 23, 42, .05);
  --blog-shadow-hover: 0 20px 60px rgba(15, 23, 42, .08);
  --blog-radius-card: 24px;
  --blog-radius-btn: 14px;
  --blog-radius-input: 16px;
  --blog-radius-img: 20px;
}

/* Global Reset for Blog */
.blog-page {
  font-family: 'Inter', sans-serif;
  background-color: var(--blog-bg);
  color: var(--blog-text);
  overflow-x: hidden;
}

.blog-page * {
  box-sizing: border-box;
}

/* Common Text Colors */
.text-blue {
  color: #2563EB;
}

.text-green {
  color: #10B981;
}

.text-purple {
  color: #6366F1;
}

.text-orange {
  color: #F97316;
}

.text-dark {
  color: #111827;
}

/* Backgrounds for Illustrations */
.blog-bg-green {
  background-color: #ECFDF5;
}

.blog-bg-purple {
  background-color: #EEF2FF;
}

.blog-bg-orange {
  background-color: #FFF7ED;
}

.blog-bg-blue {
  background-color: #EFF6FF;
}

.blog-bg-dark {
  background-color: #F8FAFC;
}

.blog-bg-light {
  background-color: #F1F5F9;
}

/* ----------------------------------------------------------
   HERO SECTION
---------------------------------------------------------- */
.blog-hero {
  width: 100%;
  padding: 60px 32px;
  position: relative;
  background: linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%);
}

.blog-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
}

.blog-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.blog-badge {
  display: inline-block;
  padding: 6px 16px;
  background-color: #EFF6FF;
  color: var(--blog-primary);
  font-weight: 600;
  font-size: 14px;
  border-radius: 20px;
}

.blog-title {
  font-size: clamp(2.5rem, 2vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--blog-text);
  margin: 0;
}

.blog-desc {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--blog-text-sec);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 0 10px 0;
}

.blog-search-container {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 440px;
  background: var(--blog-card-bg);
  border: 1px solid var(--blog-border);
  border-radius: var(--blog-radius-input);
  padding: 12px 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: box-shadow 0.3s ease;
}

.blog-search-container:focus-within {
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.1);
  border-color: #BFDBFE;
}

.blog-search-icon,
.blog-search-icon-right {
  color: #9CA3AF;
  width: 20px;
  height: 20px;
}

.blog-search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 16px;
  font-size: 16px;
  font-family: inherit;
  color: var(--blog-text);
  background: transparent;
}

.blog-search-input::placeholder {
  color: #9CA3AF;
}

/* Hero Visual & Floating Badges */
.blog-hero-visual {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.blog-hero-dash-wrap {
  position: relative;
  width: 100%;
  max-width: 640px;
  z-index: 2;
}

.blog-hero-dash-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
  z-index: -1;
  filter: blur(40px);
}

.blog-hero-dash-img {
  width: 85%;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(15, 23, 42, 0.1));
}

.blog-floating-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--blog-card-bg);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  font-weight: 600;
  font-size: 14px;
  z-index: 10;
  animation: float 4s ease-in-out infinite;
}

.blog-badge-crm {
  top: 10%;
  left: -20px;
  color: #3B82F6;
  background: #EFF6FF;
  animation-delay: 0s;
}

.blog-badge-sales {
  top: 45%;
  left: -40px;
  color: #F59E0B;
  background: #FFFBEB;
  animation-delay: 1s;
}

.blog-badge-sales i {
  color: #F59E0B;
  width: 16px;
  height: 16px;
}

.blog-badge-ai {
  top: -5%;
  right: 20px;
  color: #10B981;
  background: #ECFDF5;
  animation-delay: 0.5s;
}

.blog-badge-ai i {
  color: #10B981;
  width: 16px;
  height: 16px;
}

.blog-badge-prod {
  bottom: 15%;
  right: -10px;
  color: #8B5CF6;
  background: #F5F3FF;
  animation-delay: 1.5s;
}

.blog-badge-prod i {
  color: #8B5CF6;
  width: 16px;
  height: 16px;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* ----------------------------------------------------------
   FEATURED ARTICLE
---------------------------------------------------------- */
.blog-featured {
  width: 100%;
  padding: 40px 32px;
}

.blog-featured-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.blog-featured-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  background: var(--blog-card-bg);
  border-radius: var(--blog-radius-card);
  box-shadow: var(--blog-shadow);
  padding: 24px;
  align-items: center;
  transition: box-shadow 0.3s ease;
}

.blog-featured-card:hover {
  box-shadow: var(--blog-shadow-hover);
}

.blog-featured-img-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--blog-radius-img);
  overflow: hidden;
  background: #F1F5F9;
}

.blog-featured-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.blog-featured-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--blog-primary);
  color: white;
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  z-index: 5;
}

/* Floating Stats on Featured Image */
.blog-stat-card {
  position: absolute;
  background: white;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 5;
}

.blog-stat-jobs {
  top: 40%;
  left: 16px;
}

.blog-stat-leads {
  bottom: 24px;
  right: 24px;
}

.blog-stat-label {
  font-size: 11px;
  color: var(--blog-text-sec);
  font-weight: 500;
}

.blog-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #10B981;
}

.blog-featured-content {
  padding: 24px 32px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog-cat-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.blog-featured-title {
  font-size: clamp(1.75rem, 1.5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}

.blog-featured-desc {
  font-size: 16px;
  color: var(--blog-text-sec);
  line-height: 1.6;
  margin: 0;
}

.blog-meta-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.blog-author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blog-avatars {
  display: flex;
  align-items: center;
}

.blog-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid white;
  object-fit: cover;
}

.avatar-overlap {
  margin-left: -12px;
}

.blog-meta-text {
  font-size: 14px;
  color: var(--blog-text-sec);
  font-weight: 500;
}

.blog-arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--blog-border);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--blog-primary);
  transition: all 0.2s ease;
}

.blog-arrow-btn:hover {
  background: var(--blog-primary);
  color: white;
  border-color: var(--blog-primary);
}

/* ----------------------------------------------------------
   MAIN LAYOUT & CATEGORIES
---------------------------------------------------------- */
.blog-main-layout {
  width: 100%;
  padding: 40px 32px 60px;
}

.blog-main-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.blog-details-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blog-content-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  min-height: 100%;
}

.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 100%;
}

.blog-category-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.blog-category-filter::-webkit-scrollbar {
  display: none;
}

.blog-cat-pill {
  padding: 10px 20px;
  border: 1px solid var(--blog-border);
  border-radius: 20px;
  background: white;
  color: var(--blog-text-sec);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.blog-cat-pill:hover {
  border-color: #CBD5E1;
  color: var(--blog-text);
}

.blog-cat-pill.active {
  background: var(--blog-primary);
  color: white;
  border-color: var(--blog-primary);
}

/* ----------------------------------------------------------
   BLOG LIST
---------------------------------------------------------- */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.blog-card {
  display: flex;
  background: var(--blog-card-bg);
  border: 1px solid var(--blog-border);
  border-radius: var(--blog-radius-card);
  padding: 16px;
  gap: 24px;
  align-items: center;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.blog-card:hover {
  box-shadow: var(--blog-shadow-hover);
  transform: translateY(-2px);
}

.blog-card-img-wrap {
  width: 118px;
  height: 118px;
  border-radius: var(--blog-radius-img);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 8px 0;
}

.blog-card-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  color: var(--blog-text);
}

.blog-card-desc {
  font-size: 15px;
  color: var(--blog-text-sec);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----------------------------------------------------------
   SIDEBAR
---------------------------------------------------------- */
.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.blog-sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.blog-sidebar-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--blog-text);
}

.blog-sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--blog-card-bg);
  border: 1px solid var(--blog-border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--blog-text);
  font-weight: 500;
  font-size: 14px;
  transition: border-color 0.2s;
}

.blog-sidebar-link:hover {
  border-color: #CBD5E1;
}

.blog-scl-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blog-scl-left i {
  width: 18px;
  height: 18px;
}

.blog-count {
  color: var(--blog-text-sec);
}

/* Popular Posts */
.blog-popular-posts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog-popular-post {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}

.blog-pp-img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-pp-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.blog-pp-content h4 {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  color: var(--blog-text);
  transition: color 0.2s;
}

.blog-popular-post:hover .blog-pp-content h4 {
  color: var(--blog-primary);
}

.blog-pp-content span {
  font-size: 12px;
  color: var(--blog-text-sec);
}

.blog-view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blog-primary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  margin-top: 8px;
}

.blog-view-all i {
  width: 16px;
  height: 16px;
}

/* Newsletter */
.blog-newsletter {
  background: var(--blog-secondary);
  border-radius: var(--blog-radius-card);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.blog-nl-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
}

.blog-nl-desc {
  font-size: 14px;
  color: var(--blog-text-sec);
  line-height: 1.5;
  margin: 0 0 8px 0;
}

.blog-nl-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blog-nl-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--blog-border);
  border-radius: var(--blog-radius-btn);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.blog-nl-input:focus {
  border-color: var(--blog-primary);
}

.blog-nl-btn {
  width: 100%;
  padding: 14px;
  background: var(--blog-primary);
  color: white;
  border: none;
  border-radius: var(--blog-radius-btn);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.blog-nl-btn:hover {
  background: #1D4ED8;
}

.blog-nl-spam {
  font-size: 12px;
  color: var(--blog-text-sec);
  text-align: center;
  margin-top: 4px;
}

/* ----------------------------------------------------------
   PAGINATION
---------------------------------------------------------- */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.blog-page-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--blog-text);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.blog-page-btn:hover:not(.blog-page-dots) {
  background: var(--blog-secondary);
}

.blog-page-btn.active {
  background: var(--blog-primary);
  color: white;
  font-weight: 600;
}

.blog-page-dots {
  cursor: default;
}

/* ----------------------------------------------------------
   RESPONSIVE DESIGN
---------------------------------------------------------- */
@media (max-width: 1200px) {
  .blog-main-inner {
    grid-template-columns: 1fr 300px;
    gap: 32px;
  }
}

@media (max-width: 992px) {
  .blog-hero-inner {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .blog-hero-content {
    align-items: left;
  }

  .blog-desc {
    margin: 0 auto 10px;
  }

  .blog-featured-card {
    grid-template-columns: 1fr;
  }

  .blog-featured-img-wrap {
    width: 100%;
  }

  .blog-main-inner {
    grid-template-columns: 1fr;
  }

  .blog-sidebar {
    position: static;
  }
}

@media (max-width: 768px) {
  .blog-hero {
    padding: 20px 30px;
  }
  .blog-author-info {
    gap: 30px;
  }
  .blog-featured-title {
    font-size: clamp(1.2rem, 1.5vw, 1.25rem);
  }
  .blog-featured {
    padding: 20px;
  }

  .blog-main-layout {
    padding: 20px 20px 20px;
  }

  .blog-main-inner {
    grid-auto-rows: auto;
  }

  .blog-sidebar {
    min-height: auto;
  }

  .blog-card {
    flex-direction: column;
    padding: 16px;
  }

  .blog-card-img-wrap {
    width: 35%;
    height: auto;
    aspect-ratio: 13 / 13;
  }

  .blog-stat-card {
    padding: 8px 12px;
  }

  .blog-stat-value {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .blog-title {
    font-size: 2rem;
  }

  .blog-search-container {
    padding: 10px 16px;
  }

  .blog-floating-badge {
    padding: 6px 12px;
    font-size: 12px;
  }

  .blog-badge-sales {
    left: -10px;
  }

  .blog-badge-crm {
    left: 10px;
  }

  .blog-badge-ai {
    right: 10px;
  }

  .blog-badge-prod {
    right: -10px;
  }

  .blog-main-layout {
    padding-bottom: 20px;
  }

  .section-footer {
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 20px;
  }
}

/* ==========================================================
BLOG PAGE ENDS CSS HERE
========================================================== */

/* ==========================================================
BLOG DETAILS PAGE STARTS CSS HERE
========================================================== */

:root {
  --bdet-bg: #FFFFFF;
  --bdet-sec-bg: #F8FAFC;
  --bdet-primary: #2563EB;
  --bdet-text: #111827;
  --bdet-text-sec: #474747;
  --bdet-border: #E5E7EB;
  --bdet-shadow: 0 10px 40px rgba(15, 23, 42, .05);
  --bdet-shadow-hero: 0 16px 50px rgba(0, 0, 0, .12);
  --bdet-radius: 20px;
  --bdet-radius-btn: 14px;
}

.blog-details-page {
  font-family: 'Inter', sans-serif;
  background: var(--bdet-bg);
  color: var(--bdet-text);
  overflow-x: hidden;
}

.blog-details-page * {
  box-sizing: border-box;
}

/* ----------------------------------------------------------
   HERO SECTION
---------------------------------------------------------- */
.blog-details-hero {
  width: 100%;
  padding: 40px 32px;
  background: var(--bdet-bg);
}

.blog-details-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.blog-details-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--bdet-text-sec);
  flex-wrap: wrap;
}

.blog-details-breadcrumb a {
  color: var(--bdet-text-sec);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.blog-details-breadcrumb a:hover {
  color: var(--bdet-text);
}

.blog-details-breadcrumb i {
  width: 14px;
  height: 14px;
}

.blog-details-breadcrumb span {
  color: var(--bdet-text);
  font-weight: 500;
}

.blog-details-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.blog-details-hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.blog-details-badge {
  display: inline-block;
  padding: 6px 14px;
  background-color: #EFF6FF;
  color: var(--bdet-primary);
  font-weight: 700;
  font-size: 12px;
  border-radius: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-details-title {
  font-size: clamp(2.25rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--bdet-text);
  margin: 0;
}

.blog-details-desc {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--bdet-text-sec);
  line-height: 1.6;
  margin: 0;
}

.blog-details-author-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.blog-details-author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-details-author-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: contain;
  background: white;
  border: 1px solid var(--bdet-border);
  padding: 2px;
}

.blog-details-author-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--bdet-text);
}

.blog-details-meta-dot {
  color: #D1D5DB;
  font-size: 16px;
}

.blog-details-meta-text {
  font-size: 14px;
  color: var(--bdet-text-sec);
  font-weight: 500;
}

.blog-details-share {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.blog-details-share-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--bdet-text);
  margin-right: 4px;
}

.blog-details-share-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bdet-sec-bg);
  color: var(--bdet-text-sec);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.2s;
  border: 1px solid var(--bdet-border);
}

.blog-details-share-btn:hover {
  background: var(--bdet-primary);
  color: white;
  border-color: var(--bdet-primary);
}

.blog-details-share-btn i {
  width: 16px;
  height: 16px;
}

.blog-details-share-btn .fa-brands {
  font-size: 16px;
}

.blog-details-hero-right {
  width: 100%;
}

.blog-details-hero-img-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--bdet-radius);
  /* background: #F1F5F9; */
}

.blog-details-hero-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: var(--bdet-radius);
  display: block;
}

/* Floating Stats */
.blog-details-float-card {
  position: absolute;
  bottom: 10px;
  right: 20px;
  left: 20px;
  background: white;
  border-radius: 16px;
  padding: 28px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--bdet-shadow-hero);
  z-index: 10;
}

.blog-details-float-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.blog-details-float-label {
  font-size: 12px;
  color: var(--bdet-text-sec);
  font-weight: 500;
}

.blog-details-float-val-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-details-float-val {
  font-size: 1.8rem;
  font-weight: 800;
}

.blog-details-float-divider {
  width: 1px;
  height: 40px;
  background: var(--bdet-border);
  margin: 0 16px;
}

/* ----------------------------------------------------------
   CONTENT LAYOUT
---------------------------------------------------------- */


.blog-toc-link i,
.blog-toc-link svg {
    color: var(--bdet-primary) !important;
    margin-right: 6px;
}

.blog-content-wrapper {
  width: 100%;
  padding: 0px 32px 80px;
}

.blog-content-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: stretch;
}

/* Main Column */
.blog-main-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Intro Section (TOC + Intro Text) */
.blog-intro-section {
  display: flex;
  gap: 48px;
  margin-bottom: 24px;
}

.blog-toc-sidebar {
  width: 260px;
  flex-shrink: 0;
}

.blog-intro-text {
  flex: 1;
  min-width: 0;
}

.blog-toc-card {
  background: white;
  border: 1px solid var(--bdet-border);
  box-shadow: 0 4px 20px rgba(15, 23, 42, .02);
  border-radius: 16px;
  padding: 24px;
}

.blog-toc-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--bdet-text);
}

.blog-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blog-toc-link {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--bdet-text-sec);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
  transition: color 0.2s;
  font-weight: 500;
}

.blog-toc-link i {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  flex-shrink: 0;
  color: var(--bdet-primary);
  transition: color 0.2s;
}

.blog-toc-link:hover {
  color: var(--bdet-text);
}

.blog-toc-link.active {
  color: var(--bdet-primary);
  font-weight: 600;
}

.blog-toc-link.active i {
  color: var(--bdet-primary);
}

/* Main Article Content */
.blog-main-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.blog-content-p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #171717;
  margin: 0 0 20px;
}

.blog-content-h2 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--bdet-text);
  margin: -36px 0 20px;
  line-height: 1.3;
}

.blog-content-hr {
  border: 0;
  border-top: 1px solid var(--bdet-border);
  margin: 40px 0;
}

/* Feature Grid */
.blog-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 32px 0;
}

.blog-feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.blog-feature-icon-wrap {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.blog-feature-icon-wrap i,
.blog-feature-icon-wrap svg {
  width: 40px;
  height: 40px;
}

@media (max-width: 768px) {
  .blog-feature-grid {
    grid-template-columns: 1fr;
    margin-bottom:0px;
  gap: 2px;
  margin: -10px 0;
}
.blog-content-h2 {
  font-weight: 600;
  font-size: 1.3rem;
  margin: -21px 0 10px;
  line-height: 1.3;
}
    .blog-feature-item {
        display: grid;
        grid-template-columns: 80px 1fr;
        grid-template-rows: auto auto;
        gap: 0px 20px;
        align-items: center;
        text-align: left;
        padding: 8px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
        margin-bottom: 8px;
    }


  .blog-feature-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin-bottom: -40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .blog-feature-icon-wrap i,
  .blog-feature-icon-wrap svg {
    width: 30px;
    height: 30px;
  }

  .blog-feature-title {
    margin: 0;
    line-height: 1.2;
  }

  .blog-feature-item > h4 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  .blog-feature-item > p {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin: 0;
  }

  /* colored glow for icon backgrounds */
  .blog-feature-icon-wrap.blog-bg-blue { box-shadow: 0 8px 24px rgba(59,130,246,0.10); }
  .blog-feature-icon-wrap.blog-bg-green { box-shadow: 0 8px 24px rgba(16,185,129,0.10); }
  .blog-feature-icon-wrap.blog-bg-orange { box-shadow: 0 8px 24px rgba(249,115,22,0.10); }
  .blog-feature-icon-wrap.blog-bg-purple { box-shadow: 0 8px 24px rgba(99,102,241,0.10); }

  /* ensure lucide svg and fallback i elements inherit the colored icon stroke */
  .blog-feature-icon-wrap.blog-bg-blue svg,
  .blog-feature-icon-wrap.blog-bg-blue i { color: #2563EB; }

  .blog-feature-icon-wrap.blog-bg-green svg,
  .blog-feature-icon-wrap.blog-bg-green i { color: #10B981; }

  .blog-feature-icon-wrap.blog-bg-orange svg,
  .blog-feature-icon-wrap.blog-bg-orange i { color: #F97316; }

  .blog-feature-icon-wrap.blog-bg-purple svg,
  .blog-feature-icon-wrap.blog-bg-purple i { color: #6366F1; }

  /* force SVG icons to use currentColor for stroke/fill so they appear on mobile */
  .blog-feature-icon-wrap svg {
    stroke: currentColor !important;
    fill: currentColor !important;
    vector-effect: non-scaling-stroke;
  }
}

.blog-feature-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--bdet-text);
  margin: 0;
  line-height: 1.4;
}

.blog-feature-desc {
  font-size: 14px;
  color: var(--bdet-text-sec);
  line-height: 1.5;
  margin: 0;
}

/* Challenges Layout */
.blog-challenges-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 24px 0;
  align-items: center;
}

.blog-challenges-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blog-challenges-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--bdet-text);
  font-weight: 500;
  line-height: 1.5;
}

.blog-challenges-list i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.blog-challenges-img-wrap {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

/* Dashboard Preview */
.blog-dashboard-preview {
  margin: 32px 0;
  border-radius: var(--bdet-radius);
  overflow: hidden;
  box-shadow: var(--bdet-shadow);
  border: 1px solid var(--bdet-border);
}

.blog-dashboard-img {
  width: 90%;
  height: auto;
  display: block;
}

/* Right Sidebar */
.blog-details-sidebar {
  position: sticky;
  top: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.blog-sidebar-card {
  border: 1px solid var(--bdet-border);
  border-radius: var(--bdet-radius);
  padding: 32px;
  background: white;
}

.blog-sidebar-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--bdet-text);
  margin: 0 0 16px;
}

.blog-author-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.blog-author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: contain;
  background: white;
  border: 1px solid var(--bdet-border);
  padding: 2px;
}

.blog-author-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--bdet-text);
}

.blog-author-desc {
  font-size: 14px;
  color: var(--bdet-text-sec);
  line-height: 1.5;
  margin: 0 0 16px;
  /* max-width: 224px; */
}

.blog-author-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bdet-primary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.blog-author-link i {
  width: 16px;
  height: 16px;
}

/* Categories */
.blog-sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.blog-sidebar-cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  text-decoration: none;
  color: var(--bdet-text);
  font-weight: 500;
  font-size: 14px;
  transition: color 0.2s;
}

.blog-sidebar-cat-link:hover {
  color: var(--bdet-primary);
}

.blog-cat-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blog-cat-left i,
.blog-cat-left svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  color: inherit;
}

.blog-cat-count {
  color: var(--bdet-text-sec);
}

/* Related Posts */
.blog-related-posts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.blog-related-post {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.blog-rp-img {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-rp-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.blog-rp-content h4 {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  color: var(--bdet-text);
  transition: color 0.2s;
}

.blog-related-post:hover .blog-rp-content h4 {
  color: var(--bdet-primary);
}

.blog-rp-content span {
  font-size: 12px;
  color: var(--bdet-text-sec);
}

/* CTA Card */
.blog-cta-card {
  background: var(--bdet-sec-bg);
  border-radius: var(--bdet-radius);
  padding: 32px 24px 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.blog-cta-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
  color: var(--bdet-text);
}

.blog-cta-desc {
  font-size: 14px;
  color: var(--bdet-text-sec);
  line-height: 1.5;
  margin: 0 0 8px;
}

.blog-cta-btn {
  width: 100%;
  padding: 14px;
  background: var(--bdet-primary);
  color: white;
  border: none;
  border-radius: var(--bdet-radius-btn);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s;
  margin-bottom: 16px;
}

.blog-cta-btn i {
  width: 16px;
  height: 16px;
}

.blog-cta-btn:hover {
  background: #1D4ED8;
}

.blog-cta-illus {
  margin-top: auto;
  margin-left: -24px;
  margin-right: -24px;
  position: relative;
  height: 100px;
  overflow: hidden;
}

.blog-cta-illus img {
  width: 100%;
  height: auto;
  object-fit: cover;
  opacity: 0.25;
  filter: grayscale(100%) brightness(1.2);
}

/* ----------------------------------------------------------
   RESPONSIVE DESIGN
---------------------------------------------------------- */
@media (max-width: 1200px) {
  .blog-content-inner {
    grid-template-columns: 1fr 280px;
    gap: 32px;
  }

  .blog-intro-section {
    gap: 32px;
  }
}

@media (max-width: 1024px) {
  .blog-details-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .blog-content-inner {
    grid-template-columns: 1fr 300px;
  }

  .blog-intro-section {
    flex-direction: column;
  }

  .blog-toc-sidebar {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .blog-details-hero {
    padding: 32px 20px;
  }
.blog-cta-card {
  padding: 0px 24px 0;
}

  .blog-details-float-card {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    position: static;
    margin-top: 16px;
  }

  .blog-details-float-divider {
    width: 100%;
    height: 1px;
    margin: 0;
  }

  .blog-details-float-val-row {
    justify-content: space-between;
  }

  .blog-content-wrapper {
    padding: 0px 40px 24px;
  }

  .blog-content-inner {
    grid-template-columns: 1fr;
    gap:0px;
  }

  .blog-details-sidebar {
    position: static;
  }

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

  .blog-challenges-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .blog-details-title {
    font-size: 2rem;
  }

  .blog-feature-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
BLOG DETAILS PAGE ENDS CSS HERE
========================================================== */

/* ============================================================
   ZODO PRICING PAGE CSS starts here
   ============================================================ */

/* CSS Variables */
:root {
  --pricing-primary-blue: #2563EB;
  --pricing-primary-blue-hover: #1d4ed8;
  --pricing-green: #22C55E;
  --pricing-orange: #F59E0B;
  --pricing-heading: #111827;
  --pricing-text: #6B7280;
  --pricing-border: #E8EDF6;
  --pricing-bg: #FFFFFF;
  --pricing-bg-light: #F8FAFC;
  --pricing-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.05);
  --pricing-shadow-hero: 0 25px 60px rgba(37, 99, 235, 0.15);
  --pricing-shadow-btn: 0 4px 14px rgba(37, 99, 235, 0.2);
}

.pricing-body {
  background-color: var(--pricing-bg) !important;
  color: var(--pricing-text);
  font-family: 'Inter', sans-serif !important;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Page alignment wrapper */
.pricing-main-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  background-color: var(--pricing-bg);
}

/* Sticky Navbar overrides & enhancements */
.pricing-navbar-container {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  z-index: 1000;
  border-bottom: 1px solid var(--pricing-border);
  height: 80px;
  display: flex;
  align-items: center;
}

.pricing-nav-chevron {
  font-size: 10px;
  margin-left: 4px;
  transition: transform 0.2s ease;
}

.nav-link--dropdown:hover .pricing-nav-chevron {
  transform: translateY(2px);
}

/* HERO SECTION */
.pricing-hero-sec {
  padding: 80px 0 60px 0;
}

.pricing-hero-container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

.pricing-hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pricing-badge {
  background-color: #EFF6FF;
  color: var(--pricing-primary-blue);
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 24px;
}

.pricing-hero-title {
  font-size: 52px;
  font-weight: 800;
  color: var(--pricing-heading);
  line-height: 1.15;
  margin-bottom: 20px;
  letter-spacing: -1px;
}

.pricing-title-blue {
  color: var(--pricing-primary-blue);
}

.pricing-hero-desc {
  font-size: 18px;
  line-height: 1.6;
  color: var(--pricing-text);
  max-width: 500px;
}

/* HERO RIGHT (Floating Dashboard UI) */
.pricing-hero-right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pricing-hero-bg-blur {
  position: absolute;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
  filter: blur(40px);
  z-index: 1;
  pointer-events: none;
}

.pricing-dashboard-card {
  position: relative;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 10px;
  box-shadow: var(--pricing-shadow-hero);
  border: 1px solid rgba(228, 237, 246, 0.6);
  z-index: 2;
  transition: transform 0.3s ease;
  overflow: visible;
}

.pricing-dashboard-card:hover {
  transform: translateY(-5px);
}

.pricing-dashboard-img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  display: block;
}

.pricing-floating-home-badge {
  position: absolute;
  top: 50%;
  left: -28px;
  transform: translateY(-50%);
  background-color: var(--pricing-primary-blue);
  color: #FFFFFF;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
  animation: pricing-float 3s ease-in-out infinite;
  z-index: 3;
}

@keyframes pricing-float {

  0%,
  100% {
    transform: translateY(-50%) translateY(0px);
  }

  50% {
    transform: translateY(-50%) translateY(-10px);
  }
}

/* BILLING TOGGLE */
.pricing-toggle-sec {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}

.pricing-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.pricing-discount-label {
  position: absolute;
  left: 30px;
  top: -24px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pricing-primary-blue);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pricing-curved-arrow {
  margin-top: 4px;
  margin-left: 20px;
}

.pricing-segmented-control {
  background-color: #F1F5F9;
  border-radius: 99px;
  padding: 4px;
  display: flex;
  gap: 2px;
}

.pricing-toggle-btn {
  border: none;
  background: transparent;
  padding: 10px 24px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--pricing-text);
}

.pricing-toggle-active {
  background-color: var(--pricing-primary-blue);
  color: #FFFFFF !important;
}

.pricing-toggle-outside-text {
  font-size: 14px;
  color: var(--pricing-text);
}

/* PRICING CARDS */
.pricing-cards-sec {
  margin-bottom: 80px;
}

.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.pricing-card {
  background: #FFFFFF;
  border: 1px solid var(--pricing-border);
  border-radius: 24px;
  padding: 32px 24px;
  box-shadow: var(--pricing-shadow-card);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.pricing-card-highlighted {
  border: 2px solid var(--pricing-primary-blue);
  transform: scale(1.02);
}

.pricing-card-highlighted:hover {
  transform: scale(1.02) translateY(-8px);
}

.pricing-popular-badge {
  position: absolute;
  top: -12px;
  right: 28px;
  background-color: var(--pricing-green);
  color: #FFFFFF;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
}

.pricing-card-header {
  margin-bottom: 24px;
}

.pricing-plan-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--pricing-heading);
  margin-bottom: 8px;
}

.pricing-plan-desc {
  font-size: 14px;
  color: var(--pricing-text);
  margin-bottom: 20px;
  line-height: 1.4;
  height: 40px;
}

.pricing-price-wrap {
  display: flex;
  align-items: baseline;
  margin-bottom: 4px;
}

.pricing-currency {
  font-size: 24px;
  font-weight: 700;
  color: var(--pricing-heading);
  align-self: flex-start;
  margin-top: 4px;
}

.pricing-amount {
  font-size: 48px;
  font-weight: 800;
  color: var(--pricing-heading);
  line-height: 1;
}

.pricing-amount-custom {
  font-size: 40px;
  font-weight: 800;
  color: var(--pricing-heading);
  line-height: 1;
}

.pricing-period {
  font-size: 14px;
  color: var(--pricing-text);
  margin-left: 2px;
}

.pricing-billing-term {
  font-size: 12px;
  color: var(--pricing-text);
  margin-bottom: 24px;
}

.pricing-btn {
  display: block;
  text-align: center;
  height: 48px;
  line-height: 48px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.3s ease;
  width: 100%;
}

.pricing-btn-outline {
  border: 1px solid var(--pricing-primary-blue);
  color: var(--pricing-primary-blue);
  background: transparent;
}

.pricing-btn-outline:hover {
  background-color: var(--pricing-primary-blue);
  color: #FFFFFF;
  box-shadow: var(--pricing-shadow-btn);
}

.pricing-btn-solid {
  background-color: var(--pricing-primary-blue);
  color: #FFFFFF;
  border: none;
}

.pricing-btn-solid:hover {
  background-color: var(--pricing-primary-blue-hover);
  box-shadow: var(--pricing-shadow-btn);
}

.pricing-card-features {
  border-top: 1px solid var(--pricing-border);
  padding-top: 24px;
  margin-bottom: 24px;
  flex-grow: 1;
}

.pricing-feature-group-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--pricing-heading);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pricing-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pricing-feature-list li {
  font-size: 14px;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pricing-check-icon {
  color: var(--pricing-green);
  font-size: 16px;
}

.pricing-card-footer {
  text-align: center;
  border-top: 1px solid var(--pricing-border);
  padding-top: 18px;
}

.pricing-footer-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--pricing-primary-blue);
  transition: color 0.2s ease;
}

.pricing-footer-link:hover {
  color: var(--pricing-primary-blue-hover);
  text-decoration: underline;
}

/* BENEFITS SECTION */
.pricing-benefits-sec {
  background: var(--pricing-bg-light);
  border-radius: 24px;
  padding: 40px 24px;
  margin-bottom: 80px;
  border: 1px solid var(--pricing-border);
}

.pricing-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.pricing-benefit-card {
  text-align: center;
  padding: 10px;
  transition: transform 0.3s ease;
}

.pricing-benefit-card:hover {
  transform: translateY(-4px);
}

.pricing-benefit-icon {
  font-size: 32px;
  color: var(--pricing-primary-blue);
  margin-bottom: 16px;
}

.pricing-benefit-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--pricing-heading);
  margin-bottom: 6px;
}

.pricing-benefit-card p {
  font-size: 14px;
  color: var(--pricing-text);
}

/* COMPARE PLANS TABLE */
.pricing-compare-sec {
  margin-bottom: 80px;
}

.pricing-compare-container {
  background: #FFFFFF;
  border: 1px solid var(--pricing-border);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--pricing-shadow-card);
}

.pricing-table-responsive-wrapper {
  overflow-x: auto;
}

.pricing-compare-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.pricing-compare-table th {
  padding: 24px;
  background: #FAFCFF;
  border-bottom: 2px solid var(--pricing-border);
  vertical-align: bottom;
  position: relative;
}

.pricing-compare-table th:first-child {
  font-size: 20px;
  font-weight: 700;
  color: var(--pricing-heading);
}

.pricing-th-plan {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--pricing-heading);
  margin-bottom: 4px;
}

.pricing-th-price {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: var(--pricing-primary-blue);
}

.pricing-th-period {
  font-size: 12px;
  color: var(--pricing-text);
  font-weight: 400;
}

.pricing-th-popular-badge {
  position: absolute;
  top: 10px;
  left: 24px;
  background: var(--pricing-green);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
}

.pricing-compare-table td {
  padding: 18px 24px;
  border-bottom: 1px solid var(--pricing-border);
  color: #374151;
  font-size: 14px;
  vertical-align: middle;
}

.pricing-compare-table tbody tr:hover {
  background-color: #F8FAFC;
}

.pricing-table-row-icon {
  margin-right: 8px;
  color: var(--pricing-text);
  font-size: 16px;
}

.pricing-table-check {
  color: var(--pricing-green);
  font-size: 18px;
}

.pricing-table-dash {
  color: #D1D5DB;
  font-weight: 700;
}

/* FAQ SECTION */
.pricing-faq-sec {
  margin-bottom: 80px;
}

.pricing-faq-container {
  max-width: 1200px;
  margin: 0 auto;
}

.pricing-faq-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
}

.pricing-faq-title {
  font-size: 36px;
  font-weight: 800;
  color: var(--pricing-heading);
  line-height: 1.2;
}

.pricing-faq-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pricing-faq-item {
  border: 1px solid var(--pricing-border);
  border-radius: 16px;
  overflow: hidden;
  background: #FFFFFF;
  transition: all 0.3s ease;
}

.pricing-faq-item:hover {
  border-color: var(--pricing-primary-blue);
  box-shadow: var(--pricing-shadow-card);
}

.pricing-faq-question {
  width: 100%;
  background: transparent;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--pricing-heading);
  cursor: pointer;
}

.pricing-faq-icon {
  font-size: 14px;
  color: var(--pricing-text);
  transition: transform 0.3s ease;
}

.pricing-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), padding 0.3s ease;
  padding: 0 24px;
}

.pricing-faq-answer p {
  color: var(--pricing-text);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Active FAQ styling */
.pricing-faq-active .pricing-faq-answer {
  max-height: 1000px;
  /* arbitrary large value for smooth expand */
  transition: max-height 0.3s cubic-bezier(1, 0, 1, 0), padding 0.3s ease;
  padding: 0 24px 24px 24px;
}

.pricing-faq-active {
  border-color: var(--pricing-primary-blue);
}

/* CTA BANNER */
.pricing-cta-sec {
  margin-bottom: 80px;
}

.pricing-cta-banner {
  background-color: var(--pricing-primary-blue);
  border-radius: 24px;
  padding: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #FFFFFF;
  box-shadow: 0 15px 40px rgba(37, 99, 235, 0.25);
}

.pricing-cta-left {
  display: flex;
  align-items: center;
  gap: 28px;
}

.pricing-cta-icon-wrap {
  background-color: rgba(255, 255, 255, 0.15);
  width: 80px;
  height: 80px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-cta-calendar-svg {
  color: #FFFFFF;
}

.pricing-cta-text h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.pricing-cta-text p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 500px;
}

.pricing-btn-cta-white {
  background: #FFFFFF;
  color: var(--pricing-primary-blue);
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.pricing-btn-cta-white:hover {
  background-color: #F8FAFC;
  transform: translateX(4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* FOOTER SECTION */
.pricing-footer {
  background: #FAFCFF;
  border-top: 1px solid var(--pricing-border);
  padding: 80px 0 40px 0;
}

.pricing-footer-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.pricing-footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1.2fr) 2fr;
  gap: 40px;
  margin-bottom: 60px;
}

.pricing-footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pricing-footer-desc {
  font-size: 14px;
  color: var(--pricing-text);
  line-height: 1.6;
}

.pricing-footer-socials {
  display: flex;
  gap: 12px;
}

.pricing-footer-socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid var(--pricing-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pricing-text);
  transition: all 0.2s ease;
}

.pricing-footer-socials a:hover {
  background-color: var(--pricing-primary-blue);
  color: #FFFFFF;
  border-color: var(--pricing-primary-blue);
  transform: translateY(-2px);
}

.pricing-footer-link-col h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--pricing-heading);
  margin-bottom: 20px;
}

.pricing-footer-link-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-footer-link-col ul li a {
  font-size: 14px;
  color: var(--pricing-text);
  transition: color 0.2s ease;
}

.pricing-footer-link-col ul li a:hover {
  color: var(--pricing-primary-blue);
}

.pricing-footer-newsletter-col p {
  font-size: 14px;
  color: var(--pricing-text);
  margin-bottom: 16px;
  line-height: 1.5;
}

.pricing-newsletter-form {
  display: flex;
  border: 1px solid var(--pricing-border);
  border-radius: 10px;
  overflow: hidden;
  background: #FFFFFF;
  padding: 4px;
}

.pricing-newsletter-form input {
  border: none;
  padding: 10px 14px;
  font-size: 14px;
  flex-grow: 1;
  outline: none;
  background: transparent;
}

.pricing-newsletter-form button {
  background: var(--pricing-primary-blue);
  color: #FFFFFF;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.pricing-newsletter-form button:hover {
  background-color: var(--pricing-primary-blue-hover);
}

.pricing-footer-bottom {
  border-top: 1px solid var(--pricing-border);
  padding-top: 30px;
  text-align: center;
  font-size: 13px;
  color: var(--pricing-text);
}

/* RESPONSIVE MEDIA QUERIES */

@media (max-width: 1280px) {
  .pricing-hero-title {
    font-size: 44px;
  }

  .pricing-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .pricing-card-highlighted {
    transform: scale(1);
  }

  .pricing-card-highlighted:hover {
    transform: translateY(-8px);
  }

  .pricing-footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .pricing-hero-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .pricing-hero-left {
    align-items: center;
    text-align: center;
  }

  .pricing-hero-desc {
    max-width: 100%;
  }

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

  .pricing-faq-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .pricing-navbar-container {
    height: 70px;
  }

  .pricing-cards-grid {
    grid-template-columns: 1fr;
  }

  .pricing-cta-banner {
    flex-direction: column;
    gap: 24px;
    text-align: center;
    padding: 32px;
  }

  .pricing-cta-left {
    flex-direction: column;
    gap: 16px;
  }

  .pricing-cta-text p {
    max-width: 100%;
  }

  .pricing-btn-cta-white {
    width: 100%;
    justify-content: center;
  }

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

@media (max-width: 480px) {
  .pricing-hero-title {
    font-size: 32px;
  }

  .pricing-benefits-grid {
    grid-template-columns: 1fr;
  }

  .pricing-footer-grid {
    grid-template-columns: 1fr;
  }

  .pricing-toggle-wrap {
    flex-direction: column;
  }

  .pricing-discount-label {
    position: static;
    margin-bottom: 10px;
  }

  .pricing-curved-arrow {
    display: none;
  }
}

/* Pricing card yearly pricing enhancements */
.pricing-price-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 8px;
  min-height: 80px;
  justify-content: flex-end;
}

.pricing-original-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 4px;
}

.pricing-real-price-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--pricing-text);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.pricing-original-price-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pricing-original-price-strike {
  font-size: 16px;
  font-weight: 600;
  color: var(--pricing-text);
  text-decoration: line-through;
}

.pricing-discount-badge {
  background-color: #DCFCE7;
  color: #15803D;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
}/* ==========================================================
TERMS OF SERVICE PAGE STARTS CSS HERE
========================================================== */

.terms-page {
  font-family: 'Inter', sans-serif;
  background: #F8FAFC;
  color: #111827;
}

.terms-container {
  max-width: 1522px;
  padding-inline: 64px;
}

.terms-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
  gap: 48px;
  align-items: center;
  padding: 38px 0 40px;
}

.terms-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.terms-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  color: #667085;
  font-size: 0.95rem;
}

.terms-breadcrumb ol li {
  display: inline-flex;
  align-items: center;
}

.terms-breadcrumb ol li + li::before {
  content: '›';
  margin: 0 8px;
  color: #9CA3AF;
}

.terms-breadcrumb a {
  color: #667085;
}

.terms-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: #EFF6FF;
  color: #2563EB;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  width: fit-content;
}

.terms-hero h1 {
  font-size: clamp(3rem, 3.4vw, 4.4rem);
  line-height: 1.05;
  font-weight: 800;
  max-width: 680px;
}

.terms-hero-description {
  max-width: 620px;
  font-size: 1rem;
  line-height: 1.8;
  color: #667085;
}

.terms-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
  color: #111827;
  font-size: 0.95rem;
  font-weight: 500;
}

.terms-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: #EFF6FF;
  color: #2563EB;
}

.terms-hero-visual {
  display: flex;
  justify-content: center;
  position: relative;
}

.terms-illustration {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 1.03;
  border-radius: 24px;
  background: linear-gradient(180deg, #F7FBFE 0%, #FFFFFF 100%);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(37, 99, 235, 0.08);
}

.terms-illustration-glow,
.terms-illustration-blob,
.terms-illustration-dots {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.terms-illustration-glow {
  top: -18%;
  right: -16%;
  width: 240px;
  height: 240px;
  background: rgba(37, 99, 235, 0.16);
  filter: blur(34px);
}

.terms-illustration-blob {
  left: -10%;
  bottom: -10%;
  width: 220px;
  height: 220px;
  background: rgba(59, 130, 246, 0.12);
}

.terms-dots-top {
  top: 22%;
  left: 14%;
  width: 110px;
  height: 110px;
  background-image: radial-gradient(#2563EB 4px, transparent 4px);
  background-size: 18px 18px;
}

.terms-dots-bottom {
  right: 12%;
  bottom: 12%;
  width: 88px;
  height: 88px;
  background-image: radial-gradient(#1D4ED8 4px, transparent 4px);
  background-size: 16px 16px;
}

.terms-illustration-card {
  position: absolute;
  top: 18%;
  left: 12%;
  width: 240px;
  min-height: 320px;
  padding: 30px 28px;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(37, 99, 235, 0.08);
  display: grid;
  gap: 16px;
}

.terms-document-header {
  width: 52px;
  height: 8px;
  border-radius: 999px;
  background: #EFF6FF;
}

.terms-document-line {
  height: 10px;
  border-radius: 999px;
  background: #E5E7EB;
}

.terms-document-line.short {
  width: 58%;
}

.terms-document-list {
  display: grid;
  gap: 10px;
}

.terms-document-footer {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: auto;
}

.terms-document-chip {
  width: 60px;
  height: 10px;
  border-radius: 999px;
  background: #EFF6FF;
}

.terms-document-chip.short {
  width: 40px;
}

.terms-illustration-shield {
  position: absolute;
  bottom: 16px;
  right: 18px;
  width: 132px;
  aspect-ratio: 1 / 1.05;
  place-items: center;
}

.terms-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding-bottom: 64px;
}

.terms-sidebar {
  position: sticky;
  top: 96px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.terms-nav-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid #E5E7EB;
  background: #ffffff;
  color: #111827;
  font-weight: 700;
  font-size: 0.95rem;
}

.terms-sidebar-nav {
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  padding: 20px;
  display: grid;
  gap: 8px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
}

.terms-sidebar-nav--open {
  max-height: 1000px;
}

.terms-sidebar-nav a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #ffffff;
  color: #111827;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
  border-left: 4px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.terms-sidebar-nav a:hover {
  background: #F8FAFC;
}

.terms-sidebar-nav a.active {
  background: #EFF6FF;
  color: #2563EB;
  border-left-color: #2563EB;
}

.terms-nav-index {
  display: inline-flex;
  min-width: 28px;
  justify-content: flex-end;
  color: #2563EB;
  font-weight: 700;
}

.terms-support-card {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
  display: grid;
  gap: 18px;
}

.terms-support-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #EFF6FF;
  display: grid;
  place-items: center;
  color: #2563EB;
}

.terms-support-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #111827;
}

.terms-support-copy {
  color: #667085;
  line-height: 1.7;
}

.terms-support-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2563EB;
  font-weight: 700;
}

.terms-support-link svg {
  transform: translateX(0);
  transition: transform 0.2s ease;
}

.terms-support-link:hover svg {
  transform: translateX(3px);
}

.terms-content {
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
  display: grid;
  gap: 32px;
}

.terms-section {
  display: grid;
  gap: 16px;
}

.terms-section h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}

.terms-section p {
  color: #667085;
  line-height: 1.8;
  margin: 0;
}

.terms-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.terms-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: #667085;
  line-height: 1.8;
}

.terms-list li::before {
  content: '•';
  color: #2563EB;
  font-size: 1rem;
  line-height: 1.4;
  margin-top: 3px;
}

.terms-section + .terms-section {
  padding-top: 24px;
  border-top: 1px solid #E5E7EB;
}

.terms-section--last {
  border-bottom: none;
}

.terms-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 26px 28px;
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
}

.terms-banner-copy {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.terms-banner-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #EFF6FF;
  display: grid;
  place-items: center;
  color: #2563EB;
}

.terms-banner-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.terms-banner-text {
  margin: 4px 0 0;
  color: #667085;
  line-height: 1.7;
}

.terms-banner-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 14px;
  background: #2563EB;
  color: #ffffff;
  font-weight: 700;
  min-width: 160px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.terms-banner-button:hover {
  background: #1D4ED8;
  transform: translateY(-1px);
}

@media (max-width: 1024px) {
  .terms-hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .terms-grid {
    grid-template-columns: 1fr;
  }

  .terms-sidebar {
    position: static;
    top: auto;
  }
}

@media (max-width: 820px) {
  .terms-container {
    padding-inline: 24px;
  }

  .terms-hero {
    padding-top: 40px;
  }



  .terms-sidebar-nav {
    display: none;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .terms-sidebar-nav a {
    padding: 14px 16px;
  }

  .terms-support-card,
  .terms-content,
  .terms-banner {
    width: 100%;
  }

  .terms-banner {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .terms-section {
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    overflow: hidden;
    background: #ffffff;
  }

  .terms-section + .terms-section {
    border-top: none;
    padding-top: 0;
    margin-top: 16px;
  }

  .terms-section h2 {
    margin: 0;
  }

  .terms-accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 20px;
    border: none;
    background: transparent;
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }

  .terms-accordion-button::after {
    content: '+';
    font-size: 1.2rem;
    color: #2563EB;
  }
.terms-banner-icon {
  width: 44%;
  height: 44%;
  background: none;
  
}
  .terms-section--open .terms-accordion-button::after {
    content: '−';
  }

  .terms-section-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    padding: 0 20px 0;
  }

  .terms-section--open .terms-section-content {
    padding-bottom: 20px;
  }
}

@media (max-width: 580px) {
  .terms-container {
    padding-inline: 16px;
  }

  .terms-hero h1 {
    font-size: 36px;
    font-weight: 700;
  }
.terms-hero-copy {
  gap:16px;
}
.terms-illustration {
    width: min(80%, 476px);
}
.terms-illustration-shield {
width:84px;
}

.terms-section {
    gap: 0px;
}
    .terms-section + .terms-section {
        margin-top: 0px;
    }

  .terms-hero-description,
  .terms-hero-meta,
  .terms-support-title,
  .terms-support-copy,
  .terms-banner-title,
  .terms-banner-text {
    font-size: 0.95rem;
  }

  .terms-hero-meta {
    padding: 14px 16px;
  }

  .terms-banner-button {
    width: 100%;
  }
}

/* ==========================================================
TERMS OF SERVICE PAGE ENDS CSS HERE
========================================================== */

/* ==========================================================
Privacy policy PAGE start CSS HERE
========================================================== */
/* ==========================================================
PRIVACY POLICY PAGE STARTS CSS HERE
========================================================== */

.privacy-page {
  font-family: 'Inter', sans-serif;
  background: #F8FAFC;
  color: #111827;
}

.privacy-container {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: 32px;
}

.privacy-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
  gap: 48px;
  align-items: center;
  padding: 28px 0 40px;
}

.privacy-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.privacy-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  color: #667085;
  font-size: 0.95rem;
}

.privacy-breadcrumb ol li {
  display: inline-flex;
  align-items: center;
}

.privacy-breadcrumb ol li + li::before {
  content: '\203A';
  margin: 0 8px;
  color: #9CA3AF;
}

.privacy-breadcrumb a {
  color: #667085;
}

.privacy-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: #EFF6FF;
  color: #2563EB;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  width: fit-content;
}

.privacy-hero h1 {
  font-size: clamp(3rem, 3.4vw, 4.2rem);
  line-height: 1.05;
  font-weight: 800;
  max-width: 680px;
}

.privacy-hero-description {
  max-width: 640px;
  font-size: 1rem;
  line-height: 1.8;
  color: #667085;
}

.privacy-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
  color: #111827;
  font-size: 0.95rem;
  font-weight: 500;
}

.privacy-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: #EFF6FF;
  color: #2563EB;
}

.privacy-hero-visual {
  display: flex;
  justify-content: center;
  position: relative;
}

.privacy-illustration {
  position: relative;
  width: min(100%, 355px);
  aspect-ratio: 1.02;
  border-radius: 24px;
  background: linear-gradient(180deg, #F7FBFE 0%, #ffffff 100%);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(37, 99, 235, 0.08);
}

.privacy-bg-circle {
  position: absolute;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.12);
}

.privacy-bg-circle--large {
  width: 210px;
  height: 210px;
  top: -30px;
  right: -40px;
}

.privacy-bg-circle--small {
  width: 140px;
  height: 140px;
  bottom: -24px;
  left: -32px;
}

.privacy-floating-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #2563EB;
  opacity: 0.18;
}

.privacy-floating-dot.dot--top {
  top: 24px;
  left: 16%;
}

.privacy-floating-dot.dot--right {
  right: 16px;
  top: 44%;
  width: 12px;
  height: 12px;
}

.privacy-shield-card {
  position: absolute;
  inset: 16% 16% auto 16%;
  width: 260px;
  min-height: 300px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(37, 99, 235, 0.08);
  padding: 28px;
  display: grid;
  gap: 20px;
}

.privacy-shield-base {
  position: relative;
  width: 100%;
  padding-top: 100%;
  border-radius: 24px;
  background: linear-gradient(180deg, #2563EB 0%, #1E40AF 100%);
}

.privacy-shield-lock {
  position: absolute;
  top: 157px;
  left: 50%;
  transform: translateX(-50%);
  width: 155px;
    height: 155px;
  display: grid;
  place-items: center;
}

.privacy-shield-badge {
  position: absolute;
bottom: 52px;
    right: 142px;;
  place-items: center;
}
.privacy-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.privacy-card--profile {
  position: absolute;
  top: 18%;
  left: 14%;
  width: 220px;
}

.privacy-card--dash {
  position: absolute;
  bottom: 25%;
  right: 60%;
}

.privacy-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: #EFF6FF;
  display: grid;
  place-items: center;
  position: relative;
}

.privacy-card-icon--user::before,
.privacy-card-icon--dash::before {
  content: '';
  position: absolute;
  background: #2563EB;
}

.privacy-card-icon--user::before {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  top: 10px;
}

.privacy-card-icon--user::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 10px;
  border-radius: 12px;
  background: #2563EB;
  bottom: 10px;
}

.privacy-card-icon--dash::before {
  width: 24px;
  height: 2px;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

.privacy-card-icon--dash::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: #2563EB;
  top: 12px;
  right: 10px;
}

.privacy-card-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #111827;
}

.privacy-card-text {
  display: block;
  color: #667085;
  font-size: 0.95rem;
  line-height: 1.7;
}

.privacy-grid {
  display: grid;
  grid-template-columns: 345px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 20px;
}

.privacy-sidebar {
  position: sticky;
  top: 96px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.privacy-nav-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid #E5E7EB;
  background: #ffffff;
  color: #111827;
  font-weight: 700;
  font-size: 0.95rem;
}

.privacy-sidebar-nav {
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  padding: 20px;
  display: grid;
  gap: 8px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
}

.privacy-sidebar-nav--open {
  max-height: 1000px;
}

.privacy-sidebar-nav a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #ffffff;
  color: #111827;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
  border-left: 4px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.privacy-sidebar-nav a:hover {
  background: #F8FAFC;
}

.privacy-sidebar-nav a.active {
  background: #EFF6FF;
  color: #2563EB;
  border-left-color: #2563EB;
}

.privacy-nav-index {
  display: inline-flex;
  min-width: 28px;
  justify-content: flex-end;
  color: #2563EB;
  font-weight: 700;
}

.privacy-support-card {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
  display: grid;
  gap: 18px;
}

.privacy-support-icon {
  width: 25px;
  height: 25px;
  border-radius: 14px;
  background: #EFF6FF;
  display: grid;
  place-items: center;
  color: #2563EB;
}

.privacy-support-title {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
}

.privacy-support-copy {
  color: #667085;
  line-height: 1.7;
}

.privacy-support-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2563EB;
  font-weight: 700;
}

.privacy-support-link svg {
  transform: translateX(0);
  transition: transform 0.2s ease;
}

.privacy-support-link:hover svg {
  transform: translateX(3px);
}

.privacy-content {
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
  display: grid;
  gap: 32px;
}

.privacy-section {
  display: grid;
  gap: 16px;
}

.privacy-section h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}

.privacy-section p {
  color: #667085;
  line-height: 1.8;
  margin: 0;
}

.privacy-check-list {
  display: grid;
  gap: 16px;
}

.privacy-check-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}

.privacy-check-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 999px;
  background: #22C55E;
  position: relative;
}

.privacy-check-icon::after {
  content: '';
  position: absolute;
left: 8px;
    top: 1px;
    width: 7px;
    height: 14px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.privacy-check-item strong {
  color: #111827;
  font-weight: 700;
}

.privacy-more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2563EB;
  font-weight: 700;
  text-decoration: none;
}

.privacy-more-link svg {
  transition: transform 0.2s ease;
}

.privacy-more-link:hover svg {
  transform: translateY(1px);
}

.privacy-section + .privacy-section {
  padding-top: 24px;
  border-top: 1px solid #E5E7EB;
}

.privacy-section--last {
  border-bottom: none;
}

.privacy-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 26px 28px;
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
}

.privacy-banner-copy {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.privacy-banner-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #2563EB;
}

.privacy-banner-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.privacy-banner-text {
  margin: 4px 0 0;
  color: #667085;
  line-height: 1.7;
}

.privacy-banner-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 14px;
  background: #2563EB;
  color: #ffffff;
  font-weight: 700;
  min-width: 160px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.privacy-banner-button:hover {
  background: #1D4ED8;
  transform: translateY(-1px);
}

@media (max-width: 1024px) {
  .privacy-hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .privacy-grid {
    grid-template-columns: 1fr;
  }

  .privacy-sidebar {
    position: static;
    top: auto;
  }
}

@media (max-width: 820px) {
  .privacy-container {
    padding-inline: 16px;
  }

  .privacy-hero {
    padding-top: 28px;
    gap: 24px;
  }

  .privacy-grid {
    padding: 20px 20px;
    gap: 16px;
  }

  .privacy-nav-toggle {
    display: flex;
    padding: 14px 16px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  }

  .privacy-sidebar {
    gap: 12px;
  }

  .privacy-sidebar-nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
    padding: 0 10px;
    opacity: 0;
  }

  .privacy-sidebar-nav--open {
    max-height: 1400px;
    padding: 10px;
    opacity: 1;
  }

  .privacy-sidebar-nav a {
    padding: 13px 14px;
    border-radius: 12px;
    font-size: 0.92rem;
  }

  .privacy-support-card,
  .privacy-content,
  .privacy-banner {
    width: 100%;
  }
.privacy-shield-badge {
  right: 92px;
}

  .privacy-support-card {
    padding: 18px;
    border-radius: 16px;
  }

  .privacy-content {
    padding: 16px;
    border-radius: 18px;
    gap: 12px;
  }

  .privacy-section {
    padding: 0;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    background: #F8FAFC;
    overflow: hidden;
  }

  .privacy-section + .privacy-section {
    padding-top: 0;
    border-top: 1px solid #E5E7EB;
    margin-top: 10px;
  }

  .privacy-accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 16px 18px;
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
  }

  .privacy-accordion-button::after {
    content: '+';
    color: #2563EB;
    font-size: 1.15rem;
    line-height: 1;
    transition: transform 0.2s ease;
  }

  .privacy-section--open .privacy-accordion-button::after {
    content: '–';
    transform: rotate(180deg);
  }

  .privacy-section-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .privacy-section--open .privacy-section-content {
    max-height: 1000px;
  }

  .privacy-section-content > * {
    padding: 0 18px 16px;
  }

  .privacy-section-content .privacy-check-list {
    gap: 12px;
  }

  .privacy-section-content .privacy-check-item {
    gap: 12px;
  }

  .privacy-section-content .privacy-more-link {
    margin: 0 18px 16px;
  }

  .privacy-banner {
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 20px;
    border-radius: 16px;
    gap: 16px;
  }

  .privacy-banner-copy {
    align-items: flex-start;
  }
}

@media (max-width: 580px) {
  .privacy-hero h1 {
    font-size: clamp(2.4rem, 6vw, 3rem);
  }

  .privacy-hero-description,
  .privacy-hero-meta,
  .privacy-support-title,
  .privacy-support-copy,
  .privacy-banner-title,
  .privacy-banner-text {
    font-size: 0.95rem;
  }

  .privacy-hero-meta {
    padding: 14px 16px;
  }

  .privacy-banner-button {
    width: 100%;
  }
}

/* ==========================================================
PRIVACY POLICY PAGE ENDS CSS HERE
========================================================== */