*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  outline: none;
}

body::-webkit-scrollbar {
  width: 0.4rem;
}
 
/* body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
} */
 
body::-webkit-scrollbar-thumb {
  background-color: #20ce65;
  outline: 1px solid #20ce65;
}

.wrapper {
  max-width: 1200px;
  margin: 0px auto;
  padding: 24px;
}

body {
  font-family: "Geist", sans-serif;
  background-color: #131A2A;
  position: relative;
  scroll-behavior: smooth;
}

p::selection {
  background-color: #20ce65;
  color: #fff;
}

header {
  position: fixed;
  width: 100%;
  z-index: 9999;
  border-bottom: 1px solid #000000;
  gap: 12px;
  padding: 16px 24px;
  align-items: center;
  display: flex;
  justify-content: center;
  background: rgba(0, 0, 0, 0.114);
  backdrop-filter: blur(15px);
}

.mobile-menu {
  display: none;
}

/* Style for Sticky Header */


.mobile-menu-container {
  display: none;
}

a {
  text-decoration: none;
}

h1 {
  color: #fff;
  font-family: "Geist", sans-serif;
  font-size: 3.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 60px;
  /* 120% */
}

h1 span {
  color: #20ce65;
}

h2 span {
  color: #20ce65;
}

h2 {
  color: #ffffff;
  font-family: "Geist", sans-serif;
  font-size: 2.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 45.6px;
  /* 120% */
}

h3 {
  color: #fff;
  font-family: "Geist", sans-serif;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 26.4px;
  /* 120% */
}

p {
  color: #9E9E9E;
  font-family: "Geist", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 300;
  /* 175% */
}


.btn:hover{
 background-color: transparent;
 color: #20ce65;
 border: 1px solid #20ce65;
 transition: all ease 100ms;
}

.btn {
  border: 1px solid #20ce65;
  background: radial-gradient(68.34% 57.4% at 47.22% 45.8%, rgba(0, 0, 0, 0.00) 0%, rgba(32, 206, 101, 0.20) 100%);
  font-size: 1.125rem;
  color: #fff;
  padding: 10px 30px;
  text-decoration: none;
  width: fit-content;
  border-radius: 0.75rem;
  font-weight: 600;
  transition: all ease-in 100ms;
}

.btn:hover{
  background: radial-gradient(68.34% 57.4% at 47.22% 45.8%, rgba(0, 0, 0, 0.00) 0%, rgba(32, 206, 101, 0.40) 100%);
  color: white;
}

.cta .btn {
  padding: 8px 15px;
}

.upper-heading {
  color: #fff;
  font-family: "Geist", sans-serif;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 26.4px;
  /* 120% */
  text-transform: capitalize;
  position: relative;
  margin-bottom: 24px;
}

/* .upper-heading::before {
  content: "";
  width: 25px;
  height: 2px;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 50%;
} */


header::after {
  content: "";
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%,rgba(32, 206, 101, 0.28) 50%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  height: 1px;
  width: 98%;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 24px;
  width: 1200px;
}

/* .logo-name {
  color: #fff;
  font-family: "Geist", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
 
} */

.logo-name img {
  height: 46px;
}

.menu ul {
  display: flex;
  gap: 32px;
  list-style: none;
}

.menu ul li a {
  color: #fff;
  font-family: "Geist", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  /* 175% */
  text-transform: uppercase;
}

.cta{
  display: flex;
  align-items: center;
  gap: 24px;
}

