/*-----------------------------------------------------------------------------------

[Table of contents]

1. Font
2. Css Variable for colors
3. Common CSS
4. Preloader CSS
5. Header - Main Navigation ( section )
6. Hero Slider ( section )
7. Trusted Logo Slider ( section )
8. Features ( section )
9. About us ( section )
10. Modern UI ( section )
11. How it works ( section )
12. Testimonials ( section )
13. Pricing ( section )
14. Faq ( section )
15. Interface ( section )
16. Download app ( section )
17. Latest story ( section )
18. Newsletter ( section )
19. Footer ( section )
20. Animation CSS ( section )


-----------------------------------------------------------------------------------*/

/* --------Font--------------- */

/* poppins-300 - latin */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/poppins-v20-latin-300.eot");
  /* IE9 Compat Modes */
  src: local(""),
    url("../fonts/poppins-v20-latin-300.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/poppins-v20-latin-300.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/poppins-v20-latin-300.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/poppins-v20-latin-300.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/poppins-v20-latin-300.svg#Poppins")
      format("svg");
  /* Legacy iOS */
}

/* poppins-regular - latin */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-v20-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local(""),
    url("../fonts/poppins-v20-latin-regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/poppins-v20-latin-regular.woff2")
      format("woff2"),
    /* Super Modern Browsers */ url("../fonts/poppins-v20-latin-regular.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/poppins-v20-latin-regular.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/poppins-v20-latin-regular.svg#Poppins") format("svg");
  /* Legacy iOS */
}

/* poppins-italic - latin */

@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-v20-latin-italic.eot");
  /* IE9 Compat Modes */
  src: local(""),
    url("../fonts/poppins-v20-latin-italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/poppins-v20-latin-italic.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/poppins-v20-latin-italic.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/poppins-v20-latin-italic.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/poppins-v20-latin-italic.svg#Poppins") format("svg");
  /* Legacy iOS */
}

/* poppins-500 - latin */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-v20-latin-500.eot");
  /* IE9 Compat Modes */
  src: local(""),
    url("../fonts/poppins-v20-latin-500.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/poppins-v20-latin-500.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/poppins-v20-latin-500.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/poppins-v20-latin-500.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/poppins-v20-latin-500.svg#Poppins")
      format("svg");
  /* Legacy iOS */
}

/* poppins-500italic - latin */

@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-v20-latin-500italic.eot");
  /* IE9 Compat Modes */
  src: local(""),
    url("../fonts/poppins-v20-latin-500italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/poppins-v20-latin-500italic.woff2")
      format("woff2"),
    /* Super Modern Browsers */ url("../fonts/poppins-v20-latin-500italic.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/poppins-v20-latin-500italic.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/poppins-v20-latin-500italic.svg#Poppins") format("svg");
  /* Legacy iOS */
}

/* poppins-600 - latin */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-v20-latin-600.eot");
  /* IE9 Compat Modes */
  src: local(""),
    url("../fonts/poppins-v20-latin-600.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/poppins-v20-latin-600.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/poppins-v20-latin-600.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/poppins-v20-latin-600.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/poppins-v20-latin-600.svg#Poppins")
      format("svg");
  /* Legacy iOS */
}

/* poppins-700 - latin */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-v20-latin-700.eot");
  /* IE9 Compat Modes */
  src: local(""),
    url("../fonts/poppins-v20-latin-700.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/poppins-v20-latin-700.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/poppins-v20-latin-700.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/poppins-v20-latin-700.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/poppins-v20-latin-700.svg#Poppins")
      format("svg");
  /* Legacy iOS */
}

/* poppins-800 - latin */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/poppins-v20-latin-800.eot");
  /* IE9 Compat Modes */
  src: local(""),
    url("../fonts/poppins-v20-latin-800.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/poppins-v20-latin-800.woff2") format("woff2"),
    /* Super Modern Browsers */ url("../fonts/poppins-v20-latin-800.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/poppins-v20-latin-800.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/poppins-v20-latin-800.svg#Poppins")
      format("svg");
  /* Legacy iOS */
}

/* -----------Css-variable------ */

:root {
  --light-purple: #f6f4fe;
  --purple: #6a49f2;
  --bg-purple: #6a49f2;
  --dark-purple: #32236f;
  --body-text-purple: #3e3f66;
  --text-white: #ffffff;
  --bg-white: #ffffff;
  --slider-dots-color: #d4d2dd;
  --light-bg: #dfdaf3;
}

/* ------Common-Css------------- */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.7;
  font-family: "Poppins", sans-serif;
  color: var(--body-text-purple);
  /* site-wide page background is plain white (the banner wave keeps its own
     gradient - it is drawn by .banner_section::after, not the body) */
  background-color: #ffffff;
}

.page_wrapper {
  width: 100%;
  /* NOTE: overflow-x is now on html/body — having it here breaks
     position:fixed on the navbar on mobile browsers (containing-block bug). */
}

a {
  text-decoration: none;
  color: var(--body-text-purple);
}

a:hover {
  text-decoration: none;
  color: var(--body-text-purple);
}

ul,
li {
  padding: 0;
  list-style-type: none;
  margin: 0;
}

button:focus,
.btn.focus,
.btn:focus {
  outline: none;
  box-shadow: none;
}

@media screen and (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

.section_title {
  text-align: center;
}

/* section heading h2 */

.section_title h2 {
  font-size: 40px;
  font-weight: 700;
  color: var(--dark-purple);
}

.section_title h2 span {
  color: var(--purple);
}

.row_am {
  padding: 50px 0;
}

/* purple button */

.puprple_btn {
  background-color: var(--purple);
  color: var(--text-white);
  border-radius: 50px;
  padding: 10px 40px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  font-weight: 500;
}

.puprple_btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background-color: var(--bg-white);
  border-radius: 50px;
  transition: 0.6s all;
  z-index: -1;
}

.puprple_btn:hover::before {
  width: 100%;
}

.puprple_btn:hover {
  color: var(--purple);
}

/* white button */

.white_btn {
  padding: 10px 45px;
  border: 1px solid var(--purple);
  color: var(--purple);
  border-radius: 50px;
  background-color: var(--bg-white);
  font-weight: 700;
  position: relative;
  z-index: 1;
  overflow: hidden;
  font-weight: 500;
}

.white_btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background-color: var(--bg-purple);
  border-radius: 50px;
  transition: 0.6s all;
  z-index: -1;
}

.white_btn:hover::before {
  width: 110%;
}

.white_btn:hover {
  color: var(--text-white);
}

.highlited_block .white_btn:hover {
  border-color: var(--bg-white);
}

/* slider controls */

.owl-carousel .owl-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 20px;
}

.owl-carousel .owl-dots button {
  display: block;
  width: 15px;
  height: 15px;
  background-color: var(--slider-dots-color);
  border-radius: 15px;
  margin: 0 5px;
}

.owl-carousel .owl-dots button.active {
  background-color: var(--purple);
}

/* -------------Preloader-Css-Start-------------- */

/* Preloader */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 999999;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--bg-purple);
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--body-text-purple);
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}

#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--dark-purple);
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* -----------Header-Css-Start------------------- */

/* === HEADER WRAPPER === */
header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  background-color: transparent;
  transition: all 0.4s ease;
}

/* When the user scrolls.
   The JS toggles .nav-scrolled on .site-header, so both names are matched here
   (--bg-light was never defined, which made this rule a no-op). */
header.scrolled,
header.nav-scrolled {
  background-color: #ffffff;
  transition: all 0.4s ease;
}

/* === NAVBAR BASE === */
.navbar {
  padding: 20px 0;
  transition: all 0.4s ease;
}

/* Drop shadow under the bar so it separates from the page below it */
header .navbar,
.site-header .navbar {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  transition: box-shadow 0.3s ease, padding 0.4s ease, background-color 0.3s ease;
}

/* a touch deeper once the page is scrolled under it */
header.scrolled .navbar,
header.nav-scrolled .navbar,
.site-header.nav-scrolled .navbar {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

/* left on the legacy .scrolled name on purpose - desktop bar height stays as-is */
header.scrolled .navbar {
  padding: 12px 0;
}

/* === BRAND LOGO === */
.navbar-brand img {
  height: 50px;
  width: auto;
  transition: all 0.3s ease;
}

header.scrolled .navbar-brand img {
  height: 45px;
  transform: scale(0.98);
}

/* === NAVBAR LINKS === */
.navbar-expand-lg .navbar-nav {
  align-items: center;
  gap: 8px;
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding: 10px 20px;
  font-weight: 500;
  color: var(--text-dark);
  font-size: 16px;
  transition: all 0.3s ease;
  position: relative;
}

.navbar-expand-lg .navbar-nav .nav-link:hover,
.navbar-expand-lg .navbar-nav .nav-link:focus {
  color: var(--purple);
  transform: translateY(-2px);
}

/* === ACTIVE LINK STYLE (optional) === */
.navbar-expand-lg .navbar-nav .nav-link.active {
  color: var(--purple);
}

/* === CTA BUTTON (GET STARTED) === */
.navbar-expand-lg .navbar-nav .nav-link.dark_btn {
  color: var(--text-white);
  background-color: var(--purple);
  font-size: 16px;
  padding: 10px 32px;
  border-radius: 25px;
  margin-left: 25px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.navbar-expand-lg .navbar-nav .nav-link.dark_btn:hover {
  background-color: #6a4ddf;
  transform: translateY(-2px);
}

/* === DROPDOWN MENU === */
.navbar-expand-lg .navbar-nav .dropdown-menu {
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  background-color: #ffffff;
  animation: dropdownFade 0.25s ease-in-out;
  margin-top: 10px;
}

@keyframes dropdownFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-item {
  font-size: 15px;
  padding: 10px 20px;
  transition: all 0.3s ease;
  color: var(--text-dark);
}

.dropdown-item:hover {
  color: var(--purple);
  background-color: #f8f5ff;
  transform: translateX(4px);
}

/* === NAVBAR TOGGLER === */
.navbar-toggler {
  border: none;
  outline: none;
  transition: all 0.3s ease;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler-icon {
  filter: brightness(0.4);
}

/* === MOBILE MENU === */
@media (max-width: 992px) {
  .navbar {
    padding: 15px 0;
  }

  .navbar-nav {
    text-align: center;
    gap: 5px;
  }

  .navbar-nav .nav-link {
    display: block;
    padding: 12px;
  }

  .navbar-nav .nav-link.dark_btn {
    margin: 12px auto;
    width: 80%;
  }
  
  /* Ensure call button in navbar works properly */
  .navbar-nav li.call-button {
    display: inline-flex !important;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: visible !important;
  }

  .dropdown-menu {
    position: static;
    box-shadow: none;
    background-color: transparent;
  }

  .dropdown-item {
    padding: 8px 0;
  }
}
/* === IMPROVED DROPDOWN STYLE === */

/* Desktop dropdown */
.navbar .dropdown-menu {
  border: none;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  min-width: 200px;
  background-color: #fff;
  margin-top: 8px;
  transition: all 0.2s ease-in-out;
}

.navbar .dropdown-item {
  padding: 10px 18px;
  color: var(--text-dark);
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: #f3f0ff;
  color: var(--purple);
  transform: translateX(3px);
}

/* Mobile dropdown (cleaner & full-width) */
@media (max-width: 992px) {
  .navbar .dropdown-menu {
    position: static;
    box-shadow: none;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }

  .navbar .dropdown-item {
    background: none;
    color: var(--text-dark);
    font-size: 15px;
    padding: 8px 5px;
    text-align: center;
  }

  .navbar .dropdown-item:hover {
    background-color: transparent;
    color: var(--purple);
    transform: none;
  }

  /* Space between dropdown and next nav item */
  .navbar .dropdown-menu li:last-child {
    margin-bottom: 10px;
  }
}

/* === Call Button in Navbar - Override any conflicting styles === */
.navbar-nav li.call-button,
.navbar-nav .call-button {
  display: inline-flex !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  position: relative !important;
}

.navbar-nav li.call-button::before,
.navbar-nav li.call-button::after,
.navbar-nav .call-button::before,
.navbar-nav .call-button::after {
  content: '' !important;
  display: block !important;
}

/* === SMOOTH TRANSITION EFFECT FOR HEADER === */
body {
  padding-top: 80px; /* Prevent content jump under fixed navbar */
}
/* ---------Hero-Slider-Css-Start------------------ */

/* hero slider wraper */

.banner_section {
  margin-top: 70px;
  position: relative;
  /* Header + hero keep the light purple band; everything below the wave is
     white. Solid down to the top of the wave ribbon (the ::after box is 200px
     tall, the ribbon spans 31px-180px inside it), then fades out across the
     ribbon itself so there is no hard edge.
     The box-shadow paints the same tint up across the margin strip behind the
     fixed header - shadows are not clipped by overflow: hidden. */
  background-image: linear-gradient(
    to bottom,
    var(--light-purple) 0,
    var(--light-purple) calc(100% - 169px),
    rgba(246, 244, 254, 0) calc(100% - 20px),
    rgba(246, 244, 254, 0) 100%
  );
  box-shadow: 0 -80px 0 0 var(--light-purple);
}

.banner_section .container {
  position: relative;
}

/* wave backgound after banner */

.banner_section::after {
  content: "";
  display: block;
  background-image: url(../images/banner-shape.svg);
  /* stretch to the box instead of cover, so the ribbon always lands on the same
     rows the hero gradient above fades against (cover crops on wide screens) */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 200px;
  background-position: center;
  margin-top: -50px;
}

.banner_section .row {
  align-items: center;
}

/* hero slider text */

.banner_section .banner_text {
  margin-top: -50px;
}

/* hero slider heading h1 */

.banner_section .banner_text h1 {
  font-size: 55px;
  color: var(--dark-purple);
  letter-spacing: -1.5px;
  font-weight: 700;
}

.banner_section .banner_text h1 span {
  color: var(--purple);
}

/* hero slider button */

.banner_section .app_btn {
  display: flex;
  align-items: center;
}

/* hero slider list */

.banner_section .app_btn li a {
  display: block;
  padding: 12px 30px;
  background-color: var(--bg-white);
  border: 2px solid var(--purple);
  position: relative;
  border-radius: 12px;
  transition: 0.4s all;
}

.banner_section .app_btn li:last-child {
  margin-left: 25px;
}

.banner_section .app_btn li a img {
  transition: 0.4s all;
}

.banner_section .app_btn li a .white_img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
}

.banner_section .app_btn li a:hover {
  background-color: var(--purple);
}

.banner_section .app_btn li a:hover .blue_img {
  opacity: 0;
}

.banner_section .app_btn li a:hover .white_img {
  opacity: 1;
}

/* hero slider users */

.banner_section .used_app {
  display: flex;
  align-items: center;
  margin-top: 35px;
}

.banner_section .used_app ul {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.banner_section .used_app ul li:not(:first-child) {
  margin-left: -15px;
}

.banner_section .used_app p {
  font-size: 15px;
  line-height: 19px;
  margin-bottom: 0;
}

/* hero slider images */

.banner_section .banner_slider {
  display: flex;
  position: relative;
}

.banner_section .banner_slider .left_icon {
  position: absolute;
  left: 15px;
  bottom: 70px;
  z-index: 9999;
}

.banner_section .banner_slider .right_icon {
  position: absolute;
  right: 15px;
  top: 70px;
}

/* hero slider mobile frame */

.banner_section .banner_slider .slider_frame {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  width: 315px;
}

.banner_section .banner_slider #frmae_slider::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  background-color: #fff;
  width: calc(100% - 10px);
  height: 92%;
}

.banner_section .banner_slider::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 475px;
  height: 475px;
  border-radius: 100%;
  background-color: var(--purple);
  z-index: -5;
}

.banner_section .banner_slider #frmae_slider {
  width: 305px;
  margin: 0 auto;
}

/* hero slider control dots */

.banner_section .owl-dots {
  margin-top: 40px;
}

.owl-carousel .owl-item img {
  max-width: 100%;
  width: auto;
}

/* ------------Trusted-Section-Css-Start----------- */

/* trusted logos wraper */

.trusted_section {
  margin-top: 40px;
}

.trusted_section .company_logos {
  padding-top: 20px;
}

.trusted_section .company_logos img {
  filter: grayscale(1);
  margin: 0 auto;
  transition: 0.4s all;
}

.trusted_section .company_logos img:hover {
  filter: grayscale(0);
}

/* ----------Feature-Detail-Section-start------ */

/* features section wraper */

.features_section .feature_detail {
  background-color: var(--bg-white);
  border-radius: 30px;
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 120px;
  padding-top: 60px;
  padding-bottom: 20px;
  box-shadow: 0px 4px 30px #ede9fe;
}

/* features section image */

.features_section .feature_detail .feature_img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -75px;
}

.features_section .feature_detail .feature_img img {
  max-width: 100%;
}

/* features section box */

.features_section .feature_detail .feature_box {
  max-width: 410px;
}

.features_section .feature_detail .feature_box .data_block {
  margin-bottom: 50px;
}

.features_section .feature_detail .feature_box .data_block h4 {
  font-size: 20px;
  color: var(--dark-purple);
  font-weight: 600;
}

.features_section .feature_detail .left_data {
  text-align: right;
  padding-left: 130px;
}

.features_section .feature_detail .right_data {
  padding-right: 130px;
}

.features_section .feature_detail .left_data .data_block .icon {
  margin-right: -15px;
}

.features_section .feature_detail .right_data .data_block .icon {
  margin-left: -15px;
}

.features_section .container {
  max-width: 1370px;
}

/* -----------------About-App-Section-Css-Start------------------ */

/* about us section wraper */

.about_app_section .about_img {
  display: flex;
  align-items: center;
  position: relative;
}

/* about us section images*/

.about_app_section .about_img img {
  max-width: 100%;
}

.about_app_section .about_img::before {
  content: "";
  position: absolute;
  left: 38%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background-color: var(--bg-white);
  border-radius: 100%;
  z-index: -1;
}

.about_app_section .about_img .screen_img {
  margin-left: -135px;
  margin-top: 110px;
}

.about_app_section .about_text .section_title {
  text-align: left;
}

.about_app_section .about_text .section_title h2 {
  margin-bottom: 15px;
}

/* about us section  statastics nomber */

.about_app_section .about_text .app_statstic {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-top: 40px;
}

.about_app_section .about_text .app_statstic li {
  width: 248px;
  background-color: var(--bg-white);
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  border-radius: 12px;
  padding: 15px 10px;
  padding-left: 35px;
  box-shadow: 0px 4px 10px #ede9fe;
}

.about_app_section .about_text .app_statstic li .icon {
  margin-right: 9px;
}

.about_app_section .about_text .app_statstic li p {
  margin-bottom: 0;
  line-height: 1;
  color: var(--dark-purple);
}

.about_app_section .about_text .app_statstic li p:first-child {
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 3px;
}

/* -------------Modern-Ui-Section-Css-Start---------------- */

/* modern ui section wraper */

.modern_ui_section .row {
  align-items: center;
}

.modern_ui_section .design_block {
  margin-top: 45px;
}

/* modern ui text */

.modern_ui_section .section_title {
  text-align: left;
}

.modern_ui_section .ui_text {
  padding-right: 75px;
}

/* modern ui list */

.modern_ui_section .design_block li {
  padding-left: 40px;
  position: relative;
  margin-bottom: 25px;
}

.modern_ui_section .design_block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  background-image: url(../images/right_icon.png);
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.modern_ui_section .design_block li h4 {
  font-size: 20px;
  color: var(--dark-purple);
  font-weight: 600;
  margin-bottom: 8px;
}

.modern_ui_section .design_block li p {
  margin-bottom: 0;
}

/* modern ui images */

.modern_ui_section .ui_images {
  display: flex;
  position: relative;
}

.modern_ui_section .ui_images::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 570px;
  height: 570px;
  border-radius: 100%;
  background-color: var(--bg-white);
  z-index: -1;
}

.modern_ui_section .ui_images .right_img img:nth-child(3) {
  margin-left: -140px;
  margin-top: -20px;
}

.modern_ui_section .ui_images .right_img img:nth-child(2) {
  margin-left: -90px;
  margin-top: -20px;
}

.modern_ui_section .ui_images .right_img img:nth-child(1) {
  position: relative;
  top: 15px;
  z-index: 99;
  margin-left: -15px;
}

/* -------------How_It_Works-Section-Css-Start------------------ */

/* how it works wraper */

.how_it_works .container {
  max-width: 1370px;
}

