html {
  scroll-behavior: smooth;  /* Ensure smooth scrolling */
}

/* Apply box-sizing to prevent overflow issues */
* {
    box-sizing: border-box;
}

/* Header Styling */
body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#f0f4f8;overflow-x:hidden;} /* Prevent horizontal overflow */

.logo-container{display:flex;align-items:center;}
.logo{width:40px;height:auto;}
.logo-link {
    display: flex; /* Keep the image and text aligned as flex items */
    align-items: center; /* Vertically align the items */
    text-decoration: none; /* Remove underline on the anchor */
    color: inherit; /* Inherit the color from the container */
    cursor: pointer;
}

.title-text{font-size:26px;color:#f0f4f8;font-weight:bold;margin-left:12px;}

/* Navbar */
.nav-bar{background-color:#0066cc;display:flex;justify-content:space-between;align-items:center;padding:10px 20px;position:sticky;top:0;width:100%;z-index:1000;box-shadow:none;border-bottom:0px solid #e0e0e0;}
.nav-links{display:flex;gap:25px;flex-wrap:wrap;}
.nav-links a {
  font-weight: 700;
  text-decoration: none;
  color: #333333;
  font-size: 20px;
  padding: 10px;
  transition: color 0.3s ease;
  cursor: pointer;
}

.nav-links a:hover {
  background: linear-gradient(90deg, #00cc88, #f0f4f8); /* Green to light blue gradient */
  -webkit-background-clip: text; /* Clip the background to the text */
  background-clip: text;
  -webkit-text-fill-color: transparent; /* Fill the text with transparent */
  text-fill-color: transparent;
}

.action-buttons{display:flex;gap:10px;}
.action-buttons a {position: relative; font-size: 18px; font-weight: 700; color:#333333;top: 3px; padding:15px 20px; text-decoration:none; cursor:pointer;}

#login-button-container {
  display: flex;
  justify-content: center; /* Centers the button horizontally */
  width: 100%;
}

#login-button {
  background-color: transparent; /* Transparent background */
  border: 3px solid #0066cc; /* Blue border */
  color: #0066cc; /* Blue text */
  padding: 10px 20px; /* Padding inside the button */
  border-radius: 25px; /* Rounded corners */
  cursor: pointer; /* Change cursor to pointer on hover */
  font-size: 16px; /* Button font size */
  display: inline-flex; /* Ensures the button wraps tightly around text */
  align-items: center; /* Vertically center the text */
  justify-content: center; /* Horizontally center the text */
  text-align: center; /* Center text in case of multi-line */
  width: auto; /* Ensures button width is just enough to wrap text */
  box-sizing: border-box; /* Ensures padding and border are included in the width calculation */
}

#resetpw-button-container {
  display: flex;
  justify-content: center; /* Centers the button horizontally */
  width: 100%;
}

#resetpw-button {
  background-color: transparent; /* Transparent background */
  border: 3px solid #0066cc; /* Blue border */
  color: #0066cc; /* Blue text */
  padding: 10px 20px; /* Padding inside the button */
  border-radius: 25px; /* Rounded corners */
  cursor: pointer; /* Change cursor to pointer on hover */
  font-size: 16px; /* Button font size */
  display: inline-flex; /* Ensures the button wraps tightly around text */
  align-items: center; /* Vertically center the text */
  justify-content: center; /* Horizontally center the text */
  text-align: center; /* Center text in case of multi-line */
  width: auto; /* Ensures button width is just enough to wrap text */
  box-sizing: border-box; /* Ensures padding and border are included in the width calculation */
}

