/* =============================================================================
   PAYLINK HOME - CUSTOM CSS FOR ZOHO SITES
   =============================================================================
   Table of Contents:
   1. Global Styles
   2. Header
   3. Hero Section & Form
   4. Typography & Headings
   5. Icon Containers & Layout
   6. Sections & Boxes
   7. Testimonials
   8. Row & Column Layout
   9. "Work With Us" Section
   10. Brand Icons Section
   11. Footer Form
   12. Responsive Styles (Mobile & Tablet)
   ============================================================================= */

/* =============================================================================
   CUSTOM CONTAINER OVERRIDES - 1280px max-width, 40px side padding
   ============================================================================= */

/* 
   Override Zoho Sites default container styles:
   - Default: max-inline-size: 1440px, padding: 50px
   - Custom:  max-inline-size: 1280px, padding: 40px
   
   Add class "custom-container" to sections where you want the custom container,
   OR uncomment OPTION 1 below for global override.
*/

/* ---- OPTION 1: Global Override for ALL containers ---- */
/* Uncomment this section if you want ALL containers site-wide to use these values */

/*
.theme-pages-full-stretch .zpcontainer,
.zpcontainer-fluid.zpcontainer,
.zpcontainer {
    max-inline-size: 1280px !important;
    width: 100% !important;
    padding-inline-start: 40px !important;
    padding-inline-end: 40px !important;
    margin-inline-start: auto !important;
    margin-inline-end: auto !important;
}
*/

/* ---- OPTION 2: Targeted Override with a custom class ---- */
/* Add class "custom-container" to specific sections in Zoho Sites */

/* 
   Container Strategy (Matches Reference):
   - Padding Global: 2.5rem (40px)
   - Container Large: 80rem (1280px)
   
   To simulate the nested structure (padding-global > container-large) on a single element (.zpcontainer),
   we apply the padding and max-width.
   Note: If box-sizing is border-box, content area will be ~75rem.
*/

.custom-container .zprow-container,
.theme-pages-full-stretch .custom-container .zprow-container.padding-long {
  padding: 96px !important;
}
.custom-container .zprow-container,
.theme-pages-full-stretch .custom-container .zprow-container.padding-64 {
  padding: 64px !important;
}

.custom-container .zpcontainer,
.custom-container.zpcontainer-fluid.zpcontainer,
.custom-container .zpcontainer-fluid.zpcontainer {
  max-inline-size: 80rem !important; /* 1280px */
  width: 100% !important;
  padding-inline-start: 2.5rem !important; /* 40px */
  padding-inline-end: 2.5rem !important; /* 40px */
  margin-inline-start: auto !important;
  margin-inline-end: auto !important;
}

/* Row container - Reset to full width and remove negative margins */
.custom-container .zprow-container,
.theme-pages-full-stretch .custom-container .zprow-container {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

/* Tablet responsive (992px and below) */
@media (max-width: 991px) {
  .custom-container .zpcontainer,
  .custom-container.zpcontainer-fluid.zpcontainer,
  .custom-container .zpcontainer-fluid.zpcontainer {
    max-inline-size: 100% !important;
    padding-inline-start: 30px !important;
    padding-inline-end: 30px !important;
  }
}

/* Mobile responsive (767px and below) */
@media (max-width: 767px) {
  .custom-container .zpcontainer,
  .custom-container.zpcontainer-fluid.zpcontainer,
  .custom-container .zpcontainer-fluid.zpcontainer {
    padding-inline-start: 20px !important;
    padding-inline-end: 20px !important;
  }

  .custom-container .zprow-container,
  .theme-pages-full-stretch .custom-container .zprow-container.padding-long {
    padding: 15px !important;
  }

  .custom-container .zprow-container,
  .theme-pages-full-stretch .custom-container .zprow-container.padding-64 {
    padding: 15px !important;
  }
}

/* =============================================================================
   1. GLOBAL STYLES
   ============================================================================= */

body {
  background-image: none;
  background-position: none;
  overflow-x: hidden;
}

/* =============================================================================
   2. HEADER
   ============================================================================= */

.zpheader-style-01.theme-header-fixed {
  display: none;
}

.zpheader-style-01.theme-header-fixed.new-header {
  display: block;
}

/* =============================================================================
   3. HERO SECTION & FORM
   ============================================================================= */

.hero-background {
  position: relative;
}

.zpelement.zpelem-button.zs {
  width: fit-content;
}

/* Form Container - Rounded Rectangle with Padding */
.hero-email-input div .zpform-container.zpnewsletter-input-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background-color: #ffffff !important;
  border-radius: 16px !important;
  padding: 8px 8px 8px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  max-width: 550px !important;
  width: 100% !important;
  margin: 0 auto !important;
  border: none !important;
  box-sizing: border-box !important;
}

/* Email Input Field */
.hero-email-input div .zpnewsletter-email-input-field {
  flex-grow: 1 !important;
  border: none !important;
  background: transparent !important;
  outline: #0a5a9d !important;
  font-family: "Arial", sans-serif !important;
  font-size: 16px !important;
  color: #333333 !important;
  padding: 0 !important;
  margin-right: 16px !important;
  box-shadow: none !important;
  height: auto !important;
}

/* Placeholder Text Styling */
.hero-email-input
  div
  .zpelement.zpelem-newsletter.email-input.zpnewsletter-email-input-field::placeholder {
  color: #888888 !important;
  opacity: 1 !important;
}