.how_it_works .how_it_inner {
  background-color: var(--bg-white);
  padding: 70px 0;
  padding-bottom: 250px;
  border-radius: 30px;
  box-shadow: 0px 4px 30px #ede9fe;
}

/* how it works list */

.how_it_works .step_block ul {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px;
}

.how_it_works .step_block ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-bottom: 50px;
}

.how_it_works .step_block ul li::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50px;
  transform: translateX(-50%);
  width: 4px;
  height: calc(100% + 100px);
  background-color: var(--light-bg);
}

.how_it_works .step_block ul li:first-child::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background-color: var(--light-bg);
  border-radius: 15px;
}

.how_it_works .step_block ul li:first-child::before {
  top: 0;
}

.how_it_works .step_block ul li:last-child::before {
  height: 50%;
  top: 0;
}

.how_it_works .step_block ul li .step_text,
.how_it_works .step_block ul li .step_img {
  width: 360px;
  text-align: right;
}

/* how it works image */

.how_it_works .step_block ul li .step_img img {
  max-width: 100%;
}

/* how it works heading h4 */

.how_it_works .step_block ul li .step_text h4 {
  font-size: 20px;
  font-weight: 600;
}

.how_it_works .step_block ul li .step_text .app_icon {
  margin-bottom: 10px;
}

.how_it_works .step_block ul li .step_text .app_icon a {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: var(--light-bg);
  color: var(--text-white);
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  transition: 0.4s all;
}

.how_it_works .step_block ul li .step_text .app_icon a:hover {
  background-color: var(--purple);
}

.how_it_works .step_block ul li .step_text span {
  font-weight: 600;
}

.how_it_works .step_block ul li .step_text span a {
  color: var(--purple);
  text-decoration: underline;
}

.how_it_works .step_block ul li:nth-child(2) {
  flex-direction: row-reverse;
}

.how_it_works .step_block ul li:nth-child(2) .step_text,
.how_it_works .step_block ul li:nth-child(2) .step_img {
  text-align: left;
}

/* how it works numbers */

.how_it_works .step_block ul li .step_number {
  background-image: url(../images/icon_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 110px;
  height: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* how it works numbers heading h3 */

.how_it_works .step_block ul li .step_number h3 {
  font-size: 30px;
  font-weight: 600;
}

/* how it works video  */

.how_it_works .yt_video {
  max-width: 1170px;
  margin: 0 auto;
  margin-top: -200px;
  position: relative;
  overflow: hidden;
}

/* how it works video animation line  */

.how_it_works .yt_video .anim_line {
  z-index: 999;
}

.how_it_works .yt_video .thumbnil {
  position: relative;
}

.how_it_works .yt_video .thumbnil img {
  max-width: 100%;
}

.how_it_works .yt_video .thumbnil a {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--text-white);
  font-weight: 600;
  z-index: 999;
  cursor: pointer;
}

.how_it_works .yt_video .thumbnil a span {
  display: block;
  font-weight: 700;
  font-size: 30px;
}

.how_it_works .yt_video .thumbnil a .play_btn {
  background-color: rgba(255, 255, 255, 0.1);
  width: 96px;
  height: 96px;
  border-radius: 100px;
  text-align: center;
  margin: 0 auto;
  line-height: 96px;
  position: relative;
  display: block;
  margin-bottom: 40px;
}

.how_it_works .yt_video .thumbnil a .play_btn img {
  width: 50px;
  position: relative;
  z-index: 999;
}

/* how it works video model   */

.modal {
  z-index: 999999;
}

.modal-backdrop.show {
  z-index: 99999;
  opacity: 0.7;
}

.youtube-video .modal-dialog {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  padding: 0 15px;
  height: 100%;
  max-width: 1240px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#video-container {
  position: relative;
  padding-bottom: 50%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

iframe#youtubevideo {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.youtube-video .modal-footer {
  border: none;
  text-align: center;
  display: block;
  padding: 0;
}

.youtube-video .modal-content {
  background: none !important;
  border: none;
}

#close-video {
  color: #fff;
  font-size: 30px;
}

/* ------------Testimonial-Slider-Css-Start------------- */

/* testimonials wraper  */

#testimonial_slider {
  max-width: 550px;
  margin: 0 auto;
}

.testimonial_section .testimonial_block {
  background-image: url(../images/testimonial_bg.png);
  background-size: cover;
  background-position: center;
  position: relative;
  margin-top: 65px;
}

.testimonial_section .testimonial_block .testimonial_slide_box {
  text-align: center;
  width: 430px;
  padding: 10px;
  margin: 0 auto;
}

/* testimonials rating  */

.testimonial_section .testimonial_block .rating span {
  color: #fc9400;
  font-size: 18px;
}

.testimonial_section .testimonial_block .testimonial_slide_box .review {
  margin-top: 10px;
  margin-bottom: 30px;
}

/* testimonials image  */

.testimonial_section
  .testimonial_block
  .testimonial_slide_box
  .testimonial_img
  img {
  margin: 0 auto;
}

/* testimonials heading h3 */

.testimonial_section .testimonial_block .testimonial_slide_box h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 0;
  margin-top: 10px;
}

.testimonial_section .testimonial_block .testimonial_slide_box .designation {
  font-size: 15px;
}

/* testimonials total review */

.testimonial_section .total_review {
  text-align: center;
  margin-top: 60px;
}

