.draw-signature-main {
  justify-content: center;
  flex-direction: column;
}

.signature-heading-text {
  text-align: center;
  margin-bottom: 40px;
}

.signature-parent {
  text-align: center;
  padding: 10px;
  border: 1px solid #bfbcbb;
  border-radius: 5px;
  height: 250px;
  /* margin: 0 20%; */
  width: auto;
  background: #fff;
}

.action-items-settings {
  justify-content: space-between;
  display: flex;
  width: 100%;
}

.action-items {
  text-align: right;
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  margin: 0 25%;
}

.color-picker-draw {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 10px;
}

.color-picker-draw div {
  border-radius: 50% !important;
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 7px;
}

.active-color {
  width: 36px !important;
  height: 36px !important;
  padding: 10px !important;
}

.action-items-btn {
  background-color: white !important;
  border: 1px solid #ababab !important;
  color: black !important;
  line-height: 1.715em;
  font-size: 14px;
  align-items: stretch;
  display: inline-flex;
  flex-direction: column;
  border-radius: 5px;
  font-weight: 500;
  height: auto;
  min-width: 200px;
  padding: 10px;
  pointer-events: none;
  /* border: 1px solid; */
}

@media (max-width: 975px) {
  .action-items-button {
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 20px;
    margin: 0px 25%;
  }
}

@media (max-width: 997px) {
  .action-items-settings {
    justify-content: space-between;
    display: flex;
    width: 100%;
    padding: 0 10%;
    display: flex;
    flex-direction: column;
  }
  .color-picker-draw {
    justify-content: center;
  }

  .action-items-settings div {
    padding: 10px 0px !important;
  }

  .active-color i {
    padding: 0px 10px !important;
  }
}

@media (max-width: 576px) {
  .signature-parent {
    height: auto;
  }
}


/* new page styles */


.esignature-hero-section {
    background-color: #f8f9fa;
    overflow: hidden;
    position: relative;
  }
  
  .esignature-hero-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .esignature-hero-image {
    width: 100% !important;
    position: relative !important;
    object-position: center;
  }
  
  .esignature-hero-title-container {
    background-color: var(--primary-text-white);
    padding: 14px;
  }
  
  .esignature-hero-content {
    width: 490px;
    bottom: 0;
    transform: translateY(-50%);
    right: 0;
    z-index: 2;
  }
  
  .esignature-hero-title {
    font-size: 48px;
    max-width: 600px;
    font-family: Outfit;
    color: var(--primary-text);
  }
  .esignature-hero-title::after {
    display: block !important;  /* Override any previous display: none */
  }
  
  /* Add underline effect for each line */
  .esignature-hero-title span {
    position: relative;
    display: inline-block;
  }
  
  .esignature-hero-title span::after {
    content: '';
    position: absolute;
    right: 14px;
    bottom: -5px;
    width: 100%;
    height: 1px;
    background-color: var(--primary-text-dark-disabled);
  }
  .esignature-hero-title span::before {
    content: '';
    position: absolute;
    right: 14px;
    top: 4px;
    width: 100%;
    height: 1px;
    background-color: var(--primary-text-dark-disabled);
  }
  
  .esignature-text-loop {
    font-family: Outfit;
    font-size: 128px;
    position: absolute;
    top: 50px;
    left: 0;
    width: fit-content;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 500;
    z-index: 1;
    color: var(--primary-text-white);
  
    &::after {
      content: "Notaries * Notaries * Notaries * Notaries * Notaries * Notaries";
      margin-left: 50px;
    }
  
    animation: slideText 20s linear infinite;
  }

  .esignature-text-loop {
    &::after {
      content: "eSign service * eSign service * eSign service * eSign service * eSign service * eSign service";
    }
  }

  
  .hp-h1 {
    font-weight: 400 !important;
    color: var(--primary-text);
  }
  
  .accordion-item {
    border-bottom: 1px solid var(--primary-text) !important;
    border-radius: 0px !important;
  }
  
  
  @keyframes slideText {
    0% {
      transform: translateX(0);
    }
  
    100% {
      transform: translateX(-50%);
    }
  }
  
  @media (max-width: 768px) {
    .hp-h1 {
      font-size: var(--h4-font-size) !important;
      font-weight: 400 !important;
    }
  
    .esignature-hero-title {
      font-size: 2.5rem;
    }
  
    .esignature-hero-image-container {
      height: 70vh;
    }
  }
  
  @media (max-width: 991px) {
    .esignature-hero-image-container {
      height: 800px;
      overflow: hidden;
    }
  
    .esignature-hero-image {
      width: 100% !important;
      height: 100% !important;
      top: 0 !important;
      left: 0 !important;
      position: absolute !important;
      object-fit: cover;
    }
  
    .esignature-hero-content {
      width: 90%;
      max-width: 490px;
      bottom: 0;
      transform: translateY(-50%);
      left: 0;
      right: 0;
    }
  
    .esignature-hero-title {
      font-size: 40px;
      text-align: left;
    }
  }
  
  @media (max-width: 576px) {
    .esignature-hero-image-container {
      height: 600px;
    }
  
    .esignature-hero-title {
      font-size: 32px;
    }
  
    .esignature-hero-content {
      width: 85%;
    }
  }


.signature-canvas-wrapper{
  width: 65%;
}