.user-manual-link{
  color: #fff;
  font-family: "Geist", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.user-manual-link:hover{
  color: #20ce65;
  transition: all ease 0.2s;
  
}


.menu ul li a:hover {
  color: #20ce65;
  transition: all ease 0.2s;
}

main {
  padding-top: 96px;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-conatiner {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  gap: 50px;
  align-items: center;
  margin-top: -10rem;
}

.hero-conatiner .left {
  flex: 1;
  display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.hero-conatiner .left h1{
  text-align: center;
  width: 80%;
}

.hero-conatiner .right {
  flex: 1;
}

.hero-image-container img {
  width: 100%;
}

/* .hero-container .left {
} */

.hero-desc {
  margin-top: 32px;
  width: 65%;
  text-align: center;
}

.btn-container {
  margin-top: 32px;
  display: flex;
  gap: 24px;
  justify-content: center;
}

.hero-btn-1 {
  padding: 14px 50px;
  background: #fff;
  color: black;
}

.hero-btn-2 {
  padding: 14px 50px;
}

.border-btn {
  border: 1px solid #20ce65;
  background: transparent;
  color: #20ce65;
  padding: 14px 50px;
  width: fit-content;
  height: min-content;
  cursor: pointer;
}

.border-btn:disabled{
  border: 1px solid #8cffba56;
  color: #8cffba56;
  pointer-events:none ;
}

.border-btn:hover{
  color: #fff;
  background-color: #20ce65;
}

.simplify {
  padding-top: 96px;
  position: relative;
  overflow: hidden;
  height: 100vh;
  display: flex;
  align-items: center;
  width: 100%;
}

.simplify-container {
  display: flex;
  justify-content: left;
  flex-direction: row;
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.simplify .background-clip-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.simplify-container .left {
  flex: 1;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin: 0;
  margin-top: -5rem;
  text-align: left;
  position: relative;
  z-index: 2;
}

.simplify-container .left h2 {
  width: 30%;
  text-align: left;
}

.simplify-container p {
  width: 40%;
  text-align: left;
  margin-top: 32px;
}

.simplify-container .btn {
  width: fit-content;
  margin-top: 32px;
}

/* .simplify-container .right {
} */

/* Style for Feature Section */

.features {
  padding: 60px 0px;
  margin-top: -150px;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.features .background-clip-3 {
  position: absolute;
  top: 10rem;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}


.feature-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 48px;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.feature-container .section-heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.feature-container .feature-heading {
  display: flex;
  gap: 18px;
}

.feature-container .section-heading img {
  height: 48px;
}

.feature-container .section-body {
  display: flex;
  justify-content: center;
  row-gap: 12px;
  column-gap: 12px;
  flex-wrap: wrap;
}

.feature-container .item-container {
  border-radius: 10px;
  border: 0.5px solid rgba(32, 206, 101, 0.20);
  background: rgba(16, 20, 30, 0.40);
  backdrop-filter: blur(5px);
  padding: 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: calc(33% - 5px);
  justify-content: center;
  align-items: center;
}
/* 
.feature-container .item-container:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
} */

.feature-container .icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature-container .icon-container img {
  width: 40px;
}

.feature-container .text-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
}

.feature-container .text-container h3 {
  position: relative;
}


.feature-container .item-container .icon-container {
  height: 70px;
  width: 70px;
  border-radius: 14px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(218, 165, 32, 0.00) 0%, rgba(218, 165, 32, 0.05) 100%);
}

.solutions {
  padding: 60px 0px;
}

.solutions-container {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* .solutions-img-container img {
  display: none;
} */

.solutions-container .right {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 24px;
}

.solutions-container p{
  width: 70%;
  text-align: center;
}

/* Style for Contact Section */

.contact {
  padding-top: 60px;
}

.contact-container {
  display: flex;
  justify-content: space-between;
  /* flex-direction: column; */
  gap: 90px;
}

/* .contact-container .left {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 48px;
} */

/* .contact-container .right {
  display: flex;
  flex-direction: row;

} */

.contact-container .left .section-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}


.social-links {
  ul {
    list-style: none;
    display: flex;
    gap: 18px;
  }

  img {
    width: 24px;
    color: #fff;
  }

  img:hover {
    filter: brightness(0) saturate(100%) invert(87%) sepia(43%) saturate(5390%)
      hue-rotate(81deg) brightness(89%) contrast(81%);
  }
}

.important-links {
  ul {
    margin-left: 22px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

.footer-logo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer-logo a {
  font-size: 24px;
  color: #fff;
  font-weight: 600;
}

.footer-logo img {
  width: 166px;
}

.footer-top-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

hr {
  margin: 18px 0px;
  border: solid 0.5px #41414187;
}

.footer-copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;

  span a {
    color: #20ce65;
    font-size: 18px;
  }

  ul {
    display: flex;
    gap: 24px;
    list-style-type: none;
  }

  li a {
    color: #cfcfcf;
  }

  li a:hover {
    color: #20ce65;
  }

  li::marker {
    color: #20ce65;
  }
}

/* Style for Form */

.form-row {
  display: flex;
  gap: 24px;
}

.form-col {
  display: flex;
  flex-direction: column;
}

/* form {
  background-color: #040913;
  padding: 48px;
  border-radius: 4px;
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
} */

label {
  color: #cfcfcf;
  font-family: "Geist", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 175% */
  position: relative;
  width: fit-content;
}

label::after {
  content: "*";
  color: red;
  position: absolute;
  right: -10px;
}

.not-required::after{
  content: "";
}

.form-col {
  flex: 1;
}

option {
  padding: 10px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #131A2A;
  border-radius: 4px;
  box-sizing: border-box;
  color: #cfcfcf;
  background-color: #435361;
}

/* input[type="text"]:hover,
input[type="email"]:hover,
select:hover,
textarea:hover{
  border: 1px solid #20ce65;
} */

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border: 1px solid #20ce65;
}

/* input:focus {
  background-color: #4caf50;
} */

input[type="submit"] {
  background-color: #4caf50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}

.contact-container .right {
  /* background-color: #040913; */
  /* padding: 24px 24px; */
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  gap: 50px;
  width: 100%;
}

.pricing {
  padding-top: 60px;
  padding-bottom: 60px;
}

.pricing-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center;
  align-items: center;
}

/* .pricing-container .section-body {
  display: flex;
  gap: 100px;
} */

.pricing-details {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pricing-card {
  background-color: #040913;
  padding: 32px;
  border-radius: 4px;
  /* width: 50%; */
}

.pricing-desc p {
  margin-top: 48px;
  width: 90%;
  
}

.pricing-card .plan-name {
  border: 1px solid #fff;
  border-radius: 4px;
  font-size: 14px;
  padding: 0px 8px;
  width: fit-content;
}

.pricing-card ul {
  margin-left: 24px;
}

.pricing-card ul li {
  list-style: none;
  color: #cfcfcf;
  font-family: "Geist", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 28px;
  position: relative;
}

.pricing-card ul li::before {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  top: 6px;
  left: -25px;
  background: url("assets/icons/charm_circle-tick.svg");
  background-size: cover;
}

.plan-price {
  color: #fff;
  font-family: "Geist", sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px; /* 70% */
}

.plan-duration {
  color: #fff;
  font-family: "Geist", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 200% */
}

.how-it-work {
  padding: 60px 0px;
  /* background-color: #070917; */
}

.how-it-work-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

.how-it-work-img-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.how-it-work-container .section-body img {
  width: 70%;
}

.how-it-work-container .section-body p {
  text-align: center;
  width: 80%;
}

.discount {
  padding: 12px 24px;
  background-color: transparent;
  background-image: linear-gradient(
    175deg,
    transparent,
    rgba(166, 239, 103, 0.14)
  );
  border: 1px solid rgba(84, 239, 0, 0.41);
  border-radius: 8px;

  p {
    font-size: 14px;
    line-height: 18px;
    color: #20ce65;
  }
}

.contact-heading{
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  align-items: center;
}

.contact-heading p {
  width: 45%;
  text-align: center;
}

.form-container{
  flex: 1;
}

.pricing-desc ul li{
  color: #cfcfcf;
  font-family: "Geist", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 28px;
  list-style-position: inside;
  list-style-image: url("assets/icons/typcn_minus.svg");
}

.pricing-details-container{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

details{
  max-width: 100%;
  /* margin-top: 4px; */
  background-color: #19232b;
  padding: 24px;
  color: #fff;
  border-radius: 4px;
  font-size: 16px;
  margin-bottom: 12px;
}

summary{
  list-style: none;
}

.content{
  padding: 24px 0px;
  padding-right: 48px;
}

details[open] summary,
summary:hover {
  color: #20ce65;
}

summary:hover strong,
details[open] summary strong,
summary:hover::before,
details[open] summary::before {
  color: #20ce65;
}

/* # Style 4 # */
details.style4 summary {
  padding-right: 48px;
  padding-left: 0px;
}
details.style4 summary::before {
  content: "×";
  color: #FFF;
  font-size: 2rem;
  line-height: 1rem;
  transform: rotate(-45deg);
  top: 2px;
  left: unset;
  right: 0.6rem;
}
details[open].style4 > summary:before {
  transform: rotate(90deg);
  color: rgb(255, 255, 255) !important;
  transition: color ease 2s, transform ease 1s;
}


/* # The Rotating Marker # */
details summary::-webkit-details-marker { display: none; }
summary::before {
  font-family: "Geist", sans-serif;
  content: "▶";
  position: absolute;
  top: 1rem;
  left: 0.8rem;
  transform: rotate(0);
  transform-origin: center;
  transition: 0.2s transform ease;
}
details[open] > summary:before {
  transform: rotate(90deg);
  transition: 0.45s transform ease;
}

/* # The Sliding Summary # */
details { overflow: hidden; }
details summary {
  position: relative;
  z-index: 10;
}
@keyframes details-show {
  from {
    /* margin-bottom: -80%; */
    opacity: 0;
    transform: translateY(-100%);
  }
}
details > *:not(summary) {
  /* animation: details-show 500ms ease-in-out; */
  position: relative;
  z-index: 1;
  transition: all 0.3s ease-in-out;
  color: transparent;
  overflow: hidden;
}
details[open] > *:not(summary) { color: inherit; }


.faq{
  padding: 60px 0px;
}

.faq .section-heading{
  display: flex;
  justify-content: center;
  margin-bottom: 48px;
}

.support-link{
  color: #20ce65;
  font-weight: 500;
  text-decoration: underline;
}

.download-guide p{
  font-size: 22px;
}

.support-details{
  display: flex;
  align-items: center;
  gap: 12px;
}

.support-download-section{
  display: flex;
  justify-content: center;
  gap: 120px;
  padding-top: 32px;
}

.support-box{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 24px;
  background-color: transparent;
  background-image: linear-gradient(175deg, transparent, rgba(166, 239, 103, 0.14));
  border: 1px solid rgba(84, 239, 0, 0.41);
  border-radius: 8px;
  text-align: center;

  p{
    font-size: 16px;
  }
}

.btn-hidden{
  display: none;
}

.form-logo-container, .backto-home-container{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0px;
}

.register-form-container{
  width: 700px;
  margin: auto;
  padding-top: 10rem;
}

.backto-home{
  display: flex;
  gap: 8px;
  justify-content: center;
  a{
    color: #FFF;
  }
  a:hover{
    color: #20ce65;
  }
}

.backto-home:hover{
  
  a{
    color: #20ce65;
    text-decoration: underline;
  }

  img{
    filter: brightness(0) saturate(100%) invert(87%) sepia(43%) saturate(5390%)
      hue-rotate(81deg) brightness(89%) contrast(81%);
  }
}

.register-form-body{
  background: url("assets/vertical.svg") ;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
}

.success {
  color: green;
}

.error {
  color: red;
}

.saas-agreement{
  color: #fff;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 6px 0px;
  margin: 8px 0px;

  a{
    color: #20ce65;
  };
}

input[type="checkbox"],
input[type="radio"]{
  accent-color: #20ce65;
}

.radio-container{
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 8px 0;
  padding: 6px 0;
}


.inx_tt_toast_message {
  position: fixed;
  top: 1.5rem;
  right: 1rem;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
}
.inx_tt_success_toast_message {
  background-color: #34d399;
}
.inx_tt_warning_toast_message {
  background-color: #fbbf24;
}
.inx_tt_toast_icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
}

/* Style for Pricing section */

.pricing-container .section-header{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 24px;
  text-align: center;
}

.pricing-container .section-body{
  width: 100%;
  /* border: 2px solid #292929 ; */
  border-radius: 8px;
  overflow: hidden;
}

/* .accordion-section {
  margin: 20px 0;
} */

.accordion-section .content{
  padding: 0px;
}

.row {
  display: flex;
  align-items: center;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.logo {
  margin-right: 10px;
}

.chevron {
  cursor: pointer;
  margin-left: auto;
  color: #ffffff;
  font-size: 1.2em;
}

table {
  width: 100%;
  border-collapse: collapse;
  /* border-spacing: 20px; */
  /* margin-top: 10px; */
}

td {
  /* border: 1px solid #292929; */
  padding: 24px 0px;
  text-align: left;
  color: #fff;
  
  
}

th {
  /* background-color: #0F161C; */
  padding: 14px;
  text-align: left;
  color: #ffffff;
  font-weight: 500;
}

th:nth-child(2), th:nth-child(3), th:nth-child(4){
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  
}

th:nth-child(3){
  position: relative;
}

th:nth-child(2){
  border-right: 16px solid #131A2A ;
}

th:nth-child(4){
  border-left: 16px solid #131A2A ;
}


th:nth-child(3)::before{
  content:"";
  width: calc(100% + 2px);
  height: 108%;
  background-color: transparent;
  border-left:1px solid #20ce65 ;
  border-right:1px solid #20ce65;
  border-top: 1px solid #20ce65;
  position: absolute;
  z-index: 10;
  border-radius: 4px 4px 0px 0px;
  top: 0px;
  left: -2px;
}

th:nth-child(3)::after{
  content: "Popular";
  color: #ffff;
  background-color: #20ce65;
  position: absolute;
  bottom: 20px;
  font-size: 12px;
  font-weight: 400;
  padding: 2px 12px;
  border-radius: 50px;
  left: 50%;
  transform: translateX(-50%);
}

td:nth-child(3), td:nth-child(2), td:nth-child(4){
  position: relative;
  z-index: 0;
  /* border-top: 8px solid #040913 ; */
}



td:nth-child(3)::before{
  content:"";
  width: calc(100% + 2px);
  height: 108%;
  background-color: transparent;
  border-left:1px solid #20ce65 ;
  border-right:1px solid #20ce65;
  position: absolute;
  z-index: 10;
  /* border-radius: 4px; */
  top: 0px;
  left: -2px;
}

table tr:last-child td:nth-child(3){
  border-bottom: 0px;
}

table tr:last-child td:nth-child(3)::after{
  width: 0px;
}

table tr:last-child td:nth-child(3)::before{
  content:"";
  width: calc(100% + 2px);
  height: 100%;
  background-color: transparent;
  border:1px solid #20ce65 ;
  border-top: none;
  position: absolute;
  z-index: 10;
  border-radius: 0px 0px 4px 4px;
  top: 0px;
  left: -2px;
}


td:nth-child(3)::after{
  content:"";
  width: 100%;
  height: 1px;
  background-color: #435361;
  position: absolute;
  z-index: 9;
  /* border-radius: 4px; */
  bottom: 0px;
  left: 0px;
}

td:nth-child(2){
  border-right: 16px solid #131A2A ;
}

table tr:last-child td:nth-child(2)::after,
table tr:last-child td:nth-child(4)::after{
  border-bottom:0px solid #131A2A ;
  height: 1px;
}

td:nth-child(2)::after{
  content:"";
  width: 100%;
  height: 1px;
  background-color: #435361;
  position: absolute;
  z-index: 9;
  /* border-radius: 4px; */
  bottom: 0px;
  left: 0px;
}

td:nth-child(4){
  border-left: 16px solid #131A2A;
}

td:nth-child(4)::after{
  content:"";
  width: 100%;
  height: 1px;
  background-color: #435361;
  position: absolute;
  z-index: 9;
  /* border-radius: 4px; */
  bottom: 0px;
  left: 0px;
}


td:nth-child(2), td:nth-child(3), td:nth-child(4) {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  background-color: #192236;
  /* border-bottom: 1px solid #435361; */
  /* border-top: 4px solid #040913; */
  width: 25%;
  
}

/* th:nth-child(3){
  border-left: 1px solid #20ce65;
  border-right: 1px solid #20ce65;
  border-top: 1px solid #20ce65;
  border-radius: 4px;
} */

/* table tr:last-child td:nth-child(3){
  border-bottom: 1px solid #20ce65;
  border-radius: 12px;
} */

/* td:nth-child(3){
  border-left: 1px solid #20ce65;
  border-right: 1px solid #20ce65;
} */

td p{
  font-size: 16px;
  color: #20ce65;
  font-weight: 600;
}

th:first-child{
  padding: 48px 0px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}

td:first-child{
  padding: 30px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}

td:first-child{
  background-color: transparent;
  border: none;
}

.collapsible .content {
  display: none;
}

table.fixed-width th:first-child,
table.fixed-width td:first-child {
    width: 30%;
}

/* table.fixed-width th:nth-child(2),
table.fixed-width th:nth-child(3),
table.fixed-width th:nth-child(4),
table.fixed-width td:nth-child(2),
table.fixed-width td:nth-child(3),
table.fixed-width td:nth-child(4) {
    width: 20%;
} */

.select-pricing{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #CFCFCF;
  gap: 14px;
  font-size: 30px;

  select{
    width: max-content;
  }
}

.setupFee-container{
  display: flex;
  justify-content: center;
  padding-bottom: 40px;
  /* padding-top: 30px; */
}

#setupFee{
  color: #20ce65;
  font-size: 36px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 18px;

  p{
    color: #fff;
    font-size: 16px;
    font-weight: 600;
  }
}

.contact-number{
  display: flex;
  gap: 8px;
}

.contact-type{
  font-weight: 500;
}

.contact-details{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.faq-button-container{
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.social-media li{
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #20ce65;
  font-size: 1.5rem;
  display: inline-flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.social-media li a i{
  color: #040913;
}

.social-media {
  list-style: none;
  display: inline-flex;
  gap: 1rem;
  margin-bottom: 0;
  padding-left: 0;
}

.faq-page-section{
  margin-top: 70px;
}

/* Style for Inner Page */

.inner-page-hero{
  min-height: 40vh;
  background-color: #091022;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("/assets/sol-bg-final.svg");
  background-size: auto;

  h1{
      font-size: 46px;
      color: #fff;
  }

  img{
      position: absolute;
      top: 0;
      left: 0;
  }
}

.inner-page-container .wrapper{
  padding: 50px 20px;
}

.content-box{
  padding: 24px 0;
}

.content-box-heading{
  font-size: 24px;
}

.content-box-text{
  font-size: 16px;
  padding-top: 18px;
  font-weight: 400;
  color: #9D9DA3;
}

.select-pricing-container{
  display: flex;
  gap: 24px;
  align-items: center;
}

.background-clip{
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  object-fit: cover;
}

@media (max-width: 768px) {
  .simplify .background-clip {
    aspect-ratio: 9 / 16;
    height: 100%;
  }
  .background-clip{
    aspect-ratio: 16 / 9;
  }
  .features .background-clip {
    aspect-ratio: 9 / 16;
    height: 100%;
  }

  .hero-conatiner{
    margin-top: 5rem;
  }
}


/* Style for Footer */

@media (max-width: 1024px) { /* Target mobile and tablet screens */
  footer {
    padding: 3rem 0;
  }
}

@media (max-width: 767px) { 
  .footer-container {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    text-align: center;
  }

  .logo-container{
    justify-content: center !important;
    align-items: center !important;
  } 
  
  .copyright{
    justify-content: center !important;
    align-items: center !important;
    padding-top: 2rem;
  } 

  .invoice-logo  img{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

}


footer .copyright{
  display: flex;
  justify-content: end;
  flex-direction: column;
  align-items: flex-end;

  p a{
      color: #fff;
      text-decoration: none;
  }
} 

.footer-container {
  display: flex;
  max-width: 1200px;
  padding: 0 24px;
}

footer .xprodedge-branding {
  width: 100%;
}

footer .copyright {
  padding-bottom: 2rem;
  width: 100%;
  gap: 1rem;
}



footer .logo-container p{
  color: #9E9E9E;
}

footer .logo-container{
  padding-bottom: 2rem;
  width: 100%;
  display: flex;
  justify-content: end;
  flex-direction: column;
  align-items: flex-start;
  gap:1rem;
} 

footer .social-links{
  display: flex;
  gap: 1.25rem;

  img{
      width: 32px;
      height: 32px;
  }
}

footer .copyright p{
  color: #9E9E9E;
  font-size: 0.875rem;
  text-align: right;
}

footer .privacy-policy{
  display: flex;
  gap: 1rem;
}

footer .privacy-policy a{
  color: #9E9E9E;
  text-decoration: none;
  font-size: 0.875rem;
}

footer .privacy-policy a:hover{
  color: #fff;
}

.unit-of{
  display: flex;
  gap:8px;
  color: #fff;
  flex-direction: row;
}

.unit-of-mb{
  display: flex;
  gap:8px;
  color: #fff;
  flex-direction: row;
  align-items: center;
  display: none;
}

img {
  max-width: 100%;
  display: block;
}

.invoice-logo  img{
  width: 80%;
}


/* Style for Contact Section */

.contact .contents{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5em;
}

.contact .section-heading{
  width: 100%;
}

.contact-details-container{
  display: grid;
  grid-template-columns: 4fr 8fr ;
  gap: 1.5rem;
  padding-top: 3rem;
}

@media (max-width: 768px) { 
  .contact-details-container {
    grid-template-columns: 12fr; /
  }

  footer .xprodedge-branding {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  .contact-heading p {
    width: 90%;
    text-align: center;
  }

  .contact-heading h2, h3{
    width: 100%;
    text-align: center;
  }
}

.contact-details-container .contact-details{
  border-radius: 2.25rem;
  border: 1px solid #20CE65;
  backdrop-filter: blur(10px);
  padding: 1.88rem;

  .icon{
      padding-top: 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  h4{
      text-align: left;
      color: #ffffff;
      font-size: 1.3125rem;
      font-weight: 400;
      line-height: normal;
      padding-bottom: 1.5rem;
  }

  .sub-title{
      color: #9e9e9e;
      font-size: 0.875rem;
      font-weight: 400;
      line-height: normal;
      padding-top: 1rem;
      padding-bottom: 1rem;
  }
}

.contact-form h4 {
      text-align: left;
      color: #ffffff;
      font-size: 1.3125rem;
      font-weight: 400;
      line-height: normal;
      padding-bottom: 1.5rem;
}

.contact-details-container .contact-form{
  border-radius: 2.25rem;
  border: 1px solid rgba(176, 176, 176, 0.20);
  background: #20CE65;
  backdrop-filter: blur(10px);
  padding: 1.88rem;
}

.contact-details-card.singapore{
  padding: 0.75rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;

  img{
      width: 36px;
      height: 36px;
  }
  

  h5{
      color: #9e9e9e;
      font-size: 0.875rem;
      font-weight: 400;
      line-height: normal;
  }

  .contact-number{
      color: #FFF;
      font-size: 1.125rem;
      font-weight: 400;
      line-height: normal;
  }
}


.contact-details-card.india{
  padding: 0.75rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  border-top: 1px solid #20CE65;

  img{
      width: 36px;
      height: 36px;
  }
  

  h5{
      color: #9e9e9e;
      font-size: 0.875rem;
      font-weight: 400;
      line-height: normal;
  }

  .contact-number{
      color: #FFF;
      font-size: 1.125rem;
      font-weight: 400;
      line-height: normal;
  }

  a{
      text-decoration: none;
  }
}

.contact-info-sn{
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.contact-info{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.icon-2{
  display: flex;
  justify-content: center;
}


.form-item{
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

label{
  color: #FFF;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: normal;
}

label::after{
  content: " *";
  color: red;
}

.form-row{
  display: flex;
  gap: 0.75rem;

  .form-item{
      width: 100%;
  }
}

#my-form{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact .form-item input, .contact .form-item textarea, select, input[type="number"] {
  display: flex;
  padding: 10px 0;
  justify-content: center;
  align-items: flex-start;
  border-radius: unset;
  border: 0;
  border-bottom: 1px solid #ffffff;
  background: #20CE65;
  color: #fff;
}


#name::placeholder,
#email::placeholder,
#message::placeholder,
#type-of-industry::placeholder,
#nos-of-emp::placeholder {
  color: #ffffff;
}

.left-contact {
width: 100%;
}

.contact-lastsection{
  display: flex;
}

@media (min-width: 768px) {
.contact-form {
  clip-path: polygon( 85.359% 4.055%,85.359% 4.055%,84.771% 3.311%,84.146% 2.637%,83.487% 2.034%,82.798% 1.506%,82.083% 1.054%,81.343% 0.68%,80.584% 0.385%,79.807% 0.172%,79.018% 0.043%,78.218% 0%,5.049% 0%,5.049% 0%,4.23% 0.091%,3.453% 0.353%,2.729% 0.773%,2.067% 1.336%,1.479% 2.028%,0.974% 2.834%,0.564% 3.742%,0.257% 4.735%,0.066% 5.8%,0% 6.923%,0% 92.988%,0% 92.988%,0.066% 94.111%,0.257% 95.176%,0.564% 96.169%,0.974% 97.076%,1.479% 97.883%,2.067% 98.575%,2.729% 99.138%,3.453% 99.558%,4.23% 99.82%,5.049% 99.911%,94.889% 99.911%,94.889% 99.911%,95.708% 99.82%,96.485% 99.558%,97.209% 99.138%,97.871% 98.575%,98.459% 97.883%,98.964% 97.076%,99.374% 96.169%,99.68% 95.176%,99.872% 94.111%,99.938% 92.988%,99.938% 29.781%,99.938% 29.781%,99.906% 28.684%,99.812% 27.602%,99.657% 26.537%,99.442% 25.496%,99.169% 24.482%,98.839% 23.501%,98.454% 22.556%,98.015% 21.653%,97.523% 20.796%,96.98% 19.99%,85.359% 4.055% );
}
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
border-bottom: 1px solid #ffffff !important;
outline: #ffffff;
}

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="number"]:focus-visible,
select:focus-visible,
textarea:focus-visible {
border-bottom: 1px solid #ffffff !important;
outline: #ffffff;
}

input[type="text"]:active,
input[type="email"]:active,
input[type="tel"]:active,
input[type="number"]:active,
select:active,
textarea:active{
border-bottom: 1px solid #ffffff !important;
outline: #ffffff;
}

.contact-button{
  background: #131A2A;
  border-radius: 2000px;
  color: #ffffff;
  padding: 12px 24px;
  border: none;
  margin-top: 3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-button{
  display: flex;
  justify-content: left;
  align-items: flex-start;
  flex-direction: column;
  p{
      color: #fff;
  }
}

#my-form-status {
  margin-top: 2rem;
}


.btn:disabled {
  border: 1px solid #8cffba56;
  color: #8cffba56;
  pointer-events: none;
}