.testimonial_section .total_review .rating {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* testimonials paragraph */

.testimonial_section .total_review .rating p {
  margin-bottom: 0;
  font-weight: 600;
  margin-left: 5px;
  color: var(--dark-purple);
}

/* testimonials heading */

.testimonial_section .total_review h3 {
  font-size: 50px;
  font-weight: 600;
  margin-bottom: 0;
  color: var(--dark-purple);
}

.testimonial_section .total_review a {
  color: var(--purple);
  font-weight: 700;
}

.testimonial_section .testimonial_block .avtar_faces {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  width: 100%;
}

.testimonial_section .testimonial_block .avtar_faces img {
  max-width: 100%;
}

/* -------------------Pricing-Section---------------------- */

/* pricing wraper  */

.pricing_section .toggle_block {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* pricing toggle button */

.pricing_section .toggle_block span {
  color: var(--dark-purple);
  font-weight: 600;
  display: block;
  margin: 0 5px;
}

.tog_btn.month_active {
  left: 35px !important;
}

.pricing_section .toggle_block span.deactive {
  color: var(--body-text-purple);
}

.pricing_section .toggle_block .offer {
  background-color: var(--bg-white);
  border-radius: 5px;
  padding: 2px 10px;
  font-weight: 400;
  font-size: 13px;
  color: var(--purple);
}

.pricing_section .toggle_block .tog_block {
  width: 70px;
  height: 35px;
  background-color: var(--bg-white);
  border-radius: 18px;
  margin: 0 10px;
  position: relative;
  cursor: pointer;
}

.pricing_section .toggle_block .tog_block .tog_btn {
  height: 23px;
  width: 23px;
  border-radius: 25px;
  display: block;
  background-color: var(--purple);
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.4s all;
}

.pricing_section .toggle_block .month.active,
.pricing_section .toggle_block .years.active {
  color: var(--purple);
}

/* pricing pannel */

.pricing_section .pricing_pannel {
  margin-top: 50px;
  display: none;
}

.pricing_section .pricing_pannel.active {
  display: block;
}

.pricing_section .pricing_pannel .pricing_block {
  text-align: center;
  background-color: var(--bg-white);
  min-height: 700px;
  border-radius: 12px;
  padding-top: 60px;
  margin-bottom: 40px;
  box-shadow: 0px 4px 30px #ede9fe;
}

.pricing_section .pricing_pannel .pricing_block.highlited_block {
  background-color: var(--purple);
}

.pricing_section .pricing_pannel .pricing_block.highlited_block p,
.pricing_section .pricing_pannel .pricing_block.highlited_block h3,
.pricing_section .pricing_pannel .pricing_block.highlited_block span,
.pricing_section .pricing_pannel .pricing_block.highlited_block .pkg_name span {
  color: var(--text-white);
}

.pricing_section .pricing_pannel .pricing_block .icon {
  margin-bottom: 35px;
}

/* pricing box image */

.pricing_section .pricing_pannel .pricing_block .icon img {
  width: 120px;
}

/* pricing box heading h3 */

.pricing_section .pricing_pannel .pricing_block .pkg_name h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 0;
}

.pricing_section .pricing_pannel .pricing_block .pkg_name span {
  color: var(--body-text-purple);
  font-size: 15px;
}

.pricing_section .pricing_pannel .pricing_block .price {
  font-size: 48px;
  color: var(--purple);
  margin: 25px 0;
  display: block;
  font-weight: 600;
}

/* pricing box list */

.pricing_section .pricing_pannel .pricing_block .benifits {
  margin-bottom: 40px;
}

.pricing_section .pricing_pannel .pricing_block .benifits li p {
  margin-bottom: 5px;
}

.pricing_section .contact_text {
  text-align: center;
  margin-bottom: 0;
}

.pricing_section .contact_text a {
  color: var(--purple);
  text-decoration: underline;
}

/* -------------FAQ-Section-Css-Start----------------- */

/* faq wraper */

.faq_section .faq_panel {
  margin-top: 40px;
}

/* faq box */

.faq_section .faq_panel .card {
  border: none;
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px #ede9fe;
  padding: 16px 0;
}

.faq_section .faq_panel .card:last-child {
  margin-bottom: 0;
}

.faq_section .faq_panel .card-header {
  background-color: transparent;
  border: none;
  padding-bottom: 0;
  padding-top: 0;
}

.faq_section .faq_panel .card-header .btn {
  padding: 0;
  color: var(--dark-purple);
  font-weight: 600;
  font-size: 20px;
}

.faq_section .faq_panel .card-header .btn.active {
  color: var(--purple);
}

.faq_panel .accordion button,
.faq_panel .accordion button:hover,
.faq_panel .accordion button:focus {
  text-decoration: none;
}

.faq_section .faq_panel .card-header .icon_faq {
  position: absolute;
  right: 20px;
  color: #839bc0;
}

/* faq heading h2 */

.faq_section .faq_panel .card-header h2 {
  line-height: 1;
}

/* faq paragraph */

.faq_section .faq_panel .card-body {
  padding-bottom: 0;
}

/* -----------Interface_Section-Css-Start----------------- */

/* interface wraper */

.interface_section .screen_slider {
  margin-top: 35px;
  min-height: 720px;
}

/* interface images */

.interface_section .owl-item .screen_frame_img img {
  transform: scale(0.9);
  border: 2px solid #000;
  border-radius: 20px;
  transition: 1s all;
  margin: 0 auto;
}

.interface_section .owl-item.center .screen_frame_img img {
  transform: scale(1);
  border: 3px solid #000;
}

/* -----------Download_App_Section-Start------------------ */

/* download app wraper */

.free_app_section {
  padding-top: 70px;
  position: relative;
}

.free_app_section .container {
  max-width: 1370px;
}

.free_app_section .container .free_app_inner {
  background-color: var(--bg-purple);
  border-radius: 30px;
  padding: 20px 100px;
  padding-bottom: 50px;
  position: relative;
  z-index: 999999;
}

/* download app dark background */

.free_app_section .container .free_app_inner .dark_bg {
  overflow: hidden;
}

.free_app_section .container .free_app_inner .dark_bg span {
  z-index: 9999;
}

.free_app_section .container .free_app_inner .row {
  align-items: center;
}

.free_app_section .container .free_app_inner .free_text .section_title {
  text-align: left;
}

/* download app heading h2 */

.free_app_section .container .free_app_inner .free_text .section_title h2 {
  margin-bottom: 20px;
}

.free_app_section .container .free_app_inner .free_text .section_title h2,
.free_app_section .container .free_app_inner .free_text .section_title p {
  color: var(--text-white);
}

.free_app_section .container .free_app_inner .free_text .app_btn {
  display: flex;
  align-items: center;
}

.free_app_section .container .free_app_inner .free_text .app_btn li a {
  display: block;
  padding: 12px 30px;
  background-color: var(--bg-white);
  border: 2px solid var(--purple);
  position: relative;
  border-radius: 12px;
  transition: 0.4s all;
}

.free_app_section .container .free_app_inner .free_text .app_btn li a:hover {
  -webkit-box-shadow: 1px 4px 8px -2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 1px 4px 8px -2px rgba(0, 0, 0, 0.5);
  box-shadow: 1px 4px 8px -2px rgba(0, 0, 0, 0.5);
}

.free_app_section .container .free_app_inner .free_text .app_btn li:last-child {
  margin-left: 25px;
}

.free_app_section .container .free_app_inner .free_img {
  display: flex;
  align-items: center;
  margin-top: -120px;
}

.free_app_section .container .free_app_inner .free_img img:last-child {
  margin-left: -65px;
}

.purple_backdrop {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(50, 35, 111, 0.95);
  width: 100%;
  height: 100%;
  z-index: 99999;
  opacity: 0;
  transition: 0.4s all;
  pointer-events: none;
}

/* ---------------Latest_Story-Css-Start------------- */

/* latest story wraper */

.latest_story {
  margin-bottom: 80px;
}

/* latest story box */

.latest_story .story_box {
  background-color: var(--bg-white);
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 4px 30px #ede9fe;
}

/* latest story image */

.latest_story .story_box .story_img {
  position: relative;
}

.latest_story .story_box .story_img img {
  max-width: 100%;
  border-radius: 12px;
}

.latest_story .story_box .story_img span {
  position: absolute;
  left: 15px;
  top: 15px;
  font-size: 14px;
  color: var(--text-white);
}

/* latest story pargraph */

.latest_story .story_box .story_text {
  padding: 20px 30px;
}

/* latest story heading h3 */

.latest_story .story_box .story_text h3 {
  color: var(--dark-purple);
  font-size: 20px;
  margin-bottom: 15px;
  font-weight: 600;
}

/* latest story link text */

.latest_story .story_box .story_text a {
  color: var(--purple);
  margin-top: 25px;
  display: block;
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: 600;
}

.latest_story .story_box .story_text a:hover {
  text-decoration: underline;
}

/* -------------Newsletter-Section-Css-Start------------- */

/* newsletter  wraper */

.newsletter_box {
  background-color: var(--bg-purple);
  padding: 50px;
  border-radius: 12px;
  box-shadow: 0 4px 10px #0c0c0c21;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: -95px;
  position: relative;
  z-index: 99;
}

.newsletter_box .section_title {
  width: 45%;
}

.newsletter_box form {
  width: 60%;
}

/* newsletter heading h2 */

.newsletter_box .section_title h2 {
  margin-bottom: 5px;
  letter-spacing: -1px;
}

.newsletter_box .section_title h2,
.newsletter_box .section_title p {
  color: var(--text-white);
  text-align: left;
}

/* newsletter paragraph */

.newsletter_box .section_title p {
  margin-bottom: 0;
}

/* newsletter input  */

.newsletter_box form {
  display: flex;
}

.newsletter_box form .form-group {
  margin-bottom: 0;
}

.newsletter_box form .form-group .form-control {
  width: 430px;
  height: 55px;
  border-radius: 6px;
  color: var(--dark-purple);
}

.newsletter_box form .form-group .form-control::placeholder {
  color: var(--dark-purple);
}

/* newsletter button */

.newsletter_box form .form-group .btn {
  height: 55px;
  width: 170px;
  text-transform: uppercase;
  color: var(--purple);
  background-color: var(--bg-white);
  border-radius: 6px;
  margin-left: 10px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.newsletter_box form .form-group .btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background-color: var(--bg-purple);
  border-radius: 0;
  transition: 0.6s all;
  z-index: -1;
}

.newsletter_box form .form-group .btn:hover::before {
  width: 100%;
}

.newsletter_box form .form-group .btn:hover {
  color: var(--text-white);
}

/* ------Footer-Css-Start-------------- */

/* footer wraper */

footer {
  position: relative;
}

footer .top_footer {
  background-color: #583bd3;
  padding: 180px 0 60px 0;
  position: relative;
  overflow: hidden;
}

footer .top_footer.has_bg {
  background-image: url(../images/footer_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* footer logo */

footer .top_footer .logo {
  margin-bottom: 40px;
}

footer .top_footer .logo img {
  width: 150px;
}

footer .top_footer .abt_side li {
  padding: 0 0 10px 0;
}

/* footer social media icon */

footer .top_footer .social_media {
  display: flex;
  margin-top: 20px;
}

/* footer link list */

footer .top_footer .social_media li a {
  display: block;
  width: 37px;
  height: 37px;
  text-align: center;
  line-height: 37px;
  font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  margin-right: 10px;
  transition: 0.4s all;
}

footer .top_footer .social_media li a:hover {
  background-color: var(--bg-white);
  color: var(--purple);
}

footer .top_footer .try_out {
  margin-left: -20px;
}

footer .app_btn li a {
  display: block;
  padding: 12px 10px;
  background-color: var(--bg-white);
  border: 2px solid var(--purple);
  position: relative;
  border-radius: 12px;
  transition: 0.4s all;
  width: 175px;
  text-align: center;
}

footer .app_btn li a:hover {
  -webkit-box-shadow: 1px 4px 8px -2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 1px 4px 8px -2px rgba(0, 0, 0, 0.5);
  box-shadow: 1px 4px 8px -2px rgba(0, 0, 0, 0.5);
}

footer .app_btn li:last-child {
  margin-top: 20px;
}

footer .bottom_footer {
  background-color: var(--bg-purple);
}

/* footer heading and text colors variable */

footer h2,
footer h3,
footer p,
footer a {
  color: var(--text-white);
}

footer a:hover {
  color: var(--text-white);
}

/* footer heading h3 */

footer h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 50px;
  padding-top: 10px;
}

footer .links ul li a {
  display: block;
  margin-bottom: 10px;
}

/* footer last */

footer .bottom_footer {
  padding: 20px 0;
}

footer .bottom_footer p {
  margin-bottom: 0;
  font-size: 15px;
}

footer .bottom_footer .developer_text {
  text-align: right;
}

footer .bottom_footer .developer_text a {
  text-decoration: underline;
}

/* footer go top button */

.go_top {
  position: fixed;
  right: 30px;
  bottom: 75px;
  cursor: pointer;
  transition: 0.4s all;
  opacity: 0;
}

.go_top:hover {
  bottom: 80px;
}

/* -----------Animation-Css-Start-------------- */

/* animation line wraper */

.anim_line {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.anim_line span {
  position: absolute;
  z-index: 99999;
  top: -275px;
  animation: star_down_one 6s infinite linear;
  opacity: 0;
}

.anim_line.dark_bg {
  max-width: 1170px;
}

.anim_line.dark_bg span {
  transform: rotate(180deg);
}

.anim_line span:first-child {
  left: -17%;
  animation-delay: 3s;
}

.anim_line span:nth-child(2) {
  left: 0%;
  animation-delay: 5s;
}

.anim_line span:nth-child(3) {
  left: 17%;
  animation-delay: 1s;
}

.anim_line span:nth-child(4) {
  left: 34%;
  animation-delay: 4s;
}

.anim_line span:nth-child(5) {
  left: 51%;
  animation-delay: 7s;
}

.anim_line span:nth-child(6) {
  left: 68%;
}

.anim_line span:nth-child(7) {
  left: 85%;
  animation-delay: 3s;
}

.anim_line span:nth-child(8) {
  left: 99%;
  animation-delay: 2s;
}

.anim_line span:nth-child(9) {
  left: 117%;
  animation-delay: 5s;
}

/* footer .top_footer .anim_line span:first-child {
    left: 5%;
}

footer .top_footer .anim_line span:nth-child(2) {
    left: 13%;
} */

@keyframes star_down_one {
  0% {
    opacity: 0;
    top: -250px;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* --------Object-Moving-Animation-Css-Start----- */

.moving_animation {
  animation: moving_object 6s infinite linear;
}

.moving_position_animatin {
  position: relative;
  animation: moving_position_animatin 6s infinite linear;
  z-index: -1;
}

.about_app_section .about_img .screen_img img {
  animation-delay: 3s;
}

.modern_ui_section .ui_images .right_img img:nth-child(3) {
  animation-delay: 3s;
}

.modern_ui_section .ui_images .right_img img:nth-child(2) {
  animation-delay: 3s;
}

.modern_ui_section .ui_images .right_img img:nth-child(1) {
  animation-delay: 3s;
}

@keyframes moving_object {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes moving_position_animatin {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}

/* ------------Waves-Animation---------------- */

.waves-block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
}

.waves {
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.3);
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  border-radius: 100%;
  z-index: -1;
  -webkit-animation: waves 3s ease-in-out infinite;
  animation: waves 3s ease-in-out infinite;
}

.wave-1 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.wave-2 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  position: absolute;
  top: 0;
}

.wave-3 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  position: absolute;
  top: 0;
}

@keyframes waves {
  0% {
    -webkit-transform: scale(0.2, 0.2);
    transform: scale(0.2, 0.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
  50% {
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  }
  100% {
    -webkit-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}

/*------Header Btn Animation------*/

@keyframes pulse-blue-small-sm {
  0% {
    box-shadow: 0 0 0 0 rgba(107, 73, 242, 0.7);
  }
  100%,
  30% {
    box-shadow: 0 0 0 12px transparent;
  }
}

@keyframes pulse-blue-medium-sm {
  0% {
    box-shadow: 0 0 0 0 rgba(107, 73, 242, 0.4);
  }
  100%,
  30% {
    box-shadow: 0 0 0 20px transparent;
  }
}

/*------WhiteHeader Btn Animation------*/

@keyframes pulse-white-small-sm {
  0% {
    box-shadow: 0 0 0 0 rgba(253, 253, 253, 0.7);
  }
  100%,
  30% {
    box-shadow: 0 0 0 12px transparent;
  }
}

@keyframes pulse-white-medium-sm {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  100%,
  30% {
    box-shadow: 0 0 0 20px transparent;
  }
}

/* Inner Page banner shape animation */

.bred_crumb .banner_shape1,
.banner_shape2,
.banner_shape3 {
  position: absolute;
}

.bred_crumb .banner_shape1 {
  top: 200px;
  left: 15%;
  animation: mymove 10s infinite;
}

.bred_crumb .banner_shape2 {
  top: 100px;
  right: 10%;
  animation: mymove 5s infinite;
}

.bred_crumb .banner_shape3 {
  top: 350px;
  right: 20%;
  animation: mymove 3s infinite;
}

/* CTA section Shape animation */

.query_section .banner_shape1,
.banner_shape2,
.banner_shape3 {
  position: absolute;
}

.query_section .banner_shape1 {
  top: 200px;
  left: 15%;
  animation: mymove 10s infinite;
}

.query_section .banner_shape2 {
  top: 100px;
  right: 10%;
  animation: mymove 5s infinite;
}

.query_section .banner_shape3 {
  top: 350px;
  right: 20%;
  animation: mymove 3s infinite;
}

@keyframes mymove {
  50% {
    transform: rotate(180deg);
  }
}

/* ----------Other-Page-Css-Start---------- */

/* White Header Css Satart */

.white_header .navbar-expand-lg .navbar-nav .nav-link,
.white_header .navbar-expand-lg .navbar-nav .has_dropdown .drp_btn {
  color: var(--text-white);
}

.white_header .navbar-expand-lg .navbar-nav .has_dropdown:hover .drp_btn {
  color: var(--purple);
}

.white_header .navbar-expand-lg .navbar-nav .nav-link.dark_btn {
  background-color: var(--bg-white);
  color: var(--purple);
}

.white_header .navbar-expand-lg .navbar-nav .nav-link.dark_btn::before {
  animation: pulse-white-medium-sm 3.5s infinite;
}

.white_header .navbar-expand-lg .navbar-nav .nav-link.dark_btn::after {
  animation: pulse-white-small-sm 3.5s infinite;
}

header.fix_style.white_header {
  background-color: #664bece0;
}

/* About Us Page Css Start */

/* Bredcrumb Css Start */

.bred_crumb {
  background-image: url(../images/bread_crumb_bg.png);
  /*background: var(--purple);*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 500px;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  margin-top: -96px;
}

.bred_crumb::after {
  content: "";
  background-image: url(../images/inner_page_banner_overlay.svg);
  position: absolute;
  bottom: -1px;
  left: 0;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 200px;
  background-position: center;
}

.bred_crumb .bred_text {
  text-align: center;
  z-index: 1000;
  position: relative;
}

.bred_crumb .bred_text h1 {
  color: var(--text-white);
  font-size: 55px;
  font-weight: 700;
}

.bred_crumb .bred_text h1 + p {
  color: var(--text-white);
  margin-top: -5px;
}

.bred_crumb .bred_text ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bred_crumb .bred_text ul li {
  margin: 0 5px;
}

.bred_crumb .bred_text ul li a,
.bred_crumb .bred_text ul li span {
  color: var(--text-white);
  font-size: 14px;
  transition: 0.4s all;
}

.bred_crumb .bred_text ul li a:hover {
  text-decoration: underline;
}

.bred_crumb .bred_text .search_bar {
  margin-top: 25px;
  position: relative;
  z-index: 1000;
}

.bred_crumb .bred_text .search_bar form .form-group {
  position: relative;
  max-width: 600px;
  height: 60px;
  margin: 0 auto;
}

.bred_crumb .bred_text .search_bar form .form-group .form-control {
  width: 100%;
  height: 100%;
  border-radius: 100px;
  border: 1px solid var(--bg-purple);
  font-size: 16px;
  padding-left: 30px;
  color: var(--body-text-purple);
}

.bred_crumb .bred_text .search_bar form .form-group .form-control::placeholder {
  color: var(--body-text-purple);
}

.bred_crumb .bred_text .search_bar form .form-group .form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--dark-purple);
}

.bred_crumb .bred_text .search_bar form .form-group .btn {
  position: absolute;
  right: 2px;
  top: 2px;
  background-color: var(--bg-purple);
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 100px;
  text-align: center;
  line-height: 56px;
  font-size: 23px;
  color: var(--text-white);
}

.bred_crumb .bred_text .search_bar form .form-group .btn:hover {
  background-color: var(--dark-purple);
}

/* ----About App Soluction Section--- */

.app_solution_section .row {
  align-items: center;
}

.app_solution_section .app_text .section_title {
  text-align: left;
  margin-bottom: 20px;
}

.app_solution_section .app_text .section_title h2 {
  letter-spacing: -1px;
}

.app_solution_section .app_text p {
  padding-right: 40px;
}

.app_solution_section .app_images {
  position: relative;
}

.app_solution_section .app_images ul {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}

.app_solution_section .app_images ul li {
  position: relative;
}

.app_solution_section .app_images ul li a {
  position: relative;
}

.app_solution_section .app_images ul li a .play_icon {
  background-color: rgba(255, 255, 255, 0.1);
  width: 96px;
  height: 96px;
  border-radius: 100px;
  text-align: center;
  margin: 0 auto;
  line-height: 96px;
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.app_solution_section .app_images ul li img {
  max-width: 100%;
}

.app_solution_section .app_images li:first-child {
  margin-bottom: 30px;
  text-align: center;
  width: 100%;
}

.app_solution_section .app_images ul li:nth-child(2) {
  left: -5px;
  cursor: pointer;
}

.app_solution_section .app_images ul li:nth-child(3) {
  right: -5px;
}

.app_solution_section .app_images::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 570px;
  height: 570px;
  border-radius: 100%;
  background-color: var(--bg-white);
  z-index: -1;
}

/* ------Why Section CSS Start------ */

.why_we_section {
  display: flex;
  justify-content: center;
}

.why_we_section .why_inner {
  background-color: var(--bg-white);
  border-radius: 30px;
  width: 1370px;
  margin: 0 15px;
  box-shadow: 0 4px 30px #ede9fe;
  padding: 85px 0;
}

.why_we_section .why_inner .section_title {
  margin-bottom: 50px;
}

.why_we_section .why_inner .why_box .icon {
  margin-bottom: 45px;
}

.why_we_section .why_inner .why_box .icon img {
  max-width: 100%;
}

.why_we_section .why_inner .why_box .text h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--dark-purple);
  margin-bottom: 10px;
}

.why_we_section .why_inner .why_box .text p {
  margin-bottom: 0;
}

/* About-Page-Sectino */

.about_page_sectino img {
  max-width: 100%;
}

/* -----------experts_team_sectio---------- */

.experts_team_section .experts_box {
  position: relative;
  text-align: center;
  padding: 35px 30px;
  border-radius: 12px;
  background-color: transparent;
  transition: 0.4s all;
}

.experts_team_section .experts_box img {
  margin-bottom: 30px;
  max-width: 100%;
}

.experts_team_section .experts_box .text h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--dark-purple);
  transition: 0.4s all;
}

.experts_team_section .experts_box .text span {
  color: var(--body-text-purple);
}

.experts_team_section .experts_box .social_media {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
}

.experts_team_section .experts_box .social_media a {
  display: block;
  width: 33px;
  height: 33px;
  border: 1px solid #cccce2;
  border-radius: 50px;
  text-align: center;
  line-height: 31px;
  color: #898aae;
  margin: 0 5px;
  transition: 0.4s all;
  font-size: 15px;
}

.experts_team_section .experts_box .social_media a:hover {
  border-color: var(--purple);
  background-color: var(--bg-purple);
  color: var(--text-white);
}

.experts_team_section .experts_box:hover {
  background-color: var(--bg-white);
  box-shadow: 0 4px 10px #ede9fe;
}

.experts_team_section .experts_box:hover h3 {
  color: var(--purple);
}

/* ---------Query-Section-Css-Start-------- */

.query_section {
  display: flex;
  justify-content: center;
}

.query_inner {
  width: 1370px;
  margin: 0 15px;
  /*background-image: url(../images/query_bg.png);*/
  background: var(--purple);
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 30px;
  min-height: 420px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.query_inner .section_title h2,
.query_inner .section_title p {
  color: #fff;
}

.query_inner .section_title {
  margin-bottom: 40px;
}

.query_inner .white_btn {
  font-size: 25px;
  font-weight: 700;
}

.query_inner .white_btn:hover {
  border-color: #fff;
}

.about_trust_section {
  margin-bottom: 40px;
}

/* Blog List Css Start */

.blog_list_story {
  margin-bottom: 50px;
}

.blog_list_main {
  position: relative;
}

.blog_list_main > .container > .row {
  align-items: center;
}

.blog_list_main .blog_img {
  position: relative;
}

.blog_list_main .blog_img img {
  max-width: 100%;
  border-radius: 12px;
}

.blog_list_main .blog_img span {
  position: absolute;
  left: 15px;
  top: 15px;
  font-size: 14px;
  color: var(--text-white);
}

.blog_list_main .blog_text .section_title {
  text-align: left;
}

.blog_list_main .blog_text .choice_badge {
  font-size: 12px;
  background-color: #f8d979;
  display: inline-block;
  padding: 1px 10px;
  border-radius: 4px;
  color: var(--dark-purple);
  font-weight: 700;
  margin-bottom: 10px;
}

.blog_list_main .blog_text a {
  color: var(--purple);
  margin-top: 25px;
  display: block;
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: 600;
}

.blog_list_main .blog_text a:hover {
  text-decoration: underline;
}

.blog_list_story.row_am {
  padding-top: 30px;
}

.blog_list_story .story_box {
  margin-bottom: 40px;
  text-align: left;
}

/* Pagination Css Start */

.pagination_block ul {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.pagination_block ul li:not(:first-child, :last-child) a {
  margin: 0 5px;
  transition: 0.4s all;
  display: block;
  width: 35px;
  height: 35px;
  background-color: transparent;
  border-radius: 50px;
  text-align: center;
  line-height: 35px;
}

.pagination_block ul li:first-child {
  margin-right: 20px;
}

.pagination_block ul li:last-child {
  margin-left: 20px;
}

.pagination_block ul li:not(:first-child, :last-child) a:hover,
.pagination_block ul li:not(:first-child, :last-child) a.active {
  background-color: var(--bg-purple);
  color: var(--text-white);
}

.pagination_block ul li:first-child a:hover {
  color: var(--purple);
}

.pagination_block ul li:last-child a:hover {
  color: var(--purple);
}

/* Blog Detail Css Start */

.blog_detail_section {
  margin-bottom: 40px;
}

.blog_detail_bredcrumb.bred_crumb .bred_text {
  margin-top: -30px;
}

.blog_detail_section .blog_inner_pannel {
  background-color: #ffffff;
  border-radius: 30px;
  padding: 45px 60px;
  margin-top: -120px;
  position: relative;
  box-shadow: 0 8px 30px #c0bad76b;
}

.blog_detail_section .blog_inner_pannel .review {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

.blog_detail_section .blog_inner_pannel .review span {
  line-height: 1;
}

.blog_detail_section .blog_inner_pannel .review span:first-child {
  color: var(--purple);
  display: inline-block;
  font-weight: 700;
}

.blog_detail_section .blog_inner_pannel .review span:last-child {
  color: var(--dark-purple);
  display: inline-block;
  margin-left: 15px;
  padding-left: 15px;
  border-left: 1px solid var(--dark-purple);
}

.blog_detail_section .blog_inner_pannel .section_title {
  margin-bottom: 40px;
}

.blog_detail_section .blog_inner_pannel .section_title h2 {
  margin-bottom: 0;
}

.blog_detail_section .blog_inner_pannel img {
  max-width: 100%;
}

.blog_detail_section .blog_inner_pannel .main_img {
  margin-bottom: 30px;
}

.blog_detail_section .blog_inner_pannel .info h3 {
  font-weight: 700;
  color: var(--dark-purple);
  margin-top: 30px;
  font-size: 25px;
  margin-bottom: 15px;
}

.blog_detail_section .blog_inner_pannel .info ul {
  padding-left: 50px;
  padding-top: 10px;
  margin-bottom: 30px;
}

.blog_detail_section .blog_inner_pannel .info ul li p {
  position: relative;
  padding-left: 25px;
  margin-bottom: 0;
}

.blog_detail_section .blog_inner_pannel .info ul li p .icon {
  position: absolute;
  left: 0;
  color: var(--purple);
}

.blog_detail_section .blog_inner_pannel .two_img {
  margin-bottom: 70px;
}

.blog_detail_section .blog_inner_pannel .quote_block {
  background-color: #f6f4fe;
  border-radius: 12px;
  padding: 55px 35px 35px 60px;
  position: relative;
  margin-top: 50px;
  margin-bottom: 35px;
}

.blog_detail_section .blog_inner_pannel .quote_block h2 {
  font-size: 25px;
  line-height: 37px;
}

.blog_detail_section .blog_inner_pannel .quote_block p {
  margin-bottom: 0;
  margin-top: 15px;
}

.blog_detail_section .blog_inner_pannel .quote_block .name {
  color: var(--purple);
  font-weight: 700;
}

.blog_detail_section .blog_inner_pannel .quote_block .q_icon {
  position: absolute;
  top: -20px;
  width: 63px;
  height: 63px;
  background-color: var(--bg-white);
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.blog_detail_section .blog_inner_pannel .quote_block .q_icon img {
  width: 35px;
}

.blog_detail_section .blog_inner_pannel .blog_authore {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 0;
  border-top: 1px solid #d6d3e3;
  border-bottom: 1px solid #d6d3e3;
  margin: 35px 0;
}

.blog_detail_section .blog_inner_pannel .blog_authore .authore_info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog_detail_section .blog_inner_pannel .blog_authore .authore_info .text {
  margin-left: 20px;
}

.blog_detail_section .blog_inner_pannel .blog_authore .authore_info .text h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--dark-purple);
  margin-bottom: 5px;
}

.blog_detail_section .blog_inner_pannel .blog_authore .authore_info .text span {
  font-size: 14px;
}

.blog_detail_section .blog_inner_pannel .blog_authore .social_media ul {
  display: flex;
}

/* Social Media link list */

.blog_detail_section .blog_inner_pannel .blog_authore .social_media ul li a {
  display: block;
  width: 37px;
  height: 37px;
  text-align: center;
  line-height: 37px;
  font-size: 15px;
  border: 1px solid #ccc9d7;
  border-radius: 50px;
  margin-right: 10px;
  transition: 0.4s all;
}

.blog_detail_section
  .blog_inner_pannel
  .blog_authore
  .social_media
  ul
  li:last-child
  a {
  margin-right: 0;
}

.blog_detail_section
  .blog_inner_pannel
  .blog_authore
  .social_media
  ul
  li
  a:hover {
  background-color: var(--bg-purple);
  color: var(--text-white);
}

.blog_detail_section .blog_inner_pannel .blog_tags ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

.blog_detail_section .blog_inner_pannel .blog_tags ul .tags p {
  margin-bottom: 0;
  color: var(--dark-purple);
  font-weight: 500;
  margin-right: 5px;
}

.blog_detail_section .blog_inner_pannel .blog_tags ul li span {
  color: var(--purple);
  font-weight: 500;
}

/* comment section Css Start */

.comment_section ul {
  margin-top: 30px;
}

.comment_section ul li {
  display: flex;
  align-items: center;
  padding: 30px 0;
  border-top: 1px solid #d6d3e3;
}

.comment_section ul li:last-child {
  padding-bottom: 0;
}

.comment_section ul li.replay_comment {
  margin-left: 110px;
}

.comment_section ul li .authore_info {
  display: flex;
  align-items: center;
  width: 260px;
}

.comment_section ul li .authore_info .avtar {
  width: 88px;
  margin-right: 20px;
}

.comment_section ul li .authore_info .text {
  width: calc(100% - 108px);
}

.comment_section ul li .authore_info .text h4 {
  font-size: 20px;
  font-weight: 600;
  color: var(--dark-purple);
}

.comment_section ul li .authore_info .text span {
  font-size: 14px;
}

.comment_section ul li .comment {
  width: calc(100% - 310px);
  margin-left: 50px;
}

.comment_section ul li .comment p {
  margin-bottom: 0;
}

/* comment-form-section */

.comment_form_section form {
  margin-top: 30px;
}

.comment_form_section form .form-group .form-control {
  border-radius: 12px;
  height: 60px;
  box-shadow: 0 3px 6px #ede9fe;
  border: transparent;
  margin-bottom: 30px;
  color: var(--body-text-purple);
  padding: 15px;
}

.comment_form_section form .form-group .form-control::placeholder {
  color: var(--body-text-purple);
}

.comment_form_section form .form-group textarea.form-control {
  height: 140px;
  padding-top: 15px;
  resize: none;
}

/* Sign Up Css Start */

.full_bg {
  /*background-image: url(../images/form_bg.png);*/
  background-size: cover;
  background: var(--purple);
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  padding-bottom: 50px;
}

.signup_section {
  position: relative;
}

.signup_section .back_btn {
  position: absolute;
  left: 0;
  top: 92px;
  color: #fff;
  font-weight: 500;
}

.signup_section .top_part {
  text-align: center;
  padding-top: 80px;
  padding-bottom: 50px;
}

.signup_form {
  width: 570px;
  margin: 0 auto;
  padding: 40px 0;
  border-radius: 12px;
  box-shadow: 0 4px 10px #00000054;
  background-color: var(--bg-white);
}

.signup_form form {
  padding: 0 60px;
}

.signup_form .section_title {
  padding: 0 15px;
}

.signup_form .section_title h2 {
  font-weight: 600;
}

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

.signup_form form .form-group .form-control {
  height: 60px;
  padding: 5px 20px;
  color: var(--body-text-purple);
  border: 2px solid #e1dbf4;
  border-radius: 12px;
  font-weight: 500;
}

.signup_form form .form-group .form-control:focus {
  box-shadow: none;
  border-color: var(--purple);
  color: var(--purple);
}

.signup_form form .form-group .puprple_btn {
  min-width: 240px;
  display: block;
  margin: 40px auto;
  margin-bottom: 30px;
  font-weight: 600;
}

.signup_form .or_block {
  display: block;
  text-align: center;
  border-bottom: 1px solid #e3e1ed;
}

.signup_form .or_block span {
  position: relative;
  top: 14px;
  padding: 0 5px;
  background-color: var(--bg-white);
  color: #8081ad;
}

.signup_form .or_option {
  text-align: center;
}

.signup_form .or_option > p {
  color: #8081ad;
  margin-top: 30px;
}

.signup_form .or_option .google_btn {
  min-width: 330px;
  border: 2px solid #e1dbf4;
  text-align: center;
  color: var(--body-text-purple);
  padding: 16px;
  border-radius: 100px;
  transition: 0.4s all;
}

.signup_form .or_option .google_btn:hover {
  border-color: var(--light-purple);
}

.signup_form .or_option .google_btn img {
  margin-right: 20px;
}

.signup_form .or_option p a {
  color: var(--purple);
  text-decoration: underline;
  transition: 0.4s all;
}

.signup_form .or_option p a:hover {
  color: var(--dark-purple);
}

/* Review List Section Css Start */

.review_list_section .review_box {
  padding: 40px 30px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px #ede9fe;
  margin: 20px 0;
}

.review_list_section .review_box .rating ul {
  display: flex;
}

.review_list_section .review_box .rating ul li span {
  color: #fc9400;
  font-size: 18px;
}

.review_list_section .review_box h3 {
  font-size: 20px;
  color: var(--purple);
  margin: 10px 0;
}

.review_list_section .review_box .reviewer {
  display: flex;
  align-items: center;
  margin-top: 35px;
}

.review_list_section .review_box .reviewer .avtar {
  width: 80px;
}

.review_list_section .review_box .reviewer .text {
  margin-left: 20px;
  width: calc(100% - 100px);
}

.review_list_section .review_box .reviewer .text h3 {
  font-weight: 600;
  color: var(--dark-purple);
  margin-bottom: 0;
}

/* review-freeapp */

.review_freeapp {
  margin: 60px 0;
}

.review_freeapp .free_app_inner {
  background: url(../images/free_review_bg.png);
  background-size: cover;
  background-position: 90%;
}

/* Contact Page Css Start */

.contact_page_section .contact_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-top: -150px;
}

.contact_page_section .contact_inner .section_title h2 {
  font-weight: 600;
}

.contact_page_section .contact_inner .contact_form {
  width: 570px;
  padding: 50px 60px;
  border-radius: 22px;
  background-color: #fff;
  box-shadow: 0 4px 10px #ede9fe;
}

.contact_page_section .contact_inner .contact_form h2 {
  margin-bottom: 0;
}

.contact_page_section .contact_inner .contact_form form {
  margin-top: 30px;
}

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

.contact_page_section
  .contact_inner
  .contact_form
  form
  .form-group
  .form-control {
  height: 60px;
  padding: 5px 20px;
  color: var(--body-text-purple);
  border: 2px solid #e1dbf4;
  border-radius: 12px;
  font-weight: 500;
}

.contact_page_section
  .contact_inner
  .contact_form
  form
  .form-group
  .form-control:focus {
  box-shadow: none;
  border-color: var(--purple);
  color: var(--purple);
}

.contact_page_section
  .contact_inner
  .contact_form
  form
  .form-group
  textarea.form-control {
  height: 140px;
  padding-top: 15px;
}

.contact_page_section .contact_inner .contact_form form .term_check {
  display: flex;
  align-items: center;
}

.contact_page_section .contact_inner .contact_form form .term_check input {
  width: 17px;
  height: 17px;
  accent-color: var(--purple);
}

.contact_page_section .contact_inner .contact_form form .term_check label {
  font-size: 13px;
  margin-bottom: 0;
  margin-left: 7px;
}

.contact_page_section .contact_inner .contact_form form .form-group button {
  width: 240px;
  margin: 0 auto;
  display: block;
  margin-top: 10px;
  margin-bottom: 0;
}

.contact_page_section .contact_inner .contact_info {
  width: 480px;
}

.contact_page_section .contact_inner .contact_info .section_title {
  text-align: left;
  margin-top: 15px;
}

.contact_page_section .contact_inner .contact_info .section_title p a {
  color: var(--purple);
  text-decoration: underline;
}

.contact_page_section .contact_inner .contact_info .btn {
  width: 180px;
  margin: 10px 0 50px 0;
}

.contact_page_section .contact_inner .contact_info .contact_info_list li {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.contact_page_section
  .contact_inner
  .contact_info
  .contact_info_list
  li:last-child {
  margin-bottom: 0;
}

.contact_page_section .contact_inner .contact_info .contact_info_list li .img {
  width: 65px;
  margin-right: 20px;
}

.contact_page_section .contact_inner .contact_info .contact_info_list li .text {
  width: calc(100% - 85px);
}

.contact_page_section
  .contact_inner
  .contact_info
  .contact_info_list
  li
  .text
  span {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: var(--dark-purple);
}

.contact_page_section
  .contact_inner
  .contact_info
  .contact_info_list
  li
  .text
  p,
.contact_page_section
  .contact_inner
  .contact_info
  .contact_info_list
  li
  .text
  a {
  margin: 0;
}

.contact_page_section
  .contact_inner
  .contact_info
  .contact_info_list
  li
  .text
  a:hover {
  color: var(--dark-purple);
}

.map_section {
  margin: 50px 0;
}

/* === COMMON FLOATING BUTTON BASE === */
.whatsapp-float,
.call-float {
  position: fixed;
  bottom: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  font-size: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: pulseCircle 2s infinite;
}

/* === WHATSAPP STYLING === */
.whatsapp-float {
  left: 20px;
  background-color: #25d366;
}

/* === CALL STYLING === */
.call-float {
  right: 20px;
  background: linear-gradient(135deg, #6a4ddf, #8e6fff);
}

/* === PULSING ANIMATION === */
@keyframes pulseCircle {
  0% {
    box-shadow: 0 0 0 0 rgba(106, 77, 223, 0.6);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(106, 77, 223, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(106, 77, 223, 0);
  }
}

/* === WAVE CIRCLE ANIMATION FOR WHATSAPP === */
.whatsapp-float {
  position: relative;
  animation: none;
  overflow: visible;
}

.whatsapp-float::before,
.whatsapp-float::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.6);
  animation: waveCircle 2s infinite;
  pointer-events: none;
  z-index: -1;
}

.whatsapp-float::after {
  animation-delay: 1s;
}

.whatsapp-float i {
  position: relative;
  z-index: 1;
}

@keyframes waveCircle {
  0% {
    width: 100%;
    height: 100%;
    opacity: 1;
    border-width: 2px;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
    border-width: 1px;
  }
}

/* === DIFFERENT COLOR GLOW FOR WHATSAPP === */
.whatsapp-float {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* === OPTIONAL: Hover Effect === */
.whatsapp-float:hover,
.call-float:hover {
  transform: scale(1.1);
  transition: 0.2s;
}

/* === Responsive WhatsApp Button === */
@media (max-width: 768px) {
  .whatsapp-float {
    width: 60px;
    height: 60px;
    font-size: 24px;
    left: 15px;
    bottom: 15px;
  }
  
  .whatsapp-float i {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .whatsapp-float {
    width: 56px;
    height: 56px;
    font-size: 22px;
    left: 12px;
    bottom: 12px;
  }
  
  .whatsapp-float i {
    font-size: 22px;
  }
  
  @keyframes waveCircle {
    0% {
      width: 100%;
      height: 100%;
      opacity: 1;
      border-width: 2px;
    }
    100% {
      width: 180%;
      height: 180%;
      opacity: 0;
      border-width: 1px;
    }
  }
}

/* =====================================
   SITE-WIDE UI POLISH (added)
===================================== */

/* Make every img safer: never break layout with broken sources */
img {
  max-width: 100%;
  height: auto;
}

/* Smooth image fallback styling */
img[onerror] {
  background: #f3f0fb;
  min-height: 40px;
}

/* Smooth scroll for anchor navigation */
html {
  scroll-behavior: smooth;
}

/* Selection color matches brand */
::selection {
  background: #6a49f2;
  color: #fff;
}

/* Lazy-loaded image fade-in */
img[loading="lazy"] {
  transition: opacity 0.4s ease, filter 0.4s ease;
}

/* Improve client logo carousel/grid presentation: greyscale -> color on hover */
.clients_section img,
.client-logo img,
.our-clients img,
img[src*="clients/logo"] {
  filter: grayscale(0.85) opacity(0.85);
  transition: filter 0.35s ease, transform 0.35s ease;
}

.clients_section img:hover,
.client-logo img:hover,
.our-clients img:hover,
img[src*="clients/logo"]:hover {
  filter: grayscale(0) opacity(1);
  transform: scale(1.04);
}

/* Touch panel scroll fix on smaller screens */
.touch-panel {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Floating WhatsApp - subtle pulse + better placement on mobile */
.whatsapp-float {
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.45);
  animation: wa-pulse 2.4s ease-in-out infinite;
}

@keyframes wa-pulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@media (max-width: 576px) {
  .whatsapp-float {
    width: 56px !important;
    height: 56px !important;
    font-size: 22px !important;
    left: 14px !important;
    bottom: 14px !important;
  }
}

/* Footer logos: keep them visible & uniform in size */
footer img[alt*="Zoho"],
footer img[alt*="ISO"],
footer img[alt*="AI"] {
  background: rgba(255, 255, 255, 0.92);
  padding: 4px 6px;
  border-radius: 6px;
  height: 38px;
  width: auto;
  object-fit: contain;
}

/* Section heading consistency — prevent overflow on small screens */
h1, h2, h3 {
  word-break: break-word;
}

/* =====================================
   DISABLE AOS scroll animations
   (per user request — keep elements visible always)
===================================== */
[data-aos],
[data-aos].aos-animate,
[data-aos][class*="aos-init"] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* =====================================
   ZOHO AUTHORIZED PARTNER BADGE + CTA
===================================== */

/* Hero/banner badge — sits next to the headline */
.hero-partner-badge {
  display: block;
  width: auto;
  max-width: 240px;
  height: auto;
  background: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(13, 13, 50, 0.18);
}

/* Badge inside the form box */
.partner-badge-wrap {
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 4px 14px rgba(13, 13, 50, 0.08);
  border: 1px solid rgba(94, 51, 169, 0.15);
}

.partner-badge-img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto;
}

/* "Why sign up here" CTA list */
.partner-benefits {
  background: #f6f4fe;
  border-left: 4px solid #6a49f2;
  border-radius: 10px;
  padding: 16px 18px;
}

.partner-benefits-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1c1543;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.partner-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.partner-benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.92rem;
  color: #333;
  line-height: 1.5;
}

.partner-benefits-list li:last-child {
  margin-bottom: 0;
}

.partner-benefits-list .check {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.4;
}

.partner-benefits-list strong {
  color: #6a49f2;
  font-weight: 700;
}

@media (max-width: 576px) {
  .hero-partner-badge {
    max-width: 200px;
  }
  .partner-badge-img {
    max-width: 220px;
  }
  .partner-benefits-title {
    font-size: 0.95rem;
  }
  .partner-benefits-list li {
    font-size: 0.88rem;
  }
}

/* =====================================
   FOOTER TRUST BADGE ROW
   (Zoho Partner / AI Automation / ISO Certified)
===================================== */
.footer-trust-badges {
  gap: 18px;
  margin-bottom: 14px !important;
  align-items: center;
  row-gap: 14px;
}

.footer-trust-badges img {
  height: 44px;
  width: auto;
  background: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  object-fit: contain;
}

.footer-trust-badges img:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

/* Make sure each badge keeps a minimum visual breathing room */
.footer-trust-badges img + img {
  margin-left: 4px;
}

@media (max-width: 576px) {
  .footer-trust-badges {
    gap: 14px;
    justify-content: flex-start;
  }
  .footer-trust-badges img {
    height: 40px;
  }
}

/* =====================================================
   CONTACT-US PAGE HERO + ADDRESS CARD
===================================================== */

/* Lebanon-themed hero - same family as the .zs-page-hero banner */
.cu-page-hero {
  position: relative;
  padding: 110px 8% 90px;
  text-align: center;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      rgba(5, 8, 22, 0.92) 0%,
      rgba(12, 18, 38, 0.86) 55%,
      rgba(20, 28, 56, 0.8) 100%
    ),
    url("https://images.unsplash.com/photo-1559494007-9f5847c49d94?auto=format&fit=crop&w=1900&q=80")
      center/cover no-repeat;
  background-color: #060912;
  background-attachment: fixed;
}

@media (max-width: 768px) {
  .cu-page-hero {
    background-attachment: scroll;
    padding: 80px 6% 70px;
  }
}

/* Bottom blue accent bar */
.cu-page-hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  background: linear-gradient(
    90deg,
    #35208f 0%,
    #6a49f2 30%,
    #38bdf8 55%,
    #6a49f2 80%,
    #35208f 100%
  );
  z-index: 1;
}

/* Soft glow accent */
.cu-page-hero::after {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  top: -150px;
  right: -150px;
  background: radial-gradient(
    circle,
    rgba(59, 130, 246, 0.22) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.cu-page-hero > * {
  position: relative;
  z-index: 2;
}

.cu-page-hero .cu-eyebrow {
  display: inline-block;
  padding: 6px 16px;
  margin-bottom: 18px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
  backdrop-filter: blur(6px);
}

.cu-page-hero h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin: 0 auto 18px;
  max-width: 900px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}

.cu-page-hero h1 span {
  color: #8b6df5;
  background: linear-gradient(90deg, #8b6df5 0%, #6a49f2 50%, #5433d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 24px rgba(59, 130, 246, 0.35);
}

.cu-page-hero p {
  max-width: 780px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.92);
}

.cu-hero-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.cu-hero-meta span {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  color: #fff;
  backdrop-filter: blur(4px);
}

@media (max-width: 768px) {
  .cu-page-hero h1 {
    font-size: 1.7rem;
  }
  .cu-page-hero p {
    font-size: 0.95rem;
  }
}

/* =====================================================
   OFFICE ADDRESS CARD (single, prominent)
===================================================== */
.cu-office-section {
  padding: 70px 6%;
  background: #ffffff;
  text-align: center;
}

.cu-office-section h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: #1c1543;
  margin-bottom: 8px;
}

.cu-office-section .cu-section-sub {
  color: #555;
  font-size: 1rem;
  margin: 0 auto 36px;
  max-width: 600px;
}

.cu-address-card {
  display: grid;
  grid-template-columns: minmax(260px, 1.05fr) minmax(0, 1fr);
  gap: 0;
  max-width: 940px;
  margin: 0 auto;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 38px rgba(13, 13, 50, 0.12);
  border: 1px solid rgba(94, 51, 169, 0.08);
  text-align: left;
}

.cu-address-card .cu-address-image {
  position: relative;
  min-height: 320px;
  background:
    linear-gradient(
      150deg,
      rgba(12, 18, 38, 0.55) 0%,
      rgba(20, 28, 56, 0.25) 60%,
      transparent 100%
    ),
    url("https://images.unsplash.com/photo-1559494007-9f5847c49d94?auto=format&fit=crop&w=1200&q=80")
      center/cover no-repeat;
}

.cu-address-card .cu-address-image::after {
  content: "🇱🇧 LEBANON";
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(255, 255, 255, 0.95);
  color: #1c1543;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.cu-address-body {
  padding: 32px 34px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cu-address-body h3 {
  margin: 0;
  font-size: 1.5rem;
  color: #1c1543;
  font-weight: 700;
}

.cu-address-body .cu-tagline {
  color: #6a49f2;
  font-weight: 600;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0;
}

.cu-address-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cu-address-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  color: #333;
  line-height: 1.55;
}

.cu-address-list .cu-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #8b6df5, #5433d8);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}

.cu-address-list a {
  color: #5433d8;
  text-decoration: none;
  font-weight: 600;
}

.cu-address-list a:hover {
  text-decoration: underline;
}

.cu-address-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.cu-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
}

.cu-btn-primary {
  background: linear-gradient(135deg, #8b6df5, #5433d8);
  color: #fff;
  box-shadow: 0 6px 14px rgba(59, 130, 246, 0.35);
}

.cu-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(59, 130, 246, 0.45);
  color: #fff;
}

.cu-btn-outline {
  background: #fff;
  color: #5433d8;
  border: 1px solid #cfc4fb;
}

.cu-btn-outline:hover {
  background: #f1eeff;
  color: #5433d8;
}

@media (max-width: 768px) {
  .cu-address-card {
    grid-template-columns: 1fr;
  }
  .cu-address-card .cu-address-image {
    min-height: 220px;
  }
  .cu-address-body {
    padding: 26px 22px;
  }
}

/* =====================================================
   TRUSTED LOGO ROW - clean, borderless, marquee-style
===================================================== */
.trusted_section {
  background: #fff;
  padding-top: 10px;
  padding-bottom: 30px;
  overflow: hidden;
}

.trusted_section .section_title {
  margin-bottom: 10px;
}

.trusted_section .company_logos {
  padding-top: 18px;
  position: relative;
  background: transparent;
  /* soft fade on both edges so logos glide in/out instead of cutting off */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

/* each slide is an equal-height, transparent cell - no card, no border */
.trusted_section .company_logos .item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.trusted_section .company_logos .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 76px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.trusted_section .company_logos img,
.trusted_section .company_logos .logo img {
  max-height: 52px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  /* sources in clients/clean/ are transparent PNGs - no box to hide */
  filter: grayscale(1) opacity(0.7);
  transition: filter 0.35s ease, transform 0.35s ease;
}

.trusted_section .company_logos img:hover,
.trusted_section .company_logos .logo img:hover {
  filter: grayscale(0) opacity(1);
  transform: scale(1.06);
  box-shadow: none;
}

/* the owl dots/arrows that dropped below the row - not wanted here */
.trusted_section .owl-dots,
.trusted_section .owl-nav,
#company_slider .owl-dots,
#company_slider .owl-nav {
  display: none !important;
}

/* large screens - a touch more presence */
@media (min-width: 1400px) {
  .trusted_section .company_logos .logo {
    height: 88px;
  }
  .trusted_section .company_logos img,
  .trusted_section .company_logos .logo img {
    max-height: 60px;
  }
}

@media (max-width: 992px) {
  .trusted_section .company_logos .logo {
    height: 66px;
    padding: 0 8px;
  }
  .trusted_section .company_logos img,
  .trusted_section .company_logos .logo img {
    max-height: 44px;
  }
}

@media (max-width: 576px) {
  .trusted_section {
    padding-bottom: 20px;
  }
  .trusted_section .company_logos {
    padding-top: 10px;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 5%,
      #000 95%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 5%,
      #000 95%,
      transparent 100%
    );
  }
  .trusted_section .company_logos .logo {
    height: 56px;
    padding: 0 6px;
  }
  .trusted_section .company_logos img,
  .trusted_section .company_logos .logo img {
    max-height: 38px;
  }
}