#see-action-button
{
  background: linear-gradient(#f0f4f8, #f0f4f8) padding-box, /* Match section background */
              linear-gradient(90deg, #0066cc, #00cc88) border-box; /* Gradient border */
  color: #00cc88; /* Green text */
  padding: 15px; /* Padding to make the button fatter */
  font-size: 16px;
  font-weight: bold;
  border: 3px solid transparent; /* Transparent border to show gradient */
  border-radius: 25px; /* Rounded corners */
  cursor: pointer;
  display: inline-block; /* Wrap the button around the text */
  white-space: nowrap;
}

#see-action-button:hover {
  background: linear-gradient(90deg, #0066cc, #00cc88) padding-box, /* Same gradient for the entire background */
              linear-gradient(90deg, #0066cc, #00cc88) border-box; /* Gradient border on hover */
  color: #333; /* White text on hover */
}

#tryit-button
 {
  background: linear-gradient(#0066cc, #0066cc) padding-box, /* Match section background */
              linear-gradient(90deg, #00cc88, #f0f4f8) border-box; /* Gradient border */
  color: #00cc88; /* Green text */
  padding: 15px; /* Padding to make the button fatter */
  font-size: 16px;
  font-weight: bold;
  border: 3px solid transparent; /* Transparent border to show gradient */
  border-radius: 25px; /* Rounded corners */
  cursor: pointer;
  display: inline-block; /* Wrap the button around the text */
  white-space: nowrap;
}

#tryit-button:hover {
  background: linear-gradient(90deg, #00cc88, #f0f4f8) padding-box, /* Same gradient for the entire background */
              linear-gradient(90deg, #00cc88, #f0f4f8) border-box; /* Gradient border on hover */
  color: #333; /* White text on hover */
  padding-left: 15px; /* Keep consistent padding on hover */
  padding-right: 15px;
}

.hamburger-menu{display:none;flex-direction:column;gap:5px;cursor:pointer;}
.hamburger-menu .bar{width:25px;height:3px;background-color:#003049;transition:all 0.3s ease;}
.hamburger-menu.active .bar:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.hamburger-menu.active .bar:nth-child(2){opacity:0;}
.hamburger-menu.active .bar:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}

.hamburger-links{display:none;flex-direction:column;gap:20px;background-color:#fdf4e3;position:absolute;top:60px;right:0;width:200px;padding:20px;box-shadow:0px 4px 12px rgba(0,0,0,0.2);z-index:999;}
.hamburger-links a{color:#003049;text-decoration:none;font-size:18px;}
.hamburger-links a:hover{color:#005080;}

.sticky-header{position:sticky;top:0;z-index:1000;}

/* Footer */
.footer{background-color:#0066cc;color:#f0f4f8;padding:20px;margin-top:80px;text-align:center;}
.footer p{margin:0;font-size:14px;}

/* Parallax Section */
.parallax-section{background-image:url('./images/ai_background.webp');background-attachment:fixed;background-size:cover;background-position:center;padding:60px 20px;color:#f7f8fa;text-align:center;}
/* Animated Wavy Delineator */
.wavy-divider{position:relative;height:100px;background-color:#fdf4e3;clip-path:polygon(0 0,100% 0,100% 70%,0% 100%);}
.wavy-divider::after{content:"Exclusive Access Now";position:absolute;top:-30px;left:50%;transform:translateX(-50%);color:#ffcc00;font-size:24px;font-weight:bold;animation:fadeIn 2s ease-in-out;}
/* Callout Circles with Phrases */
.callout-circle{width:120px;height:120px;background-color:#ffcc00;color:#003049;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:bold;position:relative;transition:transform 0.3s ease-in-out;}
.callout-circle:hover{transform:scale(1.1);}
/* Parallax Section Text */
.parallax-text{font-size:36px;color:#f7f8fa;text-shadow:2px 2px 4px rgba(0,0,0,0.4);margin-bottom:30px;animation:fadeIn 2s ease-in-out;}
/* Keyframe Animations */
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes shake {0% {transform: translateX(0);} 25% {transform: translateX(-5px);} 50% {transform: translateX(5px);} 75% {transform: translateX(-5px);} 100% {transform: translateX(0);}}

    /* Hero Section */
    .hero-section {display: flex; justify-content: space-between; align-items: center; height: calc(100vh - 108px); background-color: #f0f4f8; position: relative; overflow: hidden;}
/* Styling for the Heading with Subtle Accent */
.hero-heading {
  position: relative;
  font-size: 42px;
  font-weight: bold;
  color: #333;
  text-align: center;
  display: inline-block;
  text-transform: uppercase;
  padding: 10px 20px;
}
    .hero-content p { font-family: Arial, sans-serif; font-size: 18px; color: #333; line-height: 1.6; margin-bottom: 30px; text-align: left; }

    /* Hero content with animation, padding, and background gradient */
    .hero-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0px 50px; /* Padding to the right */
      flex: 1; /* Flexible layout */
      max-width: 50%; /* Max width is 50% of the section */
      opacity: 0; /* Initially invisible */
      transform: translateY(-20px); /* Start slightly off-screen */
      animation: fadeInSlideDown 1.2s ease forwards; /* Slide down animation */

      /* Gradient background */
      background:
        linear-gradient(
          to top right,
          rgba(0, 102, 204, 0.1) 10%, /* A little blue */
          transparent 30% /* Mostly transparent */
        ),
        linear-gradient(
          to bottom left,
          rgba(0, 204, 136, 0.1) 10%, /* A little green */
          transparent 30% /* Mostly transparent */
        );
      z-index: 10; /* Ensure it's above the background */
      height: 100%; /* Full height */
    }

    .hero-image-placeholder {position:relative;width:50%;height:100%;background-color:#f0f4f8;}
    .spinner {position:absolute;top:50%;left:50%;width:80px;height:80px;background:conic-gradient(#00cc88 25%, transparent 25%);border-radius:50%;animation:spin 1s infinite linear, color-change 3s infinite;}
    .hero-image {position:relative;background:url('./images/Hero0.jpeg') no-repeat center center/cover;height:100%;opacity:0;transform:translateX(100%);transition:opacity 1.2s ease,transform 1.2s ease;}

    .hero-overlay-text {position: absolute; top: 48%; left: 0; font-size: 25px; font-weight: bold; color: #00cc88; opacity: 0; transform: translateY(30px); animation: fadeInSlideUp 1.5s ease forwards 1s; display: flex; flex-direction: column; text-align: left; line-height: 1.2;}

     /* Section Divider */
    .section-divider {max-height: 0px; background: linear-gradient(90deg, #0066cc, #00cc88); color: #333333; font-size: 24px; font-weight: bold; text-align: center; padding-top: 0px; position: relative; z-index: 1;}

    /* Cool Login Box */
    .login-box{display:none;position:absolute;top:50px;right:0;background-color:white;width:250px;padding:20px;box-shadow:0px 4px 12px rgba(0,0,0,0.2);border-radius:8px;z-index:1002;}
    .login-box h3{font-size:18px;color:#003049;text-align:center;margin-bottom:20px;}
    .login-box input{width:100%;padding:10px;margin:10px 0;border:1px solid #ccc;border-radius:4px;}
    .login-box button{width:100%;padding:10px;background-color:#003049;color:white;border:none;border-radius:4px;cursor:pointer;}
    .login-box button:hover{background-color:#005080;}
    .login-box .forgot-password{display:block;text-align:center;margin-top:10px;font-size:12px;color:#6c757d;cursor:pointer;}
    .login-box .forgot-password:hover{text-decoration:underline;color:#003049;}
    /* Close button styling */
    .login-box .close-btn{position:absolute;top:5px;left:5px;background:none;border:none;font-size:20px;cursor:pointer;color:red;padding:0;text-align:left;width: auto;}
    .login-box .close-btn:hover { background: none; color: red;  cursor: pointer; }

    /* Forgot Password Modal */
    .modal{display:none;position:fixed;z-index:1002;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.4);}
    .modal-content{background-color:#fff;margin:15% auto;padding:20px;border:1px solid #888;width:300px;border-radius:8px;}
    .modal-content h3{font-size:18px;color:#003049;text-align:center;margin-bottom:20px;}
    .modal-content input{width:100%;padding:10px;margin:10px 0;border:1px solid #ccc;border-radius:4px;}
    .modal-content button{width:100%;padding:10px;background-color:#003049;color:white;border:none;border-radius:4px;cursor:pointer;}
    .modal-content button:hover{background-color:#005080;}

.products-section {
  position: relative;
  opacity: 0;
  background-color: #f0f4f8;
  padding: 40px;
  text-align: center;
  color: #003049;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center; /* Horizontally center */
  align-items: center;     /* Vertically center */
}


/* Products Section Heading */
.products-heading {
  position: relative;
  font-size: 36px; /* Large, prominent font size */
  font-weight: bold;
  color: #333; /* Dark blue color */
  text-align: center;
  margin-bottom: 50px; /* Space between heading and product section */
  text-transform: uppercase; /* Ensure uppercase letters for emphasis */
  z-index: 1; /* Keep the heading above the bar */
  max-width: 600px;
  padding-top: 50px;
}

/* Gradient Text for "Legal Workflow" */
.gradient-text {
  background: linear-gradient(90deg, #0066cc, #00cc88); /* Blue to green gradient */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* Make gradient visible only inside the text */
  background-clip: text;
  text-fill-color: transparent;
}

/* Background Bar Behind Heading */
.products-heading::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%); /* Centers the bar vertically */
  height: 10px; /* Adjust thickness */
  background-color: rgba(0, 102, 204, 0.1); /* Soft blue background bar */
  z-index: -1; /* Ensure the bar is behind the text */
  border-radius: 50px; /* Smooth rounded edges */
  margin: 0 15%;
  opacity: 1; /* Keep the bar fully visible */
  pointer-events: none; /* Prevent interaction with the bar */
  margin-top: 25px;
}

/* Products Section */
.products-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  transform: translateX(-25px);
}

/* Top Row of Products */
.top-row {
  display: flex;
  width: 100%;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 40px;
  max-width: 1200px;
}

/* Bottom Row of Products */
.bottom-row {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  max-width: 1200px;
}

/* Each Step Box */
.step-box {
  display: flex;
  align-items: center;
  position: relative;
  width: 40%;
}

/* Step Circle Number (Solid Gradient Ovals) */
.step-circle {
    position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: none; /* Gradient from blue to green */
  color: #0066cc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 50px;
  margin-right: 15px;
  transition: transform 0.3s ease;
}

.step-circle-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: none; /* Gradient from blue to green */
  color: #0066cc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 50px;
  margin-right: 15px;
  transition: transform 0.3s ease;
}

.step-box:hover .step-circle {
  transform: scale(1.2); /* Enlarges circle on hover */
}

/* Thin Line Connecting Circles */
.step-line {
  height: 3px;
  width: 50px;
  background: linear-gradient(90deg, #0066cc, #00cc88); /* Gradient from blue to green */
  position: relative;
  margin: 0 15px;
  transition: transform 0.3s ease;
  transform-origin: middle; /* Scale from the top */
}

.step-box:hover + .step-line {
  transform: scaleX(1.5); /* Scale vertically without changing the layout */
}

/* Connectors for Steps */
.connector {
  width: 3px;
  height: 50px; /* Set a fixed height */
  background: linear-gradient(180deg, #0066cc, #00cc88); /* Vertical gradient */
  margin: 0 auto;
  transition: transform 0.3s ease; /* Use transform for scaling */
  transform-origin: middle; /* Scale from the top */
}

/* Expand the vertical connector on hover using scale */
.top-row:hover + .connector {
  transform: scaleY(1.5); /* Scale vertically without changing the layout */
}

/* Product Box */
.product-box {
  position: relative;
  padding: 40px;
  max-width: 600px;
  width: 100%;
  text-align: left;
  min-height: 280px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: white; /* Background for the box */
  border-radius: 50px; /* Rounded corners */

  /* Gradient border */
  border: 2px solid transparent; /* Transparent border */
  background-clip: padding-box, border-box; /* Clip the background for the border */

  /* Apply gradient border */
  background-image: linear-gradient(#f0f4f8, #f0f4f8),
                    linear-gradient(135deg, #0066cc, #00cc88);
  overflow: hidden;
}

/* Hover Effect for Product Box */
.product-box:hover {
  transform: scale(1.03); /* Grows slightly on hover */
}

/* Decorative Circle Inside Product Box */
.product-box::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -20%;
  width: 250px;
  height: 250px;
  background-color: rgba(0, 204, 136, 0.1); /* Subtle transparent green */
  border-radius: 50%;
  z-index: 1; /* Behind the content */
  transition: all 0.5s ease;
}

.product-box:hover::before {
  top: -40%; /* Moves further out on hover */
  right: -40%;
  width: 400px; /* Expands the circle size on hover */
  height: 400px;
  background-color: rgba(0, 102, 204, 0.15); /* Slightly darker on hover */
}

/* Headings Inside Product Box */
.product-box h4 {
position: relative;
  font-size: 22px;
  color: #333333;
  font-weight: bold;
  margin: 0;
  text-transform: uppercase;
  font-family: Arial, sans-serif; /* Matches font from features section */
}

/* Add a dark blue underline styled as an index card */
.product-box h4::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px; /* Thickness of the underline */
  background-image: linear-gradient(90deg, #0066cc, #00cc88); /* Dark blue color */
  width: 100%; /* Adjust the width as needed */
}

/* Paragraph Text Inside Product Box */
.product-box p {
  font-size: 16px;
  color: #666;
  margin-bottom: 0px;
  line-height: 1.6;
  font-family: Arial, sans-serif; /* Matches font from features section */
}

/* Button Inside Product Box */
.product-box button {
  background-color: #ffcc00;
  color: #003049;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Hover Effect for Button */
.product-box button:hover {
  background-color: #ffd633; /* Lighter yellow on hover */
}

@media screen and (max-width: 1850px) {
  .products-section {
    display: flex;
    flex-direction: column;
  }
}

@media screen and (max-width: 1350px) {
  #first-step-circle {
    visibility: hidden;
    position: absolute;
  }
  /* Product Box */
  .product-box {
    background-color: transparent;
    width: 60%;
    min-height: 0;
    border: none;
    pointer-events: none; /* Disable hover interaction */
    background-image: none;
  }

  .product-box:hover::before {
      pointer-events: none; /* Disable hover interaction */
  }

  /* Vertically align the product boxes */
  .products-container {
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center the product boxes */
    transform: translateX(0px);
  }

  /* Align product rows vertically */
  .top-row, .bottom-row {
    flex-direction: column; /* Stack product boxes vertically */
    width: 100%; /* Full width for rows */
    align-items: center; /* Center the content */
  }

  /* Set top-row margin to 0 */
  .top-row {
    margin-bottom: 0px; /* Remove bottom margin for top-row */
  }

  /* Remove top margin for bottom-row */
  .bottom-row {
    margin-top: 0px;/* Remove top margin for bottom-row */
  }

  /* Center everything inside the step-box */
  .step-box {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center elements horizontally */
    justify-content: center; /* Center elements vertically */
    width: 100%;
    text-align: center; /* Center text */
    background: none;
    border: none;
    padding: 0;
    margin: 10px;
  }

  /* Step Circle Number (Solid Gradient Ovals) */
  .step-circle {
      content: '';
      position: relative;
      top: -15px;
      left: 0px;
      width: 70px;
      height: 70px;
      border-top: 5px solid #0066cc;
      border-left: 5px solid #00cc88;
      border-radius: 10px;
      transform: rotate(225deg); /* Rotates it to point downward */
  }

  .step-circle-number {
    position: absolute;
    visibility: hidden;
  }

  .step-box:hover .step-circle {
    transform: none;
  }

  .product-box {
    padding-bottom: 0px;
  }

  /* Make separators (step-line, connector) invisible */
  .step-line, .connector {
    display: none; /* Hide separators */
  }

  .products-section {
    padding: 40px 0px 40px;
  }

  .products-section h3 {
    margin-bottom: 40px;
  }
}

/* Text Container for Main Heading and Step Text */
.text-container-wide {
  width: 80%;
  max-width: 1000px;
  margin: 0 auto;
  text-align: left;
}

/* Section Heading (Main Heading for Video Section) */
.text-header .main-heading {
  font-size: 42px;
  font-weight: bold;
  color: #333; /* Single color: dark blue */
  margin-bottom: 10px;
  position: relative;
}

.zebra-triangle {
  position: relative;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid transparent; /* Transparent for the actual triangle */
  transform: rotate(-22.5deg);
}

.zebra-triangle::before {
  content: '';
  position: absolute;
  top: 50px;
  left: -130px;
  width: 60px;
  height: 60px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 10px,
    #0066cc 10px,
    #0066cc 20px,
    transparent 20px,
    transparent 30px,
    #00cc88 30px,
    #00cc88 40px
  );
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: rotate(-22.5deg);
}

/* Unique Accent for Main Heading */
.text-header .main-heading::after {
position: relative;
  width: 100px;
  height: 100px;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0%,
    transparent 10%,
    #0066cc 10%, /* Blue color */
    #0066cc 20%,
    transparent 20%,
    transparent 30%,
    #00cc88 30%, /* Green color */
    #00cc88 40%
  );
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* Subtext (Description Below Main Heading) */
.text-header .subtext {
  font-size: 18px;
  color: #333;
  margin-bottom: 80px;
}

/* Step Number Styling (Gradient using ::before) */
.text-step .step-number {
  font-size: 14px; /* Adjust to your desired size */
  font-weight: bold;
  background: linear-gradient(90deg, #0066cc, #00cc88); /* Blue to green gradient */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; /* Make sure text is transparent */
  text-fill-color: transparent; /* For non-WebKit browsers */
  display: inline-block; /* Ensures it stays inline with the text */
}

/* Step Heading Styling (Aligned Left) */
.text-step .step-heading {
  font-size: 28px;
  color: #333;
  font-weight: bold;
  margin: 0 0 10px; /* Remove top margin for alignment */
  text-align: left; /* Align left */
  position: relative;
}

/* Step Description (Text Below the Step Heading) */
.text-step .step-description {
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
}

/* Main Section Styling */
.video-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: bottom;
  padding: 40px 20px 80px;
  background-color: #f0f4f8;
}

/* Video Section with Padding and Centering */
.video-container-wide {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f0f4f8;
  border: 0px solid #0066cc; /* Thick blue border around video */
  border-radius: 20px; /* Rounded edges */
}

/* Maintain the 16:9 Aspect Ratio */
.video-container-wide iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: 12px;
}

/* Form Content Wrapper */
.form-content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 60px 0;
  height: 500px;
}


/* Dotted Vertical Line Separator */
.separator-line {
  width: 1px;
  height: 400px; /* Adjust height as necessary */
  background: linear-gradient(#0066cc, #00cc88); /* Gradient color */
  border-radius: 2px;
  position: relative;
}

/* Adding dots to the line */
.separator-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 3px;
  background-color: #0066cc; /* Dark blue color */
  border-radius: 50%;
  transform: translateX(-50%);
}

.separator-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 3px;
  height: 3px;
  background-color: #0066cc; /* Dark blue color */
  border-radius: 50%;
  transform: translateX(-50%);
}

/* Form Section Styling */
.form-section {
  display: flex;
  flex-direction: row; /* Align elements side by side */
  justify-content: space-between;
  align-items: flex-start; /* Align both to the top of the container */
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  gap: 80px; /* Space between text and form */
  position:relative;
  margin-bottom: 40px;
}

/* Form and Text Container */
.form-and-text {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
  max-width: 300px;
}

/* Form Styling */
#contact-form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#contact-form label {
  font-size: 14px;
  margin-bottom: 5px;
  color: #003049;
}

#submit-button-container {
  display: flex;
  justify-content: center; /* Centers the button horizontally */
  width: 100%;
}

#submit-button {
  background: linear-gradient(#f0f4f8, #f0f4f8) padding-box, /* Match section background */
              linear-gradient(90deg, #00cc88, #0066cc) border-box; /* Gradient border */
  color: #00cc88; /* Green text */
  padding: 15px; /* Padding to make the button fatter */
  font-size: 16px;
  font-weight: bold;
  border: 3px solid transparent; /* Transparent border to show gradient */
  border-radius: 25px; /* Rounded corners */
  cursor: pointer;
  display: inline-block; /* Wrap the button around the text */
}

#submit-button:hover {
  background: linear-gradient(90deg, #00cc88, #0066cc) padding-box, /* Same gradient for the entire background */
              linear-gradient(90deg, #00cc88, #0066cc) border-box; /* Gradient border on hover */
  color: #333; /* White text on hover */
}

#submit-button.disabled {
  opacity:0.5;
  cursor:not-allowed;
  pointer-events:none;
}

/* Geometric Separator */
.separator-geometry {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
  margin: 0 40px;
}

.separator-geometry div {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #0066cc, #00cc88); /* Blue to green gradient */
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%); /* Triangle shape */
}


/* Flexbox Layout for Form Section */
.form-content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Form Styling */
.form-block {
  flex: 1;
}

.text-step {
  flex: 1;
}

input[type="text"], input[type="password"], input[type="email"] {
  width: 100%; /* or set a fixed width like 300px */
  max-width: 300px; /* Limits the maximum width */
  padding: 12px;
  border: 1px solid #333;
  border-radius: 25px; !important
  box-sizing: border-box;
  margin-bottom: 20px;
  font-size: 16px;
}

#status-message-tooltip{position:absolute;margin-bottom:10px;padding:10px;background-color:#fff;border-radius:5px;border:1px solid #ccc;box-shadow:0px 4px 10px rgba(0,0,0,0.1);color:#333;font-size:14px;display:none;width:80%;text-align:center;left:50%;transform:translateX(-50%);top:-50px;transition:opacity 0.3s ease;}
#status-message-tooltip.success{background-color:#dff0d8;border-color:#d6e9c6;color:#3c763d;}
#status-message-tooltip.error{background-color:#f2dede;border-color:#ebccd1;color:#a94442;}

@keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(50px);}to{opacity:1;transform:translateX(0);}}
@keyframes fadeInSlideUp{0%{opacity:0;transform:translateY(30px);}100%{opacity:1;transform:translateY(0);}}

/* Keyframes */
@keyframes fadeInSlideDown {0% {opacity: 0; transform: translateY(-20px);} 100% {opacity: 1; transform: translateY(0);}}
@keyframes slideInRight {0% {opacity: 0; transform: translateX(100%);} 100% {opacity: 1; transform: translateX(0);}}
@keyframes spin {0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);}}
@keyframes color-change {0% {background:conic-gradient(#00cc88 25%, transparent 25%);} 50% {background:conic-gradient(#0066cc 25%, transparent 25%);} 100% {background:conic-gradient(#00cc88 25%, transparent 25%);}}

/* Sticky Divider for Transition */
.section-divider {
  position: sticky;
  z-index: 100;
  height: 60px;
  background: linear-gradient(90deg, #0066cc, #00cc88);
  color: #333333;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  padding-top: 40px;
  top:67px;
}

/* Container to wrap both features and products */
.transition-sections {
  position: relative;
  width: 100vw;
  min-height: 100vh; /* Full viewport height for each section */
  overflow: hidden; /* Prevents scrolling */
}

.features-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center; /* Horizontally center */
  align-items: center;     /* Vertically center */
  opacity: 1; /* Initially visible */
  flex-direction: column;  /* Center the content vertically */
  padding: 60px 0; /* Final padding applied */
  text-align: center;
  background-color: #f0f4f8;
}

/* Large Heading (h3) */
.features-section h3 {
  position: relative; /* To position the lines relative to the heading */
  font-size: 42px; /* Large font size to match the reference */
  font-weight: bold;
  color: #333;
  margin-bottom: 50px; /* Space below heading */
  text-transform: none; /* Ensure it's normal case */
  letter-spacing: 0.5px;
}

/* Top-left corner triangle */
.features-section h3::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-bottom: 15px solid #0066cc; /* Color of the top-left triangle */
}

/* Bottom-right corner triangle */
.features-section h3::after {
  content: '';
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-top: 15px solid #00cc88; /* Color of the bottom-right triangle */
}

/* Features container */
.features-container {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  width: 100%;
  gap: 40px; /* Add more gap between feature boxes */
}

/* Feature box */
.feature-box {
  flex: 1;
  padding: 0 20px;
  text-align: left;
  position: relative;
  font-family: Arial, sans-serif;
  width:100%;
  margin-bottom:20px;
}

/* Vertical divider line */
.feature-box:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 1px;
  background: linear-gradient(to bottom, #0066cc, #00cc88); /* Gradient line */
}

/* Headings (h4) */
.feature-box h4 {
  font-size: 22px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

/* Paragraph text */
.feature-box p {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}

/* Remove line for the last box */
.feature-box:last-child::after {
  display: none;
}

/* Media query for smaller screens (less than 1200px) */
@media screen and (max-width: 1200px) {
  .features-container {
    flex-direction: column;
    align-items: center; /* Center feature boxes */
  }

  .feature-box {
    text-align: center; /* Center text inside the feature boxes */
    max-width: 80%; /* Limit text width to 80% */
    position: relative; /* Ensures the line can be positioned within the box */
  }

  /* Horizontal divider line */
  .feature-box:not(:last-child)::after {
    display: none; /* Completely hides the line */
  }

    /* Horizontal divider line */
  .feature-box + .feature-box::before {
    content: '';
    position: absolute;
    top: -20px; /* Adjusts the position of the line to be above the next box */
    left: 50%; /* Align to the center horizontally */
    transform: translateX(-50%); /* Center the line */
    width: 60vw; /* Set line width to 60% of viewport width */
    height: 2px; /* Line height */
    background: linear-gradient(to right, transparent, #0066cc, #00cc88, transparent); /* Fading gradient */
    opacity: 1; /* Ensure the line is fully visible */
    z-index: 1; /* Ensure it appears above other elements */
  }
}

/* Common arrow styling */
.scroll-arrow {
    position: fixed;
    width: 40px; /* Adjust size as needed */
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0066cc, #00cc88); /* Gradient from blue to green */
    display: none; /* Hidden by default */
    align-items: center; /* Vertically center */
    justify-content: center; /* Horizontally center */
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Up arrow (Positioned at the top of the screen) */
.up-arrow::before {
    content: '↑'; /* Arrow pointing up */
    color: white;
    font-size: 20px;
    position: absolute;
}

.up-arrow {
    top: 135px; /* Positioned near the top of the screen */
    left: 48%; /* Horizontally center */
    transform: translateX(-50%); /* Horizontally center the arrow */
    padding-bottom: 5px; /* Small padding to move the arrow downward within the circle */
}

/* Down arrow (Positioned at the bottom of the screen) */
.down-arrow::before {
    content: '↓'; /* Arrow pointing down */
    color: white;
    font-size: 20px;
}

.down-arrow {
    bottom: 30px; /* Positioned near the bottom of the screen */
    left: 48%; /* Horizontally center */
    transform: translateX(-50%); /* Horizontally center the arrow */
    padding-bottom: 5px; /* Small padding to move the arrow downward within the circle */
}

/* Hover effect for arrows */
.scroll-arrow:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
}

/* Jumping animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Apply bouncing animation to arrows */
.scroll-arrow {
    animation: bounce 2s infinite;
}

@media screen and (max-width:850px) {
  /* Navigation adjustments */
  .nav-links,
  .action-buttons {
    display: none; /* Hide desktop nav links and action buttons */
  }

  /* Hamburger Menu */
  .hamburger-menu {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
  }

  .hamburger-menu .bar {
    width: 25px;
    height: 3px;
    background-color: #333333; /* Dark text color */
    transition: all 0.3s ease;
  }

  /* Hamburger Menu Links */
  .hamburger-links {
    display: none;
    flex-direction: column;
    gap: 10px;
    background-color: #f0f4f8; /* Light background color */
    position: absolute;
    top: 55px;
    right: 0;
    width: 100%;
    padding: 20px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 999;
  }

  .hamburger-links a {
    color: #333333; /* Dark text color */
    text-decoration: none;
    font-size: 18px;
    padding: 10px 20px;
    border-bottom: 1px solid #ddd;
  }

  .hamburger-links a:hover {
    color: #00cc88; /* Accent color */
  }

  /* Style login and try it free links in hamburger menu */
  .hamburger-links a#login {
    color: #0066cc; /* Primary color */
    border-radius: 5px;
  }

  .hamburger-links a#try-it {
    color: #00cc88; /* Accent color */
    border-radius: 5px;
  }

  /* Logo and Title adjustments */
  .logo {
    width: 35px; /* Slightly reduce the logo size */
  }

  .title-text {
    font-size: 22px; /* Reduce font size for brand name */
  }

  /* Hero Section adjustments */
  .hero-section {
    flex-direction: column;
    height: 100vh; /* Full mobile screen height */
    padding: 0;
    overflow: hidden;
    position: relative;
  }

  .hero-content {
    flex: 0 1 auto;
    padding: 20px;
    text-align: center;
    min-width: 100%;
    opacity: 1;
    transform: none;
    animation: none;
    position: relative;
    z-index: 2;
  }

  .hero-heading {
    font-size: 28px;
    text-align: center;
    margin-bottom: 20px;
    color: #f0f4f8; /* Light text color */
  }

  .hero-content p {
    font-size: 16px;
    text-align: center;
    color: #f0f4f8; /* Light text color */
  }

  .hero-image-placeholder {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .hero-image {
    width: 100%;
    height: 100%;
    background: url('./images/lawyers.jpeg') no-repeat center center/cover;
    opacity: 1;
    transform: none;
    animation: none;
  }

  /* Overlay for better text readability */
  .hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Adjusted for better contrast */
    z-index: 1;
  }

  /* Position hero overlay text at the bottom left */
  .hero-overlay-text {
    position: absolute;
    width: auto;
    text-align: left;
    font-size: 25px;
    font-weight: bold;
    color: #00cc88; /* Accent color */
    opacity: 1;
    transform: none;
    animation: none;
    top: 0px;
  }

  /* Hide the spinner */
  .spinner {
    display: none;
  }

  /* Ensure features and products sections are visible */
  .features-section,
  .products-section {
    opacity: 1;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Features Section adjustments */
  .features-section {
    position: relative;
    padding: 40px 20px;
    background-color: #f0f4f8; /* Match background color */
  }

  .features-section h3 {
    font-size: 24px; /* Reduce font size */
    margin-bottom: 10px;
    color: #333333; /* Dark text color */
    line-height: 1.2;
  }

  .features-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .feature-box {
    text-align: center;
    max-width: 90%;
    width: 100%;
    margin-bottom: 0px;
    padding: 20px 10px;
    color: #333333; /* Dark text color */
  }

  .feature-box h4 {
    font-size: 20px; /* Reduce font size */
    margin: 15px 0px 15px;
  }

  .feature-box p {
    font-size: 16px;
    margin-bottom: 0;
  }

  /* Remove vertical divider line */
  .feature-box:not(:last-child)::after {
    display: none;
  }

  /* Products Section adjustments */
  .products-section {
    position: relative;
    padding: 40px;
    background-color: #f0f4f8; /* Match background color */
    pointer-events: none;
  }

  .products-section h3 {
    margin-bottom: 10px;
  }

  .step-circle {
    font-size: 30px;
  }

  .products-heading {
    font-size: 24px; /* Reduce font size */
    margin-bottom: 30px;
    color: #333333; /* Dark text color */
    line-height: 1.2;
    padding-top: 0px;
  }

    /* Background Bar Behind Heading */
  .products-heading::before {
    margin-top: 0px;
  }

  .products-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .product-box {
    width: 100%;
    margin-bottom: 0px;
    text-align: center;
    color: #333333; /* Dark text color */
    border-image: none;
    border: none;
    pointer-events: none;
    min-height: 0px;
    margin-top: 20px;
    padding: 30px 30px 0px;
  }

  .product-box h4 {
    font-size: 18px; /* Reduce font size */
    margin: 0;
  }

  .product-box p {
    font-size: 16px;
    margin-bottom: 0px
  }

  .step-box: {
    margin: 0px;
  }

  .zebra-triangle {
    position: relative;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid transparent; /* Transparent for the actual triangle */
    transform: rotate(-22.5deg);
  }

  .zebra-triangle::before {
    content: '';
    position: absolute;
    top: 72px;
    left: -98px;
    width: 30px;
    height: 30px;
    background: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 5px,
      #0066cc 5px,
      #0066cc 10px,
      transparent 10px,
      transparent 15px,
      #00cc88 15px,
      #00cc88 20px
    );
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: rotate(-22.5deg);
  }

  .form-section {
    flex-direction: column;
    align-items: center;
    padding: 20px 0; /* Reduce padding */
    gap: 20px;
  }

  .text-step {
    order: -1; /* Move the text above the form */
    text-align: center;
    padding: 0 20px;
    margin-bottom: 0; /* Remove bottom margin */
    width: 100%;
  }

  .text-step .step-heading {
    font-size: 24px;
    margin-bottom: 10px;
    text-align: center;
  }

  .text-step .step-description {
    font-size: 16px;
  }

  .form-and-text {
    flex-direction: column;
    width: 100%;
  }

  #contact-form {
    width: 100%;
    padding: 0 20px;
  }

  input[type='text'],
  input[type='password'],
  input[type='email'],
  input[type='tel'] {
    width: 100%;
    padding: 12px;
    border: 1px solid #333333;
    border-radius: 25px;
    margin-bottom: 20px;
    font-size: 14px;
  }

  #submit-button {
    width: auto;
    padding: 15px 30px;
    margin: 20px;
  }

  #submit-button:hover {
    background: linear-gradient(#f0f4f8, #f0f4f8) padding-box, /* Match section background */
                linear-gradient(90deg, #00cc88, #0066cc) border-box; /* Gradient border */
    color: #00cc88;
  }

  #see-action-button:hover {
    background: linear-gradient(#f0f4f8, #f0f4f8) padding-box, /* Match section background */
            linear-gradient(90deg, #0066cc, #00cc88) border-box; /* Gradient border */
    color: #00cc88; /* Green text */
  }

  /* Video Section adjustments */
  .video-section {
    padding: 0px 20px 20px;
    background-color: #f0f4f8;
  }

  .text-header .main-heading {
    font-size: 28px;
    margin-bottom: 20px;
    color: #333333;
  }

  .text-header .subtext {
    font-size: 16px;
    margin-bottom: 40px;
    color: #333333;
  }

  .video-container-wide {
    width: 100%;
    padding: 0;
  }

  /* Remove hover effects on touch devices */
  @media (hover: none) {
    .nav-links a:hover,
    .product-box:hover,
    .product-box button:hover {
      background: none;
      color: inherit;
      transform: none;
    }
  }

  /* Remove decorative elements */
  .parallax-section,
  .wavy-divider,
  .callout-circle,
  .section-divider,
  .scroll-arrow {
    display: none;
  }

  /* Adjust padding and margins */
  .section {
    padding: 20px 10px;
    margin-bottom: 40px;
  }

  /* Ensure images and videos are responsive */
  img,
  iframe {
    max-width: 100%;
    height: auto;
  }

  /* Adjust the separator line position */
  .separator-line {
      display: none;
  }

  .form-section {
      gap: 20px;
  }
}