/* --------------------------------------------------------------------------------
   1. Global Variables and Base Styles
-------------------------------------------------------------------------------- */

:root {
  --primary-color: #7b3efc; /* Purple CTA color */
  --secondary-color: #0c023d; /* Deep dark blue, used for footer/headings */
  --text-dark: #1f2937;
  --text-light: #4b5563;
  --background-light: #f9fafb;
  --color-yellow-banner: #ffde1e;
  --gradient-dark: linear-gradient(135deg, #4d156f 0%, #0c023d 100%);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.08);
}

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

body {
  color: #333;
  background-color: #fff;
  min-height: 100%;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-family: "Montserrat", sans-serif;
  line-height: 1.6;
  background-color: white;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px; /* Base padding for all screens */
}

section {
  padding: 80px 20px; /* Use base padding, media query will adjust */
}

/* Heading and Text Styles */
h1 {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.1;
}
h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
}
a {
  color: inherit;
  text-decoration: none;
}
.white-text {
  color: white;
}

.heading-101 {
  color: #65768c;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 500;
  line-height: 20px;
}
.sub-headline {
  color: var(--text-dark); /* Using defined var for consistency */
  margin-bottom: 20px;
  font-family: Montserrat, sans-serif;
  font-size: 58px;
  line-height: 58px;
}
.section-heading-centered {
  font-size: 40px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 15px;
}
.section-sub-text-centered {
  font-size: 15px;
  color: var(--text-light);
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px;
}
.hero-sub-text {
  font-size: 1.15rem;
  color: var(--text-light);
  margin-bottom: 30px;
  margin-top: 15px;
}

/* Buttons */
.main-cta-btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 8px;
  font-weight: 700;
  transition: all 0.3s;
  text-align: center;
  text-decoration: none !important;
  font-size: 1rem;
}
.primary-btn-color {
  background-color: var(--primary-color);
  border: 2px solid var(--primary-color);
  color: white !important;
  border: none;
  width: fit-content;
  padding: 15px 40px;
}
.primary-btn-color:hover {
  background-color: #6a34e0;
}
.secondary-btn-color {
  background-color: white;
  color: var(--primary-color) !important;
  margin-left: 15px;
}
.secondary-btn-color:hover {
  background-color: var(--background-light);
}

/* --------------------------------------------------------------------------------
   2. Header and Navigation
-------------------------------------------------------------------------------- */

.logo-main {
  cursor: pointer;
}

.fb-logo {
  max-height: 39px;
  max-width: 170px;
  width: 100%;
  height: 100%;
}