/* =====================================================
   NAVBAR — Zoho Authorized Partner badge (right side)
===================================================== */
.nav-zoho-badge {
  display: inline-flex;
  align-items: center;
  height: 52px;
  margin-right: 16px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid rgba(94, 51, 169, 0.18);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(13, 13, 50, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-zoho-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(13, 13, 50, 0.15);
}

.nav-zoho-badge img {
  height: 40px;
  width: auto;
  display: block;
}

@media (max-width: 991.98px) {
  .nav-zoho-badge {
    height: 46px;
    margin: 10px 0 8px;
    padding: 5px 10px;
  }
  .nav-zoho-badge img {
    height: 36px;
  }
}

/* =====================================================
   FOOTER SOCIAL ICONS
   (replaces tight gap-3 — gives breathing room + pill bg)
===================================================== */
.footer-socials {
  gap: 14px !important;
  align-items: center;
}

.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  text-decoration: none;
  transition: transform 0.25s ease, background 0.25s ease,
    border-color 0.25s ease, box-shadow 0.25s ease;
}

.footer-socials a:hover {
  transform: translateY(-3px);
  background: rgba(168, 158, 248, 0.22);
  border-color: rgba(168, 158, 248, 0.55);
  box-shadow: 0 6px 14px rgba(168, 158, 248, 0.3);
}

.footer-socials a i {
  font-size: 1.05rem !important;
  color: #fff !important;
  line-height: 1;
}

.footer-socials a:hover i {
  color: #fff !important;
}

@media (max-width: 576px) {
  .footer-socials {
    gap: 12px !important;
  }
  .footer-socials a {
    width: 36px;
    height: 36px;
  }
  .footer-socials a i {
    font-size: 0.95rem !important;
  }
}

/* =====================================================
   CONTACT-US LEBANON FAQ — keyword-rich, expandable
===================================================== */
.cu-faq-section {
  padding: 80px 6%;
  background: #fff;
}

.cu-faq-wrap {
  max-width: 920px;
  margin: 0 auto;
}

.cu-faq-head {
  text-align: center;
  margin-bottom: 40px;
}

.cu-faq-eyebrow {
  display: inline-block;
  padding: 6px 16px;
  margin-bottom: 14px;
  background: #f1eeff;
  border: 1px solid #cfc4fb;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #5433d8;
}

.cu-faq-head h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  color: #1c1543;
  margin: 0 0 12px;
}

