/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    background-color: #ffffff;
    overflow-x: hidden;
}


br {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1rem;
}

p {
    margin-bottom: 1rem;
    color: #666;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, #EB1000 0%, #d10000 100%);
    border: 2px solid #800900;
    color: white;
    /* box-shadow: 0 4px 15px rgba(235, 16, 0, 0.4); */
    box-shadow: 0 4px 15px rgba(16, 16, 16, 0.2);
    user-select: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    /* box-shadow: 0 8px 25px rgba(235, 16, 0, 0.6); */
    box-shadow: 0 4px 15px rgba(16, 16, 16, 0.4);
}

.btn-secondary {
    background: #f8f9fa;
    color: #1a1a1a;
    border: 2px solid #e9ecef;
}

.btn-secondary:hover {
    background: #e9ecef;
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    color: #EB1000;
    border: 2px solid #EB1000;
}

.btn-outline:hover {
    background: #EB1000;
    color: white;
    transform: translateY(-1px);
}

.btn-large {
    padding: 16px 32px;
    font-size: 18px;
}

.btn-full {
    width: 100%;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(9px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 1rem 0;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.logo-text {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(132deg, #EB1000 0%, #690700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-link {
    font-weight: 500;
    color: #666;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #EB1000;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Hero Section */
.hero {
    padding: 120px 0 80px;
    /* background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%); */
    /* background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.5;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    /* line-height: 1.1; */
    margin-bottom: 0.5rem;
    color: #1a1a1a;
}

.gradient-text {
    background: linear-gradient(135deg, #EB1000 0%, #d10000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.5rem;
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.hero-actions p {
    display: inline-block;
    margin-top: 1rem;
    font-size: 13px;
    color: #999;
}


.hero-stats {
    display: flex;
    gap: 2rem;
}

.stat {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #EB1000;
}

.stat-label {
    font-size: 0.875rem;
    color: #666;
}

.hero-visual {
    position: relative;
}

.hero-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* pointer-events: none; */
}

.main-image-container {
    border-radius: 16px;
    border: 2px solid #EB1000;
    padding: 10px 10px 2px 10px;
    background: #E9ECEF;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.main-image {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 0;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    /* border-left: 3px dashed #EB1000;
    border-right: 3px dashed #754642;
    border-top: 3px dashed #EB1000;
    border-bottom: 3px dashed #754642; */
    
    pointer-events: none;
    user-select: none;
}

.floating-card {
    position: absolute;
    background: transparent;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    
}


/* .sparkle_div {
    padding: 0;
    margin: 0;
    display: block;
    position: absolute;
    top: -49px;
    right: -16px;
    z-index: 99999;
} */

.card-1 {
    top: 24px;
    left: 0px;
    background: none;
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
    display: block;
    transform: rotate(0deg);
}


.card-3 {
    bottom: 288px;
    right: 0px;
    background: none;
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
    display: block;
    transform: rotate(0deg);
}

.card-3 .sparkle {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 48px;
    height: 48px;
    margin: 0;
    /* float: left; */
  }


  .card-5 {
    bottom: -8%;
    left: 0px;
    background: none;
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
    display: block;
    transform: rotate(180deg);
}

.card-1 .sparkle, .card-5 .sparkle {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    margin: 0;
    /* float: left; */
  }
  
  .sparkle path:first-child {
    animation: sparkleLarge 3.75s linear infinite;
    -webkit-animation: sparkleLarge 3.75s linear infinite;
    fill: #c90 !important;
  }
  
  .sparkle path:last-child {
    animation: sparkle 3.75s linear infinite;
    -webkit-animation: sparkle 3.75s linear infinite;
    fill: #fc8719 !important;
  }

  .card-1 .sparkle path:first-child {
    animation: hero_float 1.5s linear infinite;
    -webkit-animation: hero_float 1.5s linear infinite;
    fill: #800900 !important;
  }

  .card-5 .sparkle path:first-child {
    animation: sparkleLarge 2.75s linear infinite;
    -webkit-animation: sparkleLarge 2.75s linear infinite;
    fill: #800900 !important;
  }

  .card-5 .sparkle path:last-child {
    animation: sparkle 2.75s linear infinite;
    -webkit-animation: sparkle 2.75s linear infinite;
    fill: #fc8719 !important;
  }


  .sparkle path {
    animation-play-state: running;
  }

  .sparkle path:hover {
    /* Stop all previous animations */
    animation: none !important;
    animation-delay: 0.1s;
    /* Start spinAndReturn animation on hover */
    animation: spinAndReturn 0.5s linear;
  }

  @keyframes spinAndReturn {
    0% {
      transform: rotate(45deg);
    }
    99% {
      transform: rotate(405deg);
    }
    100% {
      transform: rotate(45deg);
    }
  }
  
  /* also need keyframes and -moz-keyframes */
  @keyframes sparkle {
    8%, 41% {
        transform: translateX(-4px);
        -webkit-transform: translateX(-4px);
    }
    25%, 58% {
        transform: translateX(4px);
        -webkit-transform: translateX(4px);
    }
    75% {
        transform: translateX(-2px);
        -webkit-transform: translateX(-2px);
    }
    92% {
        transform: translateX(2px);
        -webkit-transform: translateX(2px);
    }
    0%, 100% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }
  }
  
  
  @keyframes sparkleLarge {
    8%, 41% {
        transform: translateX(4px);
        -webkit-transform: translateX(4px);
    }
    25%, 58% {
        transform: translateX(-4px);
        -webkit-transform: translateX(-4px);
    }
    75% {
        transform: translateX(2px);
        -webkit-transform: translateX(2px);
    }
    92% {
        transform: translateX(-2px);
        -webkit-transform: translateX(-2px);
    }
    0%, 100% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }
  }
  
  
  

.card-icon {
    font-size: 16px;
}

@keyframes hero_float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes hero_float2 {
    0%, 100% { transform: translateY(-10px); }
    50% { transform: translateY(0px); }
}

/* Features Section */
.features {
    padding: 80px 0;
    background: white;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1a1a1a;
}

.section-title-large {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1a1a1a;
}

.section-subtitle {
    font-size: 1.125rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

.section-subtitle-small {
    font-size: 14px;
    color: #EB1000;
    max-width: 600px;
    margin: -1rem auto 0 auto;
}

.how-it-works .section-subtitle-small {
    margin: 0 auto 0 auto;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.feature-card {
    padding: 2rem;
    border-radius: 16px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: #EB1000;
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    width: 32px;
    height: 32px;
    transition: transform 0.5s ease;
}

.feature-icon.integrations {
    background: url('../assets/integrations.png') no-repeat center center;
    background-size: 100%;
}

.feature-icon.branding {
    background: url('../assets/branding.png') no-repeat center center;
    background-size: 98%;
}

.feature-icon.legal {
    background: url('../assets/legal.png') no-repeat center center;
    background-size: 89%;
}

.feature-icon.url {
    background: url('../assets/url.png') no-repeat center center;
    background-size: 89%;
}

.feature-icon.email {
    background: url('../assets/email.png') no-repeat center center;
    background-size: 84%;
}

.feature-icon.secure {
    background: url('../assets/secure.png') no-repeat center center;
    background-size: 93%;
}

.feature-icon.signer_order {
    background: url('../assets/order.png') no-repeat center center;
    background-size: 86%;
}

.feature-icon.audit {
    background: url('../assets/audit.png') no-repeat center center;
    background-size: 80%;
}

.feature-icon.team {
    background: url('../assets/team.png') no-repeat center center;
    background-size: 82%;
}

.feature-icon.filter {
    background: url('../assets/filter.png') no-repeat center center;
    background-size: 80%;
}

.feature-icon.track {
    background: url('../assets/track.png') no-repeat center center;
    background-size: 79%;
}

.feature-icon.organize {
    background: url('../assets/organize.png') no-repeat center center;
    background-size: 80%;
}

.feature-icon.signers {
    background: url('../assets/signers.png') no-repeat center center;
    background-size: 98%;
}

.feature-icon.mobile {
    background: url('../assets/mobile.png') no-repeat center center;
    background-size: 99%;
}

.feature-icon.auto {
    background: url('../assets/auto.png') no-repeat center center;
    background-size: 90%;
}

.feature-icon.file {
    background: url('../assets/file.png') no-repeat center center;
    background-size: 89%;
}

.feature-icon.save {
    background: url('../assets/save.png') no-repeat center center;
    background-size: 89%;
}

.feature-icon.lang {
    background: url('../assets/lang.png') no-repeat center center;
    background-size: 89%;
}   

.feature-icon.seal {
    background: url('../assets/seal.png') no-repeat center center;
    background-size: 86%;
}

.feature-icon.logic {
    background: url('../assets/logic.png') no-repeat center center;
    background-size: 100%;
}

.feature-icon.otp {
    background: url('../assets/2fa.png') no-repeat center center;
    background-size: 100%;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 0.75rem #EB1000);
}

.feature-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #1a1a1a;
}

.feature-description {
    color: #666;
    line-height: 1.6;
}

/* How It Works Section */
.how-it-works {
    padding: 80px 0;
    background: #f8f9fa;
}

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

.step-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 0rem;
    padding: 1rem 0;
}

.step-row:last-child {
    margin-bottom: 0;
}

.step-row.reverse {
    direction: rtl;
}

.step-row.reverse .step-content,
.step-row.reverse .step-media {
    direction: ltr;
}

.step-content {
    text-align: left;
    padding: 2rem;
}

.step-number {
    width: 60px;
    height: 60px;
    background: transparent;
    color: #EB1000;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    position: relative;
}

.step-number::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Step 1 - Smooth wave */
.step-row:nth-child(1) .step-number::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 20'%3E%3Cpath d='M5,10 Q20,5 35,10 T65,10 Q75,15 75,10' stroke='%23EB1000' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Step 2 - Zigzag signature */
.step-row:nth-child(2) .step-number::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 20'%3E%3Cpath d='M10,10 Q25,3 40,10 T70,10 Q75,8 75,10' stroke='%23EB1000' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Step 3 - Curly signature */
.step-row:nth-child(3) .step-number::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 20'%3E%3Cpath d='M5,10 Q15,5 30,10 Q45,15 60,10 Q70,5 75,10' stroke='%23EB1000' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Step 4 - Wavy signature */
.step-row:nth-child(4) .step-number::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 20'%3E%3Cpath d='M10,10 Q20,3 35,10 Q50,17 65,10 Q75,7 75,10' stroke='%23EB1000' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.step-title {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #1a1a1a;
}

.step-description {
    color: #666;
    line-height: 1.7;
    font-size: 1.1rem;
}

.step-media {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.media-placeholder {
    width: 100%;
    max-width: 500px;
    height: 300px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #ccd0d4;
    position: relative;
    box-shadow: 0 8px 16px rgba(190, 190, 190, 0.1);
    /* overflow: hidden; */
}

.media-placeholder .inner-media-placeholder {
    background-image:
    linear-gradient(90deg, transparent 23px, #d1e3f8 24px, transparent 25px),
    linear-gradient(180deg, transparent 23px, #d1e3f8 24px, transparent 25px),
    repeating-linear-gradient(90deg, transparent, transparent 24px, #d1e3f8 24px, transparent 25px),
    repeating-linear-gradient(180deg, transparent, transparent 24px, #d1e3f8 24px, transparent 25px),
    linear-gradient(90deg, transparent 23px, #e9ecef 23px, #e9ecef 25px, transparent 25px),
    linear-gradient(180deg, transparent 23px, #f8f9fa 23px, #f8f9fa 25px, transparent 25px);
  background-size: 48px 48px, 48px 48px, 48px 48px, 48px 48px, 48px 48px, 48px 48px;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
}

.step-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.media-placeholder::before {
    content: "";
    font-size: 3rem;
    color: #adb5bd;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.media-placeholder img {
    position: relative;
    z-index: 1;
    object-fit: contain;
}

.step-media-upload .inner-media-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    margin: 0 auto;
}

.file_drop_area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 190px;
    margin: 0 auto 8px auto;
    padding: 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    -webkit-transition: padding 0.25s ease-in-out;
      -moz-transition:    padding 0.25s ease-in-out;
      -ms-transition:     padding 0.25s ease-in-out;
      -o-transition:      padding 0.25s ease-in-out;
      transition:         padding 0.25s ease-in-out;
      box-shadow: 0 4px 8px -3px #0001;
      cursor:grab;
  }
  
  .file_drop_area:hover {
    padding: 24px;
    /* background-color: #C9DBE2; */
    background-color: #E6EFF4;
    /* background-color: #f4fbff; */
  }

.inner_file_drop_area {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 6px;
    border: 2px dashed #ccc;
  }

  .file_drop_area:hover .inner_file_drop_area {
    border: 2px dashed #aaa;
  }

  
  .is-dragover .inner_file_drop_area {
    border-radius: 8px;
    border: 2px dashed #268BD2;
  }
  
 .inner_file_drop_area .file_upload {
    /* display: none; */
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
    opacity: 0;
    z-index: 999;
  }
  
  
 .inner_file_drop_area .file_upload:focus {
    /* outline: none; */
  }
  
 .inner_file_drop_area div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 90%;
    padding: 50px 8px 0 8px;
    margin: 0 auto;
    text-align: center;
    background: transparent url('../../../assets/upload.png');
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: top center;
    z-index: 99;
    cursor: pointer;
    pointer-events: none;
    font-size: 16px;
  }
  
 .inner_file_drop_area div .choose {
    display: inline-block;
    color: #268BD2;
    padding: 8px 2px;
    cursor: pointer;
  }
  
 .inner_file_drop_area:hover .choose {
    text-decoration: underline;
  }
  
 .inner_file_drop_area div .drag_here {
    display: inline-block;
  }




  .step-media-signers {
    position: relative;
  }

  .step-media-signers .inner-media-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    margin: 0 auto;
  }

  
.step-media-signers .handle {
    display: block;
    position: absolute;
    top: 54%;
    transform: translateY(-50%);
    left: 2px;
    width: 32px;
    height: 85%;
    background: transparent url('../assets/handle.png');
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: left center;
    cursor: move;
    opacity: 1;
  }

  .step-media-signers:hover > .handle {
    display: block;
    opacity: 1;
    filter: brightness(0.9);
  }

  .step-media-signers .handle:hover {
    opacity: 1;
    filter: brightness(0.7);
  }


.step-media-signers .block_container {
    position: relative !important;
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    display: block;
    padding-bottom: 0;
    padding-top: 20px;
    border-right: 2px solid transparent;
    -webkit-transition: width 0.5s ease-in-out, height 0.35s ease-in-out;
    -moz-transition:    width 0.5s ease-in-out, height 0.35s ease-in-out;
    -ms-transition:     width 0.5s ease-in-out, height 0.35s ease-in-out;
    -o-transition:      width 0.5s ease-in-out, height 0.35s ease-in-out;
    transition:         width 0.5s ease-in-out, height 0.35s ease-in-out;
    
  }

  .step-media-signers .block_container.active {
    width: 85%;
    -webkit-transition: width 0.15s ease-in-out;
    -moz-transition:    width 0.15s ease-in-out;
    -ms-transition:     width 0.15s ease-in-out;
    -o-transition:      width 0.15s ease-in-out;
    transition:         width 0.15s ease-in-out;
  }
  
  
  .step-media-signers .block_container .block {
    cursor: auto;
    position: relative;
    display: block;
    margin: 0 auto;
    padding: 24px;
    width: 100%;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 12px -3px #0002;
    -webkit-transition: width 0.5s ease-in-out, height 0.35s ease-in-out;
    -moz-transition:    width 0.5s ease-in-out, height 0.35s ease-in-out;
    -ms-transition:     width 0.5s ease-in-out, height 0.35s ease-in-out;
    -o-transition:      width 0.5s ease-in-out, height 0.35s ease-in-out;
    transition:         width 0.5s ease-in-out, height 0.35s ease-in-out;
}

.step-media-signers .active .block {
    width: 100%;
    border: 2px solid #268BD2;
    -webkit-transition: border 0.75s ease-in-out;
    -moz-transition:    border 0.75s ease-in-out;
    -ms-transition:     border 0.75s ease-in-out;
    -o-transition:      border 0.75s ease-in-out;
    transition:         width 0.15s ease-in-out, border 0.75s ease-in-out;
}
  

.step-media-signers .tip {
    font-size: 12px;
    margin: 0 0 1px 1px;
}
  
.step-media-signers .tip span {
    color: palevioletred;
}



.step-media-signers input[type=text], .step-media-signers input[type=email] {
    padding: 12px 14px;
    margin: 0 0 8px 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    width: 100%;
    color: #000 !important;
    text-align: left !important;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    -ms-user-select: text;
    user-select: text;
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    box-shadow: 0 3px 8px -3px #0001;
  }
  .step-media-signers input:hover {
    border-color: #aaa;
  }

  .step-media-signers input:focus {
    border-color: #268BD2;
  }
  
  
  /* Dropdown */
  
  .step-media-signers .block_container .block_type_container {
      position: absolute;
      top: -14px;
      right: 0;
      -webkit-transition: right 0.35s ease-in-out;
      -moz-transition:    right 0.35s ease-in-out;
      -ms-transition:     right 0.35s ease-in-out;
      -o-transition:      right 0.35s ease-in-out;
      transition:         right 0.35s ease-in-out;
  }
  
  .step-media-signers .active .block_type_container {
      right: 0%;
      padding-left: 32px;
  }
  
  .step-media-signers .block_container .block_type_container .block_type_dropdown {
      position: relative;
      right: 0;
      color: #000;
      font-weight: bold;
      margin: 0;
      padding: 0px 16px 0px 1px;
      box-shadow: none;
      border-radius: 8px;
      transition: all ease-in-out 0.3s;
      background: transparent url('../../assets/dropdown_dark.png');
      background-size: 8px;
      background-repeat: no-repeat;
      background-position: right center;
      cursor: pointer;
      /* min-width: 120px; */
      max-width: 232px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      opacity: 0.5;
  }
  
  .step-media-signers .active .block_type_container .block_type_dropdown {
      opacity: 1;
      color: #666;
      font-size: 12px;
  }


  .step-media-signers .active .head_type_signer {
    background: url("../../assets/signature.png");
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: 8px center;
}

    .active .head_type_signer {
        opacity: 1;
    }


  .step-media-signers .block .signer_div_actions {
    position: relative;
    text-align: right;
    margin-top: 1px;
    padding: 3px 8px 8px 8px;
    border-top: none;
    height: 24px;
}

.step-media-signers .block .signer_div_actions .remove_signer {
    position: absolute;
    top: 4px;
    right: 36px;
    background: url("../../assets/delete_icon.png");
    background-size: 33px;
    background-repeat: no-repeat;
    background-position: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
    opacity: 0.75;
}

.step-media-signers .block .signer_div_actions .remove_signer:hover {
    opacity: 1;
    filter: invert(49%) sepia(12%) saturate(1671%) hue-rotate(280deg) brightness(102%) contrast(77%);
}


.step-media-signers .block .signer_div_actions .more_options {
    position: absolute;
    top: 4px;
    right: 0px;
    background: url("../../assets/more.png");
    background-size: 21px;
    background-repeat: no-repeat;
    background-position: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
    opacity: 0.7;
}

.step-media-signers .block .signer_div_actions .more_options:hover {
    opacity: 1;
}




.client_info {
    position: relative;
    width: auto;
    display: inline-block;
    margin:0;
    vertical-align: middle;
    text-align: center;
    min-height: 24px;
  }
  
  .client_info .client_attached {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .client_info .client_activity {
    display: none;
    position: absolute;
    left: 40px;
    bottom: -16px;
    font-size: 10px;
    font-weight: normal;
    color: #888;
    padding: 0 0 0 19px;
    background: url("../../assets/activity.png");
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: left center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
    opacity: 0.9;
  }
  
  
  .client_info .client_name {
    position: relative;
    top: 0px;
    vertical-align: top;
    font-size: 13px;
    font-weight: bold;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
  }

  .client_info .client_attached .clients_list li .client_name {
    /* position: absolute;
    top: 2px !important; */
    display: block;
    font-size: 11px !important;
    color: #666;
    box-shadow: 0 4px 3px -3px #0003;
    border: 1px solid #ccc;
    background-color: #eee;
    border-radius: 4px;
  
    /* position: absolute;
    top: 50% !important;
    transform: translateY(-50%);
    left: 0; */
    /* vertical-align: middle; */
    text-align: center;
    margin: 2px 1px 0 1px;
    padding: 1px 4px;
    height: auto;
    min-width: 40px;
    max-width: 80px !important;
  }
  
  .client_info li.client_signed .client_name {
    color: #000 !important;
  }

  .client_info .client_name span {
    color: #999;
    font-size: 13px;
    margin-left: 8px;
    font-weight: normal;
  }
  
  
  .client_info .client_email {
    position: absolute;
    left: 40px;
    bottom: 0px;
    color: #444;
    font-size: 13px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
  }
  
  
  .client_info .client_avatar {
    display: inline-block;
    width: 48px;
    height: 48px;
    padding: 0;
    margin: 1px 0 1px 0;
    border-radius: 50%;
    border: 1px solid #666;
    object-fit: cover;
    color: #666;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    line-height: 32px;
    /* background: #f4f4f4; */
    background: #fff;
    opacity: 1;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .client_info li.client_signed .client_avatar {
    border: 1px solid darkGreen;
    /* animation: weaveUpDown 4s ease-in infinite; */
  }

  .client_info li.client_signed .client_name {
    border: 1px solid green !important;
    /* animation: weaveUpDown 4s ease-in infinite; */
  }
  
  .client_signed_badge {
    position: absolute;
    bottom: 10px;
    right: -8px;
    width: 18px;
    height: 18px;
    background: transparent url("../../assets/signature.png");
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    font-weight: bold;
    font-size: 8px;
    border-radius: 50%;
    /* border: 1px solid darkGreen; */
    padding: 0 4px;
    z-index: 9 !important;
    box-shadow: none;
    text-transform: uppercase;
    filter: invert(20%) sepia(100%) saturate(1500%) hue-rotate(120deg) brightness(60%) contrast(120%);
    animation: weaveUpDown 2s ease-in-out infinite;
    /* animation: shockwaveJump 1s ease-out infinite; */
    /* animation-iteration-count: 1; */
  }

  @keyframes weaveUpDown {
    0% {
      transform: rotate(0deg) translateY(0);
    }
    50% {
      transform: rotate(0deg) translateY(-3px);
    }
    100% {
      transform: rotate(0deg) translateY(0);
    }
  }
  
  
  
  
  .signers_bkg {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
    /* Small, disconnected dot markers, not a grid or crosses */
    /* background-image: radial-gradient(circle, #d8dbe1 1.5px, transparent 2.5px);
    background-size: 32px 32px;
    background-position: 0 0; */
  }

  /* Progress Client Container */
  .progress-client-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    height: 100%;
  }

  /* Signer Progress Component */
  .signer-progress {
    display: flex;
    align-items: center;
    z-index: 10;
  }

  .signer-progress-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    z-index: 10;
  }

  .progress-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .milestone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .milestone-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #ccc;
    background-color: #ddd;
    position: relative;
    z-index: 2;
  }

  .milestone-dot.completed {
    background-color: #4CAF50;
    border-color: #4CAF50;
  }

  .milestone-dot.mailed.completed {
    /* background-color: #2196F3;
    border-color: #2196F3; */
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background-color: transparent;
    position: relative;
    z-index: 2;
    background: url("../../assets/send.png");
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(-28deg);
    filter: invert(49%) sepia(99%) saturate(749%) hue-rotate(176deg) brightness(80%) contrast(101%);
  }

  .milestone-dot.viewed.completed {
    background-color: #FF9800;
    border-color: #FF9800;
  }

  .milestone-dot.signed.completed {
    background-color: #4CAF50;
    border-color: #4CAF50;
    animation: shockwave 1s .5s ease-out infinite;
}

@keyframes shockwave {
  0% {
    transform: scale(1);
    box-shadow: 0 0 2px rgba(0,0,0,0.15), inset 0 0 1px rgba(0,0,0,0.15);
  }
  95% {
    box-shadow: 0 0 50px rgba(0,0,0,0), inset 0 0 30px rgba(0,0,0,0);
  }
  100% {
    transform: scale(1.2);

  }
}

  .milestone-label {
    font-size: 12px;
    color: #000;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
  }

  .progress-segment {
    width: 32px;
    height: 2px;
    background-color: #4CAF50;
    position: relative;
  }

  .progress-segment-awaiting {
    background-color: #ccc;
  }

  /* Adjust client_info positioning to accommodate progress on both sides */
  .signers_bkg .client_info {
    /* No longer needed - now part of flexbox container */
  }
  
  .client_info .client_avatar_eyes {
    overflow: hidden;
    border: 1px solid #aaa;
    /* box-shadow: 0 3px 5px -3px #F26522; */
    box-shadow: 0 3px 5px -3px #0008;
    /* opacity: 0.9; */
  }
  
  .client_info:not(.no_client):hover .client_avatar {
    animation: shockwaveJump 2s ease-out infinite;
    animation-iteration-count: 1;
    z-index: 999;
  }
  
  .client_info .client_avatar_eyes .eye_container {
    margin-top: 8px;
    width: 100%;
    /* background: #F26522;
    border: 1px solid red;
    border-left: 1px solid darkRed;
    border-right: 1px solid darkRed;
    border-bottom: 1px solid darkRed;
    border-radius: 4px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: 0 4px 8px -3px #0009; */
  }
  
  .client_avatar_eyes .eye {
    position: relative;
    display: inline-block;
    /* border: 1px solid #444; */
    border: 1px solid #999;
    /* border-bottom: 2px solid darkRed; */
    border-bottom: 1px solid palevioletred;
    border-radius: 50%;
    height: 18px;
    width: 18px;
    background: #eee;
    /* box-shadow: 0 3px 4px -3px #000a; */
    /* transition: transform 0.1s ease-in;
    -webkit-transition: transform 0.1s ease-in; */
  }
  .client_avatar_eyes .eye:after { /*pupil*/
    position: absolute;
    bottom: 5px;
    right: 4px;
    width: 4px;
    height: 4px;
    background: #000;
    border-radius: 50%;
    content: " ";
  }
  
  .client_info .client_attached {
    text-align: center;
    /* border-left: 2px dotted #ddd; */
    /* padding-left: 4px; */
  }
  
  .client_info .client_attached .client_attached_inner {
    margin: 0;
    padding: 0;
    width: auto;
    max-width: calc(100% - 16px);
    height: auto;
    min-height: auto;
    display: inline-block;
    background: transparent;
    /* background: red; */
    /* border-top: 2px dotted #ccc;
    border-bottom: 2px dotted #ccc;
    border-right: 2px dotted #ccc; */
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    /* border-radius: 8px; */
    /* box-shadow: 0 3px 8px -3px #0004; */
    /* box-shadow: 4px 3px 8px -3px #0002; */
    -webkit-transition: padding 0.25s ease-in-out;
      -moz-transition:    padding 0.25s ease-in-out;
      -ms-transition:     padding 0.25s ease-in-out;
      -o-transition:      padding 0.25s ease-in-out;
      transition:         padding 0.25s ease-in-out;
  }
  
  .client_info .client_attached .client_attached_inner:hover {
    /* padding: 4px 6px; */
    /* border-color: #bbb; */
    /* box-shadow: 4px 3px 8px -3px #0003; */
  }
  
  .client_info .client_attached .clients_list {
    list-style: none;
    border: none;
    padding: 0;
    margin: 0 auto;
    width: auto;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid #ccc; */
    border-radius: 6px;
    /* background: #FDFDF8; */
    /* -webkit-transition: padding 0.25s ease-in-out;
      -moz-transition:    padding 0.25s ease-in-out;
      -ms-transition:     padding 0.25s ease-in-out;
      -o-transition:      padding 0.25s ease-in-out;
      transition:         padding 0.25s ease-in-out; */
  }
  
  .client_info .client_attached .clients_list li {
    position: relative;
    /* left: -8px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(98%/4);
    min-width: 48px;
    min-height: 42px;
    /* max-width: 80px; */
    /* height: 40px; */
    /* border: 1px solid #ccc;
    border-radius: 8px; */
    padding: 0;
    margin: 0 5px;
    text-align: center;
    cursor: pointer;
    /* background: #FDFDF8; */
    /* box-shadow: 0 3px 4px -3px #0004; */
  }
  
  .client_info .client_attached .clients_list li:first-child {
    left: auto;
  }
  
  .client_info .client_attached .clients_list li:hover .client_avatar {
    border: 1px solid #268BD2 !important;
    /* border-top: 1px solid #268BD2 !important; */
  }
  
  .client_info .client_attached .clients_list li:hover .client_avatar_eyes {
    box-shadow: 0 3px 5px -3px #0009;
  }
  
  .client_info .client_attached .clients_list li:hover .client_name {
    border: 1px solid #268BD2 !important;
    box-shadow: 0 4px 4px -3px #0004;
  }
  
  .client_info .client_attached .clients_list li .live {
    display: none;
    position: absolute;
    top: -16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  
  .client_info .client_attached .clients_list li.more_clients {
    position: relative;
    top: 1px;
    width: auto;
    min-width: 32px;
    width: calc((98%/4) - 16px);
    height: 40px;
    margin-left: 8px;
    border: none !important;
    border-radius: 50%;
    box-shadow: none;
    background: transparent;
    text-align: center;
  }
  
  
  .client_info .client_attached .clients_list li.more_clients p {
    font-size: 16px;
    font-weight: bold;
    color: #268BD2;
    vertical-align: middle;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 50% !important;
    transform: translateY(-50%);
    width: 100%;
    opacity: 0.8;
  }
  
  .client_info .client_attached .clients_list li.more_clients:hover p {
    opacity: 1;
  }
  
  .client_info .client_attached .clients_list li .client_avatar {
    /* top: -6px; */
    /* margin-top: -24px !important; */
    /* margin-bottom: -4px !important; */
    /* border-top: 1px solid #aaa !important; */
    opacity: 1 !important;
  }
  
 
  
  .client_info .client_attached .clients_list li .client_email {
    display: none;
    width: calc(100% - 48px) !important;
  }
  
  




  .document-page {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: url('../assets/document-page.png') no-repeat center center;
    background-size: 100% 100%;
    /* background-image:
    linear-gradient(90deg, transparent 23px, #d1e3f8 24px, transparent 25px),
    linear-gradient(180deg, transparent 23px, #d1e3f8 24px, transparent 25px),
    repeating-linear-gradient(90deg, transparent, transparent 24px, #d1e3f8 24px, transparent 25px),
    repeating-linear-gradient(180deg, transparent, transparent 24px, #d1e3f8 24px, transparent 25px),
    linear-gradient(90deg, transparent 23px, #86cbfc 23px, #86cbfc 25px, transparent 25px),
    linear-gradient(180deg, transparent 23px, #67c0ff 23px, #67c0ff 25px, transparent 25px);
  background-size: 48px 48px, 48px 48px, 48px 48px, 48px 48px, 48px 48px, 48px 48px;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; */
  }


  .page {
    display: none;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: calc(90% - 0px);
    background: transparent;
    backdrop-filter: blur(3px);
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
    border: 2px solid #666;
    border-bottom: none;
    margin: 0 auto;
    padding: 16px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  }

  .field-element {
    position: absolute;
    background: rgba(0, 120, 255, 0.1);
    /* border: 2px solid #666C70; */
    border: 2px solid transparent;
    outline: 1px solid #444;
    border-radius: 1px;
    cursor: move;
    pointer-events: all;
    /* z-index: 9; */
    touch-action: none; /* Ensures better touch support */
    cursor: move; /* Shows move cursor everywhere */
    transition: opacity 0.15s;
    /* Mobile touch improvements */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
    -webkit-touch-callout: none; /* Disable callout on long press */
    -webkit-user-select: none; /* Disable text selection */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.field-element::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
      45deg,
      rgba(240, 232, 228, 0.15) 0px,
      rgba(240, 232, 228, 0.15) 8px,
      transparent 8px,
      transparent 16px
    );
}


.field-element .field-element-inner {
    width: 100%;
    height: 100%;
    filter: invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(40%) contrast(100%);
}


.field-element .resize-handle {
    display: none;
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 50%;
    /* Mobile touch improvements */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



.page_break {
    margin: 100px 0 40px 0;
    padding: 0px;
}

.border_div {
    position: relative;
    margin: 0 !important;
    background-color: #E9ECEF;
    border: none !important;
  }
  
  .border_div svg {
    position: absolute;
    z-index: 100;
    display: block;
    height: 48px;
    bottom: -45px;
    width: auto;
    left: 50%;
    margin: 0 !important;
    transform: translateX(-50%);
  }
  
  .software_div_border_div {
    border-top: 2px solid #E9ECEF;
  }

  .software_div_border_div svg {
    left: 20%;
    transform: translateX(-20%);
    height: 48px;
    bottom: -47px;
  }

  .software_div_border_div_bottom svg {
    bottom: -45px;
  }


  .second_div_border_div_bottom {
    transform: rotate(180deg);
    /* bottom: 50px;
      margin-top: 50px;*/
  }
  
  
  
  .second_div {
    background-color: #E9ECEF;
    margin: 0 auto 0 auto;
    padding: 100px 56px !important;
    min-height: 100px;
    width: 100% !important;
    border-radius: 0;
    border: none;
    border-width: 0;
  }

  
.heading_h1 {
    font-weight: bolder;
    color: #000;
    line-height: 38px;
    margin: 16px 0;
    font-size: 58px;
    line-height: 78px;
    text-align: center;
  }

  .second_div .heading_h1 {
    /* color: #000; */
    /* text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); */
  }
  
  .second_div .heading_h1 span {
    color: #EB1000;
  }
  
  .second_div h4 {
    color: #EB1000;
    text-align: center;
    /* text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); */
  }
  
  .second_div h4 b {
  }



  
  

  @media (max-width: 1180px) {
    .second_div {
        padding: 100px 16px !important;
      }

      .second_div .heading_h1 {
        font-size: 48px;
        line-height: 68px;
        font-weight: bolder;
      }
  }



  @media (max-width: 950px) {

    .second_div .heading_h1 {
      font-size: 58px;
      line-height: 78px;
      font-weight: bolder;
    }

    .second_div .heading_h1:first-child {
      margin-bottom: 40px;
    }
}

/* Larger touch targets for mobile devices */
@media (max-width: 768px) {
    .field-element .resize-handle {
        /* width: 16px;
        height: 16px;
        border-width: 3px; */
    }
    
    /* .field-element .resize-handle.top-left { 
        top: -8px; 
        left: -8px; 
    }
    .field-element .resize-handle.top-right { 
        top: -8px; 
        right: -8px; 
    }
    .field-element .resize-handle.bottom-left { 
        bottom: -8px; 
        left: -8px; 
    }
    .field-element .resize-handle.bottom-right { 
        bottom: -8px; 
        right: -8px; 
    } */
}

.field-element.active {
    display: block;
    border: 2px solid #000;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    z-index: 9;
}


.field-element-vertical-guideline,
.field-element-horizontal-guideline {
    position: absolute;
    background-color: #268BD2;
    pointer-events: none;
    z-index: 999999;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.field-element-vertical-guideline {
    width: 1px;
    height: 100%;
    /* box-shadow: 0 0 4px rgba(38, 139, 210, 0.5); */
}

.field-element-horizontal-guideline {
    width: 100%;
    height: 1px;
    /* box-shadow: 0 0 4px rgba(38, 139, 210, 0.5); */
}

.field-element-vertical-guideline.active,
.field-element-horizontal-guideline.active {
    opacity: 1;
}

.field-element.aligned {
    transition: box-shadow 0.2s ease-in-out;
    box-shadow: 0 0 9px rgba(38, 139, 210, 0.6);
}




.field-element.active .resize-handle {
    display: block;
}

/* Position the handles */
.field-element .resize-handle.top-left { 
    top: -5px; 
    left: -5px; 
    cursor: nw-resize; 
}
.field-element .resize-handle.top-right { 
    top: -5px; 
    right: -5px; 
    cursor: ne-resize; 
}
.field-element .resize-handle.bottom-left { 
    bottom: -5px; 
    left: -5px; 
    cursor: sw-resize; 
}
.field-element .resize-handle.bottom-right { 
    bottom: -5px; 
    right: -5px; 
    cursor: se-resize; 
}

.field-element .field-element-inner p {
    display: flex;
    align-items: center;
    /* color: #5e6267; */
    color: #000;
    font-weight: bold;
    padding: 1px 1px;
    margin: 0;
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    text-shadow: 0 0 1px #eee;
    overflow: hidden;
    font-family: "Arial", "Helvetica", sans-serif;
    font-size: 12px;
    font-weight: 400;
    vertical-align: middle;
    user-select: none;
    filter: invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(40%) contrast(100%);
}

.field-element.type_signature .field-element-inner p {
  max-width: calc(100% - 8px);
  max-height: calc(100% - 8px);
}

.field-element.weight_normal .field-element-inner p {
    font-weight: 300;
}

.field-element.carlito .field-element-inner p {
  font-family: "Carlito", sans-serif;
  font-style: normal;
}

.field-element.type_signature .field-element-inner p {
    /* background: rgba(255, 120, 0, 0.1);
    border-color: #ff7800; */
    color: #5e6267;
    padding: 0 0 0 calc(0.5% + 28px);
    margin: 4px;
    background-image: url("../../assets/signature.png");
    background-size: 26px;
    background-repeat: no-repeat;
    background-position: 1% center;
  }

  .field-element.type_signature .field-element-inner::after {
    /* content: "Signature"; */
  }

  .field-element.type_initials .field-element-inner p {
    max-width: calc(100% - 8px);
    max-height: calc(100% - 8px);
  }

  .field-element.type_initials .field-element-inner p {
    color: #5e6267;
    padding: 0 0 0 calc(0.5% + 28px);
    margin: 4px;
    background-image: url("../../assets/initials.png");
    background-size: 26px;
    background-repeat: no-repeat;
    background-position: 1% center;
  }


  .field-element.type_checkbox .field-element-inner p{
    background-image: url("../../assets/checkbox_checked.png");
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    margin: 0;
  }
  
  .field-element.out_of_bounds {
    background-color: rgba(219, 112, 147, 0.5) !important;
    border-color: red !important;
  }












/* Responsive Design */
@media (max-width: 768px) {
    .step-row {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .step-row.reverse {
        direction: ltr;
    }
    
    .step-content {
        text-align: center;
        order: 1;
    }
    
    .step-media {
        order: 2;
    }
    
    .step-number {
        margin: 0 auto 2rem;
    }
    
    .step-number::after {
        bottom: -20px;
    }
    
    .media-placeholder {
        height: 250px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }


}

/* Pricing Section */
.pricing {
    padding: 80px 0;
    background: white;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.pricing-card {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    transition: all 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.pricing-card.featured {
    border-color: #EB1000;
    transform: scale(1.05);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #EB1000 0%, #d10000 100%);
    color: white;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

.pricing-header {
    text-align: center;
    margin-bottom: 2rem;
}

.plan-name {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #1a1a1a;
}

.price {
    margin-bottom: 0.5rem;
}

.currency {
    font-size: 1.5rem;
    font-weight: 500;
    color: #666;
}

.amount {
    font-size: 3rem;
    font-weight: 700;
    color: #1a1a1a;
}

.period {
    font-size: 1rem;
    color: #666;
}

.plan-description {
    color: #666;
    font-size: 0.875rem;
}

.plan-features {
    list-style: none;
    margin-bottom: 2rem;
}

.plan-features li {
    padding: 0.5rem 0;
    color: #666;
    font-size: 0.875rem;
}







.faq {
    position: relative;
    display: block;
    margin: 130px auto 0 auto;
    padding: 0;
    width: 70%;
    text-align: left;
  }
  
  .faq h2 {
    color: #000;
    font-weight: bolder;
    margin: 8px 0;
    font-size: 38px;
    line-height: 50px;
  }
  
  .collapsible {
    position: relative;
    background-color: transparent;
    cursor: pointer;
    padding: 16px 24px 16px 8px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 19px;
    color: #000;
  }
  
  .collapsible span {
    position: absolute;
    top: calc(50% - 6px);
    right: 8px;
    width: 12px;
    height: 12px;
    background: url("../../assets/dropdown_dark.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: rotate(0deg);
  }
  
  .collapsible.active span {
    transform: rotate(180deg);
  }
  
  .content {
    padding: 0 2px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: transparent;
      font-size: 15px;
    color: #444;
  }
  
  .content ul {
    list-style: disc;
    padding-left: 32px;
    margin: 0;
  }
  

  


/* CTA Section */
.cta {
    background: #fff;
    padding: 80px 0;
    /* background: linear-gradient(135deg, #EB1000 0%, #d10000 100%); */
    color: #000;
    text-align: center;
    position: relative;
}

.cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: rgba(0, 0, 0, 0.1); */
    z-index: 1;
}

.cta-content {
    position: relative;
    z-index: 2;
}

.cta-title {
    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: #000;
    /* text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); */
}

.cta-title b {
    font-weight: 700;
    color: #EB1000;
}

.cta-subtitle {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    color: #000;
    font-weight: 500;
    /* text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); */
}

.cta-note {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: #888;
    font-weight: 400;
    /* text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); */
}

/* Footer */
.footer {
    position: relative;
    background: #1a1a1a;
    color: white;
    padding: 0 0 20px 0;
}



.footer_border_div {
    position: relative;
    top: 0px;
    height: 48px;
    margin: 0 0 32px 0;
  }
  
  .footer_border_div svg {
    position: absolute;
    top: -1px;
    z-index: 100;
    display: block;
    height: 48px;
    width: auto;
  }
  

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-social {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.footer-social div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-social div svg {
    color: #999;
    transition: color 0.2s ease;
    width: 20px;
    height: 18px;
}

.footer-social div svg:hover {
    color: #EB1000;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(29deg) brightness(170%) contrast(103%);
}

.footer-description {
    color: #999;
    line-height: 1.6;
}

.footer-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: white;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: #999;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #EB1000;
}

.footer-bottom {
    border-top: 1px solid #333;
    padding-top: 2rem;
    text-align: center;
    color: #999;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer .footer-bottom .location {
    display: inline-block;
    /* float: right; */
    /* background: red; */
    margin: 0;
    user-select: none;
  }
  
  .footer .footer-bottom .location * {
    display: inline-block;
    color: #888;
    font-size: 12px;
  }

  .footer .footer-bottom .location p {
    position: relative;
    top: -3px;
  }
  
  .footer .footer-bottom .flag {
    width: 14px;
    height: 14px;
    margin-top: 0;
    margin-left: 12px;
    border-radius: 50%;
    object-position: 50% 50%;
    object-fit: cover;
    outline: none;
    user-select: none;
  }

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-stats {
        justify-content: center;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .steps-grid {
        grid-template-columns: 1fr;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    .pricing-card.featured {
        transform: none;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-logo {
        justify-content: center;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .floating-card {
        display: none;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .btn-large {
        padding: 14px 28px;
        font-size: 16px;
    }

    .faq {
        margin: 16px auto 0 auto;
        width: 88%;
      }

      .page_break {
        margin: 32px 0 100px 0;
    }

  .second_div {
    padding: 72px 24px !important;
  }

  
.heading_h1 {
    margin: 16px 0;
  }

  .second_div .heading_h1 {
    font-size: 42px;
    line-height: 52px;
  }

      .collapsible {
        padding: 16px 40px 16px 0;
      }
}

/* Smooth scrolling and animations */
@media (prefers-reduced-motion: no-preference) {
    .feature-card,
    .pricing-card,
    .step {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 0.6s ease forwards;
    }
    
    .feature-card:nth-child(1) { animation-delay: 0.1s; }
    .feature-card:nth-child(2) { animation-delay: 0.2s; }
    .feature-card:nth-child(3) { animation-delay: 0.3s; }
    .feature-card:nth-child(4) { animation-delay: 0.4s; }
    .feature-card:nth-child(5) { animation-delay: 0.5s; }
    .feature-card:nth-child(6) { animation-delay: 0.6s; }
    
    .step:nth-child(1) { animation-delay: 0.1s; }
    .step:nth-child(2) { animation-delay: 0.2s; }
    .step:nth-child(3) { animation-delay: 0.3s; }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Legally Binding Section */
.legally-binding {
    padding: 80px 0;
    background: #f8f9fa;
}

.legal-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.legal-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.legal-visual {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 300px;
}

.document-stack {
    position: relative;
    width: 100%;
    height: 100%;
}

.document {
    position: absolute;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.doc-1 {
    /* position: relative; */
    width: 90%;
    height: 70%;
    top: -10%;
    right: 5%;
    z-index: 3;
    /* Keep gradient and img */
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 1px solid #000;
    animation: doc-1-animation 1s ease-in-out infinite alternate;
}

@keyframes doc-1-animation {
    from {
        transform: rotate(-8deg);
    }
    to {
        transform: rotate(0deg);
    }
}


.doc-1 img {
    width: 100%;
    height: auto;
    object-fit: contain;
    opacity: 1;
    pointer-events: none;
    user-select: none;
}


.doc-2 .flags_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url("../assets/flags_2x.png") repeat center center;
    background-size: cover;
    opacity: 0.9;
    z-index: -1;
}

.doc-2 {
    width: 90%;
    height: 70%;
    top: 0px;
    right: 15%;
    z-index: 2;
    transform: rotate(-4deg);
    background: linear-gradient(135deg, #f5f9ff 0%, #e2eaf0 100%);
    border: 1px solid #000;
}

.doc-3 {
    width: 90%;
    height: 70%;
    top: 24px;
    right: 20%;
    z-index: 1;
    transform: rotate(-6deg);
    background-color: #EB1000;
    border: 1px solid #000;
}

.legal-badges {
    position: absolute;
    top: -80px;
    right: 0px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    z-index: 4;
}

.badge {
    background: rgba(235, 16, 0, 0.1);
    color: #EB1000;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(235, 16, 0, 0.2);
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.legal-content {
    padding: 2rem 0;
}

.legal-content .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #1a1a1a;
}

.legal-description {
    font-size: 1.125rem;
    color: #666;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.legal-subtitle {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #1a1a1a;
}

.legal-regulations {
    list-style: none;
    margin-bottom: 2rem;
}

.legal-regulations li {
    padding: 0.5rem 0;
    color: #666;
    font-size: 1rem;
    line-height: 1.5;
    border-bottom: 1px solid #f0f0f0;
}

.legal-regulations li:last-child {
    border-bottom: none;
}

.legal-regulations strong {
    color: #1a1a1a;
    font-weight: 600;
}

.legal-note {
    background: transparent;
    /* padding: 1.5rem; */
    /* border-radius: 12px; */
    /* border-left: 4px solid #EB1000; */
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}

.legal-note p {
    margin: 0;
    color: #777;
    font-size: 11px;
    line-height: 1.5;
}

.legal-note strong {
    color: #222;
}

/* Responsive Design for Legal Section */
@media (max-width: 768px) {
    .legal-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .legal-visual {
        max-width: 300px;
        height: 250px;
    }
    
    .legal-content .section-title {
        font-size: 2rem;
    }
    
    .legal-description {
        font-size: 1rem;
    }
}



@media (max-width: 450px) {
    .border_div svg {
        height: 38px;
        bottom: -35px;
      }
    .software_div_border_div svg {
        bottom: -37px;
      }
}

/* Customer Support Section */
.customer-support {
    padding: 60px 0 0 0;
    background: #E9ECEF;
    border-top: 3px solid #d0d3d7;
}

.support-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 60px;
}

.support-content {
    text-align: left;
}

.support-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    display: inline-block;
    width: 60px;
    height: 60px;
    background: #EB1000;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.support-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1a1a1a;
}

.support-description {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.support-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.support-img {
    width: 50%;
    max-width: 400px;
    height: auto;
    border-radius: 12px;
    animation: float 3s ease-in-out infinite;
    transition: all 1s ease;
}

@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* Responsive Design for Customer Support */
@media (max-width: 768px) {
    .support-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .support-content {
        text-align: center;
        order: 1;
    }
    
    .support-image {
        order: 2;
    }
    
    .support-title {
        font-size: 1.75rem;
    }
    
    .support-description {
        font-size: 1rem;
    }
    
    .support-img {
        max-width: 300px;
    }
}