.flow-section .brand-btn{
  min-width: 13rem!important;
}

.flow-section h2{
  line-height: 1;
}

.cta-section{
  background: var(--primary-bg);
}

.cta-section h2{
  line-height: 1;
}

.checklist-wrapper{
  padding-left: 0!important;
}

.check-list-box {
  padding: 44px 30px!important;
}

#blue-color-picked
  ,#black-color-picked{
    width: 38px;
    height: 38px;
}

.color-picker #black-color-picked i,
.color-picker #blue-color-picked i{
  color: #fff;
  font-size: 20px!important;
  z-index: 999;
}

#download-signature-button{
  color: var(--primary-bg);
  border-color: var(--primary-bg);
}

#download-signature-button::before{
  background: var(--primary-bg);
}

#salesEmailidField{
  border: none;
  background: transparent;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-radius:0;
  margin-bottom: 20px;
  padding: 15px 0;
}

#salesEmailidField:focus,
#salesEmailidField:focus-visible{
  box-shadow: none;
  border: none;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-radius:0;
  outline: none;
}

.documennts-section .underline-btn{
  min-width: fit-content!important;
}

.security-section .tab-only{
  display: none;
}

.security-section .desktop-only{
  display: block;
}

@media(max-width:1399px){
  .flow-section .button-group{
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

@media(max-width:1200px){
  .cta-section{
    padding: 80px 0;
  }

  .check-list-box{
    border: 1px solid #000!important;
  }
  .check-list-box p{
    font-size: 16px!important;
  }
}


@media(max-width:1024px){
  .checklist-wrapper{
    padding: 20px!important;
    display: flex;
    flex-direction: row;
  }
  .check-list-box:nth-child(2),
  .check-list-box:nth-child(3){
    border-left: none!important;
  }
  .flew-img{
    height: 100%;
  }
}

@media(max-width:997px){
  .cta-section h2,
  .bannerWrapper h2{
    font-size: var(--t-h2-font-size);
  }
  .action-items-settings{
    flex-direction: row!important;
  }
  .esignature-text-loop{
      font-size: var(--h1-font-size);
      font-weight: 400;
  }
  .signature-canvas-wrapper{
    width: 100%;
  }
  .documents-title{
    padding-bottom: 0!important;
  }
  .documents-description{
    padding-top: 0!important;
  }
  .check-list-box{
    padding: 16px!important;
  }
  .check-list-box h3{
    font-size: 25px;
  }

  .documents-description p{
    font-size: 16px!important;
  }
  .check-list-title{
    gap: .5rem!important;
  }

  .security-section .tab-only{
    display: block!important;
  }
  .security-section .desktop-only{
    display: none;
  }
  .details-wrap,
  .image-wrapper{
    padding: 15px!important;
  }

  .security-section .hp-h5{
    font-size: 32px!important;
  }
  .security-section .hp-h5 br{
    display: none!important;
  }
  .details-wrap p{
    font-size: 16px!important;
  }
  .button-group{
    flex-direction: row!important;
  }
  .flow-details{
    padding: 15px!important;
  }
  .flow-details p{
    font-size: 16px!important;
  }
}

@media(max-width:768px){
  .bannerWrapper .action-items-settings{
    padding: 0!important;
  }
  .bannerWrapper .action-items-settings div{
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 576px) {

  .hp-h1{
    font-size: var(--h6-font-size)!important;
  }

  .bannerWrapper{
    padding-top: 20px!important;
  }
  .bannerWrapper h2{
    text-align: left!important;
  }

  .bannerWrapper h2,
  .esignature-text-loop{
    font-size: var(--h6-font-size)!important;
  }

  .bannerWrapper h3{
    font-size: 32px!important;
  }

  .bannerWrapper .action-items-settings{
    flex-direction: column!important;
    align-items: start!important;
    padding: 10px 20px!important;
  }
  
  #download-signature-button{
    margin: 0!important;
  }

  .color-picker-wrap{
    width: 100%;
    justify-content: space-between!important;
  }

  #clear-signature-button{
    margin: 0!important;
  }

  .documennts-section{
    padding-bottom: 40px;
  }
  .documents-description{
    padding-bottom: 0!important;
  }
  .documents-description .underline-btn{
    margin-top: 10px!important;
    margin-bottom: 10px!important;
  }
  .checklist-wrapper{
    flex-direction: column!important;
  }
  .checklist-wrapper .check-list-box{
    border: 1px solid #000!important;
  }
  .check-list-box:nth-child(2), .check-list-box:nth-child(3){
    border-top: none!important;
  }
  .cta-section{
    padding-top: 30px!important;
    padding-bottom: 0!important;
  }  
  .cta-section .row{
    flex-direction: column-reverse!important;
    gap: 20px!important;
  }
  .cta-section h2{
    font-size: var(--h6-font-size)!important;
  }

  .flow-section{
    padding-bottom: 40px!important;
  }

  .flow-section h2,
  .flow-details h4{
    font-size: var(--h6-font-size)!important;
    padding-bottom: 20px;
  }

  .security-section h2{
    font-size: 50px!important;
    padding-right: 20px!important;
    padding-bottom: 40px;
  }

  .flow-details .button-group{
    flex-direction: column!important;
  }

  .flow-details .button-group .brand-btn{
    width: 100%!important;
  }
}