.cu-faq-head p {
  color: #555;
  font-size: 1rem;
  margin: 0;
}

.cu-faq-head a {
  color: #5433d8;
  font-weight: 600;
}

.cu-faq {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cu-faq[open] {
  border-color: #93c5fd;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.08);
}

.cu-faq summary {
  cursor: pointer;
  padding: 18px 22px;
  font-size: 1rem;
  font-weight: 600;
  color: #1c1543;
  list-style: none;
  position: relative;
  padding-right: 56px;
}

.cu-faq summary::-webkit-details-marker {
  display: none;
}

.cu-faq summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b6df5, #5433d8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  transition: transform 0.25s ease;
}

.cu-faq[open] summary::after {
  content: "−";
  transform: translateY(-50%) rotate(180deg);
}

.cu-faq-body {
  padding: 0 22px 20px 22px;
  color: #444;
  line-height: 1.7;
  font-size: 0.95rem;
}

.cu-faq-body p {
  margin: 0;
}

.cu-faq-body strong {
  color: #1c1543;
}

@media (max-width: 600px) {
  .cu-faq-section {
    padding: 56px 5%;
  }
  .cu-faq summary {
    font-size: 0.95rem;
    padding: 16px 18px;
    padding-right: 50px;
  }
  .cu-faq summary::after {
    right: 14px;
    width: 24px;
    height: 24px;
  }
}


/* =====================================================
   .visually-hidden — content for screen readers + LLMs
   (semantic HTML still accessible to crawlers/AI)
===================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =====================================================
   PROFESSIONAL MOBILE NAVBAR + RESPONSIVE POLISH
   (Mobile-first slide-in menu, animated hamburger,
    large touch targets, smooth transitions)
===================================================== */

/* ---- Hamburger button: refined look + accessible size (MOBILE ONLY) ---- */
@media (min-width: 992px) {
  .navbar-toggler,
  .navbar-toggler.d-lg-none {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .navbar-toggler {
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border: 1px solid rgba(94, 51, 169, 0.3) !important;
    border-radius: 10px !important;
    background: #fff !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 0 !important;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    outline: none;
  }
}

/* Replace the default Bootstrap hamburger icon with three animated bars */
.navbar-toggler .navbar-toggler-icon {
  background-image: none !important;
  width: 22px;
  height: 16px;
  position: relative;
  display: block;
  background: transparent !important;
}

.navbar-toggler .navbar-toggler-icon::before,
.navbar-toggler .navbar-toggler-icon::after,
.navbar-toggler .navbar-toggler-icon {
  border-radius: 2px;
}

.navbar-toggler .navbar-toggler-icon::before,
.navbar-toggler .navbar-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: #1c1543;
  transition: transform 0.3s ease, top 0.3s ease, opacity 0.2s ease;
}

.navbar-toggler .navbar-toggler-icon::before {
  top: 0;
  box-shadow: 0 7px 0 #1c1543; /* middle bar drawn via shadow */
}

.navbar-toggler .navbar-toggler-icon::after {
  top: 14px;
}

/* Open state: animate to "X" */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  top: 7px;
  transform: rotate(45deg);
  box-shadow: none;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  top: 7px;
  transform: rotate(-45deg);
}

/* ---- Mobile drop-down panel (≤991.98px) — clean, reliable, Bootstrap-compatible ---- */
@media (max-width: 991.98px) {
  /* Container — drops down from the navbar with a card look. Uses Bootstrap's
     own collapse mechanism instead of a fragile transform-based slide-in. */
  #mainNavbar .navbar-collapse {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-height: calc(100vh - 90px) !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 36px rgba(13, 13, 50, 0.18),
                0 4px 12px rgba(13, 13, 50, 0.06) !important;
    border: 1px solid rgba(94, 51, 169, 0.08) !important;
    z-index: 1050 !important;
    transform: none !important;
  }

  /* Inner UL — vertical stack, override the inherited gray box from responsive.css */
  #mainNavbar .navbar-collapse .navbar-nav {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 14px !important;
    gap: 2px !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  #mainNavbar .navbar-collapse .nav-item {
    width: 100% !important;
  }

  /* Each menu link — large tap target, brand-colored hover */
  #mainNavbar .navbar-collapse .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1c1543 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 10px !important;
    text-align: left !important;
    transition: background 0.2s ease, color 0.2s ease;
  }

  #mainNavbar .navbar-collapse .nav-link:hover,
  #mainNavbar .navbar-collapse .nav-link:focus,
  #mainNavbar .navbar-collapse .nav-link.active {
    background: #f1eeff !important;
    color: #5433d8 !important;
  }

  /* Dropdown chevron — pushed to the right */
  #mainNavbar .navbar-collapse .dropdown-toggle::after {
    margin-left: auto !important;
    transition: transform 0.25s ease;
  }
  #mainNavbar .navbar-collapse .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }

  /* Dropdown menu — open inline as an indented sub-list */
  #mainNavbar .navbar-collapse .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    margin: 4px 0 6px 14px !important;
    padding: 4px 0 !important;
    border: none !important;
    border-left: 2px solid #cfc4fb !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #mainNavbar .navbar-collapse .dropdown-item {
    padding: 10px 14px !important;
    font-size: 0.92rem !important;
    color: #475569 !important;
    border-radius: 8px !important;
    margin: 0 !important;
    background: transparent !important;
    white-space: normal !important;
  }

  #mainNavbar .navbar-collapse .dropdown-item:hover,
  #mainNavbar .navbar-collapse .dropdown-item:focus {
    background: #f1eeff !important;
    color: #5433d8 !important;
  }

  /* Zoho badge — wrapped in its own li, full-width centered */
  #mainNavbar .navbar-collapse .nav-zoho-badge {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    padding: 12px 16px !important;
    margin: 12px 0 8px !important;
    justify-content: center !important;
    align-items: center !important;
    background: #f6f4fe !important;
    border: 1px solid rgba(94, 51, 169, 0.15) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  #mainNavbar .navbar-collapse .nav-zoho-badge img {
    height: 42px !important;
    width: auto !important;
  }

  /* GET STARTED CTA — full-width gradient button */
  #mainNavbar .navbar-collapse .dark_btn,
  #mainNavbar .navbar-collapse .nav-link.dark_btn {
    display: block !important;
    width: 100% !important;
    margin-top: 6px !important;
    padding: 14px 20px !important;
    text-align: center !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #6a49f2, #5433d8) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 18px rgba(59, 130, 246, 0.28) !important;
  }

  #mainNavbar .navbar-collapse .dark_btn:hover,
  #mainNavbar .navbar-collapse .nav-link.dark_btn:hover {
    background: linear-gradient(135deg, #5433d8, #35208f) !important;
    color: #fff !important;
  }

  /* Defeat conflicting rules from responsive.css */
  .navbar-expand-lg .navbar-nav {
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 14px !important;
  }
  .white_header .navbar-collapse {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    width: auto !important;
  }

  /* Lock body scroll while menu open (handled by JS) */
  body.menu-open {
    overflow: hidden !important;
  }
}

/* On phones (<576px) the panel uses smaller side gutters */
@media (max-width: 575.98px) {
  #mainNavbar .navbar-collapse {
    left: 6px !important;
    right: 6px !important;
  }
}

/* =====================================================
   GLOBAL RESPONSIVE POLISH
===================================================== */

/* Sensible defaults so nothing overflows on small screens */
img, video, iframe, table {
  max-width: 100%;
}

/* Prevent horizontal scroll from any rogue element.
   `overflow-x: hidden` turns html/body into a scroll container, which is what
   makes a position:fixed header detach and flash a gap at the top mid-scroll.
   `overflow-x: clip` clips exactly the same way WITHOUT creating that scroll
   container, so the header stays welded to the top. `hidden` is kept first as
   the fallback for browsers that do not know `clip`. */
html, body {
  overflow-x: hidden;
}

@supports (overflow-x: clip) {
  html, body {
    overflow-x: clip;
  }
}

/* Tighten container padding on small screens */
@media (max-width: 768px) {
  .container, .container-fluid, .container-lg, .container-md {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Heading + body type scale on small screens */
@media (max-width: 576px) {
  h1 { font-size: clamp(1.6rem, 6vw, 2.1rem) !important; line-height: 1.2; }
  h2 { font-size: clamp(1.4rem, 5vw, 1.8rem) !important; line-height: 1.25; }
  h3 { font-size: clamp(1.15rem, 4.2vw, 1.4rem) !important; line-height: 1.3; }
  p  { font-size: 0.95rem; line-height: 1.65; }

  /* Default section vertical padding */
  section, .section { padding-top: 48px !important; padding-bottom: 48px !important; }
}

/* Banner / hero balance on tablets */
@media (max-width: 991.98px) {
  .banner_section { padding: 90px 0 30px !important; }
  .banner_text h1 { font-size: clamp(1.8rem, 5vw, 2.4rem) !important; }
  .banner_form_box { width: 100%; max-width: 520px; margin: 30px auto 0 !important; }
}

/* Touch-friendly buttons everywhere */
@media (max-width: 768px) {
  .btn, button, .nav-link, a.btn, .cu-btn, .feedback-form button {
    min-height: 44px;
  }
}

/* Owl-carousel dots — bigger tap targets on mobile */
@media (max-width: 768px) {
  .owl-dots .owl-dot {
    padding: 6px !important;
  }
}

/* Tables — scroll horizontally on small screens instead of breaking layout */
@media (max-width: 768px) {
  .table-responsive,
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Service / feature grids — single column on mobile */
@media (max-width: 600px) {
  .features-grid,
  .grid-3,
  .grid-4,
  .row-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile menu anchor (so .navbar-collapse position: absolute lands correctly) */
@media (max-width: 991.98px) {
  #mainNavbar .container {
    position: relative;
  }
  /* Make sure clicks outside body when menu is open are caught — backdrop */
  #mainNavbar.menu-open-flag + .menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(13, 13, 50, 0.32);
    z-index: 1040;
    pointer-events: auto;
  }
}

/* =====================================================
   FIXED NAVBAR — guarantee top-stuck behavior on mobile
===================================================== */
.site-header.fixed-top,
header.fixed-top {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1030 !important;
  transform: none !important;     /* no transform — would create a new containing block */
  will-change: auto !important;   /* avoid any GPU-layer side effects */
}

/* iOS Safari sometimes loses fixed positioning if there's a 3D transform
   on an ancestor. Force the body to not create that situation. */
body {
  -webkit-transform: none !important;
  transform: none !important;
}

/* =====================================================
   MOBILE NAVBAR - compact, solid, clean on scroll
===================================================== */
@media (max-width: 991.98px) {
  /* The bar was 20px padding + a 50px logo = ~90px tall, taller than the 66px
     of body padding reserved for it, so content slid underneath while
     scrolling. 8px + 40px keeps it inside that reserve. */
  /* The pages reserve exactly 66px of body padding for the fixed bar. Pin the
     bar to that same 66px so the two can never disagree - the logo <img> has
     no width/height attributes, so before it decodes the bar used to render
     short and a white gap opened under the header, then snapped shut. */
  .site-header .navbar,
  header .navbar {
    min-height: 66px;
    padding: 8px 0 !important;
    /* fully opaque - the translucent white let page content ghost through */
    background: #ffffff !important;
  }

  /* belt and braces: if anything ever renders the bar shorter than the header,
     the header itself is opaque so nothing can show through above it */
  .site-header,
  header.fixed-top {
    background: #ffffff;
  }

  /* inline height="50px" on the <img> needs !important to override */
  .site-header .navbar-brand img,
  header .navbar-brand img {
    height: 40px !important;
    width: auto !important;
  }

  /* no height change on scroll (a resizing bar jitters on touch devices) -
     just lift it off the page with a shadow and a hairline */
  .site-header.nav-scrolled .navbar,
  .site-header.scrolled .navbar,
  header.nav-scrolled .navbar,
  header.scrolled .navbar {
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22) !important;
  }

  /* toggler sits flush with the container gutter */
  .site-header .navbar-toggler {
    margin-right: 0 !important;
    padding: 6px 4px !important;
    border: none !important;
    box-shadow: none !important;
  }

  .site-header .navbar-toggler:focus {
    outline: none !important;
    box-shadow: none !important;
  }

  /* the panel hangs off the shorter bar now */
  #mainNavbar .navbar-collapse {
    max-height: calc(100vh - 76px) !important;
  }
}

/* Make sure body has space for the fixed navbar at every breakpoint */
@media (max-width: 991.98px) {
  body {
    padding-top: 66px !important;
  }
}
@media (min-width: 992px) {
  body {
    padding-top: 76px !important;
  }
}

/* =====================================================
   GLOBAL FONT — keep Poppins everywhere (matches homepage)
===================================================== */
html,
body,
input,
textarea,
select,
button,
.btn,
.nav-link,
.dropdown-item,
.navbar-brand,
.dark_btn,
h1, h2, h3, h4, h5, h6,
p, span, div, li, a, label,
.banner_text,
.footer-section,
.feature-card,
.contact-card,
.cu-faq-section,
.cu-page-hero,
.zs-page-hero,
.partner-benefits,
.touch-panel {
  font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Keep icon fonts working — Font Awesome 6 uses .fa-solid / .fa-regular / .fa-brands */
.fa, .fas, .far, .fal, .fad,
.fa-solid, .fa-regular, .fa-light, .fa-thin, .fa-duotone,
[class*=" fa-"], [class^="fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
}
.fab, .fa-brands,
[class*=" fa-brands"], [class^="fa-brands"] {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
}
[class*="icofont-"], [class^="icofont-"] {
  font-family: "IcoFont" !important;
}

/* =====================================================
   AUTO-POPUP MODAL — "Let's talk about your project"
   Desktop: split 2-column · Mobile: single-column form
===================================================== */

.csp-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  background: rgba(8, 14, 36, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  animation: csp-modal-fade 0.3s ease;
}

.csp-modal.csp-modal-open {
  display: flex;
}

@keyframes csp-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes csp-modal-pop {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}

.csp-modal-card {
  background: #fff;
  border-radius: 22px;
  width: 100%;
  max-width: 860px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 70px rgba(8, 14, 36, 0.45);
  animation: csp-modal-pop 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  max-height: calc(100vh - 32px);
}

/* Close button — CSS-drawn X so it works even if Font Awesome doesn't load */
.csp-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #f1f5f9;
  color: #1c2541;
  font-size: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 10;
  padding: 0;
}

.csp-modal-close::before,
.csp-modal-close::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 2px;
  background: #1c2541;
  border-radius: 2px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -1px;
}

.csp-modal-close::before { transform: rotate(45deg); }
.csp-modal-close::after  { transform: rotate(-45deg); }

.csp-modal-close i { display: none; } /* hide any FA icon — we're drawing it in CSS */

.csp-modal-close:hover {
  background: #e2e8f0;
  transform: scale(1.05);
}

/* ---------- Left side (desktop only) — fills the box ---------- */
.csp-modal-left {
  background: linear-gradient(180deg, #f6f4fe 0%, #f1eeff 100%);
  padding: 26px 28px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.csp-modal-eyebrow {
  display: inline-block;
  align-self: flex-start;
  background: rgba(94, 51, 169, 0.1);
  color: #6a49f2;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.csp-modal-left h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f1e3d;
  line-height: 1.3;
  margin: 0 0 14px;
}

.csp-modal-countries {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.csp-modal-countries span {
  background: #fff;
  border: 1px solid rgba(15, 30, 61, 0.08);
  color: #1c2541;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.csp-modal-quote {
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #1c2541;
  box-shadow: 0 2px 10px rgba(15, 30, 61, 0.05);
}

.csp-modal-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.csp-modal-author .csp-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  flex-shrink: 0;
}

.csp-modal-author p {
  margin: 0;
  font-size: 0.78rem;
  color: #5b6478;
  line-height: 1.4;
}

.csp-modal-author p strong {
  display: block;
  color: #0f1e3d;
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 1px;
}

.csp-modal-clients-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #5b6478;
  text-transform: uppercase;
  margin: auto 0 10px;        /* pushes itself + grid down to fill empty space */
  padding-top: 16px;
  border-top: 1px solid rgba(15, 30, 61, 0.08);
}

.csp-modal-clients {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.csp-modal-clients .csp-client {
  background: #fff;
  border: 1px solid rgba(15, 30, 61, 0.08);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: #0f1e3d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.csp-modal-clients .csp-client:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(15, 30, 61, 0.08);
}

.csp-modal-clients .csp-client img {
  max-width: 56px;
  max-height: 22px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-bottom: 0;
}

/* ---------- Right side: form ---------- */
.csp-modal-right {
  padding: 22px 26px 20px;
  overflow-y: auto;
}

.csp-modal-badge {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(15, 30, 61, 0.1);
  border-radius: 10px;
  padding: 4px 10px;
  margin-bottom: 12px;
  box-shadow: 0 4px 10px rgba(15, 30, 61, 0.05);
}

.csp-modal-badge img {
  height: 30px;
  width: auto;
}

.csp-modal-right h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0f1e3d;
  margin: 0 0 4px;
}

.csp-modal-right .csp-modal-sub {
  color: #5b6478;
  font-size: 0.84rem;
  margin: 0 0 14px;
}

.csp-modal-form .csp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}

.csp-modal-form .csp-form-row.csp-form-row-single {
  grid-template-columns: 1fr;
}

.csp-modal-form .csp-field label {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  color: #1c2541;
  margin-bottom: 4px;
}

.csp-modal-form .csp-field label .req {
  color: #dc2626;
}

.csp-modal-form .csp-field input,
.csp-modal-form .csp-field select,
.csp-modal-form .csp-field textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.86rem;
  background: #fff;
  font-family: inherit;
  color: #1c2541;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.csp-modal-form .csp-field input:focus,
.csp-modal-form .csp-field select:focus,
.csp-modal-form .csp-field textarea:focus {
  outline: none;
  border-color: #6a49f2;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.csp-modal-form .csp-field textarea {
  resize: vertical;
  min-height: 56px;
}

.csp-modal-note {
  font-size: 0.74rem;
  color: #5b6478;
  line-height: 1.45;
  margin: 4px 0 12px;
}

.csp-modal-note a {
  color: #6a49f2;
  text-decoration: none;
  font-weight: 600;
}

