/* main css having common styles and fonts used in all html files*/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');


@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

body {
  font-family: 'DM Sans', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Oswald', sans-serif !important;
}

.h1 {
  font-size: 50px !important;
}

.h2 {
  font-size: 42px !important;
}


:root {
  --gradient-pink-purple: linear-gradient(to right, #e90a8a, #67308f);
  --light-gray: #F4F4F6;
  --blue: #1A53BC;
  --gradient-purple-blue: linear-gradient(120deg, #89004E 0%, #001760 100%);
  --dark-blue: #071E84;
  --border-pink: #6C3AEF;
  --gradient-blue-darkblue: linear-gradient(180deg, #1A53BC 0%, #071E84 100%);
  --light-white: #FDFEFF;
  --lighter-gray: #F8F9FA;
  --blue-to-dark-blue: linear-gradient(to right, #1A53BC, #071E84);
  --purple: #A844E1;
  /* added */
}
.bg-f4f4f6{
  background: #f4f4f6;
}
.bg-f0f0f0{
  background: #F0F0F0;
}
.bg-efefef{
  background: #efefef;
}
.bg-gradient-pink-purple {
  background: var(--gradient-pink-purple) !important;
}

.bg-light-gray {
  background: var(--light-gray);
}

.bg-gradient-purple-blue {
  background: var(--gradient-purple-blue);
}

.bg-blue {
  background: var(--blue);
}

.bg-dark-blue {
  background: var(--dark-blue);
}

.border-pink {
  border: 1px solid var(--border-pink);
}

.bg-gradient-blue-darkblue {
  background: var(--gradient-blue-darkblue);
}

.bg-light-white {
  background: var(--light-white);
}

.text-blue {
  color: var(--blue) !important;
}

.border-light-gray {
  border: 1px solid var(--lighter-gray);
}

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

.text-purple {
  color: var(--purple) !important;
}

.border-purple {
  border: 1px solid var(--purple);
}

/* Font size utility classes */
.fs-6rem {
  font-size: 6rem;
}

.fs-5rem {
  font-size: 5rem;
}

.fs-45px {
  font-size: 45px;
}

.fs-10px {
  font-size: 10px !important;
}

.fs-12px {
  font-size: 12px !important;
}

.fs-14px {
  font-size: 14px !important;
}

.fs-18px {
  font-size: 18px !important;
}

.fs-22px {
  font-size: 22px !important;
}

.fs-24px {
  font-size: 24px !important;
}

.fs-26px {
  font-size: 26px !important;
}

.fs-28px {
  font-size: 28px !important;
}

.fs-38px {
  font-size: 38px !important;
}

/* Border radius utility classes */
.br-5px {
  border-radius: 5px !important;
}

.br-15px {
  border-radius: 15px !important;
}

.br-6px {
  border-radius: 6px !important;
}

/* Spinner styling */
.h-20px {
  height: 20px !important;
}

.w-20px {
  width: 20px !important;
}

.bg-form-bg {
  background: var(--light-white);
}

.border-form-bg {
  border: 1px solid var(--lighter-gray);
}

.bg-blue-to-dark-blue {
  background: var(--blue-to-dark-blue);
}

.border-gray {
  border: 1px solid #DDDDDD;
}


/* // faq */
.faq-bg-design::before,
.faq-bg-design::after {
  content: "";
  position: absolute;
  background-color: #6C3AEF;
  --width: 25%;
}

.faq-bg-design::before {
  width: var(--width);
  top: 6rem;
  height: 0.07rem;
}

.faq-bg-design::after {
  width: 1.5rem;
  height: 1.5rem;
  top: 6rem;
  left: var(--width);
  border-radius: 100%;
  transform: translate(-50%, -50%);
}

.pt-70px{
  padding-top: 70px !important;
}

.pt-50px{
  padding-top: 50px !important;
}

/*  */
.faq-accordion {
  background-color: #f7f7f7 !important;
  box-shadow: 0px 2px 5px #00000029 !important;
  padding-left: 7rem !important;
}

.faqs .accordion-item {
  border: none !important;
  margin-bottom: 1.5rem;
}

.faqs .accordion-button:not(.collapsed) {
  color: #000;
}

.faqs .accordion-button::before {
  position: absolute;
  content: "";
  transition: all 200ms linear;
  width: 0;
  height: 0;
  border-left: 2px solid #6C3AEF;
  border-bottom: 2px solid #6C3AEF;
  top: 50%;
  left: 3.6rem;
}

.faqs .accordion-button:not(.collapsed)::before {
  width: 4rem;
  height: calc(50% + 2rem);
}

.faqs .accordion-button::after {
  left: 3rem !important;
  position: absolute;
  background-image: url(/images/plus.svg);
}

.faqs .accordion-button:not(.collapsed)::after {
  background-image: url(/images/minus.svg);
}

.faqs .accordion-collapse {
  padding-left: 9rem;
}

/*  */


.policy-banner {
  background: url(/images/policybg.png) no-repeat;
  min-height: 300px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}



/* box container and button code  and reuse them in all files which has same structure */
.final-featuredSection {
  background: url(/images/clm/Wave-img.svg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  padding: 90px 0px;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .final-featuredSection {
    background-image: none;
  }
}

.hero-section {
  background: linear-gradient(to right, #1A53BC, #071E84);
  color: white;
  border-radius: 20px;
  padding: 40px 20px;
  text-align: center;
  max-width: 700px;
  margin: 50px auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.cta-button {
  display: inline-block;
  background: white;
  color: black !important;
  padding: 12px 24px;
  border-radius: 30px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cta-button-blue {
  display: inline-block;
  background: #1A53BC;
  color: #FFFFFF !important;
  padding: 12px 24px;
  border-radius: 30px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cta-button span {
  margin-left: 15px;
}

/* ===== Added from comparison snippet: variables and utility classes ===== */

/* Additional CSS variables (non-conflicting) */
:root {
  --red-purple: #E40078;
  --Amethyst: #6C3AEF;
  --indigo: #171B38;
  --blue-light: #7C2DA8;
}

/* Base element tweaks */
ul {
  font-size: 16px;
}

/* Color utilities and backgrounds */
.bg-dark-blue {
  color: var(--dark-blue);
}

.f-red-purple {
  color: var(--red-purple);
}

.blue-light {
  color: var(--blue-light);
}

.bg-indigo {
  background: var(--indigo);
}

.pinkBorder {
  border-color: var(--border-pink);
}

.f-white {
  color: #fff;
}

.f-black {
  color: #000;
}

.f-bold {
  font-weight: bold;
}

.f-500 {
  font-weight: 500;
}

.f-600 {
  font-weight: 600;
}

.f-amethyst {
  color: var(--Amethyst);
}

.f-blue {
  color: var(--blue);
}

.f-22 {
  font-size: 22px;
}

.f-26 {
  font-size: 26px;
}

.f-36 {
  font-size: 36px !important;
}

.f-15 {
  font-size: 15px;
}

.f-42 {
  font-size: 42px;
}

.f-55 {
  font-size: 55px;
}

.lh-normal {
  line-height: normal !important;
}

.bg-gradient-n-one {
  background: transparent linear-gradient(115deg, var(--Amethyst) 0%, var(--border-pink) 100%) 0% 0% no-repeat padding-box;
}

.bg-gradient-n-two {
  background: transparent linear-gradient(115deg, #1A53BC 0%, #071F84 100%) 0% 0% no-repeat padding-box;
}

.bg-gradient-n-three {
  background: transparent linear-gradient(134deg, #e40078 0%, #6c3aef 49%, #1A53BC 100%) 0% 0% no-repeat padding-box;
}

.bg-gradient-n-four {
  background: transparent linear-gradient(112deg, #E90A8A 0%, #67308F 100%) 0% 0% no-repeat padding-box;
}
.bg-gradient-n-five {
  background: transparent linear-gradient(115deg, #1A53BC 0%, #071F84 100%) 0% 0% no-repeat padding-box !important;
}
.bg-gray {
  background: #171B38;
}

.estamp-review-section {
  background: transparent url('../images/estamp-review/estamp-review-section.svg') no-repeat center center;
  background-size: cover;
}


.signdesk-vs-zohosign {
  background: transparent url('../images/signdesk-zoho/signdesk-vs-zohosign.png') no-repeat center center;
  background-size: cover;
}

.form-builder-bg {
  background: transparent url('../images/form-builder/form-builder-bg.png') no-repeat center center;
  background-size: cover;
}

.border-bottom-white {
  border-bottom: 1px solid #ccc;
}

/* Buttons */
.bttn {
  padding: 10px 30px;
  border-radius: 30px;
  border: none;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
}

.bttn-blue {
  background: var(--blue);
}

.bttn-white {
  background: #fff;
}

.bttn-5aa6ff {
  background: #5aa6ff;
}

.gradient-l-r {
  background: linear-gradient(135deg, #1A53BC 0%, #071F84 100%);
}

.gradient-l-r-1 {
  background: linear-gradient(179deg, #1A53BC 0%, #071F84 100%)
}

/* FAQ block (standalone from existing .faqs) */
.faq-section {
  background: #f7f7f8;
  padding: 60px 0;
}

.faq-title {
  text-align: center;
  font-weight: 700;
  margin-bottom: 40px;
}

.faq-item {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 16px rgba(44, 83, 100, 0.08);
  margin-bottom: 24px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 28px 32px;
  font-size: 24px;
  font-weight: 600;
  color: #222;
  transition: background 0.2s;
}

.faq-item.active .faq-question {
  color: #222;
}

.faq-item.active .faq-icon {
  color: var(--blue);
}

.faq-icon {
  font-size: 2rem;
  color: #E80077;
  font-weight: bold;
  transition: color 0.2s;
}

.faq-answer {
  display: none;
  padding: 0 32px 28px 32px;
  color: #000;
  font-size: 18px;
  line-height: 1.7;
}

.faq-item.active .faq-answer {
  display: block;
}

.faq-item.active .faq-question {
  color: #b3006e;
}

/* Responsive typography and spacing from comparison */
@media (min-width: 768px) {
  h1 {
    font-size: 55px;

  }

  h2 {
    font-size: 42px;

  }

  h3 {
    font-size: 24px;
  }

  h4 {
    font-size: 20px;
  }

  p {
    font-size: 18px;

  }

  a {
    font-size: 20px;

  }

  .py-6 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  .py-7 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }

  .py-8 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }

  .py-9 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
  }

  .py-10 {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
  }

  td {
    font-size: 18px;
  }

    .pt-80px{
    padding-top: 80px;
  }
}

@media (max-width: 768px) {
  td {
    font-size: 16px;
  }

  h1 {
    font-size: 40px;

  }

  h2 {
    font-size: 26px;

  }

  h3 {
    font-size: 18px;

  }

  h4 {
    font-size: 18px;

  }

  p {
    font-size: 16px;

  }

  a {
    font-size: 18px;

  }
}

.bg-gradient-five {
  background: transparent linear-gradient(127deg, #E33ECF 0%, #A844E1 100%) 0% 0% no-repeat padding-box;
}

.bg-blue-1 {
  background: #A844E1;
}

.bg-blue-2 {
  background: #1A53BC;
}

.br-20px {
  border-radius: 20px;
}

.bg-gradient-six {
  background: transparent linear-gradient(91deg, #101010 0%, #383838 100%) 0% 0% no-repeat padding-box;
}

.circle-bg-color {
  background: transparent linear-gradient(14deg, #E33ECF 0%, var(---a844e1) 100%) 0% 0% no-repeat padding-box;
}

.bg-gradient-blue {
  background: transparent linear-gradient(180deg, #1A53BC 0%, #071E84 100%) 0% 0% no-repeat padding-box;
}

.seafoamGreen {
  background: #414443;
}

/* Color helper from snippet */
.bg-87a4d9 {
  background: #87a4d9;
}

.__slide_animation_container :is(._slide_right, ._slide_left),
.__slide_animation_container ._slide_right,
.__slide_animation_container ._slide_left {
  position: relative !important;
}

.__slide_animation_container .--slide {
  animation-delay: var(--delay);
  animation-name: translateZero;
  animation-duration: 300ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

@keyframes translateZero {
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

.successInner1,
.successInner {
  background: transparent linear-gradient(117deg, #1A53BC 0%, #071F84 100%) 0% 0% no-repeat padding-box !important;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 20px;
  opacity: 1;
  padding: 60px 72px;
}

.rounded-5 {
  border-radius: 2rem !important;
}

@media(max-width:768px) {

  .successInner1,
  .successInner {
    padding: 50px 30px;
  }
}

.fw-semibold {
  font-weight: 600;
}

@media (max-width: 576px) {
  .h-sm-200px {
    height: 200px !important;
  }
}

.pt-0 {
  padding-top: 0px;
}

.f-71A6FF {
  color: #71A6FF;
}

.f-50 {
  font-size: 50px;
}

.min-height-310px {
  min-height: 310px;
}

.f-italic {
  font-style: italic;
}

.f-28 {
  font-size: 28px;
}

.f-35 {
  font-size: 35px;
}

.f-25 {
  font-size: 25px;
}

.f-20 {
  font-size: 20px;
}
.f-23 {
  font-size: 23px;
}
.f-19 {
  font-size: 19px;
}

.bg-6b3aed {
  background: #6b3aed;
}

.max-540 {
  max-width: 540px;
}

.bg-bcdbff {
  background-color: #bcdbff;
}

.text-dark-cyan-placeholder {
  background-color: rgba(144, 144, 144, 0.12) !important;
}

.faq-item.active .faq-question {
  color: #000;
}

.bg-grey-light {
  background-color: #F6F5F5;
}

.bg-background1 {
  background-image: url(../images/media/BgImage.png) !important;
}

.bg-background5 {
  background: url("../images/media/second-section.png") no-repeat;
  background-size: 100% 100%;
}
.f-40px {
  font-size: 40px;
}
.f-30px {
  font-size: 30px;
}
.f-9px{
  font-size: 9px;
}
.no-border{
  border: 0px !important;
}
.no-padding{
  padding: 0px !important;
}
.pt-90{
  padding-top: 90px !important;
}
.max-820{
  width: 100%;
  max-width: 820px;
}