/* Get Started Button */
.hero-email-input div .zpbutton.zpnewsletter-button {
  background-color: #275aa8 !important;
  color: #ffffff !important;
  font-family: "Arial", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 28px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.hero-email-input div .zpnewsletter-container.zpnewsletter-input-container button {
  margin-bottom: 0px;
}

.hero-email-input div .zpbutton.zpnewsletter-button:hover {
  background-color: #1e4b8f !important;
}

.hero-email-input div .zpnewsletter-container .zpnewsletter-input-container input {
  margin-bottom: 0px;
}

/* =============================================================================
   4. TYPOGRAPHY & HEADINGS
   ============================================================================= */

.zscustom-small-heading {
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(30deg, #373fff, #3acaf8);
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
}

.common-gradient-text {
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(30deg, #373fff, #3acaf8);
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  width: fit-content;
}

.common-gradient-text-center {
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(30deg, #373fff, #3acaf8);
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  width: fit-content;
  margin: 0 auto;
}

.zpheading.zpheading-style-none.zpheading-align-center.zpheading-align-mobile-center.zpheading-align-tablet-center {
  max-width: 60%;
  margin: 0 auto;
  line-height: 1.2;
}

/* =============================================================================
   5. ICON CONTAINERS & LAYOUT
   ============================================================================= */

/* Main Layout: Grid 
   - Column 1: Icon (auto width)
   - Column 2: Text Content (takes remaining space)
*/
.zpicon-container {
  display: grid !important;
  grid-template-columns: 60px 1fr;
  align-items: start;
  column-gap: 30px;
  row-gap: 4px;
  margin-bottom: 30px;
}

/* Override: Remove grid for specific icon heading elements */
[data-element-id="elm_bmaJtCGPbeAzK6xfEEunZg"] .zpicon-container,
[data-element-id="elm_R17L7QRnX11rbdWe_RcLTQ"] .zpicon-container,
[data-element-id="elm_ItzlcGMy0hY3VHkzDt9Dnw"] .zpicon-container {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 0 !important;
}

/* Remove icon background for these specific elements */
[data-element-id="elm_bmaJtCGPbeAzK6xfEEunZg"] .zpicon,
[data-element-id="elm_R17L7QRnX11rbdWe_RcLTQ"] .zpicon,
[data-element-id="elm_ItzlcGMy0hY3VHkzDt9Dnw"] .zpicon {
  background-color: transparent !important;
  justify-content: flex-start !important;
}

/* Icon: Centered Vertically spanning both rows */
.zpicon {
  grid-column: 1 !important;
  align-self: center !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: #f4f6f8;
  border-radius: 50%;
  margin: 0;
}

/* Icon SVG Color */
.zpicon svg {
  fill: #0a5a9d !important;
  width: 24px !important;
  height: 24px !important;
}

/* Heading: Top Text */
.zpicon-heading {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  align-self: center !important;
}

.zpicon-heading strong {
  font-weight: 700 !important;
}

/* Description: Bottom Text */
.zpicon-text-container {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  text-wrap: wrap;
}

/* Text Typography fixes */
.zpicon-heading span,
.zpicon-heading strong,
.zpicon-text-container p,
.zpicon-text-container span {
  font-family: "Roboto", sans-serif !important;
  font-size: 20px !important;
  color: #0a5a9d !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Specific fix for description line height */
.zpicon-text-container p {
  line-height: 1.4 !important;
}

/* =============================================================================
   FEATURE CARDS - Vertical Stacked Layout (Icon on Top)
   =============================================================================
   For the "Get Paid 3X Faster" style cards with:
   - Icon with light blue circular background at top
   - Bold heading below icon
   - Description text at bottom
   ============================================================================= */

/* Feature Card Container - Add class "feature-card-vertical" to section */
.feature-card-vertical .zpicon-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
  grid-template-columns: unset !important;
}

.feature-card-vertical .zpicon {
  width: 48px !important;
  height: 48px !important;
  background-color: #e0e4fc !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  grid-column: unset !important;
  align-self: flex-start !important;
}

.feature-card-vertical .zpicon img,
.feature-card-vertical .zpicon svg {
  width: 24px !important;
  height: 24px !important;
}

.feature-card-vertical .zpicon-heading {
  grid-column: unset !important;
  grid-row: unset !important;
  margin: 0 !important;
}

.feature-card-vertical .zpicon-heading,
.feature-card-vertical .zpicon-heading strong {
  font-family: "Roboto", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #0a5a9d !important;
  line-height: 1.3 !important;
}

.feature-card-vertical .zpicon-text-container {
  grid-column: unset !important;
  grid-row: unset !important;
  margin: 0 !important;
}

.feature-card-vertical .zpicon-text-container p,
.feature-card-vertical .zpicon-text-container span {
  font-family: "Roboto", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #0a5a9d !important;
  line-height: 1.5 !important;
}

.feature-card-vertical .zpicon-text-container strong {
  font-weight: 700 !important;
}

/* =============================================================================
   6. SECTIONS & BOXES
   ============================================================================= */

.zscustom-section-fincorp-01 .zscustom-box {
  box-shadow: none;
  background-color: transparent;
}

.zpsection.zplight-section.zplight-section-bg {
  background-image: linear-gradient(145deg, #e0f8ef, #ceeaf4 34%, #d9e7f9 69%, #f0f3fc);
}

/* =============================================================================
   7. TESTIMONIALS
   ============================================================================= */

.testi-box {
  height: 100%;
}

/* =============================================================================
   8. ROW & COLUMN LAYOUT
   ============================================================================= */

/* Main Layout */
.zprow {
  display: flex !important;
  gap: 0;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

/* Columns */
.zpelem-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Content Boxes */
.zpelem-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Typography Overrides (ensure consistency) */
.zpelem-text p {
  margin: 0;
  line-height: 1.6;
}

/* =============================================================================
   9. "WORK WITH US" SECTION
   ============================================================================= */

/* Grid container */
.work-with-us .zpicon-container {
  display: grid !important;
  grid-template-columns: 60px 1fr;
  grid-template-rows: auto auto;
  column-gap: 30px;
  row-gap: 6px;
  align-items: start;
  margin-bottom: 30px;
}

/* Icon column */
.work-with-us .zpicon {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: #f4f6f8;
  border-radius: 50%;
  margin: 0;
}

/* Ensure icon image is centered */
.work-with-us .zpicon img {
  display: block;
}

/* Heading (top-right) */
.work-with-us .zpicon-heading {
  grid-column: 2;
  margin: 0;
  line-height: 1.3;
}

/* Description text (bottom-right) */
.work-with-us .zpicon-text-container {
  grid-column: 2;
  margin: 0;
}

.work-with-us .zpicon-text-container p {
  margin: 0;
  line-height: 1.5;
}

/* =============================================================================
   10. BRAND ICONS SECTION
   ============================================================================= */

/* Force grid on Zoho row */
.brand-icons-wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: center;
  justify-items: center;
  padding: 40px 20px;
}

/* Kill Zoho flex + width rules */
.brand-icons-wrapper.zprow {
  flex-wrap: unset !important;
}

.brand-icons-wrapper > .zpelem-col {
  width: auto !important;
  max-width: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* =============================================================================
   11. FOOTER FORM
   ============================================================================= */

/* Outer Blue Bar */
[data-element-id="elm_AK73jza-oNXFQ_ybhA3C-A"].zpelem-newsletter {
  padding: 0px 16px 0px 0px;
  border-radius: 8px;
}

/* Inner Dark Container */
[data-element-id="elm_AK73jza-oNXFQ_ybhA3C-A"] .zpnewsletter-input-container {
  position: relative !important;
  background-color: #2b2f3a;
  border-radius: 8px;
  padding: 6px;
}

/* Input Field */
[data-element-id="elm_AK73jza-oNXFQ_ybhA3C-A"] input.zpnewsletter-email-input-field {
  width: 100% !important;
  background: transparent;
  border: none !important;
  padding: 14px 120px 14px 16px;
  font-size: 14px;
  color: #ffffff;
  border-radius: 6px;
  margin-block-end: 0px !important;
}

/* Placeholder */
[data-element-id="elm_AK73jza-oNXFQ_ybhA3C-A"] input::placeholder {
  color: #ffffff;
}

/* Button - Absolute Positioned */
[data-element-id="elm_AK73jza-oNXFQ_ybhA3C-A"] .zpnewsletter-button {
  position: absolute !important;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  height: 40px;
  padding: 0 22px;
  background-color: #ffffff !important;
  color: #0a5a9d !important;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Remove Zoho Button Wrappers */
[data-element-id="elm_AK73jza-oNXFQ_ybhA3C-A"] .zpbutton {
  margin: 0 !important;
  box-shadow: none !important;
}

/* =============================================================================
   12. RESPONSIVE STYLES (MOBILE & TABLET)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Tablet Breakpoint (max-width: 768px)
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Row & Column Layout */
  .zprow {
    flex-direction: column;
    height: auto !important;
  }

  .zpelem-col {
    border-inline-end-width: 0 !important;
    border-block-end-width: 1px !important;
    border-block-end-style: solid;
    border-color: rgba(62, 70, 102, 0.25);
    padding-bottom: 30px;
    margin-bottom: 30px;
  }

  .zpelem-col:last-child {
    border-bottom: none !important;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  /* Hero Form */
  .hero-email-input div .zpform-container.zpnewsletter-input-container {
    padding: 10px;
  }

  /* Headings */
  .zpheading.zpheading-style-none.zpheading-align-center.zpheading-align-mobile-center.zpheading-align-tablet-center {
    max-width: 100%;
    margin: 0 auto;
  }

  /* Icon Containers */
  .zpicon-container {
    display: flex !important;
    align-items: start;
    margin-bottom: 30px;
  }

  .zpicon-heading {
    font-size: 24px;
  }

  /* Footer */
  .footer-left-elements {
    flex-direction: row;
  }

  /* Work With Us Section */
  .work-with-us .zpicon-container {
    column-gap: 18px;
  }

  .work-with-us .zpicon {
    width: 48px;
    height: 48px;
  }

  .work-with-us .zpicon img {
    width: 20px;
    height: 20px;
  }
}

/* -----------------------------------------------------------------------------
   Mobile Breakpoint (max-width: 767px)
   ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Brand Icons - 2 columns on mobile */
  .brand-icons-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* =============================================================================
   HOMEPAGE HERO - GRADIENT BLURRED CIRCLE (Large, Centered)
   ============================================================================= */

/* Make the element a positioning context */
.homepage-hero-background-gradient {
  position: relative;
  overflow: visible;
  background-color: #ffffff;
}

.zphero {
  background-color: transparent;
  overflow: visible;
}

/* Gradient Blurred Circle - Large variant, center-left positioned */
.homepage-hero-background-gradient::before {
  content: "";
  position: absolute;
  z-index: -1;

  /* Size - Large variant */
  width: 36rem;
  height: 36rem;

  /* Position - Center-left */
  top: 15%;
  left: 20%;

  /* Gradient Circle */
  background-image: radial-gradient(
    circle,
    #cacffa,
    #c9d4ef 26%,
    #aed3ff 53%,
    #9bffa5 74%,
    #d798e1
  );
  border-radius: 100%;

  /* Blur Effect */
  filter: blur(14vh);

  /* Prevent interaction */
  pointer-events: none;
}

/* Tablet adjustments */
@media (max-width: 991px) {
  .homepage-hero-background-gradient::before {
    width: 28rem;
    height: 28rem;
    top: 10%;
    left: 10%;
    filter: blur(12vh);
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .homepage-hero-background-gradient::before {
    width: 20rem;
    height: 20rem;
    top: 5%;
    left: 5%;
    filter: blur(10vh);
  }
}

/* =============================================================================
   FOOTER CTA SECTION - GRADIENT BLURRED CIRCLE
   ============================================================================= */

/* Make the section a positioning context */
.footer-cta-section-gradient {
  position: relative;
  overflow: hidden; /* Prevents blur from spilling outside */
}

/* Gradient Blurred Circle - Pseudo Element */
.footer-cta-section-gradient::before {
  content: "";
  position: absolute;
  z-index: -1;

  /* Size & Position - Footer style (wide, at bottom) */
  width: 100%;
  height: 40%;
  inset: auto 0% -20%; /* Positions at bottom, slightly overflowing */

  /* Gradient Circle */
  background-image: radial-gradient(
    circle,
    #cacffa,
    #c9d4ef 26%,
    #aed3ff 53%,
    #9bffa5 74%,
    #d798e1
  );
  border-radius: 100%;

  /* Blur Effect */
  filter: blur(10vh);

  /* Prevent interaction */
  pointer-events: none;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .footer-cta-section-gradient::before {
    filter: blur(8vh);
    height: 50%;
    inset: auto 0% -25%;
  }
}

/* =============================================================================
   PRICING SECTION - GRADIENT BLURRED CIRCLES
   =============================================================================
   Add class "pricing-section-gradient" to the Zoho Sites section to apply
   two gradient blurred circles:
   - ::before = Top-left gradient (30%, -10%)
   - ::after = Bottom-right gradient (-10%, 0%)
   ============================================================================= */

.pricing-section-gradient {
  position: relative !important;
}

/* Gradient Circle 1 - Top Left */
.pricing-section-gradient::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 36rem;
  height: 36rem;
  top: 30%;
  left: -10%;
  background-image: radial-gradient(
    circle,
    #cacffa,
    #c9d4ef 26%,
    #aed3ff 53%,
    #9bffa5 74%,
    #d798e1
  );
  border-radius: 100%;
  filter: blur(14vh);
  pointer-events: none;
}

/* Gradient Circle 2 - Bottom Right */
.pricing-section-gradient::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 36rem;
  height: 36rem;
  bottom: -10%;
  right: 0%;
  background-image: radial-gradient(
    circle,
    #cacffa,
    #c9d4ef 26%,
    #aed3ff 53%,
    #9bffa5 74%,
    #d798e1
  );
  border-radius: 100%;
  filter: blur(14vh);
  pointer-events: none;
}

/* Ensure content stays above the gradients */
.pricing-section-gradient .zpcontainer,
.pricing-section-gradient .zprow-container,
.pricing-section-gradient .zpelem-col {
  position: relative;
  z-index: 1;
}

/* Tablet adjustments */
@media (max-width: 991px) {
  .pricing-section-gradient::before {
    width: 28rem;
    height: 28rem;
    filter: blur(12vh);
  }
  .pricing-section-gradient::after {
    width: 28rem;
    height: 28rem;
    filter: blur(12vh);
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .pricing-section-gradient::before {
    width: 20rem;
    height: 20rem;
    top: 20%;
    left: -15%;
    filter: blur(10vh);
  }
  .pricing-section-gradient::after {
    width: 20rem;
    height: 20rem;
    bottom: -15%;
    right: -10%;
    filter: blur(10vh);
  }
}

/* ============================================================================= PLATFORM PAGE CSS HERE ============================================================================= */

.theme-header.zpdark-header-portion {
  display: none;
}

/* =============================================================================
   PLATFORM HERO - GRADIENT BLURRED CIRCLE
   ============================================================================= */

/* Make the column a positioning context */
.hero-section-right-gradient {
  position: relative;
  overflow: visible; /* Allow gradient to extend beyond */
}

/* Gradient Blurred Circle - Pseudo Element */
.hero-section-right-gradient::before {
  content: "";
  position: absolute;
  /* Size - Large variant */
  width: 36rem;
  height: 36rem;

  /* Position - Product header style (right side) */
  right: 5%;
  top: 50%;
  transform: translateY(-50%);

  /* Gradient Circle */
  background-image: radial-gradient(
    circle,
    #cacffa,
    #c9d4ef 26%,
    #aed3ff 53%,
    #9bffa5 74%,
    #d798e1
  );
  border-radius: 100%;

  /* Blur Effect */
  filter: blur(14vh);

  /* Prevent interaction */
  pointer-events: none;
}

/* Tablet adjustments */
@media (max-width: 991px) {
  .hero-section-right-gradient::before {
    width: 28rem;
    height: 28rem;
    right: 0;
    filter: blur(12vh);
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .hero-section-right-gradient::before {
    width: 20rem;
    height: 20rem;
    right: -5%;
    filter: blur(10vh);
  }
}

/* =============================================================================
   HERO SECTION LEFT GRADIENT - GRADIENT BLURRED CIRCLE (Small)
   ============================================================================= */

/* Make the element a positioning context */
.hero-section-left-gradient {
  position: relative;
  overflow: visible;
}

/* Gradient Blurred Circle - Small variant, left positioned */
.hero-section-left-gradient::before {
  content: "";
  position: absolute;
  z-index: -1;

  /* Size - Small variant */
  width: 18rem;
  height: 18rem;

  /* Position - Left side */
  top: 0%;
  left: -10%;

  /* Gradient Circle */
  background-image: radial-gradient(
    circle,
    #cacffa,
    #c9d4ef 26%,
    #aed3ff 53%,
    #9bffa5 74%,
    #d798e1
  );
  border-radius: 100%;

  /* Blur Effect */
  filter: blur(14vh);

  /* Prevent interaction */
  pointer-events: none;
}

/* Tablet adjustments */
@media (max-width: 991px) {
  .hero-section-left-gradient::before {
    width: 14rem;
    height: 14rem;
    left: -15%;
    filter: blur(12vh);
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .hero-section-left-gradient::before {
    width: 12rem;
    height: 12rem;
    left: -20%;
    filter: blur(10vh);
  }
}

/* =============================================================================
   PRODUCT FEATURES 1 - GRADIENT BLURRED CIRCLE (Medium)
   ============================================================================= */

/* Make the column a positioning context */
[data-element-id="elm_5zZz7kwEDwYpXZ9Isc6Q_Q"].zpelem-col {
  position: relative;
  overflow: visible;
}

/* Gradient Blurred Circle - Medium variant */
[data-element-id="elm_5zZz7kwEDwYpXZ9Isc6Q_Q"].zpelem-col::before {
  content: "";
  position: absolute;
  z-index: -1;

  /* Size - Medium variant */
  width: 22rem;
  height: 22rem;

  /* Position - Product Features 1 style */
  top: 60%;
  left: -10%;

  /* Gradient Circle */
  background-image: radial-gradient(
    circle,
    #cacffa,
    #c9d4ef 26%,
    #aed3ff 53%,
    #9bffa5 74%,
    #d798e1
  );
  border-radius: 100%;

  /* Blur Effect */
  filter: blur(14vh);

  /* Prevent interaction */
  pointer-events: none;
}

/* Tablet adjustments */
@media (max-width: 991px) {
  [data-element-id="elm_5zZz7kwEDwYpXZ9Isc6Q_Q"].zpelem-col::before {
    width: 18rem;
    height: 18rem;
    left: -15%;
    filter: blur(12vh);
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  [data-element-id="elm_5zZz7kwEDwYpXZ9Isc6Q_Q"].zpelem-col::before {
    width: 14rem;
    height: 14rem;
    left: -20%;
    top: 50%;
    filter: blur(10vh);
  }
}

/* =============================================================================
   PRODUCT FEATURES 2 - GRADIENT BLURRED CIRCLE (Large)
   ============================================================================= */

/* Make the column a positioning context */
[data-element-id="elm_g8roHS1DL_72y1WK3JIdCA"].zpelem-col {
  position: relative;
  overflow: visible;
}

/* Gradient Blurred Circle - Large variant */
[data-element-id="elm_g8roHS1DL_72y1WK3JIdCA"].zpelem-col::before {
  content: "";
  position: absolute;
  z-index: -1;

  /* Size - Large variant */
  width: 36rem;
  height: 36rem;

  /* Position - Product Features 2 style */
  top: 20%;
  right: 0;

  /* Gradient Circle */
  background-image: radial-gradient(
    circle,
    #cacffa,
    #c9d4ef 26%,
    #aed3ff 53%,
    #9bffa5 74%,
    #d798e1
  );
  border-radius: 100%;

  /* Blur Effect */
  filter: blur(14vh);

  /* Prevent interaction */
  pointer-events: none;
}

/* =============================================================================
   PAYMENT SYSTEMS SECTION - GRADIENT BACKGROUND
   ============================================================================= */

.payment-systems-section {
  background-image: linear-gradient(145deg, #e0f8ef, #ceeaf4 34%, #d9e7f9 69%, #f0f3fc);
}

/* Tablet adjustments */
@media (max-width: 991px) {
  [data-element-id="elm_g8roHS1DL_72y1WK3JIdCA"].zpelem-col::before {
    width: 28rem;
    height: 28rem;
    filter: blur(12vh);
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  [data-element-id="elm_g8roHS1DL_72y1WK3JIdCA"].zpelem-col::before {
    width: 20rem;
    height: 20rem;
    top: 30%;
    filter: blur(10vh);
  }

  .payment-systems-section {
    max-width: 100%;
  }
}

/* ============================================================================= ABOUT PAGE ============================================================================= */

/* ============================================================================= 
ABOUT HERO SECTION 
============================================================================= */

.about-hero-section-heading {
  max-width: 60%;
  margin: 0 auto;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .about-hero-section-heading {
    max-width: 100%;
  }
}

/* =============================================================================
   SERVICES GRID SECTION (Matches "Best in Service" Visual Reference)
   ============================================================================= */

/* Main Container - Lavender Background */
[data-element-id="elm_Gx-0kb_Z35ZRCP7b_IeLbg"] {
  background-color: #f8f5ff !important; /* Soft premium lavender */
  border-radius: 20px !important;
  box-shadow: none !important;
}

/* Column Spacing */
[data-element-id="elm_Gx-0kb_Z35ZRCP7b_IeLbg"] .zpelem-col {
  padding: 0 20px !important;
  border: none !important;
}

/* Individual Item Layout */
[data-element-id="elm_Gx-0kb_Z35ZRCP7b_IeLbg"] .zpelem-imageheadingtext {
  margin-top: 0 !important;
  margin-bottom: 60px !important; /* Consistent vertical gap */
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-height: 260px !important; /* Fixed height for alignment */
}

/* Remove margin from the last item in each column */
[data-element-id="elm_Gx-0kb_Z35ZRCP7b_IeLbg"] .zpelem-col > .zpelem-imageheadingtext:last-child {
  margin-bottom: 0 !important;
}

/* Icon / Image Styling */
[data-element-id="elm_Gx-0kb_Z35ZRCP7b_IeLbg"] .zpimage-data-ref {
  margin-bottom: 20px !important;
  width: auto !important;
  height: auto !important;
}

[data-element-id="elm_Gx-0kb_Z35ZRCP7b_IeLbg"] .zpimage-data-ref img {
  /* Colorize icons to Royal Blue (#3f60e9) */
  filter: brightness(0) saturate(100%) invert(32%) sepia(76%) saturate(3025%) hue-rotate(224deg)
    brightness(101%) contrast(94%) !important;
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
}

/* Heading Styling */
[data-element-id="elm_Gx-0kb_Z35ZRCP7b_IeLbg"] h3.zpimage-heading {
  font-family: "Roboto", sans-serif !important;
  font-weight: 700 !important;
  margin-bottom: 15px !important;
  line-height: 1.3 !important;
}

/* Description Text Styling */
[data-element-id="elm_Gx-0kb_Z35ZRCP7b_IeLbg"] .zpimage-text p,
[data-element-id="elm_Gx-0kb_Z35ZRCP7b_IeLbg"] .zpimage-text span {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

.our-team-right-img {
  width: fit-content;
}

@media (max-width: 768px) {
  [data-element-id="elm_Gx-0kb_Z35ZRCP7b_IeLbg"] .zpelem-col {
    padding: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Spacing between stacks on mobile */
  [data-element-id="elm_Gx-0kb_Z35ZRCP7b_IeLbg"] .zpelem-col:not(:last-child) {
    margin-bottom: 40px !important;
  }

  [data-element-id="elm_Gx-0kb_Z35ZRCP7b_IeLbg"] .zpelem-imageheadingtext {
    margin-bottom: 40px !important;
    min-height: auto !important; /* Reset height on mobile */
  }

  .our-team-right-img {
    width: 85%;
  }
}

/* =============================================================================
   ABOUT US - LEFT TOP GRADIENT SECTION (3 Blurred Circles via Pseudo Elements)
   ============================================================================= */

/* Section Container - Positioning Context */
.about-left-top-gradient {
  position: relative;
  overflow: visible;
}

/* Small Gradient Circle - Top Left (::before) */
.about-left-top-gradient::before {
  content: "";
  position: absolute;
  z-index: -1;

  /* Size - Small variant */
  width: 18rem;
  height: 18rem;

  /* Position - Top Left */
  top: 7%;
  left: 0%;

  /* Gradient Circle */
  background-image: radial-gradient(
    circle,
    #cacffa,
    #c9d4ef 26%,
    #aed3ff 53%,
    #9bffa5 74%,
    #d798e1
  );
  border-radius: 100%;

  /* Blur Effect */
  filter: blur(14vh);

  /* Prevent interaction */
  pointer-events: none;
}

/* Large Gradient Circle - Center Right (::after) */
.about-left-top-gradient::after {
  content: "";
  position: absolute;
  z-index: -1;

  /* Size - Large variant */
  width: 36rem;
  height: 36rem;

  /* Position - Center Right */
  top: 90%;
  left: 0%;
  transform: translateY(-50%);

  /* Gradient Circle */
  background-image: radial-gradient(
    circle,
    #cacffa,
    #c9d4ef 26%,
    #aed3ff 53%,
    #9bffa5 74%,
    #d798e1
  );
  border-radius: 100%;

  /* Blur Effect */
  filter: blur(14vh);

  /* Prevent interaction */
  pointer-events: none;
}

/* Tablet Adjustments */
@media (max-width: 991px) {
  .about-left-top-gradient::before {
    width: 14rem;
    height: 14rem;
    top: 3%;
    left: 3%;
    filter: blur(12vh);
  }

  .about-left-top-gradient::after {
    width: 28rem;
    height: 28rem;
    left: 15%;
    filter: blur(12vh);
  }
}

/* Mobile Adjustments */
@media (max-width: 767px) {
  .about-left-top-gradient::before {
    width: 12rem;
    height: 12rem;
    top: 2%;
    left: -5%;
    filter: blur(10vh);
  }

  .about-left-top-gradient::after {
    width: 20rem;
    height: 20rem;
    left: 20%;
    filter: blur(10vh);
  }
}

/* =============================================================================
   ABOUT US - IMAGES GRID SECTION
   ============================================================================= */

/* Main Row Container - Gradient Background */
.aboutus-images-grid {
  position: relative;
  padding: 40px 0;
}

/* Grid Layout for the Row */
.aboutus-images-grid.zprow-container {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Column Styling */
.aboutus-images-grid .zpelem-col {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Image Element Container */
.aboutus-images-grid .zpelem-image {
  border-radius: 20px;
  overflow: hidden;
}

/* Image Container Centering */
.aboutus-images-grid .zpimage-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Figure Styling */
.aboutus-images-grid .zpimage-container figure {
  margin: 0;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
}

/* Actual Image Styling - Desktop */
.aboutus-images-grid .zpimage-container figure img {
  width: 325px !important;
  height: 288px !important;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  transition: transform 0.3s ease;
}

/* Subtle Hover Effect */
.aboutus-images-grid .zpimage-container figure:hover img {
  transform: scale(1.02);
}

/* Tablet Breakpoint */
@media (max-width: 991px) {
  .aboutus-images-grid.zprow-container {
    gap: 20px;
    padding: 0 20px;
  }

  .aboutus-images-grid .zpimage-container figure img {
    width: 280px !important;
    height: 248px !important;
  }
}

/* Mobile Breakpoint */
@media (max-width: 767px) {
  .aboutus-images-grid.zprow-container {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px;
  }

  .aboutus-images-grid .zpelem-col {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Image element full width */
  .aboutus-images-grid .zpelem-image {
    width: 100% !important;
  }

  /* Image container full width */
  .aboutus-images-grid .zpimage-container {
    width: 100% !important;
  }

  /* Figure full width */
  .aboutus-images-grid .zpimage-container figure {
    width: 100% !important;
  }

  /* Anchor/picture wrapper full width */
  .aboutus-images-grid .zpimage-container figure .zpimage-anchor,
  .aboutus-images-grid .zpimage-container figure picture {
    width: 100% !important;
    display: block !important;
  }

  /* Image itself - full width */
  .aboutus-images-grid .zpimage-container figure img,
  .aboutus-images-grid .zpimage-container figure .zpimage {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 250px !important;
    object-fit: cover !important;
  }
}

/* =============================================================================
   CONTACT PAGE - GRADIENT BLURRED CIRCLE (Large, Left Positioned)
   ============================================================================= */

/* Make the section a positioning context */
.contact-page-left-gradient {
  position: relative;
  overflow: visible;
}

/* Gradient Blurred Circle - Large variant, left positioned */
.contact-page-left-gradient::before {
  content: "";
  position: absolute;

  /* Size - Large variant */
  width: 36rem;
  height: 36rem;

  /* Position - Contact header style (top left) */
  top: 2%;
  left: -5%;

  /* Gradient Circle */
  background-image: radial-gradient(
    circle,
    #cacffa,
    #c9d4ef 26%,
    #aed3ff 53%,
    #9bffa5 74%,
    #d798e1
  );
  border-radius: 100%;

  /* Blur Effect */
  filter: blur(14vh);

  /* Prevent interaction */
  pointer-events: none;
}

/* Tablet adjustments */
@media (max-width: 991px) {
  .contact-page-left-gradient::before {
    width: 28rem;
    height: 28rem;
    top: 15%;
    left: -10%;
    filter: blur(12vh);
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .contact-page-left-gradient::before {
    width: 20rem;
    height: 20rem;
    top: 10%;
    left: -15%;
    filter: blur(10vh);
  }
}

/* ============================================================================= BLOGS PAGE - IMAGES GRID SECTION ============================================================================= */

.blog-hero-rounded-image {
  border-radius: 24px;
  overflow: hidden;
}

/* =============================================================================
   BLOG PAGE - LEFT BOTTOM GRADIENT (Large, Bottom-Left Positioned)
   ============================================================================= */

/* Make the section a positioning context */
.blog-left-bottom-gradient {
  position: relative;
  overflow: visible;
}

/* Gradient Blurred Circle - Large variant, bottom-left positioned */
.blog-left-bottom-gradient::before {
  content: "";
  position: absolute;
  z-index: -1;

  /* Size - Large variant */
  width: 36rem;
  height: 36rem;

  /* Position - Blog header style (bottom left) */
  top: auto;
  bottom: -30%;
  left: -10%;

  /* Gradient Circle */
  background-image: radial-gradient(
    circle,
    #cacffa,
    #c9d4ef 26%,
    #aed3ff 53%,
    #9bffa5 74%,
    #d798e1
  );
  border-radius: 100%;

  /* Blur Effect */
  filter: blur(14vh);

  /* Prevent interaction */
  pointer-events: none;
}

/* Tablet adjustments */
@media (max-width: 991px) {
  .blog-left-bottom-gradient::before {
    width: 28rem;
    height: 28rem;
    bottom: -25%;
    left: -15%;
    filter: blur(12vh);
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .blog-left-bottom-gradient::before {
    width: 20rem;
    height: 20rem;
    bottom: -20%;
    left: -20%;
    filter: blur(10vh);
  }
}

/* =============================================================================
   BLOG PAGE - RIGHT GRADIENT (Medium, Top-Right Positioned)
   ============================================================================= */

/* Make the section a positioning context */
.blog-right-gradient {
  position: relative;
  overflow: visible;
}

/* Gradient Blurred Circle - Medium variant, right positioned */
.blog-right-gradient::before {
  content: "";
  position: absolute;
  z-index: -1;

  /* Size - Medium variant */
  width: 22rem;
  height: 22rem;

  /* Position - Blog header style (top right) */
  top: 20%;
  right: 0%;

  /* Gradient Circle */
  background-image: radial-gradient(
    circle,
    #cacffa,
    #c9d4ef 26%,
    #aed3ff 53%,
    #9bffa5 74%,
    #d798e1
  );
  border-radius: 100%;

  /* Blur Effect */
  filter: blur(14vh);

  /* Prevent interaction */
  pointer-events: none;
}

/* Tablet adjustments */
@media (max-width: 991px) {
  .blog-right-gradient::before {
    width: 18rem;
    height: 18rem;
    top: 15%;
    right: -5%;
    filter: blur(12vh);
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .blog-right-gradient::before {
    width: 14rem;
    height: 14rem;
    top: 10%;
    right: -10%;
    filter: blur(10vh);
  }
}

.padding-0 {
  padding: 0 !important;
  padding-top: 40px !important;
}

.all-posts-border-radius {
  border-radius: 16px;
  overflow: hidden;
}

/* Blog Posts Grid - Consistent Image Height */
/* Using multiple selectors with high specificity to override Zoho inline styles */
.all-posts-border-radius .zpimage-container figure img,
.all-posts-border-radius .zpimage-container figure img.zpimage,
.all-posts-border-radius .zpimage-container figure .zpimage,
.zpelement.zpelem-image.all-posts-border-radius .zpimage-container figure img,
[class*="all-posts-border-radius"] .zpimage-container figure img {
  width: 100% !important;
  height: 247px !important;
  max-height: 247px !important;
  min-height: 247px !important;
  object-fit: cover !important;
}

/* Desktop adjustments - Override Zoho's @media (min-width: 992px) inline styles */
@media (min-width: 992px) {
  .all-posts-border-radius .zpimage-container figure img,
  .all-posts-border-radius .zpimage-container figure img.zpimage,
  .all-posts-border-radius .zpimage-container figure .zpimage,
  .zpelement.zpelem-image.all-posts-border-radius .zpimage-container figure img,
  [class*="all-posts-border-radius"] .zpimage-container figure img {
    width: 100% !important;
    height: 247px !important;
    max-height: 247px !important;
    min-height: 247px !important;
    object-fit: cover !important;
  }
}

/* Tablet adjustments */
@media (max-width: 991px) {
  .all-posts-border-radius .zpimage-container figure img,
  .all-posts-border-radius .zpimage-container figure img.zpimage,
  .all-posts-border-radius .zpimage-container figure .zpimage,
  .zpelement.zpelem-image.all-posts-border-radius .zpimage-container figure img,
  [class*="all-posts-border-radius"] .zpimage-container figure img {
    height: 220px !important;
    max-height: 220px !important;
    min-height: 220px !important;
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .all-posts-border-radius .zpimage-container figure img,
  .all-posts-border-radius .zpimage-container figure img.zpimage,
  .all-posts-border-radius .zpimage-container figure .zpimage,
  .zpelement.zpelem-image.all-posts-border-radius .zpimage-container figure img,
  [class*="all-posts-border-radius"] .zpimage-container figure img {
    height: 247px !important;
    max-height: 247px !important;
    min-height: 247px !important;
  }
}

/* Blog Posts - Override specific Zoho element ID inline styles */
/* These IDs are from the blog posts grid */
[data-element-id="elm_Hzr7Fgs776Cmdf4UVYHtjA"] .zpimage-container figure img,
[data-element-id="elm_nUSgTacVyaDQmoeVl9Pe5g"] .zpimage-container figure img,
[data-element-id="elm_RzuNaJgdKus5w8vpDqnJyw"] .zpimage-container figure img,
[data-element-id="elm_iN_upzXkZvfYZGwbYb0PJg"] .zpimage-container figure img,
[data-element-id="elm_4WU4CcXW3S9Ji13o76BXmA"] .zpimage-container figure img,
[data-element-id="elm_NHcPOFDZWyYIuMVtAwL7AQ"] .zpimage-container figure img {
  width: 100% !important;
  height: 247px !important;
  max-height: 247px !important;
  min-height: 247px !important;
  object-fit: cover !important;
}

@media (min-width: 992px) {
  [data-element-id="elm_Hzr7Fgs776Cmdf4UVYHtjA"] .zpimage-container figure img,
  [data-element-id="elm_nUSgTacVyaDQmoeVl9Pe5g"] .zpimage-container figure img,
  [data-element-id="elm_RzuNaJgdKus5w8vpDqnJyw"] .zpimage-container figure img,
  [data-element-id="elm_iN_upzXkZvfYZGwbYb0PJg"] .zpimage-container figure img,
  [data-element-id="elm_4WU4CcXW3S9Ji13o76BXmA"] .zpimage-container figure img,
  [data-element-id="elm_NHcPOFDZWyYIuMVtAwL7AQ"] .zpimage-container figure img {
    width: 100% !important;
    height: 247px !important;
    max-height: 247px !important;
    min-height: 247px !important;
    object-fit: cover !important;
  }
}

/* ============================================================================= PRICING PAGE - IMAGES GRID SECTION ============================================================================= */

.plans-suitable-for-all-btn {
  width: fit-content;
  margin: 0 auto;
  padding: 8px;
  background-color: #e0e4fc;
  border-radius: 12px;
}

/* =============================================================================
   BUILT BY FOOTER SECTION
   =============================================================================
   Add class "built-by-footer" to the row element
   ============================================================================= */

/* Main container - transparent background */
.built-by-footer {
  background-color: transparent !important;
  padding: 24px 40px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.built-by-footer .zpelem-col {
  background-color: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

/* Inner container */
.built-by-footer .zpicon-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 !important;
  width: 100% !important;
  position: relative !important;
}

/* Second horizontal line - below text, through icon area */
.built-by-footer .zpicon-container::after {
  content: "" !important;
  position: absolute !important;
  bottom: 16px !important; /* Position at icon level */
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background-color: rgba(255, 255, 255, 0.4) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Text Row: Line - Text - Line */
/* Text Row: Line - Text - Line */
.built-by-footer .zpicon-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  order: 1 !important;

  /* Typography */
  font-family: "Roboto", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;

  /* FLex Alignment Logic */
  height: 24px !important; /* Fixed height to create a known context */
}

.built-by-footer .zpicon-heading:hover {
  opacity: 0.8 !important;
}

/* Lines flanking the text */
.built-by-footer .zpicon-heading::before,
.built-by-footer .zpicon-heading::after {
  content: "" !important;
  flex-grow: 1 !important;
  height: 1px !important;
  background-color: rgba(255, 255, 255, 0.45) !important;
  margin: 0 24px !important;
  align-self: center !important; /* Force center alignment */
  display: block !important;
}

/* LinkedIn Icon - Centered below text, on top of line */
.built-by-footer .zpicon.zpicon-common {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background-color: transparent !important;
  border-radius: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  order: 2 !important;
  position: relative !important;
  z-index: 1 !important;
}

.built-by-footer .zpicon.zpicon-common svg {
  fill: #ffffff !important;
  width: 24px !important;
  height: 24px !important;
}

/* Hide description */
.built-by-footer .zpicon-text-container {
  display: none !important;
}

/* Tablet adjustments */
@media (max-width: 991px) {
  .built-by-footer {
    padding: 20px 30px !important;
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .built-by-footer {
    padding: 16px 20px !important;
  }

  .built-by-footer .zpicon-heading::before,
  .built-by-footer .zpicon-heading::after {
    margin: 0 12px !important;
  }

  .built-by-footer h4.zpicon-heading,
  .built-by-footer .zpicon-heading {
    font-size: 12px !important;
  }
}

.footer-bottom-logo-text div {
  margin-bottom: 0px !important;
}

/* =============================================================================
   FOOTER BOTTOM ROW - 3 Column Layout (Line | Logo+Text | Line)
   =============================================================================
   Add class to the parent row: uses data-element-id targeting
   ============================================================================= */

/* Parent row containing the 3 columns */
[data-element-id="elm_VNu5FKj9ZrBTAa-vdp47dg"].zprow {
  align-items: center !important;
  padding: 32px 0 16px 0 !important;
}

/* Style the divider lines in columns 1 and 3 */
[data-element-id="elm_VNu5FKj9ZrBTAa-vdp47dg"] .zpelem-divider .zpdivider-common {
  border-color: rgba(255, 255, 255, 0.35) !important;
  border-width: 1px !important;
}

/* Middle column - make it stack vertically (text on top, icon below) */
.footer-bottom-logo-text .zpicon-container {
  display: flex !important;
  flex-direction: column-reverse !important; /* Reverses order: text on top, icon below */
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  position: relative !important;
}

/* Text - displayed first (above icon) */
.footer-bottom-logo-text .zpicon-heading {
  order: 1 !important;
  margin: 0 !important;
  padding: 0 !important;

  /* Typography */
  font-family: "Roboto", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

/* Icon - displayed second (below text) */
.footer-bottom-logo-text .zpicon.zpicon-common {
  order: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  background-color: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.footer-bottom-logo-text .zpicon.zpicon-common svg {
  fill: #ffffff !important;
  width: 20px !important;
  height: 20px !important;
}

/* Hide description text if present */
.footer-bottom-logo-text .zpicon-text-container {
  display: none !important;
}