.csp-modal-submit {
  width: 100%;
  padding: 11px 24px;
  background: linear-gradient(135deg, #8b6df5 0%, #5433d8 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.csp-modal-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.32);
}

.csp-modal-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* Inline success / error banners — appended at the bottom of the modal form */
.csp-modal-success-inline,
.csp-modal-error-inline {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 0.88rem;
  line-height: 1.45;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: csp-modal-fade 0.3s ease;
}
.csp-modal-success-inline {
  background: rgba(15, 169, 89, 0.08);
  border: 1px solid rgba(15, 169, 89, 0.35);
  color: #0f5b35;
}
.csp-modal-success-inline .csp-modal-success-icon-sm {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.csp-modal-success-inline .csp-modal-success-text strong { color: #0f1e3d; }

.csp-modal-error-inline {
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.35);
  color: #b91c1c;
}

/* =====================================================
   RESPONSIVE — mobile fits in one screen (ultra-compact)
===================================================== */
@media (max-width: 991.98px) {
  .csp-modal {
    padding: 10px;
    align-items: flex-start;
    padding-top: 8vh;            /* form sits a bit lower from top */
  }

  .csp-modal-card {
    grid-template-columns: 1fr;
    max-width: 460px;
    border-radius: 16px;
    max-height: calc(100vh - 16vh);
  }

  .csp-modal-left { display: none; }

  .csp-modal-right {
    padding: 16px 16px 14px;
    overflow-y: auto;
  }

  .csp-modal-badge {
    display: flex;
    margin: 0 auto 10px;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 10px;
  }
  .csp-modal-badge img { height: 44px; }   /* bigger Zoho badge on mobile */

  .csp-modal-right h3 {
    text-align: center;
    font-size: 1rem;
    line-height: 1.25;
    margin-bottom: 2px;
  }

  .csp-modal-right .csp-modal-sub {
    text-align: center;
    font-size: 0.74rem;
    line-height: 1.4;
    margin-bottom: 10px;
  }

  /* Two-up rows on mobile — saves a lot of vertical space */
  .csp-modal-form .csp-form-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 6px;
  }
  .csp-modal-form .csp-form-row.csp-form-row-single {
    grid-template-columns: 1fr;
  }

  .csp-modal-form .csp-field {
    margin-bottom: 0;
  }
  .csp-modal-form .csp-field label {
    font-size: 0.68rem;
    margin-bottom: 2px;
    line-height: 1.2;
  }
  .csp-modal-form .csp-field input,
  .csp-modal-form .csp-field select,
  .csp-modal-form .csp-field textarea {
    padding: 6px 9px;
    font-size: 0.8rem;
    border-radius: 7px;
  }
  .csp-modal-form .csp-field textarea {
    min-height: 38px;
  }

  .csp-modal-note {
    font-size: 0.62rem;
    line-height: 1.35;
    margin: 4px 0 8px;
  }

  .csp-modal-submit {
    padding: 9px 18px;
    font-size: 0.86rem;
  }

  .csp-modal-close {
    width: 30px;
    height: 30px;
    top: 8px;
    right: 8px;
  }
  .csp-modal-close::before,
  .csp-modal-close::after { width: 13px; margin-left: -6.5px; }
}

/* Smaller phones — keep two-up rows, slightly tighter still */
@media (max-width: 420px) {
  .csp-modal-right {
    padding: 12px 12px 10px;
  }
  .csp-modal-right h3 { font-size: 0.92rem; }
  .csp-modal-form .csp-field input,
  .csp-modal-form .csp-field select,
  .csp-modal-form .csp-field textarea {
    padding: 6px 8px;
    font-size: 0.78rem;
  }
  .csp-modal-form .csp-field textarea {
    min-height: 34px;
  }
}

/* =====================================================
   FOOTER - layout + typography polish (mobile -> ultrawide)
   The markup carries a lot of inline styles, so several of these
   need !important to land.
===================================================== */

/* ---------- Top block rhythm ---------- */
.footer-section .footer-top {
  /* inline style hard-codes 50px; scale it with the viewport instead */
  padding: clamp(44px, 5vw, 80px) clamp(16px, 4vw, 48px) clamp(40px, 4vw, 64px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-section .footer-top .row {
  --bs-gutter-x: 2rem;
  row-gap: 38px;
}

/* Give the columns a readable measure instead of stretching edge to edge */
.footer-section .footer-single-col p {
  color: rgba(255, 255, 255, 0.72) !important;
  max-width: 46ch;
}

/* ---------- Column headings ---------- */
.footer-section .footer-single-col h5 {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 20px !important;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer-section .footer-single-col h5::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: #a89ef8;
}

/* ---------- Explore link list ---------- */
.footer-section .footer-nav-list li + li {
  margin-top: 2px;
}

.footer-section .footer-nav-list a {
  display: inline-flex;
  align-items: center;
  padding: 7px 0;
  color: rgba(255, 255, 255, 0.78) !important;
  transition: color 0.22s ease, transform 0.22s ease;
}

.footer-section .footer-nav-list a::before {
  content: "";
  width: 0;
  height: 1px;
  margin-right: 0;
  background: #a89ef8;
  transition: width 0.22s ease, margin-right 0.22s ease;
}

.footer-section .footer-nav-list a:hover,
.footer-section .footer-nav-list a:focus-visible {
  color: #ffffff !important;
}

.footer-section .footer-nav-list a:hover::before,
.footer-section .footer-nav-list a:focus-visible::before {
  width: 12px;
  margin-right: 8px;
}

/* ---------- Contact column ---------- */
.footer-section .footer-single-col ul:not(.footer-nav-list) li {
  display: flex;
  align-items: flex-start;
  /* the markup uses Bootstrap 5's .me-2 for this gap, but the bundled
     Bootstrap is v4 (.mr-2), so the class is inert - space it here instead */
  gap: 10px;
  padding: 5px 0;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
}

.footer-section .footer-single-col ul:not(.footer-nav-list) li i {
  flex: 0 0 auto;
  width: 16px;
  margin-top: 5px;
  text-align: center;
}

/* ---------- Bottom bar ---------- */
.footer-section .footer-bottom {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

.footer-section .footer-bottom p {
  color: rgba(255, 255, 255, 0.66) !important;
}

.footer-section .footer-bottom a {
  transition: color 0.22s ease;
}

.footer-section .footer-bottom a:hover {
  color: #a89ef8 !important;
}

/* ---------- Large screens: keep the columns from drifting apart ---------- */
@media (min-width: 1400px) {
  .footer-section .footer-top .container {
    max-width: 1240px;
  }
  .footer-section .footer-top .row {
    --bs-gutter-x: 3rem;
  }
  .footer-section .footer-single-col p,
  .footer-section .footer-single-col ul li {
    font-size: 14.5px !important;
  }
}

@media (min-width: 1800px) {
  .footer-section .footer-top .container,
  .footer-section .footer-bottom .container {
    max-width: 1360px;
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 991.98px) {
  .footer-section .footer-top .row {
    row-gap: 32px;
  }
  .footer-section .footer-single-col p {
    max-width: none;
  }
}

/* ---------- Phones ---------- */
@media (max-width: 575.98px) {
  /* the Explore column is col-6, which left a dead half-row on phones */
  .footer-section .footer-top .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  .footer-section .footer-top .row {
    row-gap: 26px;
  }

  .footer-section .footer-single-col h5 {
    font-size: 0.95rem;
    padding-bottom: 10px;
    margin-bottom: 14px !important;
  }

  /* 44px tap targets for the link list */
  .footer-section .footer-nav-list a {
    padding: 10px 0;
  }

  .footer-section .footer-bottom .row {
    row-gap: 6px;
  }

  .footer-section .footer-bottom .col-12 {
    text-align: left !important;
  }
}

/* =====================================================
   MOBILE FIXES - hero "trusted by" row + logo strip spacing
===================================================== */
@media (max-width: 767.98px) {
  /* the avatar row + caption sat on one non-wrapping flex line, so the
     caption ran past the right edge and got clipped */
  .banner_section .used_app {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
    margin-top: 26px;
  }
  .banner_section .used_app ul {
    margin-right: 0;
  }
  .banner_section .used_app p {
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

/* Logo strip: it was floating in a lot of dead space on phones, with the
   marks too small and too faded to read. */
@media (max-width: 767.98px) {
  .trusted_section {
    margin-top: 0 !important;
    padding-top: 26px !important;
    padding-bottom: 26px !important;
  }

  .trusted_section .section_title {
    margin-bottom: 0 !important;
  }

  .trusted_section .section_title h2 {
    margin-bottom: 0 !important;
  }

  .trusted_section .company_logos {
    padding-top: 6px !important;
  }

  .trusted_section .company_logos .logo {
    height: 62px;
    padding: 0 6px;
  }

  .trusted_section .company_logos img,
  .trusted_section .company_logos .logo img {
    max-height: 44px;
    /* legible against white instead of washed out */
    filter: grayscale(1) opacity(0.85);
  }
}

/* ---------- Footer column rhythm (3 equal columns from lg up) ---------- */
@media (min-width: 992px) {
  /* the middle "Explore" column is the narrowest content, so pull it in a
     little and give the two text columns the breathing room instead */
  .footer-section .footer-top .row > [class*="col-lg-4"]:nth-child(2) {
    padding-left: 2.5rem;
  }
}

/* Tablet: About spans the full width, Explore + Contact share the row */
@media (min-width: 576px) and (max-width: 991.98px) {
  .footer-section .footer-top .row {
    row-gap: 34px;
  }
  .footer-section .footer-top .row > [class*="col-"]:first-child {
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* Bottom bar: three even cells, wrapping cleanly */
.footer-section .footer-bottom .row {
  align-items: center;
}

@media (min-width: 768px) {
  .footer-section .footer-bottom .row > [class*="col-md-4"] {
    display: flex;
    align-items: center;
  }
  .footer-section .footer-bottom .row > [class*="col-md-4"]:nth-child(2) {
    justify-content: center;
  }
  .footer-section .footer-bottom .row > [class*="col-md-4"]:last-child {
    justify-content: flex-end;
  }
}

/* =====================================================
   ZOHO PRODUCT CATALOG - grouped by business function
   (compact cards; logos come from Zoho's CDN with a
   local copy in assets/img/zoho/cdn/ as the fallback)
===================================================== */
.zoho_catalog_section {
  background: #fff;
}

.zoho_catalog_section .section_title {
  margin-bottom: 34px;
}

.zoho-catalog .zc-group + .zc-group {
  margin-top: 34px;
}

.zoho-catalog .zc-group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1c1543;
}

/* rule that fills the space to the right of the group name */
.zoho-catalog .zc-group-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right, rgba(106, 73, 242, 0.28), transparent);
}

.zoho-catalog .zc-count {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #6a49f2;
  background: #f1eeff;
  border-radius: 999px;
  padding: 3px 10px;
}

.zoho-catalog .apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.zoho-catalog .app-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #e8e8f0;
  border-radius: 14px;
  padding: 14px;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.zoho-catalog .app-card:hover {
  transform: translateY(-2px);
  border-color: #cfc4fb;
  box-shadow: 0 10px 24px rgba(28, 21, 67, 0.09);
}

/* Logo centred in a fixed-height box so every card lines up */
.zoho-catalog .app-card .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38px;
  margin-bottom: 12px;
  background: none;
}

.zoho-catalog .app-card .logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  /* the global `img[onerror]` fallback rule paints a lavender block behind any
     image that has an onerror handler - these logos have one, so clear it */
  background: none !important;
  min-height: 0 !important;
}

.zoho-catalog .app-card .title {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  margin-bottom: 5px;
  color: #1c1543;
}

.zoho-catalog .app-card .desc {
  display: block;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #5b5b74;
}

@media (max-width: 991.98px) {
  .zoho-catalog .apps-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
  }
  .zoho-catalog .zc-group + .zc-group {
    margin-top: 26px;
  }
}

@media (max-width: 575.98px) {
  .zoho-catalog .apps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .zoho-catalog .app-card {
    padding: 12px 11px;
    border-radius: 12px;
  }
  .zoho-catalog .app-card .logo {
    height: 26px;
    margin-bottom: 9px;
  }
  .zoho-catalog .app-card .title {
    font-size: 0.86rem;
  }
  .zoho-catalog .app-card .desc {
    font-size: 0.74rem;
    line-height: 1.45;
  }
  .zoho-catalog .zc-group-title {
    font-size: 0.92rem;
    margin-bottom: 12px;
  }
}

/* =====================================================
   READABILITY - consistent section rhythm + measure
===================================================== */

/* Intro copy under a section heading reads badly at full container width;
   cap it at a comfortable measure and centre it. */
.section_title p {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
}

/* .section_title is centred by default, so only pull the measure back to the
   left when a title is explicitly left-aligned */
.section_title.text-left p,
.section_title.text-start p {
  margin-left: 0;
}

/* Section vertical rhythm: one scale, applied everywhere */
.row_am {
  padding: clamp(44px, 5vw, 78px) 0;
}

@media (max-width: 575.98px) {
  .section_title h2 {
    margin-bottom: 10px;
  }
  .section_title p {
    font-size: 0.94rem;
    line-height: 1.6;
  }
}

/* =====================================================
   ZOHO PRODUCT PAGES (/zoho-products/)
===================================================== */
.zp-page {
  background: #fff;
}

/* ---------- hero ---------- */
.zp-hero {
  background: linear-gradient(180deg, #f6f4fe 0%, #ffffff 100%);
  padding: clamp(28px, 4vw, 46px) 0 clamp(30px, 4vw, 48px);
  text-align: center;
  border-bottom: 1px solid #eeecf8;
}

.zp-crumbs {
  font-size: 0.82rem;
  color: #6b6b8a;
  margin-bottom: 22px;
}

.zp-crumbs a {
  color: #6a49f2;
}

.zp-crumbs a:hover {
  text-decoration: underline;
}

.zp-crumbs span {
  margin: 0 7px;
}

.zp-crumbs span[aria-current] {
  margin: 0;
  color: #1c1543;
  font-weight: 600;
}

.zp-hero-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 54px;
  margin-bottom: 18px;
}

.zp-hero-logo img {
  max-height: 100%;
  max-width: 260px;
  width: auto !important;
  height: auto !important;
  background: none !important;
  min-height: 0 !important;
}

.zp-hero h1 {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 700;
  color: #1c1543;
  margin-bottom: 12px;
}

.zp-hero h1 span {
  color: #6a49f2;
}

.zp-tag {
  max-width: 62ch;
  margin: 0 auto;
  color: #5b5b74;
  font-size: 1.02rem;
  line-height: 1.6;
}

.zp-hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

/* ---------- buttons ---------- */
.zp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* <button> keeps the UA's dark outset border unless it is cleared - that is
     the black ring that showed around "Request a free consultation" */
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: inherit;
  min-height: 44px;
  padding: 11px 22px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.94rem;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    background 0.18s ease, color 0.18s ease;
}

.zp-btn-primary {
  background: #6a49f2;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(106, 73, 242, 0.24);
}

.zp-btn-primary:hover {
  background: #5a3de0;
  transform: translateY(-2px);
}

.zp-btn-ghost {
  background: #fff;
  color: #1c1543 !important;
  border: 1px solid #ddd7f7;
}

.zp-btn-ghost:hover {
  border-color: #6a49f2;
  color: #6a49f2 !important;
}

.zp-btn-light {
  background: #fff;
  color: #1c1543 !important;
}

.zp-btn-light:hover {
  transform: translateY(-2px);
}

.zp-btn-block {
  display: flex;
  width: 100%;
  margin-top: 16px;
}

/* ---------- detail body ---------- */
.zp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px;
  align-items: start;
}

.zp-main h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  color: #1c1543;
  margin-bottom: 14px;
}

.zp-main h3 {
  font-size: 1.12rem;
  color: #1c1543;
  margin: 32px 0 14px;
}

.zp-main p {
  color: #4b4b63;
  line-height: 1.75;
  max-width: 68ch;
}

.zp-caps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.zp-caps li {
  position: relative;
  padding: 12px 14px 12px 40px;
  background: #faf9ff;
  border: 1px solid #eeecf8;
  border-radius: 10px;
  color: #3f3f57;
  font-size: 0.92rem;
  line-height: 1.5;
}

.zp-caps li::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 17px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6a49f2;
}

.zp-steps {
  margin: 0;
  padding-left: 20px;
  color: #4b4b63;
}

.zp-steps li {
  margin-bottom: 12px;
  line-height: 1.7;
  max-width: 68ch;
}

.zp-steps strong {
  color: #1c1543;
}

/* ---------- aside table ---------- */
.zp-aside {
  position: sticky;
  top: 92px;
}

.zp-card {
  background: #fff;
  border: 1px solid #e8e6f5;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(28, 21, 67, 0.06);
}

.zp-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1c1543;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eeecf8;
}

.zp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
}

.zp-table th,
.zp-table td {
  padding: 10px 0;
  vertical-align: top;
  border-bottom: 1px solid #f2f1fa;
  line-height: 1.5;
}

.zp-table th {
  width: 40%;
  text-align: left;
  font-weight: 600;
  color: #6b6b8a;
  padding-right: 12px;
}

.zp-table td {
  color: #1c1543;
}

.zp-table tr:last-child th,
.zp-table tr:last-child td {
  border-bottom: 0;
}

/* ---------- related ---------- */
.zp-related {
  background: #faf9ff;
  border-top: 1px solid #eeecf8;
}

.zp-related-title {
  font-size: 1.15rem;
  color: #1c1543;
  margin-bottom: 18px;
}

.zp-rel-grid,
.zp-app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}

.zp-rel-card,
.zp-card-app {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 78px;
  padding: 14px;
  background: #fff;
  border: 1px solid #e8e6f5;
  border-radius: 12px;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.zp-rel-card:hover,
.zp-card-app:hover {
  transform: translateY(-2px);
  border-color: #cfc4fb;
  box-shadow: 0 10px 22px rgba(28, 21, 67, 0.09);
}

.zp-rel-card img,
.zp-card-app img {
  max-height: 40px;
  max-width: 100%;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  background: none !important;
  min-height: 0 !important;
}

.zp-card-app .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* ---------- catalog index ---------- */
.zp-group + .zp-group {
  margin-top: 38px;
}

.zp-group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1c1543;
  margin: 0 0 16px;
}

.zp-group-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right, rgba(106, 73, 242, 0.28), transparent);
}

.zp-count {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: none;
  color: #6a49f2;
  background: #f1eeff;
  border-radius: 999px;
  padding: 3px 10px;
}

/* ---------- closing cta ---------- */
.zp-cta {
  background: linear-gradient(135deg, #6a49f2 0%, #4b2fd1 100%);
  color: #fff;
  text-align: center;
  padding: clamp(40px, 5vw, 64px) 0;
}

.zp-cta h2 {
  color: #fff;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  margin-bottom: 12px;
}

.zp-cta p {
  max-width: 62ch;
  margin: 0 auto 24px;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.65;
}

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
  .zp-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .zp-aside {
    position: static;
  }
}

@media (max-width: 575.98px) {
  .zp-rel-grid,
  .zp-app-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .zp-rel-card,
  .zp-card-app {
    height: 66px;
    padding: 10px;
  }
  .zp-rel-card img,
  .zp-card-app img {
    max-height: 30px;
  }
  .zp-caps {
    grid-template-columns: minmax(0, 1fr);
  }
  .zp-hero-btns .zp-btn {
    flex: 1 1 100%;
  }
  .zp-group-title {
    font-size: 0.92rem;
  }
}

/* logo-only cards: the wordmark already carries the product name */
.zoho-catalog .app-card {
  justify-content: center;
  min-height: 84px;
  padding: 16px 14px;
}

.zoho-catalog .app-card .logo {
  height: 42px;
  margin-bottom: 0;
}

.zc-all {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

@media (max-width: 575.98px) {
  .zoho-catalog .app-card {
    min-height: 68px;
    padding: 12px 10px;
  }
  .zoho-catalog .app-card .logo {
    height: 30px;
  }
}

/* responsive.css centres all body text under 768px; long-form copy on the
   product pages reads far better left-aligned */
@media (max-width: 767.98px) {
  .zp-main,
  .zp-main h2,
  .zp-main h3,
  .zp-main p,
  .zp-caps li,
  .zp-steps,
  .zp-steps li,
  .zp-table th,
  .zp-table td,
  .zp-card-title,
  .zp-related-title,
  .zp-group-title,
  .zc-group-title {
    text-align: left;
  }
}

/* =====================================================
   PRODUCT PAGE v2 - split hero, lead form, wide tables
===================================================== */
.zp-hero {
  text-align: left;
}

.zp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 46px;
  align-items: start;
}

.zp-hero-left .zp-hero-logo {
  justify-content: flex-start;
  height: 48px;
  margin-bottom: 18px;
}

.zp-hero-left h1 {
  text-align: left;
}

.zp-hero .zp-tag {
  margin: 0 0 22px;
  max-width: 58ch;
}

.zp-hero-points {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.zp-hero-points li {
  position: relative;
  padding-left: 28px;
  color: #3f3f57;
  font-size: 0.94rem;
  line-height: 1.5;
}

.zp-hero-points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 12px;
  height: 7px;
  border-left: 2px solid #6a49f2;
  border-bottom: 2px solid #6a49f2;
  transform: rotate(-45deg);
}

.zp-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding-top: 18px;
  border-top: 1px solid #e7e3f8;
}

.zp-hero-meta span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.88rem;
  color: #4b4b63;
  max-width: 34ch;
}

.zp-hero-meta strong {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8b86a8;
}

/* ---------- lead form ---------- */
.zp-form-card {
  background: #fff;
  border: 1px solid #e8e6f5;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 18px 44px rgba(28, 21, 67, 0.1);
}

.zp-form-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1c1543;
  margin: 0 0 6px;
}

.zp-form-sub {
  font-size: 0.86rem;
  color: #6b6b8a;
  line-height: 1.55;
  margin: 0 0 18px;
}

/* two fields per row */
.zp-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.zp-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.zp-field-full {
  margin-bottom: 14px;
}

.zp-field label {
  font-size: 0.79rem;
  font-weight: 600;
  color: #4b4b63;
}

.zp-field input,
.zp-field select,
.zp-field textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-family: inherit;
  color: #1c1543;
  background: #fbfaff;
  border: 1px solid #e2ddf6;
  border-radius: 9px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    background 0.18s ease;
}

.zp-field textarea {
  resize: vertical;
  min-height: 74px;
}

.zp-field input:focus,
.zp-field select:focus,
.zp-field textarea:focus {
  outline: none;
  background: #fff;
  border-color: #6a49f2;
  box-shadow: 0 0 0 3px rgba(106, 73, 242, 0.12);
}