.nav-bar-wrapper {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.nav-bar {
  border-bottom: 1px solid #eee;
  padding: 0px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.nav-container {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
}

.menu-button {
  display: none; /* Hidden on desktop */
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.banner-section {
  color: #fff;
  background-image: linear-gradient(349deg, #1e78ff, #da48ff);
  padding: 10px 0%;
  position: relative;
}

/* DESKTOP NAV LIST AND DROPDOWNS */
.nav-menu-desktop {
  display: block;
}
.nav-list {
  display: flex;
  list-style: none;
  align-items: center;
}
.nav-item {
  position: relative;
  padding: 0 10px;
}
.nav-link,
.nav-dropdown-toggle {
  font-size: 15px;
  padding: 10px 5px;
  color: #0f0f0f;
  font-weight: 500;
  text-decoration: none;
  display: block;
  cursor: pointer;
}
.nav-link:hover,
.nav-dropdown-toggle:hover {
  color: var(--primary-color);
}
.dropdown-icon {
  font-size: 0.7em;
  margin-left: 5px;
  transition: transform 0.2s;
}
.nav-item.open .dropdown-icon {
  transform: rotate(180deg);
}
.dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  background-color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  min-width: 180px;
  z-index: 10;
  padding: 5px 0;
}
.dropdown-list li a {
  color: var(--text-dark);
  padding: 10px 15px;
  display: block;
  white-space: nowrap;
  font-size: 0.95rem;
}
.dropdown-list li a:hover {
  background-color: var(--background-light);
  color: var(--primary-color);
}
.nav-item.open .dropdown-list {
  display: block;
}

/* Marquee CSS */
.marquee-container {
  display: flex;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.marquee-content {
  display: flex;
  z-index: 9;
  flex-shrink: 0;
  animation: 60s linear infinite marquee;
  animation-delay: 1s;
}

.marquee-content a {
  padding: 0 30px 0 0;
  font-size: 15px;
  font-family: "MONTSERRAT";
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------------
   3. Hero Section
-------------------------------------------------------------------------------- */

.hero-section {
  padding: 30px 20px 0px; /* Adjusted to use consistent padding */
}
.hero-content-grid {
  padding: 0px 0px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.header-content {
  padding-right: 20px;
}
.badge-outline {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 15px;
}
.typed-text-placeholder {
  display: inline-block;
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--primary-color);
}
.hero-slider-mockup {
  min-height: 580px;
  background: transparent;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto; /* Or define a specific height */
}
.hero-slider-mockup img {
  /* Stack all images on top of each other */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Start hidden with 0 opacity */
  opacity: 0;
  visibility: hidden; /* Hide from screen readers/layout when not active */

  /* The transition property creates the fade effect over 0.5s second */
  transition: opacity 1s ease-in-out, visibility 1s;
}

.hero-slider-mockup img.active {
  opacity: 1;
  visibility: visible;
}
.cta-group a {
  margin-right: 15px;
}
span#typing-word-placeholder {
  color: #ff5e19;
}

/* --------------------------------------------------------------------------------
   4. Versatile Tools Section (Bento Grid 1)
-------------------------------------------------------------------------------- */

.section-versatile-tools {
  background-color: white;
}

.bento-grid-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.fitness-card {
  overflow: hidden;
  border: 1px solid #f0f0f0;
  border-radius: 30px;
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fitness-card.card-2 {
  background-color: #e9eefa;
  border-color: #cad9ff;
}
.fitness-card.card-3 {
  background-color: #ffedeb;
  border-color: #ffdbc8;
}

.card-image-placeholder {
  max-height: 400px;
  background-color: transparent;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-text-wrapper {
  padding: 30px 30px 0px;
}
.section-versatile-tools .card-title {
  color: black;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.card-paragraph {
  font-size: 0.95rem;
  color: var(--text-light);
  margin-bottom: 20px;
}
.card-link-cta {
  color: var(--primary-color);
  font-weight: 600;
}

/* --------------------------------------------------------------------------------
   5. Trusted Rating Section (Logo Marquee)
-------------------------------------------------------------------------------- */

.section-trusted-rating {
  padding: 0px 20px;
  text-align: center;
}
section.section-trusted-rating h2 {
  font-size: 20px;
}

.logo-marquee {
  padding: 2.5rem 0;
  position: relative;
}

.logo-marquee--gradient {
  background-image: linear-gradient(90deg, #fff 5%, hsla(200, 9%, 93%, 0) 10%),
    linear-gradient(270deg, #fff 5%, hsla(200, 9%, 93%, 0) 10%);
  top: 2.5rem;
  height: 64px;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.logo-marquee--marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
}

.logo-marquee--marquee-group {
  animation: scroll-left 50s linear infinite;
  display: flex;
  flex-shrink: 0;
  width: auto;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.logo-marquee--marquee-group img {
  height: 64px;
  padding: 0 40px;
  width: auto;
}

/* Accessibility: Pause animation for users who prefer reduced motion */
@media (prefers-reduced-motion) {
  .logo-marquee--marquee-group {
    animation-play-state: paused;
  }
  .testimonial-carousel-left {
    animation-play-state: paused !important;
  }
}

/* --------------------------------------------------------------------------------
   6. AI Assistant Section (Bento Grid 2)
-------------------------------------------------------------------------------- */

.fitness-pros.with-forms.ai-fold {
  background-image: url(http://fitnexsolutions.com/wp-content/uploads/2025/11/6852adf9b144afb4cb6b263b_Ai-bg-1.webp);
  background-position: 0 0;
  background-size: cover;
  display: block;
}
.container-large-16 {
  width: auto;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.heading2.ai {
  text-align: center;
  margin-bottom: 60px;
}
.sub-heading.wmax-960.subhead-book-your-demo.centre {
  color: #000000;
  text-align: center;
  text-transform: none;
  max-width: none;
  margin-bottom: 0;
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  line-height: 24px;
}
.text-block-47.sub-heading.ai,
.sub-heading.wmax-960.subhead-book-your-demo.centre.ai {
  color: #ffffff;
}
.sub-heading.wmax-960.subhead-book-your-demo.centre.ai.top-badge {
  letter-spacing: 10px;
  text-transform: uppercase;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(150deg, #da48ff, #1e78ff);
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: 20px;
  font-weight: 700;
}
.bento-grid-wrapper {
  margin-top: 50px;
  position: relative;
  z-index: 2;
}
.w-layout-grid.bento-grid-three {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}
.fitness-card-1 {
  background-color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fitness-card-1:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(171, 71, 188, 0.2);
}
.bento-card-text-wrapper {
  padding: 30px 30px 0;
}
.paragraph-large-bg.text-weight-bold.three-new.ai-text {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
  color: #0f0f0f;
}
.paragraph-regular-11.text-color-gray-600 {
  color: #0f0f0f80;
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 23px;
}
.bento-card-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0 0 15px 15px;
}
.explore-cta-hero-header.new-home-cta {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: row;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: block;
}

/* .explore-cta-hero-header.new-home-cta.centre {
  text-align: center;
} */

.w-inline-block {
  max-width: 100%;
  display: inline-block;
}

.fitness-pros .explore-cta-hero-header.new-home-cta.centre  {
  margin-top: 50px;
}

.div-block-91.explore-cta-desktop.home-cta-new {
  border: 2px solid #535353;
  border-radius: 10px;
  margin-top: 20px;
}

.div-block-91.explore-cta-desktop.home-cta-new.try-for-free {
  width: 250px;
  margin-top: 0;
  padding-left: 40px;
  padding-right: 40px;
}

.div-block-91 {
  background-color: #000;
  border-radius: 14px;
  padding: 15px 80px;
}

.explore-cta-hero-header.new-home-cta.centre.ai-cta {
  text-align: center;
}
.link-block-8.other-cta.try-for-free.ai-cta {
  color: var(--white);
  background-image: linear-gradient(168deg, #da48ff, #1e78ff);
  border-radius: 10px;
  text-decoration: none;
  box-shadow: inset 0 -3px #4c6ad280;
}
.link-block-8.other-cta.try-for-free.ai-cta:hover {
  box-shadow: 0 5px 30px rgba(171, 71, 188, 0.8);
  transform: translateY(-2px);
}
.paragraph-20 {
  color: #fff;
  text-align: center;
  margin-bottom: 0;
  font-size: 17px;
  font-weight: 600;
}

.div-block-91.explore-cta-desktop.home-cta-new.try-for-free {
  width: 250px;
  margin-top: 0;
  padding-left: 40px;
  padding-right: 40px;
}
.div-block-91.explore-cta-desktop.home-cta-new.try-for-free.ai-cta-new {
  color: var(--white);
  -webkit-text-stroke-color: var(--white);
  overflow-wrap: normal;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
  background-color: #0000;
  background-image: linear-gradient(168deg, #da48ff, #1e78ff);
  border: 1px #4c6ad280;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: inset 0 -3px #4c6ad280;
}

/* --------------------------------------------------------------------------------
   7. App Theme Section (Slider and Feature Grid)
-------------------------------------------------------------------------------- */

.fitness-pros.app-theme.for-homepage {
  position: relative;
  background-color: #fff;
  text-align: center;
}
.heading-102 {
  color: #0f0f0f;
  text-align: center;
  margin-bottom: 20px;
  font-family: Montserrat, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 55px;
}
.app-auto-slider {
  position: relative;
  width: auto;
  margin: 0 auto 50px;
  border-radius: 20px;
  overflow: hidden;
  padding-top: 50%; /* Aspect ratio for desktop */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.b-account-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.b-account-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  background-color: #f7f7f9;
}
.feature-img {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.image-177 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Pure CSS Animation for Fading */
.b-account-slide:nth-child(1) {
  animation: fade-in-out 10s infinite 0s;
}
.b-account-slide:nth-child(2) {
  animation: fade-in-out 10s infinite 2.5s;
}
.b-account-slide:nth-child(3) {
  animation: fade-in-out 10s infinite 5s;
}
.b-account-slide:nth-child(4) {
  animation: fade-in-out 10s infinite 7.5s;
}

@keyframes fade-in-out {
  0% {
    opacity: 0;
    z-index: 10;
  }
  10% {
    opacity: 1;
    z-index: 10;
  }
  25% {
    opacity: 1;
    z-index: 10;
  }
  35% {
    opacity: 0;
    z-index: 1;
  }
  100% {
    opacity: 0;
    z-index: 1;
  }
}

/* Navigation Dots (Simple implementation) */
.w-slider-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 15px;
}
.w-slider-dot {
  width: 8px;
  height: 8px;
  background-color: #ccc;
  border-radius: 50%;
}
.w-slider-dot.w-active {
  background-color: #007bff;
}

/* Feature Tile Grid */
.w-layout-grid.grid-feature-content.features-app-theme {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin: 0 auto;
}
.w-layout-grid.grid-feature-content.features-app-theme.row-2 {
  margin-top: 50px;
}
.grid-feature-content.row-2 {
  margin-bottom: 80px;
}
.feature-tile-content-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.icon-wrap-3 {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}
.icon-regular-11 {
  width: 100%;
  height: 100%;
}
.sub-heading-regular-3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}
.paragraph-regular-14 {
  font-size: 14px;
  color: #777;
}

.helping-hand-grid {
  justify-content: center;
}

/* --------------------------------------------------------------------------------
   8. Feature Blocks (Storefront & Dashboard)
-------------------------------------------------------------------------------- */

.section-online-storefront {
  padding: 0px 20px;
}
.feature-block-split {
  display: flex;
  align-items: center;
  gap: 80px;
}
.feature-content-list {
  display: flex;
  gap: 20px;
  flex: 1;
  flex-direction: column;
}

.feature-image-wrapper {
  flex: 1;
  min-height: 400px;
  background-color: transparent;
  border-radius: 10px;
  overflow: hidden;
}
.feature-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* .reverse-split {
  flex-direction: row-reverse;
} */
/* .feature-content-list h2 {
  margin-bottom: 30px;
} */
.feature-sub-text {
  font-size: 1.1rem;
  color: var(--text-light);
  margin-bottom: 30px;
}
.cta-content-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 25px;
}
.item-title {
  font-weight: 700;
  margin-bottom: 5px;
}
.item-text p {
  font-size: 0.95rem;
  color: var(--text-light);
}

/* Dynamic Dashboard Unique */
.section-dynamic-dashboard-unique {
  background-image: linear-gradient(127deg, #d3ecff, #ffe0e0);
  position: relative;
}
.feature-block-split-dashboard {
  gap: 80px;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: minmax(auto, 650px) 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}
.page_modules h2 {
  color: var(--text-dark);
  margin-bottom: 20px;
  font-size: 40px;
  font-weight: 700;
  line-height: 54px;
}
.item-title-dashboard {
  color: #65768c;
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  line-height: 23px;
  font-weight: 500;
  margin-bottom: 5px;
}
.item-text-dashboard {
  color: var(--text-light);
}
.feature-image-wrapper-dashboard img {
  /* width: 100%;
  height: 100%; */
  max-width: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------------------
   9. Scroll Feature Cards Section
-------------------------------------------------------------------------------- */

.heading2.scroll-features {
  text-align: center;
}

.scroll-logos {
  position: relative;
  padding: 92px 0;
  overflow: hidden;
  background-image: linear-gradient(90deg, #d3ecff, #ffe0e0);
}
.f-container-regular-11 {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 0px; /* Adjusted for full-width scroll */
}
.heading-103 {
  font-size: 48px;
  line-height: 1.1;
  font-weight: 700;
  color: #333;
  margin-bottom: 16px;
}
.f-logo-carousel-wrap {
  position: relative;
  overflow: hidden;
  padding: 0 20px; /* Use padding for inner content space */
}
.testimonial-carousel-left {
  display: flex;
  width: max-content;
  padding: 40px 0;
  will-change: transform;
  gap: 30px;
  /* Base animation settings */
  animation: carousel-left 70s linear infinite;
}
.carousel-group-2 {
  display: flex;
  flex-shrink: 0;
  gap: 30px;
}
.content-card-tall {
  width: 376px;
  min-height: 400px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s;
}
.content-card-tall:hover {
  transform: translateY(-5px);
}
.subheading-large-15 {
  font-size: 20px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 8px;
}
.paragraph-small-55 {
  font-size: 14px;
  color: #777;
}
.content-card-tall img {
  width: 100%;
  height: auto;
  max-height: 250px;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  margin-top: 15px;
}

/* Gradient Fades */
.f-logo-gradient-r,
.f-logo-gradient-l {
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  height: 100%;
  z-index: 10;
  pointer-events: none;
  max-height: 480px;
  width: 120px;
}

.f-logo-gradient-r.feature-right {
  right: 0;
  background-image: linear-gradient(
    270deg,
    #fee0e0,
    #fee0e099 21%,
    #fee0e080 51%,
    #fff0
  );
}
.f-logo-gradient-l.feature-left {
  left: 0;
  background-image: linear-gradient(
    90deg,
    #d5ecff,
    #d5ecfecc 25%,
    #d5ecfe99 60%,
    #fff0
  );
}

@keyframes carousel-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50%));
  }
}

/* --------------------------------------------------------------------------------
   10. Testimonials Section
-------------------------------------------------------------------------------- */

.section-testimonials-favorite {
  background-color: white;
}
.text-block-47 {
  color: #000000;
  text-align: center;
  margin-bottom: 20px;
  font-size: 40px;
  font-weight: 700;
  line-height: 54px;
}
.testimonial-sub-text {
  margin: 0 auto 60px;
}
.h6-heading-2.text-weight-medium {
  text-align: left;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}
.paragraph-small-19 {
  color: #ff5e19;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}
.paragraph-large-10.text-weight-bold {
  font-size: 20px;
  font-weight: 700;
}
.testimonial-slider-container {
  overflow: hidden;
  max-width: 1000px;
  margin: 0 auto;
}
.slider-track {
  display: flex;
  transition: transform 0.4s ease-in-out;
}
.testimonial-slide {
  min-width: 100%;
  flex-shrink: 0;
}
.testimonial-block {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  padding: 0 20px;
}
.testimonial-image-wrapper {
  flex-shrink: 0;
  width: 350px;
  max-width: 100%;
}
.testimonial-image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}
.testimonial-content-wrapper {
  grid-row-gap: 40px;
  flex-direction: column;
  padding: 0;
  display: flex;
  position: relative;
  flex-grow: 1;
  max-width: 450px;
}
.testimonial-quote {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 40px;
}
.testimonial-navigation {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 60px;
}
.nav-arrow {
  background: none;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.nav-arrow:hover {
  border-color: #333;
}

/* --------------------------------------------------------------------------------
   11. Round-the-clock support
-------------------------------------------------------------------------------- */

.bento-grid-three-support {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.fitness-card-support {
  display: flex;
  overflow: hidden;
  background-color: #f0f0f0;
  border-radius: 30px;
  flex-direction: column;
  justify-content: space-between;
}
.fitness-card-support.card-2-support {
  background-color: #e9eefa;
}
.fitness-card-support.card-3-support {
  background-color: #ffedeb;
}
.card-image-placeholder-support {
  max-height: 400px;
  background-color: transparent;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-image-placeholder-support img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-text-wrapper-support {
  text-align: left;
  padding: 30px 30px 0px;
}
.card-title-support {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.card-paragraph-support {
  font-size: 0.95rem;
  color: var(--text-light);
  margin-bottom: 20px;
}
.btn-center {
  text-align: center;
  margin-top: 50px;
}

/* --------------------------------------------------------------------------------
   12. FAQ Section
-------------------------------------------------------------------------------- */

.faq-section {
  background-image: linear-gradient(142deg, #d3ecff, #ffe0e0);
  position: relative;
}
.container-small-18 {
  width: 100%;
  max-width: 858px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.faq-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 20px;
}
.faq-item {
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.faq-question .icon {
  transition: transform 0.3s ease;
  font-weight: bold;
  font-size: 1.2rem;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0 0;
}
.faq-answer p {
  margin: 10px 0;
}
.faq-item.active .faq-answer {
  max-height: 200px;
  padding: 10px 0;
}
.faq-item.active .faq-question .icon {
  transform: rotate(180deg);
  content: "–";
}

/* --------------------------------------------------------------------------------
   13. Footer
-------------------------------------------------------------------------------- */

.footer {
  background-color: #0f0f0f;
  text-align: center;
  padding-top: 60px;
  padding-bottom: 60px;
}

.max-size {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 50px;
}

/* 'As Seen In' Section */
.as-seen {
  background-color: #1a1a1a;
  border: 1px solid #414141;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60px;
  padding: 40px;
  display: flex;
}

.paragraph-19 {
  font-size: 16px;
  color: #a0a0a0;
  font-weight: 500;
  margin: 0 20px 0 0;
}

.div-block-90 {
  display: flex;
  row-gap: 40px;
  flex-direction: row;
  align-content: space-between;
  width: -webkit-fill-available;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
.footer .div-block-90 p {
    color: white;
    font-weight: 600;
    font-size: 16px;
}
.footer .div-block-90 .paragraph-19 {
    font-size: 20px;
    justify-content: center;
    text-transform: uppercase;
}

.image-142,
.image-143,
.image-144,
.image-145 {
  height: 30px;
  /* margin-right: 40px; */
}

/* Main Footer Links Layout */
.footer-flex-container {
  display: flex;
  justify-content: space-between;
  gap: 100px;
  padding-bottom: 50px;
}

.footer-logo-div {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  max-width: 200px;
}

.footer-image {
  max-height: 55px;
  width: 100%;
  height: 100%;
}

.social-icons {
  display: flex;
  gap: 15px;
}

.social-icon-image {
  width: 20px;
  height: 20px;
  opacity: 0.8;
}

.image-217 {
  width: 160px;
}

/* Link Columns Wrapper */
.div-block-89 {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  display: grid;
  flex-grow: 1; /* Allows it to take remaining space */
}

/* Individual Link Columns */
.footer-col-div,
.footer-hor-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-heading {
  color: #fff;
  margin-bottom: 15px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

.footer-link {
  color: #ffffffcc;
  font-size: 14px;
  text-decoration: none;
  margin-bottom: 10px;
  transition: color 0.2s;
  line-height: 1.4;
}

.footer-link:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-link.main {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
}
.footer-link.main.zero-padding {
  margin-bottom: 0;
}

/* Copyright Bar */
.copyright-text {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 30px;
  text-align: center;
  font-size: 14px;
  color: #a0a0a0;
}

.wrap-v-large-2 {
  z-index: 5;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-direction: column;
  align-items: stretch;
  display: flex;
  position: relative;
}

/* --------------------------------------------------------------------------------
   14. Case Study Header Styles (NEW)
-------------------------------------------------------------------------------- */

.header-section-l.case-study-header {
  background-color: #000; /* Deep dark blue background */
  color: white;
  padding: 120px 20px;
  position: relative;
  overflow: hidden;
}
.container-large-2 {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
.header-grid-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Left Content Styles */
.wrap-v-x-large {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-direction: column;
  justify-content: center;
  display: flex;
}
.h3-heading {
  color: #fff;
  -webkit-text-fill-color: inherit;
  background-clip: border-box;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1em;
}
.subheading-small-2.sub-text {
  color: #fff;
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
}

/* Right Content Styles (Social Proof/CTA) */
.avatar-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}
.avatar-group {
  display: flex;
}
.avatar-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--secondary-color); /* Border color matching background */
  flex-shrink: 0;
  background-color: white; /* Fallback for avatars */
}
.avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-secondary {
  margin-left: -12px; /* Overlap effect */
}
.paragraph-large-2.text-weight-semi-bold {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
  color: white;
}
.text-color-purple-500 {
  color: #ff5e19; /* Use your existing primary purple */
}
.wrap-h-large.align-center.wrap-children {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}

/* New CTA Button Style */
.button-primary-l-2.icon-left {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #ff5e19; /* A strong orange/red for contrast against the dark background */
  color: white !important;
  border-radius: 8px;
  padding: 15px 30px;
  font-weight: 700;
  transition: all 0.2s;
  box-shadow: 0 4px 15px rgba(255, 94, 25, 0.4);
}
.button-primary-l-2.icon-left:hover {
  background-color: #e04a0e;
}
.button-primary-l-2.icon-left img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1); /* Ensure icon is white */
}
.text-block-37 {
  font-size: 1rem;
  line-height: 1;
}
.paragraph-small-2 {
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 18px;
}
.paragraph-small-2.text-color-purple-400 {
  color: #37404d;
}

/* General Layout & Structure (no changes from previous) */
.section-regular-2 {
  padding: 80px 0; /* Adjust padding as needed */
  background-color: #ffffff; /* Example background */
}

.container-large-7 {
  max-width: 1200px; /* Example max width for content */
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Heading Block (no changes from previous) */
.heading-wrapper {
  text-align: center;
  margin-bottom: 60px;
}

.heading-detail {
  color: #ff5722; /* Example accent color */
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.case-head {
  font-size: 50px;
  color: #0a0a0a;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4;
}

.subheading-small-3 {
  color: #6a6a6a;
  font-size: 16px;
  margin-top: 10px;
}

/* --- Main Blog Grid Layout --- */

.collection-list-16 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Default to 3 columns */
  gap: 32px; /* Space between cards */
  grid-auto-rows: minmax(auto, max-content); /* Ensures rows size to content */
}

/* Style for the first two items - make them span 2 columns and take up a full row */
.collection-list-16 .w-dyn-item:nth-child(1) {
  grid-column: span 1; /* Each takes 1 column in a 2-column layout conceptually */
  /* To visually place them side-by-side in the first "row" of a 3-column grid */
  /* we might need to adjust the grid directly or ensure aspect ratio makes sense. */
}

.collection-list-16 .w-dyn-item:nth-child(2) {
  grid-column: span 1;
}

/* Specific styling for the first two items to make them appear larger */
/* This is a bit tricky with pure CSS Grid and :nth-child in a single grid.
   A more robust solution might involve distinct sections or JS.
   However, we can make their image thumbs taller to visually distinguish them. */
.collection-list-16 .w-dyn-item:nth-child(1) .blog-thumb,
.collection-list-16 .w-dyn-item:nth-child(2) .blog-thumb {
  padding-bottom: 70%; /* Taller image aspect ratio for the first two cards */
}

/* Card Styling (blog-link) - mostly unchanged, but some adjustments to flex properties */
.blog-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s; /* Added box-shadow transition */
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Subtle shadow for card effect */
  height: 100%; /* Ensure cards stretch to fill grid cell height */
}

.blog-link:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.blog-thumb {
  position: relative;
  width: 100%;
  height: 400px;
  object-fit: cover;
  padding-bottom: 60%; /* Default aspect ratio for 3-column grid images */
}

.image-cover-2 {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card Content Area */
.blog-content-2 {
  padding: 20px; /* Added padding to all sides */
  display: flex; /* Use flexbox for content to push read time to bottom */
  flex-direction: column;
  flex-grow: 1; /* Allow content to grow */
}

.blog-date-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.dot-small {
  width: 4px;
  height: 4px;
  background-color: #ff5722;
  border-radius: 50%;
  flex-shrink: 0;
}

.text-block-42,
.text-block-43 {
  font-size: 13px;
  color: #888;
}

.h5-heading-4,
.sub-heading-regular {
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 10px;
  /* Multiline ellipsis for clean look */
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Limit to 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-line {
  width: 30px;
  height: 2px;
  background-color: #ff5722;
  margin-bottom: 10px;
}

.paragraph-small-6 {
  font-size: 14px;
  color: #888;
  margin-top: auto; /* Pushes to the bottom if content is shorter */
}

/* --- Responsive Adjustments --- */
@media screen and (min-width: 769px) {
  /* For screens wider than 768px (desktop), apply the specific layout */
  .collection-list-16 {
    grid-template-columns: repeat(3, 1fr); /* Default 3 columns */
  }

  /* Target the first two items to span 1 column each in a 2-column row */
  /* This creates the illusion of a 2-column layout for the first row,
       by using grid-template-areas or by adjusting how items flow.
       A simpler approach for this visual effect is to treat the first row
       as a separate grid visually. If using a single grid, this becomes complex.

       Let's re-think with flexbox for the first row for simplicity, or
       use grid-template-areas if we have control over the parent container.

       Given the provided screenshot, the first two items *look* like they are
       in a 2-column grid, and then subsequent items are in a 3-column grid.
       The most straightforward way to achieve this with a single `collection-list-16`
       is to adjust the `grid-template-columns` for the parent, and use `grid-column: span X;`
       on the items.

       A more effective approach for the visual is to define specific grid template columns for the first row.
       This will require knowing exactly how many elements are in the 'first row'.
       If it's always just 2, we can define a grid where the first two elements are laid out differently.
       */

  .collection-list-16 {
    /* Define a grid with 6 implicit columns for the first row to align 2 items,
           then 3 columns for the rest. This is not ideal for pure CSS. */
    grid-template-columns: repeat(
      6,
      1fr
    ); /* A hacky way to allow 2 items to span 3 each */
  }

  .collection-list-16 .w-dyn-item:nth-child(1),
  .collection-list-16 .w-dyn-item:nth-child(2) {
    grid-column: span 3; /* Each of the first two items spans 3 of the 6 columns, making them 2 items per row */
  }

  .collection-list-16 .w-dyn-item:nth-child(n + 3) {
    /* For the 3rd item and beyond */
    grid-column: span 2; /* Each of these spans 2 of the 6 columns, making them 3 items per row (6/2=3) */
  }
}

@media screen and (max-width: 768px) {
  /* On tablets and smaller, revert to 2 columns for all items */
  .collection-list-16 {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .collection-list-16 .w-dyn-item:nth-child(1) .blog-thumb,
  .collection-list-16 .w-dyn-item:nth-child(2) .blog-thumb {
    padding-bottom: 60%; /* Revert aspect ratio on smaller screens */
  }
  .collection-list-16 .w-dyn-item {
    /* Remove any specific desktop span rules */
    grid-column: auto !important;
  }
}

@media screen and (max-width: 479px) {
  /* On phones, stack all items in a single column */
  .collection-list-16 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Ensure images load correctly for the purpose of visual demonstration */
.image-cover-2 {
  background-color: #f0f0f0; /* Placeholder color */
  display: block;
}

/* General Layout & Structure */
.blog-categories-section {
  background-color: #dddfe063;
  padding: 80px 5%;
  position: relative;
}

.container-large {
  max-width: 1200px; /* Max width for content container */
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

/* Header Styling */
.header-wrapper {
  text-align: center;
  margin-bottom: 48px;
}

.category-heading {
  color: #0a0a0a;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4;
}

/* Grid Layout */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
  gap: 24px;
}

/* Card Styling (Desktop) */
.category-card {
  position: relative;
  background-color: white;
  padding: 32px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 10;
  transition: transform 0.2s, box-shadow 0.2s;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.content-wrapper {
  z-index: 10;
}

.card-description {
  font-size: 16px;
  margin-bottom: 24px;
}

.paragraph-regular-3 {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4em;
}

/* View All Link */
.view-all-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-top: auto; /* Pushes the link to the bottom */
}

.icon-link {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
  color: #1f2937;
  background-color: transparent;
  transition: all 0.2s;
}

.view-all-text {
  font-size: 14px;
  font-weight: 500;
  margin-left: 12px;
  color: #1f2937;
}

/* Hover effect for the default (light) button style */
.category-card:not(.dark-button) .view-all-link:hover .icon-link {
  background-color: #1f2937;
  border-color: #1f2937;
  color: white;
}

/* Dark Button Style (e.g., for "What's Hot?") */
.category-card.dark-button .icon-link {
  border-color: #1f2937;
  color: white;
  background-color: #1f2937;
}

/* --- Background Shape/Gradient Effects --- */
.feature-shape-a {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
  /* mix-blend-mode: multiply; /* Optional for a richer blend */
}

/* Color 1: Yellow/Orange */
.category-card.color-1 .feature-shape-a {
  background: radial-gradient(circle at 100% 0%, #fdd874, transparent 60%);
}

/* Color 2: Green */
.category-card.color-2 .feature-shape-a {
  background: radial-gradient(circle at 100% 0%, #8fe3b5, transparent 60%);
}

/* Color 3: Pink/Purple */
.category-card.color-3 .feature-shape-a {
  background: radial-gradient(circle at 100% 0%, #ff99cc, transparent 60%);
}

/* Color 4: Blue (Added for extra variety) */
.category-card.color-4 .feature-shape-a {
  background: radial-gradient(circle at 100% 0%, #a0b9f7, transparent 60%);
}

.h5-heading-2 {
  color: #000;
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2em;
}

/* --- Responsive Adjustments --- */
@media screen and (max-width: 1024px) {
  /* Two columns on tablets */
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media screen and (max-width: 640px) {
  /* Single column on phones */
  .category-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* --------------------------------------------------------------------------------
   15. Consolidated Responsive Styles (Updated)
-------------------------------------------------------------------------------- */

/* --- Tablet / Large Mobile (Max Width 1024px) --- */
@media (max-width: 1024px) {
  .max-size {
    padding: 0 40px;
  }
  .div-block-89 {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 40px;
    grid-column-gap: 40px;
  }

  /* Case Study Header Mobile Adjustments */
  .header-grid-content {
    gap: 40px;
  }
  .h3-heading {
    font-size: 48px;
  }
  .subheading-small-2.sub-text {
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------------------
   16. Resources/Templates Page Hero Section (NEW)
-------------------------------------------------------------------------------- */

.resources-hero-section {
  position: relative;
  padding: 120px 0; /* Generous padding top/bottom */
  overflow: hidden;
}

.resources-hero-section::before {
  /* Large angular background shape (red/orange gradient) */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 100%;
  background-image: linear-gradient(
    135deg,
    #ff5e19 0%,
    #ff955c 100%
  ); /* Orange/Red Gradient */
  /* Skew the shape to create the angled diagonal divider */
  transform: skewY(-10deg);
  transform-origin: top left;
  z-index: 0;
}

.resources-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: center;
}

/* Left Content Column */
.resources-content-col {
  color: white; /* Text should be white on the gradient background */
  padding-top: 20px;
  width: 50%;
  text-align: center;
}

.resources-content-col .heading-1 {
  font-size: 60px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 20px;
  color: white;
}

.resources-content-col .sub-heading {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 40px;
}

/* Right Image Column */
.resources-image-col {
  display: flex;
  justify-content: flex-end;
}

.resources-image-col .hero-container {
  max-width: 440px;
  width: 100%;
  margin-top: 50px;
}

.resources-image-col .hero-image {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

/* CTA Override for Orange Button */
.orange-cta-override {
  background-color: var(--secondary-color); /* Deep Dark Blue for CTA */
  border: 2px solid var(--secondary-color);
  color: white !important;
  transition: background-color 0.2s;
}

.orange-cta-override:hover {
  background-color: #050119;
  border-color: #050119;
}

/* --------------------------------------------------------------------------------
   17. Resources/Templates Feature Block (Forms Section) (NEW)
-------------------------------------------------------------------------------- */

.standard-section.resources-feature-forms {
  background-color: white;
  padding: 100px 20px;
}

.resources-feature-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

.resources-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.resources-feature-content-col {
  padding-right: 20px;
}

.forms-heading {
  font-size: 2.5rem; /* Matches the size in your image */
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  margin-bottom: 20px;
}

.feature-body-text {
  font-size: 1.1rem;
  color: var(--text-light);
  margin-bottom: 30px;
}

.resources-feature-image-col {
  display: flex;
  justify-content: center;
}

.forms-mockup-img {
  width: 100%;
  max-width: 500px;
  height: auto;
  display: block;
}

/* CTA Override 2: Regular Orange button, slightly different name for clarity */
.orange-cta-override-2 {
  background-color: #ff5e19;
  border: 2px solid #ff5e19;
  color: white !important;
  transition: background-color 0.2s;
}

.orange-cta-override-2:hover {
  background-color: #e04a0e;
  border-color: #e04a0e;
}

/* --------------------------------------------------------------------------------
   18. Resource Library Section (NEW)
-------------------------------------------------------------------------------- */

.resource-library-section {
  background-color: #000000; /* Deep dark blue/black background */
  padding: 100px 20px;
  color: white;
  text-align: center;
}

.feature-content-list-dashboard h2 {
  margin-bottom: 0px;
}

.library-container {
  max-width: 1280px;
  margin: 0 auto;
}

.library-heading {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  color: white;
  margin-bottom: 60px;
}

.resource-card-grid {
  display: grid;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.resource-card {
  background-color: #000; /* Black for card background */
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-content: space-between;
}

.card-image-wrapper {
  width: 100%;
  padding-bottom: 70%; /* Aspect ratio for the image area */
  position: relative;
  background-color: #1a1a1a; /* Darker background for image loading */
}

.card-image-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: left;
}

.card-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  color: white;
}

.card-description {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 25px;
  flex-grow: 1; /* Pushes the CTA to the bottom */
}

/* Button override from your existing CSS (orange-cta-override-2) */
.resource-card .main-cta-btn {
  width: 100%;
  padding: 12px 0;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
  .resource-card-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .resource-library-section {
    padding: 60px 20px;
  }
  .library-heading {
    font-size: 32px;
    margin-bottom: 40px;
  }
  .resource-card-grid {
    grid-template-columns: 1fr; /* 1 column on mobile */
  }
}

/* --- Responsive Adjustments for Forms Feature Block --- */

@media (max-width: 992px) {
  .resources-feature-grid {
    grid-template-columns: 1fr; /* Stack columns on tablet */
    gap: 40px;
    text-align: center;
  }
  .resources-feature-content-col {
    padding-right: 0;
    order: 1; /* Move content below the image on small screens */
  }
  .resources-feature-image-col {
    order: 0;
  }
  .forms-heading {
    font-size: 2rem;
  }
  .feature-body-text {
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------------------
   16. Resources/Templates Page Hero Section (NEW)
[Immersive content redacted for brevity.]
/* --- Responsive Adjustments for Forms Feature Block --- */

@media (max-width: 992px) {
  .resources-feature-grid {
    grid-template-columns: 1fr; /* Stack columns on tablet */
    gap: 40px;
    text-align: center;
  }
  .resources-feature-content-col {
    padding-right: 0;
    order: 1; /* Move content below the image on small screens */
  }
  .resources-feature-image-col {
    order: 0;
  }
  .forms-heading {
    font-size: 2rem;
  }
  .feature-body-text {
    font-size: 1rem;
  }
}
/* New Reversal Class for the Feature Block */
.resources-feature-grid.reverse-feature-grid {
  grid-template-areas: "image content";
  grid-template-columns: 0.9fr 1fr; /* Keep the content column slightly wider */
}

.resources-feature-grid.reverse-feature-grid .resources-feature-image-col {
  grid-area: image;
  justify-content: flex-start; /* Align image to the left */
}

.resources-feature-grid.reverse-feature-grid .resources-feature-content-col {
  grid-area: content;
  text-align: left;
  padding-left: 20px;
}

/* Maintain stacking order on small screens */
@media (max-width: 992px) {
  .resources-feature-grid.reverse-feature-grid {
    display: flex;
    flex-direction: column;
  }
  .resources-feature-grid.reverse-feature-grid .resources-feature-image-col {
    justify-content: center; /* Center image when stacked */
    order: 0;
  }
  .resources-feature-grid.reverse-feature-grid .resources-feature-content-col {
    text-align: center;
    padding-left: 0;
    order: 1;
  }
}

/* --- Responsive Adjustments for Resources Hero --- */

@media (max-width: 992px) {
  .mobile-right-buttons {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .resources-hero-section {
    padding: 80px 0;
  }
  .resources-container {
    grid-template-columns: 1fr; /* Stack columns on tablet */
    gap: 40px;
    text-align: center;
  }
  .resources-hero-section::before {
    height: 150%; /* Make the skewed background cover more vertically */
  }
  .resources-content-col {
    width: 100%;
    padding-top: 0;
  }
  .resources-content-col .heading-1 {
    font-size: 2.5rem;
  }
  .resources-content-col .sub-heading {
    font-size: 1.1rem;
  }
  .resources-image-col {
    justify-content: center; /* Center image when stacked */
  }
  .resources-image-col .hero-container {
    max-width: 350px;
    margin-top: 0;
  }
}

@media (max-width: 600px) {
  .resources-hero-section {
    padding: 60px 0;
  }
  .resources-hero-section::before {
    transform: skewY(-5deg); /* Less aggressive skew on mobile */
  }
  .resources-content-col .heading-1 {
    font-size: 2rem;
  }
  .resources-content-col .sub-heading {
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------------------
   19. CTA Launch App Section (NEW)
-------------------------------------------------------------------------------- */

.standard-section.cta-launch-app {
  /* Background color based on the reference image (dark/black) */
  background-color: #000000; /* Using the deep dark blue variable */
  padding: 0px 0px;
}

.launch-cta-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 50px;
}

.launch-cta-grid {
  display: grid;
  /* Unequal columns: Content takes 7/12 (approx 58%), Image takes 5/12 (approx 42%) */
  grid-template-columns: 7fr 5fr;
  gap: 40px;
  align-items: center;
}

.launch-cta-content {
  color: white;
}

.cta-launch-heading {
  /* Styling to match the bold, multi-line heading in the image */
  font-size: 50px;
  font-weight: 700;
  line-height: 60px;
  margin-bottom: 20px;
}

.cta-launch-subtext {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 30px;
}

.launch-cta-image-col {
  /* Ensures the image wrapper aligns to the right */
  display: flex;
  justify-content: flex-end;
  align-items: flex-end; /* Align to the bottom if possible */
  height: 100%;
}

.cta-image-wrap {
  /* Added max-width to control the size of the image relative to the column */
  max-width: 540px;
  width: 100%;
}

.cta-launch-image {
  width: 100%;
  margin-top: 100px;
  height: auto;
  display: block;
  /* Optional: Apply an object-fit adjustment if the image is a cutout */
  object-fit: contain;
}

.podcast-header-guide .header-grid-content {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
}

section.header-section-l.case-study-header.podcast-header-guide {
  padding: 80px 5%;
}

.h1-heading-41 {
  color: var(--white);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 50px;
  font-weight: 700;
  line-height: 1.2;
}

.podcast-header-guide .header-grid-content {
  gap: 40px;
}

/* --------------------------------------------------------------------------------
   20. Resource CTA Gallery Section (NEW)
-------------------------------------------------------------------------------- */

.resource-cta-gallery {
  padding: 100px 20px;
  background-color: var(--background-light); /* Light background for contrast */
}

.gallery-container {
  max-width: 1200px;
  margin: 0 auto;
}

.resource-card-gallery-grid {
  display: grid;
  /* 3 columns on desktop, matching the layout in the image */
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.resource-cta-card {
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.resource-cta-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.cta-card-image-wrapper {
  position: relative;
  width: 100%;
  height: 300px; /* Fixed height for the visual consistency of the mockups */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  overflow: hidden;
}

/* Background Color Variants to match the screenshot */
.bg-green-dark {
  background-color: #2e6b7d;
}
.bg-blue-dark {
  background-image: linear-gradient(135deg, #4d156f 0%, #0c023d 100%);
}
.bg-green-light {
  background-color: #5bbd7c;
}
.bg-green-light-v2 {
  background-color: #38b2ac;
}
.bg-blue-dark-v2 {
  background-color: #3b5f7e;
}
.bg-yellow-light {
  background-color: #ffe08a;
}

.cta-card-icon {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ensure the image fits inside the colored area */
}

.cta-card-icon.cta-image-contain {
  max-height: 100%;
  max-width: 100%;
  height: auto;
}

.card-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  opacity: 0.8;
}

.tag-line {
  position: absolute;
  top: 50%;
  width: 40%;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10;
}

/* Content Area */
.cta-card-content {
  padding: 25px;
  flex-grow: 1; /* Allows content area to fill vertical space */
  display: flex;
  flex-direction: column;
}

.cta-card-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
  margin-bottom: 8px;
  min-height: 52px; /* Ensure title section is consistent height */
}

.cta-card-description {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1; /* Pushes the button to the bottom */
}

/* Button Styling Override (Dark button on light background) */
.main-cta-btn.dark-cta-override {
  background-color: #000;
  display: inline-block;
  width: fit-content;
  border: 2px solid #000;
  color: white !important;
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 600;
  transition: background-color 0.2s;
}

.main-cta-btn.dark-cta-override:hover {
  background-color: #333;
  border-color: #333;
}

/* --------------------------------------------------------------------------------
   21. Podcast Guide Hero Section (NEW)
-------------------------------------------------------------------------------- */

.podcast-hero-section {
  position: relative;
  background-color: #000000; /* Deep dark blue/black */
  padding: 120px 20px;
  overflow: hidden;
}

.podcast-grid {
  display: grid;
  /* Use grid template to define unequal columns, similar to 7fr 5fr (approx) */
  grid-template-columns: 1fr 0.8fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 10;
}

.podcast-content {
  color: white;
  padding-right: 40px;
}

.podcast-content .h1-heading-41 {
  font-size: 50px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
  color: white; /* Ensure heading is white */
}

.podcast-content .paragraph-regular-53 {
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 40px;
}

/* Specific CTA Styling (White Button) */
.main-cta-btn.podcast-cta-white {
  background-color: white;
  border: 2px solid white;
  color: var(--secondary-color) !important; /* Dark text on white button */
  padding: 15px 40px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 8px;
  transition: all 0.2s;
}
.main-cta-btn.podcast-cta-white:hover {
  background-color: var(--background-light);
  border-color: var(--background-light);
}

/* Image Wrapper and Mockup */
.podcast-image-mockup {
  display: flex;
  justify-content: center;
}

.podcast-mockup-img {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  /* Styles to replicate the colored mockup box from the image */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}

/* Background Element (Optional, for patterned background) */
.header-background-4.podcast-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1; /* Subtly visible */
  pointer-events: none;
  background-image: url("img/Background Pattern Tall.webp"); /* Assuming you have a background pattern asset */
  background-size: cover;
  background-position: center;
}

/* --------------------------------------------------------------------------------
   22. Blog Hero Grid Section (NEW)
-------------------------------------------------------------------------------- */

.section-blog-hero {
  padding: 80px 20px;
  background-color: white; /* Match the visible white background */
}

.blog-hero-container {
  max-width: 1280px;
  margin: 0 auto;
}

.blog-hero-grid-layout {
  display: grid;
  /* Main column (left) is larger than the secondary stack (right) */
  grid-template-columns: 3fr 2fr;
  gap: 40px;
  align-items: stretch; /* Stretch items to maintain equal height on the main axis */
}

/* --- General Blog Card Styling --- */
.blog-card-link-wrapper {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  overflow: hidden;
  /* height: 100%; */
  background-color: white;
}
.blog-image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.blog-image-cover {
  width: 100%;
  max-height: 500px;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- 1. Primary Hero Post (Large Left) --- */
.blog-hero-main-post {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}
/* Overlay content for the large image */
.blog-image-overlay-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 30px;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0) 50%
  );
  z-index: 5;
}
.blog-hero-overlay-heading {
  color: white;
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: 800;
}
.blog-hero-main-post .blog-card-content.large-content {
  padding: 20px;
}
.blog-hero-main-post .blog-hero-heading {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-dark);
}
.blog-hero-main-post .para-medium {
  font-size: 1rem;
  color: var(--text-light);
}

.feature-content-list-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- 2. Secondary Posts (Small Right Stack) --- */
.blog-hero-sub-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.blog-hero-sub-post {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

/* FIX 1: Ensure sub-card link is column direction (Image on top of content) */
.sub-card-link {
  flex-direction: column;
}

/* FIX 2: Reset conflicting image sizing rules and enforce image height */
.blog-hero-sub-post .blog-image-wrapper.small-image {
  /* Set a consistent aspect ratio using padding-bottom for the image container */
  padding-bottom: 60%;
  height: auto; /* Allow height to be determined by padding-bottom */
  /* Remove unnecessary flex-basis: 45%; */
}

/* Ensure the image covers the container */
.blog-hero-sub-post .blog-image-wrapper.small-image .blog-image-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-hero-sub-post .blog-card-content.small-content {
  /* Adjust padding for the content below the image */
  padding: 15px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align content to the top */
}
.blog-hero-heading.small-heading {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-dark);
  margin-bottom: 0;
}

/* --- Shared Content Styles --- */
.card-content-top {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  color: #888;
}
.category-link {
  color: var(--primary-color);
  font-weight: 600;
}

/* --------------------------------------------------------------------------------
   23. Blog Category Grid Section (NEW)
-------------------------------------------------------------------------------- */

.section-blog-category {
  background-color: #000000; /* Dark gray background to match the image */
  padding: 80px 20px 100px;
  color: white;
}

.blog-category-container {
  max-width: 1200px;
  margin: 0 auto;
}

.category-heading-dark {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  color: white;
  text-align: center;
  margin-bottom: 60px;
}

.blog-category-grid {
  display: grid;
  /* 4 columns on desktop */
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 20px;
  justify-items: center;
}

.category-item {
  text-align: center;
  max-width: 250px;
}

.category-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: white;
  transition: opacity 0.2s;
}

.category-block:hover {
  opacity: 0.8;
}

.category-image-wrapper {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  border: 3px solid rgba(255, 255, 255, 0.1); /* Subtle white border */
}

.category-image-circle {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.category-title-text {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
  .blog-category-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on tablet landscape */
    gap: 30px 15px;
  }
}

@media (max-width: 768px) {
  .category-heading-dark {
    font-size: 32px;
    margin-bottom: 40px;
  }
  .blog-category-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet portrait */
  }
}

@media (max-width: 480px) {
  .section-blog-category {
    padding: 50px 20px 60px;
  }
  .category-image-wrapper {
    width: 100px;
    height: 100px;
  }
}

/* --------------------------------------------------------------------------------
   24. Latest Posts Blog List Section (NEW)
-------------------------------------------------------------------------------- */

.section-blog-latest-posts {
  padding: 80px 20px;
  background-color: white;
  position: relative;
}

.blog-list-container {
  max-width: 1200px;
  margin: 0 auto;
}

.latest-posts-heading {
  /* Style for the large, partially visible "Latest Posts" text */
  font-size: 50px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-dark);
  margin-bottom: 50px;
  position: relative;
}

/* Optional: Style the hidden/faded absolute text if desired, based on the snippet */
.absolute-text {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 120px;
  font-weight: 900;
  color: #f0f0f0;
  opacity: 0.8;
  z-index: 1;
  pointer-events: none;
  transform: translateY(-50px);
}

.latest-posts-grid {
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

/* --- Individual Blog Card Style --- */

.blog-card {
  display: flex;
  max-width: 532px;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background-color: white;
}

.blog-image-wrapper.top-image-card {
  height: 690px;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.blog-image-wrapper.top-image-card img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-card-content {
  padding: 20px 0;
}

/* Reusing shared content styles from previous section (22) */
.card-content-top {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  color: #888;
}
.category-link {
  color: #ff5e19; /* Orange accent color from image */
  font-weight: 600;
  text-decoration: none;
}
.blog-card-content-bottom {
  text-decoration: none;
  color: inherit;
  display: block;
}

.post-title-heading {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.post-excerpt {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.6;
}

/* --- Pagination / Load More Button --- */
.pagination-wrapper {
  text-align: center;
  margin-top: 60px;
}

.load-more-btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 8px;
  font-weight: 700;
  transition: all 0.3s;
  text-align: center;
  text-decoration: none !important;
  font-size: 1rem;
  background-color: #000000;
  border: 2px solid var(--text-dark);
  color: #ffffff !important;
}

.section-blog-latest-posts .absolute-text {
  color: #0f0f0f0f;
  font-size: 90px;
  font-weight: 700;
  line-height: 1.2;
  position: absolute;
  inset: 48px auto auto 12%;
}

.load-more-btn:hover {
  background-color: var(--background-light);
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
  .latest-posts-grid {
    grid-template-columns: 1fr; /* Stack into a single column on tablet */
    gap: 30px;
  }
}

@media (max-width: 600px) {
  .section-blog-latest-posts {
    padding: 50px 20px;
  }
  .latest-posts-heading {
    font-size: 40px;
    margin-bottom: 30px;
  }
  .post-title-heading {
    font-size: 1.15rem;
  }
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
  .blog-hero-grid-layout {
    grid-template-columns: 1fr; /* Stack columns on tablet */
    gap: 30px;
  }
  .blog-hero-main-post .blog-image-overlay-content {
    /* Reduce font size for the overlay title on smaller screens */
    align-items: flex-start;
    padding: 20px;
  }
  .blog-hero-overlay-heading {
    font-size: 1.8rem;
  }
}

@media (max-width: 600px) {
  .section-blog-hero {
    padding: 50px 20px;
  }
  .blog-hero-overlay-heading {
    font-size: 1.5rem;
  }
  .sub-card-link {
    flex-direction: column; /* Stack image and content vertically on mobile */
  }
  .blog-hero-sub-post .blog-image-wrapper.small-image {
    flex-basis: auto;
    padding-bottom: 50%;
  }
  .blog-hero-sub-post .blog-card-content.small-content {
    padding: 20px;
  }
}

section.fitness-software {
  overflow: hidden;
}

/* --------------------------------------------------------------------------------
   25. Editor's Pick Section (UPDATED FOR 50/50 LAYOUT)
-------------------------------------------------------------------------------- */

.section-blog-editors-pick {
  position: relative;
  padding: 80px 20px 100px;
  background-color: #1f1f1f; /* Deep dark blue/black background */
}

.editors-pick-container {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Editor's Pick Title (The large, offset, ghosted text) */
.editors-pick-title {
  font-size: 50px;
  font-weight: 800;
  line-height: 1.1;
  color: white;
  margin-bottom: 50px;
}
.absolute-text.dark {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 120px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.05); /* Very faint white */
  z-index: 1;
  pointer-events: none;
  transform: translateY(-50px);
}

/* --- Main Two-Column Layout --- */
.editor-pick-section-wrap {
  display: grid;
  /* FIX: Set both columns to equal width (50/50) */
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: stretch;
}

/* --- Left Column: Coach Stories (No change needed here as grid handles width) --- */
.coach-stories-wrapper .heading-36 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 24px;
}
.coach-stories-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.coach-story-card {
  background-color: transparent;
  border-radius: 8px;
  overflow: hidden;
}
.coach-story-card .blog-image-wrapper {
  position: relative;
}
.coach-story-card .blog-card-content {
  padding: 20px 0;
}
.story-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 10px;
}
.story-excerpt {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

/* --- Right Column: Quick Reads & Tags (No change needed here as grid handles width) --- */
.quick-reads-wrapper {
  margin-bottom: 60px;
}
.quick-reads-wrapper .heading-36 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 24px;
}
.quick-reads-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.quick-reads-block {
  padding: 20px 0;
}

.quick-reads-block:not(.last-item) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.quick-reads-block .card-content-top {
  font-size: 0.8rem;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.4);
}
.quick-reads-block .category-link {
  color: #ff5e19;
}

.quick-read-title {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
  color: white;
}

/* Tags Styling */
.tags-wrapper .heading-36 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 20px;
}
.tags-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.blog-tags {
  display: inline-block;
  padding: 8px 15px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background-color 0.2s;
}
.blog-tags:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.section-blog-editors-pick img.image-100 {
  max-width: 532px;
  height: 300px;
  object-fit: cover;
  width: 100%;
}

/* --------------------------------------------------------------------------------
   26. Blog Subscription CTA (FINALIZED for HTML Background Image)
-------------------------------------------------------------------------------- */

.section-blog-subscribe {
  padding: 80px 20px;
  background-color: var(--background-light);
  position: relative; /* CRUCIAL: Establishes context for the absolute image wrapper */
  overflow: hidden;
}

/* 1. Full-section Background Wrapper */
.subscribe-full-bg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Place behind content */
  opacity: 1; /* Keep full opacity, but we'll dim the image itself if needed */
  overflow: hidden;
}

/* 2. Full-section Background Image */
.subscribe-full-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures image covers the whole section without stretching */
  display: block;
  object-position: right center; /* Position image to the right, matching the visual intent */
  opacity: 1; /* Added opacity to ensure the foreground content is readable */
}

.container-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.container-bg-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Puts image behind content */
  opacity: 0.1; /* Keeps the image subtle */
  overflow: hidden;
}

/* 3. Content Wrapper */
.blog-subscribe-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative; /* Needed to position content above the absolute image */
  z-index: 10;
}

.blog-bg-image-styled {
  /* Background control properties */
  background-size: cover; /* Ensures the image covers the entire element */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from tiling */
}

.subscribe-section-wrapper {
  /* Main white container that sits on top of the background image */
  background-position: 100% 70%;
  min-height: 450px;
  border-radius: 12px;
  padding: 30px;
  margin: 0; /* Align to the left side of the container */
}

.subscribe-wrap {
  /* Since the image is now global, this wrapper no longer needs a grid */
  display: block;
}

.subscribe-section-content {
  max-width: 500px;
  padding: 20px;
  /* Ensure content remains visible and layered above the image */
  z-index: 10;
}

/* Content and Form Styles (Unchanged) */
.subscribe-section-content .heading-36 {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-dark);
  margin-bottom: 20px;
}
.subscribe-section-content .para-medium {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-light);
  margin-bottom: 30px;
}
.subscribe-form-wrapper {
  width: 100%;
  max-width: 400px;
}
.check-box-wrapper {
  margin-bottom: 20px;
  font-size: 0.95rem;
  color: var(--text-dark);
}
.check-box-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 10px;
}
.check-box-flex label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9rem;
  color: var(--text-light);
  cursor: pointer;
}
.field-wrapper {
  margin-bottom: 15px;
}
.field-wrapper label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 5px;
}
.text-field {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  box-sizing: border-box;
}
.submit-button.new-space {
  /* width: 100%; */
  background-color: #ff5e19;
  border: none;
  color: white;
  padding: 12px 20px;
  border-radius: 3px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s;
}
.submit-button.new-space:hover {
  background-color: #e04a0e;
}

/* --------------------------------------------------------------------------------
   28. Terms of Use Page Styles (Separated Sections)
-------------------------------------------------------------------------------- */

.terms-header-section {
  padding-top: 80px 20px; /* Space above the header */
  background-color: #f3f6f7; /* Light background for the header */
  border-bottom: 1px solid #eee;
}

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

.text-page-header h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
}

.terms-content-section {
  background-color: white; /* White background for the main content */
  padding: 50px 20px;
}

.tnc-container {
  padding: 0px; /* Padding for the content body */
}

.max-size.small-left-1060 {
  max-width: 1060px;
  margin: 0 auto; /* Center the content */
  text-align: left;
}

/* Headings */
.tnc-container h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--secondary-color); /* Deep color for section titles */
}

/* Paragraphs */
.tnc-container p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-light);
  margin-bottom: 20px;
}

/* Lists (Unordered and Ordered) */
.tnc-container ul,
.tnc-container ol {
  padding-left: 20px;
  margin-bottom: 20px;
}
.tnc-container li {
  margin-bottom: 10px;
  line-height: 1.6;
  color: var(--text-light);
}

/* Strong/Bold text within legal paragraphs */
.tnc-container strong {
  font-weight: 700;
  color: var(--text-dark);
}

/* Separator (Optional: Added for clarity between major sections) */
.tnc-container hr {
  border: none;
  border-top: 1px solid #f0f0f0;
  margin: 30px 0;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
  .subscribe-section-wrapper {
    max-width: 600px;
    margin: 0 auto; /* Center content wrapper when image is less prominent */
  }
  .subscribe-full-bg-wrapper {
    /* Reduce the prominence of the full background image on smaller screens */
    opacity: 0.05;
  }
}
@media (max-width: 600px) {
  .section-blog-subscribe {
    padding: 50px 20px;
  }
  .subscribe-section-wrapper {
    padding: 20px;
  }
  .subscribe-section-content .heading-36 {
    font-size: 1.8rem;
  }
}

section.stats {
  text-align: center;
}
section.fitness-software {
  text-align: center;
}
/* --------------------------------------------------------------------------------
   30. Capterra Trust & Rating Section (NEW)
-------------------------------------------------------------------------------- */

.capterra-trust-section {
  padding: 100px 20px;
  background-color: var(--background-light);
  text-align: center;
}

.capterra-container {
  max-width: 1200px;
  margin: 0 auto;
}

.trust-heading {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  margin-bottom: 20px;
}

.trust-subtext {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-light);
  max-width: 800px;
  margin: 0 auto 50px;
}

.rating-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 900px;
  margin: 0 auto 60px;
  align-items: center;
  justify-items: center;
}

.rating-link {
  display: block;
  max-width: 300px;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.rating-link:hover {
  opacity: 1;
}

.rating-logo {
  width: 100%;
  height: auto;
  display: block;
}

/* CTA Button Styling */
.trust-cta {
  /* Using dark CTA, but customizing width */
  padding: 15px 40px;
  font-size: 1.1rem;
  font-weight: 700;
  background-color: var(--secondary-color); /* Dark blue/black for prominence */
  border: 2px solid var(--secondary-color);
  color: white !important;
}

.trust-cta:hover {
  background-color: #333;
  border-color: #333;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
  .rating-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
    max-width: 600px;
    gap: 40px;
  }
}

@media (max-width: 600px) {
  .standard-section.resources-feature-forms {
    background-color: white;
    padding: 50px 20px;
  }
  .capterra-trust-section {
    padding: 60px 20px;
  }
  .trust-heading {
    font-size: 2rem;
  }
  .rating-grid {
    grid-template-columns: 1fr; /* 1 column on mobile */
    gap: 30px;
  }
  .trust-cta {
    width: 100%;
    max-width: 300px; /* Constrain button width */
  }
}

/* --------------------------------------------------------------------------------
   27. Instagram Feed Section (NEW)
-------------------------------------------------------------------------------- */

.insta-feed-section {
  padding: 100px 20px;
  background-color: white;
  text-align: center;
}

.insta-container {
  max-width: 1280px;
  margin: 0 auto;
}

.heading-box {
  margin-bottom: 50px;
}

.heading-2.smaller {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--text-dark);
}

.sub-heading.smaller {
  font-size: 1.1rem;
  color: #37404d;
  text-decoration: none;
  display: block;
}

.insta-grid {
  display: grid;
  grid-template-columns: repeat(
    4,
    1fr
  ); /* Default 6 columns for dense feed look */
  gap: 20px;
}

.insta-pic {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  padding-bottom: 100%; /* Square aspect ratio */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.insta-pic:hover {
  transform: scale(1.03);
}

.insta-post-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hide extra placeholder pics on smaller screens */
.insta-pic-placeholder {
  display: none;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
  .insta-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 columns for tablet */
  }
}

@media (max-width: 600px) {
  .insta-feed-section {
    padding: 60px 20px;
  }
  .insta-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for mobile */
  }
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
  .editor-pick-section-wrap {
    grid-template-columns: 1fr; /* Stack columns on tablet */
    gap: 50px;
  }
  .editors-pick-title {
    text-align: center;
  }
  .coach-stories-wrapper,
  .quick-reads-wrapper,
  .tags-wrapper {
    text-align: center;
  }
  .coach-stories-wrapper .heading-36,
  .quick-reads-wrapper .heading-36,
  .tags-wrapper .heading-36 {
    text-align: center;
  }
  .coach-stories-grid {
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
  }
  .tags-flex {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .section-blog-editors-pick {
    padding: 60px 20px;
  }
  .editors-pick-title {
    font-size: 40px;
    margin-bottom: 30px;
  }
  .quick-reads-block,
  .coach-story-card .blog-card-content {
    text-align: left; /* Keep content left-aligned for readability */
  }
  .quick-reads-block .card-content-top {
    justify-content: flex-start;
  }
  .story-title {
    font-size: 1.3rem;
  }
  .quick-read-title {
    font-size: 1rem;
  }
}
/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
  .podcast-hero-section {
    padding: 80px 20px;
  }
  .podcast-grid {
    grid-template-columns: 1fr; /* Stack columns on tablet */
    gap: 40px;
    text-align: center;
  }
  .podcast-content {
    order: 1;
    padding-right: 0;
  }
  .podcast-image-mockup {
    order: 0;
  }
  .podcast-content .h1-heading-41 {
    font-size: 40px;
  }
  .header-title-left,
  .max-width-small-9 {
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .podcast-hero-section {
    padding: 60px 20px;
  }
  .podcast-content .h1-heading-41 {
    font-size: 32px;
  }
  .main-cta-btn.podcast-cta-white {
    width: 100%;
  }
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
  .resource-card-gallery-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .resource-cta-gallery {
    padding: 60px 20px;
  }
  .resource-card-gallery-grid {
    grid-template-columns: 1fr; /* 1 column on mobile */
    gap: 20px;
  }
  .cta-card-image-wrapper {
    height: 250px;
  }
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
  .standard-section.cta-launch-app {
    padding: 0px 0px;
  }
  .launch-cta-grid {
    grid-template-columns: 1fr; /* Stack columns on tablet */
    gap: 40px;
    text-align: center;
  }
  .launch-cta-content {
    order: 1; /* Content below the image */
  }
  .launch-cta-image-col {
    order: 0;
    justify-content: center; /* Center image when stacked */
  }
  .cta-launch-heading {
    font-size: 32px;
  }
  .main-cta-btn.orange-cta-override-2 {
    width: auto; /* Allow button to shrink */
  }
}

@media (max-width: 600px) {
  .cta-launch-heading {
    font-size: 28px;
  }
  .cta-launch-subtext {
    font-size: 16px;
  }
  .cta-image-wrap {
    max-width: 300px;
  }
}

/* --- Tablet / Mobile Landscape (Max Width 992px) --- */
@media (max-width: 992px) {
  /* Global */
  .container {
    padding: 20px;
  }
  .hero-section {
    padding: 30px 00px 0;
  }
  section {
    padding: 50px 20px;
  }
  .sub-headline,
  span#typing-word-placeholder {
    font-size: 3rem;
    line-height: 1.2;
  }

  /* Navigation */
  .nav-menu-desktop {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: white;
    border-top: 1px solid #eee;
    padding: 10px 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  }
  .nav-menu-desktop.active {
    display: flex;
  }
  .menu-button {
    display: block;
    padding: 0;
  }

  .logo-main {
  }

  .nav-container .main-cta-btn {
    padding: 10px;
    font-size: 10px;
  }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .nav-item {
    padding: 15px 30px 15px 15px;
    width: 100%;
    border-bottom: 1px solid var(--background-light);
  }
  .nav-item:last-child {
    border-bottom: none;
  }
  .nav-link,
  .nav-dropdown-toggle {
    padding: 0px 0px;
  }

  /* Mobile Dropdown Styling */
  .dropdown-list {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0;
    background-color: var(--background-light);
    max-height: 0;
    transition: max-height 0.3s ease-out;
  }
  .nav-item.open .dropdown-list {
    max-height: 500px;
  }
  .dropdown-list li a {
    padding: 8px 20px 8px 40px;
    color: var(--text-light);
  }

  /* Hero Section */
  .hero-content-grid {
    padding: 0px 20px;
    grid-template-columns: 1fr;
    text-align: left;
  }
  .header-content {
    padding-right: 0;
  }
  .hero-slider-mockup {
    min-height: 400px;
    order: 0;
    /* min-height: 400px;
    max-width: 600px; */
    margin: 0 auto 0px;
  }
  .secondary-btn-color {
    margin-left: 0;
    margin-top: 15px;
  }
  .cta-group {
    gap: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  /* Bento Grid 1 (Versatile Tools) */
  .bento-grid-three {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    gap: 20px;
  }

  /* Bento Grid 2 (AI Assistant) */
  .w-layout-grid.bento-grid-three {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    gap: 20px;
  }

  /* App Theme Feature Grid */
  .w-layout-grid.grid-feature-content.features-app-theme {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 600px;
  }

  /* Feature Blocks (Storefront & Dashboard) */
  .feature-block-split,
  .feature-block-split-dashboard {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }
  .feature-content-list,
  .feature-content-list-dashboard {
    order: 1;
  }
  .feature-image-wrapper,
  .feature-image-wrapper-dashboard {
    order: 0;
    margin-bottom: 0;
  }
  .cta-content-item {
    justify-content: center;
  }
  .reverse-split .feature-content-list,
  .reverse-split-dashboard .feature-content-list-dashboard {
    order: 1;
  }
  .cta-content-item {
    justify-content: flex-start; /* Keep text left-aligned inside item */
  }
  .feature-block-split > div,
  .feature-block-split-dashboard > div {
    max-width: 600px;
    margin: 0 auto;
  }

  /* Case Study Header Mobile Adjustments */
  .header-grid-content {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .h3-heading {
    font-size: 40px;
  }
  .avatar-row {
    justify-content: flex-start;
  }
  .wrap-h-large.align-center.wrap-children {
    justify-content: flex-start;
  }

  /* Scroll Feature Cards */
  .heading-103 {
    font-size: 38px;
  }
  .f-logo-gradient-r,
  .f-logo-gradient-l {
    width: 100px;
  }

  /* Testimonials */
  .testimonial-block {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }
  .testimonial-image-wrapper {
    width: 250px;
  }
  .testimonial-content-wrapper,
  .testimonial-attribution {
    text-align: center;
  }

  /* Support Bento Grid */
  .bento-grid-three-support {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
  }
}

/* --- Tablet Portrait / Small Tablet (Max Width 768px) --- */
@media (max-width: 768px) {
  /* Logo Marquee */
  .logo-marquee--marquee-group img {
    height: 56px;
    padding: 0 30px;
  }
  .blog-image-wrapper.top-image-card {
    height: 300px; /* Make the thumbnail shorter on mobile devices */
  }

  /* General Heading Sizes */
  .heading-102,
  .text-block-47,
  .feature-content-list-dashboard h2 {
    font-size: 32px;
    line-height: 1.3;
  }
  .subscribe-section-wrapper.blog-bg-image-styled {
    /* This is the gradient you requested */
    background-image: linear-gradient(
      249deg,
      rgba(197, 249, 252, 0.5),
      rgba(249, 218, 199, 0.5)
    );
    background-size: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    background-position: top left;
  }
  /* App Theme Slider */
  .app-auto-slider {
    padding-top: 75%; /* More height on mobile */
  }
  .w-layout-grid.grid-feature-content.features-app-theme {
    grid-template-columns: 1fr 1fr 1fr; /* Stack features vertically */
  }

  /* Scroll Features */
  .heading-103 {
    font-size: 32px;
  }
  .sub-heading {
    font-size: 16px;
  }
  .content-card-tall {
    width: 250px;
    min-height: 350px;
  }
  .f-logo-gradient-r,
  .f-logo-gradient-l {
    width: 50px;
  }

  /* Footer */
  .max-size {
    padding: 0 20px;
  }
  .as-seen {
    flex-direction: column;
    gap: 15px;
    padding: 25px 20px;
    margin-bottom: 30px;
  }
  .footer-flex-container {
    flex-direction: column;
    gap: 20px;
    padding-bottom: 40px;
  }
  .footer-logo-div {
    align-items: center;
    max-width: none;
    gap: 40px;
    flex-direction: row;
    margin: 0px auto;
  }
  .div-block-89 {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet portrait */
    gap: 30px 20px;
  }
  .footer-col-div,
  .footer-hor-col {
    align-items: center; /* Center links in columns for better visual flow */
    width: 100%;
    text-align: center;
  }
  /* .image-142,
  .image-143,
  .image-144,
  .image-145 {
    margin-right: 20px;
  } */
}

/* --- Mobile Portrait (Max Width 600px) --- */
@media (max-width: 600px) {
  /* Global */
  section {
    padding: 50px 0px;
  }
  .w-layout-grid.grid-feature-content.features-app-theme {
    padding: 0px 20px;
    grid-template-columns: 1fr;
  }
  .heading-101 {
    font-size: 1.2rem;
  }
  .sub-headline,
  span#typing-word-placeholder {
    font-size: 2.2rem;
    line-height: 1.1;
  }
  .section-heading-centered {
    font-size: 1.8rem;
  }
  .main-cta-btn,
  .secondary-btn-color {
    /* padding: 12px 25px;
    width: 100%; */
    box-sizing: border-box;
  }
  .cta-group a {
    margin-right: 0;
    text-align: center;
  }

  /* Case Study Header Mobile Adjustments */
  .header-section-l.case-study-header {
    padding: 60px 20px;
  }
  .h3-heading {
    font-size: 32px;
  }
  .wrap-h-large.align-center.wrap-children {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Bento Grids */
  .bento-grid-three,
  .w-layout-grid.bento-grid-three,
  .bento-grid-three-support {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 400px;
  }

  /* Logo Marquee */
  .logo-marquee--marquee-group img {
    height: 48px;
    padding: 0 20px;
  }

  /* Scroll Features */
  .testimonial-carousel-left {
    animation: carousel-left 40s linear infinite; /* Slower scroll on mobile */
  }
}

/* --- Small Mobile (Max Width 480px) --- */
@media (max-width: 480px) {
  .container.feature-block-split {
    padding: 0;
}
.container.feature-block-split .reverse-split {
    padding: 0px 20px;
}
  .fb-logo {
    max-height: 35px;
  }
  .section-blog-latest-posts .absolute-text {
    font-size: 30px;
  }

  .nav-bar a.main-cta-btn.primary-btn-color {
    font-size: 14px;
    width: auto;
  }
  .footer-flex-container {
    flex-direction: column;
  }
  .main-cta.nav-cta {
    padding: 13px 15px;
    display: inline-block;
  }
  /* Footer */
  .div-block-90 {
    grid-column-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
  }
  .div-block-89 {
    grid-template-columns: 1fr; /* Single column stack on small mobile */
    gap: 30px 0;
  }
  .footer-logo-div {
    align-items: flex-start;
    flex-direction: column;
    margin: 0;
    gap: 20px;
  }
  .footer-col-div,
  .footer-hor-col {
    align-items: flex-start;
    padding-left: 0;
    padding-right: 0;
  }
  .container {
    padding: 20px;
  }
}

@media (max-width: 600px) {
  section.faq-section {
    padding: 50px 20px;
  }
}

.blog-wrapper {
  background: #f5f5f5;
  padding: 60px 0;
}

.blog-content-wrapper {
  background: #ffffff;
  padding: 60px 0;
}

.blog-container {
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: end;
  gap: 40px;
}

.blogs-details-container {
  max-width: 900px;
  margin: 0 auto;
}

.ad-box {
  display: flex;
  align-items: center;
  background: #ffff;
  padding: 20px;
  border-radius: 10px;
}

.ad-box img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
}

.ad-text {
  flex: 1;
}

.ad-text h2 {
  margin: 0 0 10px;
  font-size: 1.3rem;
}

.cta-btn {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 12px 22px;
  border-radius: 6px;
  text-decoration: none;
  margin-top: 10px;
}

.left-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.writteb-by-author {
  font-weight: bold;
  color: #555;
}

/* Right column */
.right-column {
  position: sticky;
  top: 20px;
}

.right-img-card {
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  color: #fff;
}

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

.card-text {
  padding: 20px;
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: bold;
}

.intro {
  font-size: 1.1rem;
  color: #333;
  margin-top: 10px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .blog-wrapper {
    padding: 30px 15px;
  }

  .blog-container {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 15px;
  }

  .right-column {
    position: static;
    order: -1;
  }

  .ad-box {
    flex-direction: column;
    text-align: center;
  }

  .ad-box img {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin-top: 15px;
  }

  .ad-text h2 {
    font-size: 1.1rem;
  }

  h1 {
    font-size: 1.8rem;
    line-height: 1.3;
  }

  .author-card {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .author-card .author-info {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .blog-wrapper {
    padding: 20px 10px;
  }

  .blog-container {
    padding: 0 10px;
  }

  .ad-text h2 {
    font-size: 1rem;
  }

  .cta-btn {
    padding: 10px 18px;
    font-size: 0.9rem;
  }

  h1 {
    font-size: 1.5rem;
  }

  .intro {
    font-size: 1rem;
  }
}

/* FAQ Section Container */
.blog-faq-section {
  max-width: 800px;
  margin: 60px auto;
  padding: 0 20px;
}

/* FAQ Headings */
.blog-faq-section h4 {
  text-align: center;
  letter-spacing: 2px;
  color: #555;
  margin-bottom: 10px;
}

.blog-faq-section h2 {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 40px;
}

/* FAQ Item */
.faq-item {
  margin-bottom: 25px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

/* FAQ Question Button */
.faq-question {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: 15px 0;
  font-size: 1.2rem;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.3s ease;
}

.faq-question span {
  transition: transform 0.3s ease;
  font-size: 1.2rem;
}

/* Rotate arrow when opened */
.faq-question.open span {
  transform: rotate(180deg);
}

/* FAQ Answer */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  line-height: 1.6;
  color: #444;
}

.faq-answer p {
  margin: 10px 0;
}

/* Author Card Wrapper */
.author-card {
  max-width: 900px;
  margin: 60px auto;
  background: #f3f3f3;
  padding: 30px;
  border-radius: 16px;
  display: flex;
  gap: 25px;
  align-items: center;
}

/* Author Image */
.author-card .author-img {
  width: 160px;
  height: 160px;
  border-radius: 12px;
  object-fit: cover;
}

/* Text Content */
.author-card .author-content h3 {
  margin: 0 0 10px;
  font-size: 1.3rem;
  font-weight: 700;
}

.author-card .author-content p {
  max-width: 600px;
  line-height: 1.6;
  margin-bottom: 15px;
  color: #333;
}

/* Author Social Row */
.author-card .author-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.author-card .author-info img {
  width: 20px;
  height: 20px;
}
.blog-wrapper h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 42px;
}

/* --------------------------------------------------------------------------------
   30. AI Modal Styles (NEW)
-------------------------------------------------------------------------------- */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(5px);
}

.modal-overlay.active {
  display: flex;
}

.modal-content {
  background: white;
  border-radius: 20px;
  padding: 20px;
  max-width: 750px;
  width: 100%;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: scale(0.8);
  opacity: 0;
  transition: all 0.3s ease;
}

.modal-overlay.active .modal-content {
  transform: scale(1);
  opacity: 1;
}

.ai-modal-content {
  /* background-image: url("https://fitnexsolutions.com/wp-content/uploads/2025/11/6852adf9b144afb4cb6b263b_Ai-bg-1.webp"); */
  background-position: center;
  background-size: cover;
  color: white;
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 30px;
  color: white;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.modal-close:hover {
  opacity: 1;
}

.modal-header {
  text-align: center;
  margin-bottom: 30px;
}

.modal-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 15px;
  color: white;
}

.modal-description {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0;
}

.modal-form {
  width: 100%;
}

.form-group {
  margin-bottom: 20px;
}

.form-group input {
  width: 100%;
  padding: 15px 20px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

.form-group input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.form-group input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.15);
}

.modal-cta-btn {
  width: 100%;
  padding: 15px 30px;
  background: linear-gradient(168deg, #da48ff, #1e78ff);
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 5px 20px rgba(171, 71, 188, 0.4);
}

.modal-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(171, 71, 188, 0.6);
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  .modal-content {
    padding: 30px 25px;
    margin: 20px;
  }

  .modal-title {
    font-size: 28px;
  }

  .modal-description {
    font-size: 16px;
  }

  .form-group input {
    padding: 12px 15px;
    font-size: 14px;
  }

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

.hero-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.hero-form input {
  padding: 12px 15px;
  font-size: 1rem;
  border: 2px solid #ccc;;
  border-radius: 5px;
  outline: none;
  width: 100%;
}

.hero-form input::placeholder {
  color: #aaa;
}

.cta-check img {
    height: 35px;
    width: 35px;
}

.secondary-btn-color a {
    color: #7b3efc;
    background-color: white;
}

.cta-group {
  gap: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.app-theme.for-homepage .explore-cta-hero-header.new-home-cta.centre a,
.scroll-logos.featurs .explore-cta-hero-header.new-home-cta.centre a {
    border: 2px solid #535353;
    background-color: #000;
    border-radius: 10px;
    margin-top: 20px;
    text-align: center;
    margin-bottom: 0;
    font-size: 17px;
    font-weight: 600;
    padding: 15px 80px;
}
.section-versatile-tools-support {
    text-align: center;
}
.section-versatile-tools-support a {
    margin-top: 50px;
}
@media (max-width: 600px) {
.section-dynamic-dashboard{
  padding: 50px 20px;
}
.bento-grid-wrapper{
  padding: 0px 20px;
}
.fitness-pros .explore-cta-hero-header.new-home-cta.centre {
    margin-top: 0px;
}
}
.scroll-logos .explore-cta-hero-header.new-home-cta {
    text-align:center;
}
.cta-shortcode-wrap .paoc-popup-btn {
    display: inline-block;
    color: #fff;
    padding: 14px 34px;
    border-radius: 8px;
    text-align: left;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.2s;
    background: black;
}