.zp-field input::placeholder,
.zp-field textarea::placeholder {
  color: #a8a4bd;
}

.zp-form-note {
  margin: 12px 0 0;
  font-size: 0.76rem;
  color: #8b86a8;
  text-align: center;
}

/* ---------- body sections ---------- */
.zp-detail h2,
.zp-features h2,
.zp-lebanon h2,
.zp-impl h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: #1c1543;
  margin-bottom: 12px;
}

.zp-lead {
  color: #4b4b63;
  line-height: 1.75;
  max-width: 78ch;
  margin-bottom: 26px;
}

.zp-features {
  background: #faf9ff;
  border-top: 1px solid #eeecf8;
  border-bottom: 1px solid #eeecf8;
}

.zp-table-wrap {
  overflow-x: auto;
  background: #fff;
  border: 1px solid #e8e6f5;
  border-radius: 14px;
}

.zp-table-wide {
  min-width: 560px;
  font-size: 0.9rem;
}

.zp-table-wide thead th {
  background: #1c1543;
  color: #fff;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 13px 18px;
  text-align: left;
  border: 0;
}

.zp-table-wide tbody th,
.zp-table-wide tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid #f0eefa;
  vertical-align: top;
  line-height: 1.6;
}

.zp-table-wide tbody th {
  width: 30%;
  color: #1c1543;
  font-weight: 600;
  background: #fcfbff;
}

.zp-table-wide tbody td {
  color: #4b4b63;
}

.zp-table-wide tbody tr:last-child th,
.zp-table-wide tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------- lebanon block ---------- */
.zp-leb-list {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.zp-leb-list li {
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #e8e6f5;
  border-left: 3px solid #6a49f2;
  border-radius: 12px;
  color: #4b4b63;
  line-height: 1.65;
  font-size: 0.92rem;
}

.zp-leb-list strong {
  color: #1c1543;
}

.zp-inds h3 {
  font-size: 1.05rem;
  color: #1c1543;
  margin-bottom: 14px;
}

.zp-ind-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
}

.zp-ind-list li {
  padding: 8px 15px;
  background: #f1eeff;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #4a3aa8;
}

/* ---------- faq ---------- */
.zp-faq {
  border: 1px solid #e8e6f5;
  border-radius: 11px;
  padding: 0;
  margin-bottom: 10px;
  background: #fff;
}

.zp-faq summary {
  cursor: pointer;
  padding: 14px 44px 14px 18px;
  font-weight: 600;
  color: #1c1543;
  font-size: 0.94rem;
  list-style: none;
  position: relative;
}

.zp-faq summary::-webkit-details-marker {
  display: none;
}

.zp-faq summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 400;
  color: #6a49f2;
}

.zp-faq[open] summary::after {
  content: "\2212";
}

.zp-faq p {
  margin: 0;
  padding: 0 18px 16px;
  color: #4b4b63;
  line-height: 1.7;
  font-size: 0.91rem;
}

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
  .zp-hero-grid {
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 32px;
  }
}

@media (max-width: 991.98px) {
  .zp-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .zp-form-card {
    max-width: 560px;
  }
}

@media (max-width: 575.98px) {
  .zp-form-card {
    padding: 18px 15px;
    border-radius: 14px;
  }
  .zp-form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .zp-field label {
    font-size: 0.74rem;
  }
  .zp-field input,
  .zp-field select,
  .zp-field textarea {
    padding: 9px 10px;
    font-size: 0.86rem;
  }
  .zp-leb-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .zp-table-wide {
    min-width: 460px;
  }
}

/* keep long-form product copy left aligned under responsive.css centring */
@media (max-width: 767.98px) {
  .zp-hero-left,
  .zp-hero-left h1,
  .zp-hero .zp-tag,
  .zp-hero-points li,
  .zp-hero-meta span,
  .zp-form-card,
  .zp-form-title,
  .zp-form-sub,
  .zp-field label,
  .zp-detail h2,
  .zp-features h2,
  .zp-lebanon h2,
  .zp-impl h2,
  .zp-lead,
  .zp-leb-list li,
  .zp-inds h3,
  .zp-faq summary,
  .zp-faq p,
  .zp-table-wide th,
  .zp-table-wide td {
    text-align: left;
  }
}

/* =====================================================
   BACKED BY badge - top right of the "Trusted by" row
===================================================== */
.trusted_section {
  position: relative;
}

/* absolutely positioned in the section corner - margin-pulling had run out of
   room and was starting to collide with the wave above */
.trusted_section .backed-by-strip {
  position: absolute;
  top: 14px;
  right: 22px;
  margin: 0;
  z-index: 3;
}

.backed-by {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 8px 15px;
  line-height: 0;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(106, 73, 242, 0.14);
  box-shadow: 0 2px 8px rgba(28, 21, 67, 0.05);
  text-decoration: none;
  transition: border-color 0.22s ease, box-shadow 0.22s ease,
    transform 0.22s ease;
}

.backed-by:hover {
  border-color: rgba(106, 73, 242, 0.34);
  box-shadow: 0 6px 16px rgba(28, 21, 67, 0.1);
  transform: translateY(-1px);
}

.backed-by-label {
  line-height: 1;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8b86a8;
  white-space: nowrap;
}

.backed-by img {
  height: 25px;
  width: auto !important;
  display: block;
  background: none !important;
  min-height: 0 !important;
}

@media (min-width: 1400px) {
  .trusted_section .backed-by-strip {
    top: 10px;
    right: 34px;
  }
}

@media (max-width: 767.98px) {
  .trusted_section .backed-by-strip {
    position: static;
    justify-content: center;
    margin: -6px 0 10px;
  }
  .backed-by {
    gap: 8px;
    padding: 6px 12px;
  }
  .backed-by-label {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
  }
  .backed-by img {
    height: 19px;
  }
}

/* =====================================================
   PRODUCT HERO - balance the two columns vertically
===================================================== */
.zp-hero-grid {
  align-items: center;
}

.zp-hero-left {
  padding: 6px 0;
}

/* push the meta strip to the bottom of the left column when it is the
   shorter side, so the two columns end on a similar line */
.zp-hero-left {
  display: flex;
  flex-direction: column;
}

.zp-hero-meta {
  margin-top: auto;
}

@media (max-width: 991.98px) {
  .zp-hero-grid {
    align-items: stretch;
  }
  .zp-hero-meta {
    margin-top: 4px;
  }
}

/* =====================================================
   DESKTOP HEADER RESERVE
   The pages reserve 76px of body padding for the fixed bar, but the bar
   actually measures 100px - so the top 24px of every page was sitting
   underneath the header. Pin both sides to the same number.
===================================================== */
@media (min-width: 992px) {
  .site-header .navbar,
  header .navbar {
    min-height: 100px;
  }

  body {
    padding-top: 100px !important;
  }
}

/* =====================================================
   NAVBAR - enterprise mega menu (desktop) + panel (mobile)
===================================================== */
@media (min-width: 992px) {
  #mainNavbar .navbar-nav {
    gap: 2px;
  }

  #mainNavbar .nav-link {
    padding: 10px 14px !important;
    font-weight: 500;
    color: #1c1543;
    border-radius: 8px;
    transition: color 0.18s ease, background 0.18s ease;
  }

  #mainNavbar .nav-link:hover,
  #mainNavbar .nav-item.show > .nav-link {
    color: #6a49f2;
    background: #f4f1ff;
  }

  #mainNavbar .nav-link.dark_btn:hover {
    background: none;
  }

  /* ---- mega menu shell ---- */
  /* the panel is anchored to the navbar container, not to its own nav item,
     otherwise a 1100px panel hanging off a left-hand item runs off screen */
  #mainNavbar .container {
    position: relative;
  }

  .nvx-mega-item {
    position: static;
  }

  .nvx-mega {
    position: absolute;
    left: 0;
    right: 0;
    transform: none;
    width: auto;
    padding: 0;
    margin-top: 14px;
    border: 1px solid #ece9f9;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(28, 21, 67, 0.16);
    overflow: hidden;
  }

  .nvx-mega-sm {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  /* bridge the gap so the menu does not close while the cursor travels */
  .nvx-mega::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
  }

  .nvx-mega-inner {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px 22px;
    padding: 26px 28px 22px;
  }

  .nvx-mega-sm .nvx-mega-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nvx-col-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8b86a8;
    margin: 0 0 10px;
  }

  .nvx-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nvx-col li a {
    display: block;
    padding: 6px 8px;
    margin-left: -8px;
    border-radius: 7px;
    font-size: 0.875rem;
    color: #4b4b63;
    text-decoration: none;
    transition: color 0.16s ease, background 0.16s ease;
  }

  .nvx-col li a:hover {
    color: #6a49f2;
    background: #f6f3ff;
  }

  .nvx-more a {
    font-weight: 600;
    color: #6a49f2 !important;
  }

  .nvx-promo {
    background: linear-gradient(160deg, #f4f1ff, #ece7ff);
    border-radius: 12px;
    padding: 18px;
  }

  .nvx-promo p {
    font-size: 0.82rem;
    line-height: 1.55;
    color: #4b4b63;
    margin: 0 0 14px;
  }

  .nvx-promo-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 8px;
    background: #6a49f2;
    color: #fff !important;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
  }

  .nvx-promo-btn:hover {
    background: #5a3de0;
  }

  .nvx-mega-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 28px;
    background: #faf9ff;
    border-top: 1px solid #f0eefa;
    font-size: 0.84rem;
    color: #6b6b8a;
  }

  .nvx-foot-link {
    font-weight: 600;
    color: #6a49f2;
    white-space: nowrap;
  }

  /* open on hover, as enterprise navs do */
  .nvx-mega-item:hover > .nvx-mega,
  .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
  }

  /* standard dropdowns get the same treatment */
  #mainNavbar .dropdown-menu:not(.nvx-mega) {
    margin-top: 14px;
    padding: 10px;
    border: 1px solid #ece9f9;
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(28, 21, 67, 0.14);
    min-width: 232px;
  }

  #mainNavbar .dropdown-menu:not(.nvx-mega) .dropdown-item {
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.875rem;
    color: #4b4b63;
  }
}

/* ---------- mobile panel ---------- */
@media (max-width: 991.98px) {
  #mainNavbar .nvx-mega {
    position: static !important;
    display: none;
    width: auto !important;
    transform: none !important;
    margin: 4px 0 8px 12px !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 2px solid #ddd7f7 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  #mainNavbar .nvx-mega.show {
    display: block;
  }

  #mainNavbar .nvx-mega-inner {
    display: block;
    padding: 4px 0 4px 10px;
  }

  #mainNavbar .nvx-col + .nvx-col {
    margin-top: 10px;
  }

  #mainNavbar .nvx-col-title {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8b86a8;
    margin: 0 0 4px;
  }

  #mainNavbar .nvx-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  #mainNavbar .nvx-col li a {
    display: block;
    padding: 9px 10px;
    font-size: 0.9rem;
    color: #475569;
    border-radius: 8px;
    text-decoration: none;
  }

  #mainNavbar .nvx-col li a:active,
  #mainNavbar .nvx-col li a:focus {
    background: #f1eeff;
    color: #5433d8;
  }

  #mainNavbar .nvx-promo {
    display: none;
  }

  #mainNavbar .nvx-mega-foot {
    display: block;
    padding: 8px 10px 4px;
    font-size: 0.8rem;
  }

  #mainNavbar .nvx-mega-foot span {
    display: none;
  }

  #mainNavbar .nvx-foot-link {
    display: inline-block;
    font-weight: 600;
    color: #6a49f2;
  }
}

/* =====================================================
   ZOHO SUITES PAGE - suite cards
===================================================== */
.zs-cards-section {
  background: #faf9ff;
  border-top: 1px solid #eeecf8;
  border-bottom: 1px solid #eeecf8;
}

.zs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px;
}

.zs-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e8e6f5;
  border-radius: 16px;
  padding: 22px;
  transition: transform 0.2s ease, box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.zs-card:hover {
  transform: translateY(-2px);
  border-color: #cfc4fb;
  box-shadow: 0 14px 32px rgba(28, 21, 67, 0.1);
}

.zs-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f2f1fa;
}

.zs-card-logo {
  display: flex;
  align-items: center;
  height: 34px;
  flex: 0 0 auto;
}

.zs-card-logo img {
  /* a definite height gives the SVG a definite width via its aspect ratio -
     with height:auto inside a zero-width flex parent it collapsed to 0x0 */
  height: 32px !important;
  width: auto !important;
  max-width: 190px;
  object-fit: contain;
  background: none !important;
  min-height: 0 !important;
}

.zs-badge {
  flex: 0 0 auto;
  padding: 4px 11px;
  border-radius: 999px;
  background: #f1eeff;
  color: #4a3aa8;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.zs-what {
  color: #4b4b63;
  line-height: 1.65;
  font-size: 0.92rem;
  margin: 0 0 10px;
}

.zs-repl {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #6b6b8a;
  margin: 0 0 16px;
}

.zs-repl strong {
  color: #1c1543;
}

/* included-app logo strip */
.zs-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.zs-app {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 4px 9px;
  box-sizing: content-box;
  background: #faf9ff;
  border: 1px solid #eeecf8;
  border-radius: 7px;
}

.zs-app img {
  height: 15px !important;
  width: auto !important;
  max-width: 92px;
  object-fit: contain;
  background: none !important;
  min-height: 0 !important;
}

.zs-points {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 7px;
}

.zs-points li {
  position: relative;
  padding-left: 010px;
  padding-left: 22px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #4b4b63;
}

.zs-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6a49f2;
}

.zs-card-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: auto;
}

.zs-card-cta .zp-btn {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 9px 16px;
  font-size: 0.85rem;
}

@media (max-width: 575.98px) {
  .zs-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .zs-card {
    padding: 17px 15px;
  }
  .zs-card-logo img {
    max-height: 28px;
    max-width: 150px;
  }
}

@media (max-width: 767.98px) {
  .zs-card,
  .zs-what,
  .zs-repl,
  .zs-points li,
  .zs-badge {
    text-align: left;
  }
}

/* ---- GET STARTED button ----
   #mainNavbar .nav-link (ID) outranks .navbar-expand-lg .navbar-nav .nav-link.dark_btn,
   which flattened the button into a plain rectangle. Restate it at ID strength. */
@media (min-width: 992px) {
  #mainNavbar .navbar-nav .nav-link.dark_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 26px !important;
    margin-left: 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6a49f2 0%, #5433d8 100%);
    color: #fff !important;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(106, 73, 242, 0.32);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  }

  #mainNavbar .navbar-nav .nav-link.dark_btn:hover,
  #mainNavbar .navbar-nav .nav-link.dark_btn:focus-visible {
    background: linear-gradient(135deg, #6a49f2 0%, #5433d8 100%);
    color: #fff !important;
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 12px 26px rgba(106, 73, 242, 0.42);
  }

  #mainNavbar .navbar-nav .nav-link.dark_btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(106, 73, 242, 0.34);
  }
}

/* mobile: full-width pill at the bottom of the panel */
@media (max-width: 991.98px) {
  #mainNavbar .navbar-collapse .nav-link.dark_btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: calc(100% - 4px) !important;
    margin: 12px 2px 4px !important;
    padding: 13px 20px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #6a49f2 0%, #5433d8 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    box-shadow: 0 8px 18px rgba(106, 73, 242, 0.3);
  }
}

/* ---------- privacy / legal pages ---------- */
.pp-wrap {
  max-width: 820px;
}

.pp-block + .pp-block {
  margin-top: 26px;
}

.pp-block h2 {
  font-size: 1.15rem;
  color: #1c1543;
  margin-bottom: 8px;
}

.pp-block p {
  color: #4b4b63;
  line-height: 1.8;
  margin: 0;
}

@media (max-width: 767.98px) {
  .pp-block h2,
  .pp-block p {
    text-align: left;
  }
}

/* =====================================================
   SERVICES PAGE hero
===================================================== */
.svc-hero {
  border-bottom: 1px solid #eeecf8;
}

.svc-eyebrow {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 13px;
  border-radius: 999px;
  background: #f1eeff;
  color: #4a3aa8;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.svc-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.svc-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 16px;
  background: #fff;
  border: 1px solid #e8e6f5;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(28, 21, 67, 0.05);
}

.svc-stat strong {
  font-size: 1.5rem;
  font-weight: 700;
  color: #6a49f2;
  line-height: 1.1;
}

.svc-stat span {
  font-size: 0.82rem;
  color: #5b5b74;
  line-height: 1.45;
}

.svc-cta {
  grid-column: 1 / -1;
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(160deg, #f4f1ff, #ece7ff);
  border: 1px solid #e0d9fb;
}

.svc-cta p {
  margin: 0 0 12px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #4b4b63;
}

@media (max-width: 991.98px) {
  .svc-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .svc-hero .zp-hero-left,
  .svc-hero h1,
  .svc-hero .zp-tag,
  .svc-stat,
  .svc-cta p {
    text-align: left;
  }
}

@media (max-width: 575.98px) {
  .svc-stat strong {
    font-size: 1.25rem;
  }
  .svc-stat {
    padding: 14px 12px;
  }
}

/* =====================================================
   "Get in Touch" feedback form - two fields per row
===================================================== */
.feedback-form .ff-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.feedback-form .ff-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.feedback-form .ff-field-full {
  margin-bottom: 16px;
}

.feedback-form .ff-field label {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #4b4b63;
  text-align: left;
}

.feedback-form .ff-field input,
.feedback-form .ff-field textarea {
  width: 100%;
  margin: 0;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 0.9rem;
  color: #1c1543;
  background: #fbfaff;
  border: 1px solid #e2ddf6;
  border-radius: 9px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    background 0.18s ease;
}

.feedback-form .ff-field textarea {
  min-height: 96px;
  resize: vertical;
}

.feedback-form .ff-field input:focus,
.feedback-form .ff-field textarea:focus {
  outline: none;
  background: #fff;
  border-color: #6a49f2;
  box-shadow: 0 0 0 3px rgba(106, 73, 242, 0.12);
}

.feedback-form button {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #6a49f2 0%, #5433d8 100%);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(106, 73, 242, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feedback-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(106, 73, 242, 0.4);
}

/* review card avatar */
.client-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: #f1eeff;
}

@media (max-width: 575.98px) {
  .feedback-form .ff-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .feedback-form .ff-field input,
  .feedback-form .ff-field textarea {
    padding: 9px 11px;
    font-size: 0.85rem;
  }
  .feedback-form .ff-field label {
    font-size: 0.74rem;
  }
}

/* contact page sales form: consistent two-per-row grid */
.contact-form .form-row,
form .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.contact-form .form-row-full,
form .form-row-full {
  grid-template-columns: minmax(0, 1fr);
}

.contact-form .form-row input,
.contact-form .form-row textarea,
form .form-row input,
form .form-row textarea {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.92rem;
  color: #1c1543;
  background: #fbfaff;
  border: 1px solid #e2ddf6;
  border-radius: 9px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    background 0.18s ease;
}

.contact-form .form-row textarea,
form .form-row textarea {
  min-height: 92px;
  resize: vertical;
}

.contact-form .form-row input:focus,
.contact-form .form-row textarea:focus,
form .form-row input:focus,
form .form-row textarea:focus {
  outline: none;
  background: #fff;
  border-color: #6a49f2;
  box-shadow: 0 0 0 3px rgba(106, 73, 242, 0.12);
}

/* hero CTAs sit left in a left-aligned hero column (they were centred) */
.zp-hero-left .zp-hero-btns {
  justify-content: flex-start;
}

@media (max-width: 767.98px) {
  .zp-hero-left .zp-hero-btns {
    justify-content: stretch;
  }
}

/* one typeface across the whole site - a couple of page stylesheets shipped
   their own stack, which made those pages read differently */
body,
.contact-hero,
.contact-options,
.form-section,
.cu-office-section,
.cu-faq-section,
.industries,
.container2,
.feedback-form,
.testimonial-card,
.zp-page,
.zs-page {
  font-family: "Poppins", sans-serif;
}

/* =====================================================
   OFFICE CARDS (about page)
===================================================== */
.offices {
  padding: clamp(48px, 5vw, 80px) 8%;
  background: #fff;
}

.off-head {
  max-width: 640px;
  margin: 0 auto 34px;
  text-align: center;
}

.off-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 13px;
  border-radius: 999px;
  background: #f1eeff;
  color: #4a3aa8;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.off-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: #32236f;
  margin-bottom: 10px;
}

.off-head p {
  color: #3e3f66;
  line-height: 1.7;
  margin: 0;
}

.office-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.office-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e8e6f5;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(28, 21, 67, 0.07);
  transition: transform 0.22s ease, box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.office-card:hover {
  transform: translateY(-4px);
  border-color: #cfc4fb;
  box-shadow: 0 18px 44px rgba(28, 21, 67, 0.13);
}

/* card header: title + role badge (the photo was removed) */
.office-card {
  position: relative;
}

.office-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #6a49f2, #8b6df5);
}

.office-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f2f1fa;
}

.office-flag-inline {
  font-size: 1.05rem;
  margin-right: 4px;
}

.office-tag {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 5px 12px;
  background: #6a49f2;
  color: #fff;
  white-space: nowrap;
}

.office-tag-alt {
  background: #f1eeff;
  color: #4a3aa8;
}

/* body */
.office-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 22px 22px;
}

.office-info h4 {
  display: flex;
  align-items: center;
  font-size: 1.15rem;
  font-weight: 700;
  color: #32236f;
  margin: 0;
}

.office-lines {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.office-lines li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #3e3f66;
}

.office-lines a {
  color: #3e3f66;
  text-decoration: none;
  transition: color 0.18s ease;
}

.office-lines a:hover {
  color: #6a49f2;
  text-decoration: underline;
}

.office-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #f1eeff;
  color: #6a49f2;
  font-size: 0.82rem;
}

.office-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.office-actions .zp-btn {
  flex: 1 1 auto;
  min-height: 42px;
  padding: 10px 18px;
  font-size: 0.86rem;
}

@media (max-width: 575.98px) {
  .offices {
    padding: 40px 5%;
  }
  .office-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .office-media {
    height: 170px;
  }
  .office-info {
    padding: 18px 16px;
  }
  .office-info h4,
  .office-lines li,
  .off-head h2,
  .off-head p {
    text-align: left;
  }
  .off-head {
    text-align: left;
  }
}

/* =====================================================
   CONTACT SUPPORT CARDS
===================================================== */
.contact-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 70px) 24px;
  background: #fff;
}

@media (max-width: 991.98px) {
  .contact-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 26px 24px;
  background: #fff;
  border: 1px solid #e8e6f5;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(28, 21, 67, 0.06);
  transition: transform 0.22s ease, box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.contact-card:hover {
  transform: translateY(-4px);
  border-color: #cfc4fb;
  box-shadow: 0 18px 42px rgba(28, 21, 67, 0.12);
}

.contact-card-featured {
  border-color: #cfc4fb;
  box-shadow: 0 16px 40px rgba(106, 73, 242, 0.16);
}

.cc-badge {
  position: absolute;
  top: -11px;
  left: 24px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6a49f2, #5433d8);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(106, 73, 242, 0.36);
}

.cc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: #f1eeff;
  color: #6a49f2;
  font-size: 1.2rem;
}

.cc-icon-green {
  background: #e7f8ee;
  color: #128a4b;
}

.cc-icon-blue {
  background: #e9f1ff;
  color: #2c62d6;
}

.contact-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #32236f;
  margin: 0 0 8px;
}

.contact-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #3e3f66;
  margin: 0 0 16px;
}

.cc-meta {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 8px;
  width: 100%;
}

.cc-meta li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.84rem;
  color: #5b5b74;
  line-height: 1.45;
}

.cc-meta i {
  flex: 0 0 auto;
  width: 16px;
  text-align: center;
  color: #8b86a8;
  font-size: 0.8rem;
}

.contact-options .btn {
  width: 100%;
  margin-top: auto;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #6a49f2 0%, #5433d8 100%);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(106, 73, 242, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-options .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(106, 73, 242, 0.4);
  color: #fff;
}

@media (max-width: 575.98px) {
  .contact-options {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 34px 5%;
  }
  .contact-card {
    padding: 22px 18px;
  }
  .contact-card h3,
  .contact-card p,
  .cc-meta li {
    text-align: left;
  }
}

/* =====================================================
   CONTACT "send us a brief" section
===================================================== */
.form-section {
  background: #fff;
  padding: clamp(44px, 5vw, 76px) 24px;
}

.form-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 34px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}

.form-container {
  background: #fff;
  border: 1px solid #e8e6f5;
  border-radius: 18px;
  padding: 30px 28px;
  box-shadow: 0 12px 34px rgba(28, 21, 67, 0.07);
}

.fs-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 13px;
  border-radius: 999px;
  background: #f1eeff;
  color: #4a3aa8;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.form-container h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  color: #32236f;
  margin: 0 0 10px;
}

.form-container > p {
  color: #3e3f66;
  line-height: 1.7;
  margin: 0 0 24px;
  max-width: 60ch;
}

/* right-hand panel */
.fs-panel {
  background: linear-gradient(165deg, #f6f4fe 0%, #efeaff 100%);
  border: 1px solid #e0d9fb;
  border-radius: 18px;
  padding: 26px 24px;
}

.fs-panel h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #32236f;
  margin: 0 0 18px;
}

.fs-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.fs-steps li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}

.fs-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #6a49f2;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}

.fs-steps strong {
  display: block;
  font-size: 0.93rem;
  color: #32236f;
  margin-bottom: 3px;
}

.fs-steps p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #4b4b63;
}

.fs-divider {
  height: 1px;
  background: rgba(106, 73, 242, 0.16);
  margin: 22px 0 18px;
}

.fs-trust {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.fs-trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: #3e3f66;
}

.fs-trust i {
  width: 16px;
  text-align: center;
  color: #6a49f2;
  font-size: 0.82rem;
}

.fs-alt {
  margin: 0;
  font-size: 0.85rem;
  color: #4b4b63;
}

.fs-alt a {
  font-weight: 700;
  color: #6a49f2;
  text-decoration: none;
}

.fs-alt a:hover {
  text-decoration: underline;
}

/* single office card sits centred at a readable width */
.office-grid-single {
  grid-template-columns: minmax(0, 620px);
  justify-content: center;
}

@media (max-width: 991.98px) {
  .form-wrapper {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

@media (max-width: 575.98px) {
  .form-section {
    padding: 36px 16px;
  }
  .form-container {
    padding: 22px 18px;
  }
  .fs-panel {
    padding: 22px 18px;
  }
  .form-container h2,
  .form-container > p,
  .fs-panel h3,
  .fs-steps p,
  .fs-trust li,
  .fs-alt {
    text-align: left;
  }
}

/* ---------- office cards: mobile alignment ---------- */
@media (max-width: 767.98px) {
  .off-head {
    text-align: center;
  }

  .off-head h2,
  .off-head p {
    text-align: center;
  }

  /* title and role badge stack instead of squashing into one line */
  .office-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .office-info h4,
  .office-lines li,
  .office-lines a,
  .office-lines span {
    text-align: left;
  }

  .office-lines li {
    align-items: flex-start;
  }

  /* buttons go full width and stack, so neither is a cramped half */
  .office-actions {
    flex-direction: column;
    gap: 8px;
  }

  .office-actions .zp-btn {
    width: 100%;
    flex: 1 1 auto;
  }
}

@media (max-width: 575.98px) {
  .office-grid,
  .office-grid-single {
    grid-template-columns: minmax(0, 1fr);
  }

  .office-ico {
    width: 26px;
    height: 26px;
    font-size: 0.76rem;
  }

  .office-lines li {
    font-size: 0.86rem;
    gap: 10px;
  }

  .office-info h4 {
    font-size: 1.05rem;
  }
}

/* three offices sit as a 3-up row on desktop, 2-up on tablet */
@media (min-width: 992px) {
  .office-grid:not(.office-grid-single) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .office-grid:not(.office-grid-single) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* the .offices section is centred (for its heading), but card content must
   stay left-aligned at every width or the addresses read as ragged blocks */
.office-card,
.office-info,
.office-info h4,
.office-title,
.office-lines,
.office-lines li,
.office-lines span,
.office-lines a {
  text-align: left;
}

.office-lines li {
  align-items: flex-start;
}

/* keep the badge on the title line where it fits, wrap cleanly where it does not */
.office-title h4 {
  flex: 1 1 auto;
  min-width: 0;
}

/* =====================================================
   BLOG ARTICLE - split header (details left, form right)
===================================================== */
.article-hero {
  background: linear-gradient(180deg, #f6f4fe 0%, #ffffff 100%);
  border-bottom: 1px solid #eeecf8;
  padding: clamp(28px, 4vw, 46px) 0 clamp(30px, 4vw, 48px);
  height: auto;
  min-height: 0;
}

.article-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 40px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.article-crumbs {
  font-size: 0.8rem;
  color: #6b6b8a;
  margin-bottom: 16px;
}

.article-crumbs a {
  color: #6a49f2;
  text-decoration: none;
}

.article-crumbs a:hover {
  text-decoration: underline;
}

.article-crumbs span {
  margin: 0 7px;
}

.article-crumbs span[aria-current] {
  margin: 0;
  color: #32236f;
  font-weight: 600;
}

.article-hero .article-category {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 13px;
  border-radius: 999px;
  background: #f1eeff;
  color: #4a3aa8;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-hero h1 {
  font-size: clamp(1.65rem, 3.4vw, 2.5rem);
  line-height: 1.22;
  font-weight: 700;
  color: #32236f;
  margin: 0 0 18px;
  text-shadow: none;
  max-width: 22ch;
}

.article-hero .article-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.86rem;
  color: #4b4b63;
  margin-bottom: 20px;
}

.article-hero .by-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.article-hero .by-author {
  font-weight: 600;
  color: #32236f;
}

.article-hero-points {
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid #e7e3f8;
  display: grid;
  gap: 8px;
}

.article-hero-points li {
  position: relative;
  padding-left: 26px;
  font-size: 0.88rem;
  color: #4b4b63;
}

.article-hero-points li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 11px;
  height: 6px;
  border-left: 2px solid #6a49f2;
  border-bottom: 2px solid #6a49f2;
  transform: rotate(-45deg);
}

/* form card */
.ah-form-card {
  background: #fff;
  border: 1px solid #e8e6f5;
  border-radius: 18px;
  padding: 24px 22px;
  box-shadow: 0 18px 44px rgba(28, 21, 67, 0.1);
}

.ah-form-card h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #32236f;
  margin: 0 0 6px;
}

.ah-form-card > p {
  font-size: 0.85rem;
  line-height: 1.55;
  color: #6b6b8a;
  margin: 0 0 18px;
}

.ah-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.ah-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.ah-field-full {
  margin-bottom: 14px;
}

.ah-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #4b4b63;
}

.ah-field input,
.ah-field textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.88rem;
  color: #1c1543;
  background: #fbfaff;
  border: 1px solid #e2ddf6;
  border-radius: 9px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    background 0.18s ease;
}

.ah-field textarea {
  resize: vertical;
  min-height: 62px;
}

.ah-field input:focus,
.ah-field textarea:focus {
  outline: none;
  background: #fff;
  border-color: #6a49f2;
  box-shadow: 0 0 0 3px rgba(106, 73, 242, 0.12);
}

.ah-note {
  margin: 11px 0 0;
  font-size: 0.75rem;
  color: #8b86a8;
  text-align: center;
}

/* lead figure now carries the old hero photo */
.article-figure-lead {
  margin: 0 0 26px;
}

.article-figure-lead img {
  width: 100%;
  border-radius: 14px;
  display: block;
}

@media (max-width: 991.98px) {
  .article-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  .ah-form-card {
    max-width: 560px;
  }
  .article-hero h1 {
    max-width: none;
  }
}

@media (max-width: 767.98px) {
  .article-hero-grid,
  .article-hero h1,
  .article-hero .article-byline,
  .article-hero-points li,
  .ah-form-card,
  .ah-form-card h2,
  .ah-form-card > p,
  .ah-field label {
    text-align: left;
  }
  .article-hero .article-byline {
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {
  .article-hero-grid {
    padding: 0 16px;
  }
  .ah-form-card {
    padding: 18px 15px;
  }
}

/* article header: four points in two columns + a meta strip, so the left
   column stands to roughly the same height as the form card beside it */
.article-hero-points {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
  padding-top: 20px;
}

.article-hero-points li {
  font-size: 0.87rem;
  line-height: 1.5;
}

.article-hero-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 18px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e7e3f8;
}

.article-hero-meta span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.88rem;
  color: #3e3f66;
}

.article-hero-meta strong {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b86a8;
}

@media (max-width: 1199.98px) {
  .article-hero-points {
    grid-template-columns: minmax(0, 1fr);
  }
  .article-hero-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .article-hero-meta {
    gap: 12px 14px;
  }
  .article-hero-meta span {
    font-size: 0.83rem;
  }
}

@media (max-width: 767.98px) {
  .article-hero-points li,
  .article-hero-meta span {
    text-align: left;
  }
}

/* nudge the nav links left: the whole list is right-aligned, so widening the
   gap before the partner badge slides the links across without moving the
   badge or the CTA off the right edge */
@media (min-width: 992px) {
  #mainNavbar .navbar-nav > .nav-item:has(.nav-zoho-badge) {
    margin-left: 28px;
  }

  /* fallback for browsers without :has() */
  #mainNavbar .navbar-nav .nav-zoho-badge {
    margin-left: 28px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  #mainNavbar .navbar-nav > .nav-item:has(.nav-zoho-badge),
  #mainNavbar .navbar-nav .nav-zoho-badge {
    margin-left: 12px;
  }
}

/* =====================================================
   MOBILE NAV - full-page drawer sliding in from the left
===================================================== */
@media (max-width: 991.98px) {
  /* The drawer is a descendant of the header, so raising the header lifts the
     drawer too. Instead, lift the brand and toggler above the drawer inside
     the same stacking context so the logo and the X stay usable. */
  #mainNavbar .navbar-brand,
  #mainNavbar .navbar-toggler {
    position: relative;
    z-index: 1085;
  }

  /* Bootstrap animates height on .collapsing and hides on :not(.show);
     both are overridden so the panel can slide horizontally instead */
  #mainNavbar .navbar-collapse,
  #mainNavbar .navbar-collapse.collapsing,
  #mainNavbar .navbar-collapse.show {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 !important;
    padding: 78px 18px 40px !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: translateX(-100%);
    transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    z-index: 1080 !important;
    visibility: hidden;
  }

  #mainNavbar .navbar-collapse.show,
  #mainNavbar .navbar-collapse.collapsing.show {
    transform: translateX(0);
    visibility: visible;
  }

  /* the list fills the drawer */
  #mainNavbar .navbar-collapse .navbar-nav {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #mainNavbar .navbar-collapse .nav-item {
    width: 100% !important;
    border-bottom: 1px solid #f1eefb;
  }

  #mainNavbar .navbar-collapse .nav-item:last-child,
  #mainNavbar .navbar-collapse .nav-item:has(.nav-zoho-badge) {
    border-bottom: 0;
  }

  #mainNavbar .navbar-collapse .nav-link {
    padding: 16px 6px !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #32236f !important;
  }

  #mainNavbar .navbar-collapse .nav-link:hover,
  #mainNavbar .navbar-collapse .nav-link:focus {
    background: transparent !important;
    color: #6a49f2 !important;
  }

  /* partner badge sits centred near the bottom of the drawer */
  #mainNavbar .navbar-collapse .nav-zoho-badge {
    display: flex !important;
    justify-content: center;
    margin: 18px 0 0 !important;
    height: auto !important;
  }

  #mainNavbar .navbar-collapse .nav-zoho-badge img {
    max-width: 190px;
    height: auto;
  }

  /* nested product/suite columns read as an indented accordion */
  #mainNavbar .navbar-collapse .nvx-col li a {
    padding: 11px 10px !important;
    font-size: 0.95rem !important;
  }

  /* dim the page behind - the drawer is opaque, this covers the header strip */
  body.menu-open {
    overflow: hidden !important;
  }
}

@media (max-width: 575.98px) {
  #mainNavbar .navbar-collapse,
  #mainNavbar .navbar-collapse.collapsing,
  #mainNavbar .navbar-collapse.show {
    padding: 74px 16px 36px !important;
  }
}

/* =====================================================
   WHATSAPP FLOATING BUTTON (every page)
===================================================== */
.wa-float {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1050;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 58px;
  padding: 0 17px;
  border-radius: 999px;
  background: #25d366;
  color: #fff !important;
  font-size: 1.6rem;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.42);
  transition: gap 0.28s ease, padding 0.28s ease, transform 0.22s ease,
    box-shadow 0.22s ease;
}

.wa-float:hover,
.wa-float:focus-visible {
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(37, 211, 102, 0.5);
  gap: 10px;
  padding-right: 22px;
}

.wa-float-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.92rem;
  font-weight: 600;
  transition: max-width 0.28s ease;
}

.wa-float:hover .wa-float-label,
.wa-float:focus-visible .wa-float-label {
  max-width: 160px;
}

@media (max-width: 767.98px) {
  .wa-float {
    left: 16px;
    bottom: 16px;
    height: 54px;
    padding: 0 15px;
    font-size: 1.5rem;
  }
  /* no room to expand on a phone - keep it a clean circle */
  .wa-float-label {
    display: none;
  }
}

@media print {
  .wa-float {
    display: none;
  }
}

/* =====================================================
   BLOG ARTICLE - readability + full responsiveness
===================================================== */
.article-canvas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 46px;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 56px) 24px;
  align-items: start;
}

.article-body {
  min-width: 0;
  /* a comfortable measure - long lines are the main readability killer */
  max-width: 72ch;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #3e3f66;
}

.article-body p {
  margin: 0 0 1.25em;
  overflow-wrap: break-word;
}

.article-body .article-lead {
  font-size: 1.16rem;
  line-height: 1.7;
  color: #32236f;
  font-weight: 500;
}

.article-body h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  line-height: 1.3;
  color: #32236f;
  margin: 2em 0 0.6em;
  scroll-margin-top: 110px;
}

.article-body h3 {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.35;
  color: #32236f;
  margin: 1.7em 0 0.5em;
  scroll-margin-top: 110px;
}

.article-body ul,
.article-body ol {
  margin: 0 0 1.4em;
  padding-left: 1.3em;
}

.article-body li {
  margin-bottom: 0.55em;
  line-height: 1.75;
}

.article-body a {
  color: #6a49f2;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: break-word;
}

.article-body strong {
  color: #32236f;
}

.article-body blockquote {
  margin: 1.6em 0;
  padding: 16px 20px;
  border-left: 3px solid #6a49f2;
  background: #faf9ff;
  border-radius: 0 12px 12px 0;
  color: #3e3f66;
}

.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* tables must never blow out the layout on a phone */
.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.article-body .table-wrap,
.article-body figure.table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.5em;
}

.article-body pre,
.article-body code {
  overflow-x: auto;
  max-width: 100%;
  word-break: break-word;
}

/* sidebar */
.article-sidebar {
  min-width: 0;
  position: sticky;
  top: 110px;
  display: grid;
  gap: 18px;
}

@media (max-width: 991.98px) {
  .article-canvas {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .article-body {
    max-width: none;
  }
  .article-sidebar {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

@media (max-width: 767.98px) {
  .article-canvas {
    padding: 26px 18px 34px;
  }
  .article-body {
    font-size: 1.02rem;
    line-height: 1.75;
    text-align: left;
  }
  .article-body h2,
  .article-body h3,
  .article-body p,
  .article-body li,
  .article-body .article-lead,
  .article-body blockquote {
    text-align: left;
  }
  .article-body ul,
  .article-body ol {
    padding-left: 1.15em;
  }
}

@media (max-width: 575.98px) {
  .article-canvas {
    padding: 22px 16px 30px;
  }
  .article-body {
    font-size: 1rem;
  }
  .article-body .article-lead {
    font-size: 1.08rem;
  }
  .article-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* wrapped tables scroll inside their own box instead of pushing the page wide */
.article-body .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.5em;
  border: 1px solid #eeecf8;
  border-radius: 12px;
}

.article-body .table-wrap table {
  margin: 0;
  min-width: 460px;
}

.article-body .table-wrap th,
.article-body .table-wrap td {
  padding: 11px 14px;
  border-bottom: 1px solid #f2f1fa;
  text-align: left;
  vertical-align: top;
}

.article-body .table-wrap thead th {
  background: #faf9ff;
  color: #32236f;
  font-weight: 600;
  white-space: nowrap;
}

.article-body .table-wrap tr:last-child td {
  border-bottom: 0;
}