@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --teal: #20c997;
  --teal-dark: #17a589;
  --primary-dark: #1a365d;
  --purple: #6f42c1;
  --purple-light: #9b6bcc;
  --gradient-hero: linear-gradient(283deg, rgba(255, 255, 255, 0.70) 0%, rgba(232, 243, 255, 0.70) 49.57%, #75C6FF 98.19%);
  --button-bg: linear-gradient(90deg, #2961EB 0%, #7C3AED 100%);
  --gradient-dark: linear-gradient(135deg, #1a365d 0%, #2d3748 50%, #4a5568 100%);
  --gradient-blue-purple: linear-gradient(135deg, #2563eb 0%, #6f42c1 100%);
  --gradient-section: linear-gradient(135deg, #1e3a5f 0%, #2d1b4e 100%);
  --font-family: "Poppins", sans-serif;
  --black: #000000;
  --orange: #FF5A19;
  --gray-color: #414141;
  --white: #ffffff;
  --primary-color: #0072BC;
  --trav: #05B3DC;
  --suite: #71BE44;
  --ready-build: linear-gradient(256deg, #6F1596 0.21%, #1D3DAF 45.02%, #102C93 74.9%, #128385 99.79%);
}

body {
  font-family: var(--font-family);
  color: var(--black);
  font-size: 15px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family);
}

p {
  font-family: var(--font-family);
}

* {
  margin: 0px;
  padding: 0px;
}

img,
a img {
  border: none;
  outline: none;
}

a,
a:hover {
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

/* Hero Section */
.hero-section {
  background-image: url(../images/banner-yts.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
  padding: 40px 0px;

}

.hero-section::before {
  background: var(--gradient-hero);
  position: absolute;
  left: 0px;
  height: 100%;
  width: 100%;
  content: "";
  top: 0px;
  left: 0px;
  z-index: 9;
}

.hero-container {
  position: relative;
  z-index: 99;
}

.hero-section figure img {
  width: 100%;
}

.hero-wrapper {
  gap: 1.25rem;
  display: flex;
  flex-direction: column;
}

.hero-title {
  color: var(--black);
  font-size: 3.175rem;
  font-weight: 700;
  line-height: 110%;
  font-family: var(--font-family)
}

.hero-title span {
  color: var(--orange);
  font-family: var(--font-family)
}

.hero-subtext {
  color: var(--gray-color);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  font-family: var(--font-family)
}

.hero-subtext span {
  font-weight: 900;
  line-height: 160%;
  letter-spacing: 0.025rem;
  font-family: var(--font-family)
}

.cloud-solution {
  display: flex;
  padding-top: 5px;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  align-self: stretch;
}

.cloud-solution ul {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.9375rem;
}

.cloud-solution ul li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-family)
}

.cloud-solution ul li span {
  font-size: 1.175rem;
  font-weight: 600;
  line-height: 130%;
  color: var(--gray-color);
  font-family: var(--font-family)
}

.hero-button {
  display: inline-flex;
  align-items: flex-start;
  gap: 1.875rem;
  align-items: center;
}

.hero-button a.button-download {
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--primary-color);
}

.hero-button a.button-download:hover {
  color: var(--black);
}

.hero-button .button-price {
  border-radius: 0.3125rem;
  background: var(--button-bg);
  box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.25);
  padding:0.9rem 1.25rem;
  color: var(--white);
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 160%;
  font-family: var(--font-family);


}
.launch-timeline .hero-button .button-price {
    width: 100%;
}
.hero-button span {
  font-family: var(--font-family);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 160%;
}

.hero-button .button-price span.price {
  color: #FFCE8A;
}

.support-section {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.support-iocn h5 {
  color: var(--black);
  font-size: 1rem;
  font-weight: 600;
  line-height: 140%;
  font-family: var(--font-family)
}

.support-iocn p {
  color: var(--black);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 140%;
  font-family: var(--font-family)
}

.hero-wrapper-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.hero-wrapper-content h5 {
  color: var(--primary-color);
  font-size: 1.375rem;
  font-style: italic;
  font-weight: 600;
  line-height: 130%;
  font-family: var(--font-family)
}

/* One Stop Solution */
.solution-section {
  padding: 40px 0px;
}

.feature-image {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.feature-image img {
  max-width: 90%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.solution-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.solution-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3125rem;
}

.solution-area h3 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 150%;
  font-family: var(--font-family)
}

.brand-first {
  color: var(--primary-color);
}

.brand-second {
  color: var(--trav);
}

.brand-third {
  color: var(--suite);
}

.title-header {
  color: var(--black);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 130%;
  font-family: var(--font-family)
}

.solution-area p {
  color: var(--black);
  font-size: 0.9375rem;
  font-weight: 400;
  font-family: var(--font-family);
  line-height: 180%;
}

.solution {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.875rem;
}

.feature-block {
  display: flex;
  justify-content: center;
  align-items: start;
  gap: 0.9375rem;
}

.feature-block .icon {
  display: flex;
  padding: 0.75rem;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.3125rem;
}

.feature-block .icon.icon-feature-first {
  background: #006CB5;
}

.feature-block .icon.icon-feature-second {
  background: #F07342;
}

.feature-block .icon.icon-feature-third {
  background: #009D59;
}

.feature-block-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.feature-block-content h5 {
  color: var(--black);
  font-family: "Poppins", sans-serif;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  font-family: var(--font-family);
}

.feature-block-content p {
  color: var(--black);
  font-family: var(--font-family);
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  color: #767676;
}

/*pre-integrated*/
.pre-integrated {
  background-color: #0A63B5;
  padding: 40px 0px;
}

.supplier-tooltip .tooltip-inner {
  background-color: var(--white);
  color: var(--primary-color);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 4px;
  font-weight: 700;
}

/* 🔥 TOP arrow color FIX */
.supplier-tooltip[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: var(--white);
}

/* Steps Section */
.steps-section {
  background: linear-gradient(273deg, #6900C7 0.13%, #3D3CD9 50.07%, #0269AF 100%);
  padding: 50px 0px;
  ;
}

.steps-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.75rem;
}

.signup-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.signup-section h2 {
  color: var(--white);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 160%;
  margin: 0px;
  font-family: var(--font-family);
}

.signup-section h4 {
  margin: 0px;
  border-radius: 0.625rem;
  background: linear-gradient(90deg, #EC5216 0%, rgba(236, 82, 22, 0.00) 100%);
  display: flex;
  padding: 0.625rem 4.375rem 0.625rem 1.25rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.3125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: var(--white);
  font-family: var(--font-family);
}

.steps-items {
  padding: 30px 0px;
  position: relative;
}

.steps-items .line-getsteps::before,
.steps-items .line-getsteps::after {
  content: "";
  height: 12px;
  width: 12px;
  position: absolute;
  left: -5px;
  border: 0px;
  z-index: 9;
  background-color: #E2F1FB;
  border-radius: 100%;
}

.steps-items .line-getsteps::before {
  top: 0px;
}

.steps-items .line-getsteps::after {

  bottom: 0px;
}

.steps-items .line-getsteps {
  height: 100%;
  width: 1px;
  position: absolute;
  left: 0px;
  top: 0px;
  /* background-color: var(--white); */
  background: repeating-linear-gradient(to bottom, var(--white) 0, var(--white) 8px, transparent 8px, transparent 18px);
  z-index: 9;
}

.step-module {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.875rem;
  z-index: 99;
  position: relative;
}

.step-block {
  display: flex;

  gap: 1rem;
  width: 100%;
}

.step-block h6.number {
  display: flex;
  width: 42px;
  padding: 0.3125rem 0.625rem;
  justify-content: center;
  align-items: center;
  border-radius: 1.875rem;
  background: #FFF;
  color: var(--black);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 180%;
  height: 42px;
  left: -21px;
  position: relative;
  top: 11px;
  font-family: var(--font-family);
}

.step-item {
  display: flex;
  align-items: start;
  gap: 1.0625rem;
}

.step-item span.step-icon {

  border-radius: 0.3125rem;
  display: flex;
  padding: 0.75rem;
  align-items: center;
  gap: 1.25rem;
}

.step-item span.icon-one {
  background: #06B699;
}

.step-item span.icon-two {
  background: #FFD044;
}

.step-item span.icon-three {
  background: #409FFF;
}

.step-item span.icon-four {
  background: #B865FF;
}

.step-content h3 {
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 140%;
  font-family: var(--font-family);
}

.step-content p {
  color: var(--white);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  font-family: var(--font-family);
  margin: 0px;
}

.timeline-card {
  border-radius: 0.625rem;
  background: var(--white);
  padding: 1.88rem;
}

.launch-header {
  display: flex;
  justify-content: space-between;
}

.price-modal {
  position: absolute;
  right: -37px;
  top: -42px;
}

.price-modal h4 {
  color: var(--white);
  font-size: 1.90rem;
  font-weight: 700;
  line-height: 120%;
  padding-right: 0px;
  font-family: var(--font-family);
  margin: 0px;
}

.price-area h6.line-price {
  color: var(--white);
  font-family: var(--font-family);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 140%;
  text-decoration-line: line-through;
  margin: 0px;
  font-style: italic;
}

.price-area {
  position: absolute;
  bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 94%;
  flex-direction: column;
  height: 56px;
}

.launch-title h5 {
  color: var(--black);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 140%;
  font-family: var(--font-family);
}

.launch-title h2 {
  color: var(--primary-color);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 120%;
  font-family: var(--font-family);
}

.launch-timeline {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.launch-timeline .hero-button span {
  font-size: 1.25rem;
  font-family: var(--font-family);
}


.combination p {
  color: var(--black);
  font-size: 0.8125rem;
  font-style: italic;
  font-weight: 400;
  line-height: 180%;
  font-family: var(--font-family);
}

.launch-list ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
}

.launch-list ul li {
  width: 100%;
  border-radius: 0.3125rem;
  border: 1px solid #E7E7E7;

  background: #F9FAFB;
  display: flex;
  padding: 0.625rem 1.25rem;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  color: var(--black);
  font-family: var(--font-family);
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 180%;
}

.launch-list ul li span {
  font-weight: 700;
  line-height: 180%
}

.launch-list ul li .day-one {
  color: #2563EB;
}

.launch-list ul li .day-two {
  color: #653BDE;
}

.launch-list ul li .day-five {
  color: #F6A20B;
}

.launch-list ul li .day-seven {
  color: #1DAF7D;
}

/* Section height */
.feature-sticky-section {
  padding: 50px 0px;
  background: url(../images/bg-features.svg) no-repeat center bottom #F8F9FB;
}

.feature-row {
  display: flex;
  justify-content: space-between;
}

.feature-row .feature-left,
.feature-row .feature-right {
  width: 49%;
}

.left-sticky-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.175rem;
}

.left-sticky-content h2 {
  color: var(--black);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 120%;
  font-family: var(--font-family);
}

.left-sticky-content p {
  color: var(--black);
  font-size: 1.0625rem;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
  font-family: var(--font-family);
}

.button-request a.btn {
  border-radius: 0.3125rem;
  background: linear-gradient(90deg, #0D70E8 0%, #05B3DC 100%);
  display: flex;
  padding: 0.9375rem 2.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  color: var(--white);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 160%;
  font-family: var(--font-family);
}

.custom-features h3 {
  color: #000;
  font-family: var(--font-family);
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.feature-card-custom {
  border-radius: 0.625rem;
  background: #ECECEC;
  /* box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.15); */
  display: flex;
  padding: 1.25rem;
  align-items: center;
  align-self: stretch;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.right-scroll-content {
  /* max-height: calc(60vh - 80px); */
  /* overflow: hidden; */
  padding: 0px;

}

.right-scroll-content .slick-arrow.slick-next {
  width: 46px;
  height: 46px;
  z-index: 5;
  border-radius: 12.5rem;
  background: #ffffff;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.15);
  right: -50px;
}

.right-scroll-content .slick-arrow::before {
  display: none;
}

.custom-features .slick-dotted.slick-slider {
  margin: 0px;
}

.feature-card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.feature-card-wrapper h5 {
  color: var(--black);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 140%;
  font-family: var(--font-family);
}

.feature-card-wrapper p {
  color: var(--black);
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
  font-family: var(--font-family);
}

.feature-card-wrapper a.btn-link {
  border-radius: 0.3125rem;
  border: 1px solid var(--primary-color);
  display: flex;
  padding: 10px 30px;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  color: var(--primary-color);
  font-size: 1.125rem;
  text-decoration: none;
  font-weight: 600;
  line-height: 160%;
  font-family: var(--font-family);
}

.feature-card-wrapper a.btn-link:hover {
  background-color: var(--primary-color);
  color: var(--white);
}

.feature-card-wrapper a.btn-link:hover svg path {
  fill: var(--white);
}

/* Owl Nav Buttons */
.supplier-section {
  padding: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.80rem;
}

.supplier-section h2 {
  color: var(--white);
  text-align: center;
  font-size: 2.25rem;
  font-weight: 600;
  font-family: var(--font-family);
}

.suppliers-slider {
  width: 100%;
  margin: auto;
}

.suppliers-slider .slick-slide {
  padding: 15px;
}

.suppliers-slider .slick-arrow {
  width: 46px;
  height: 46px;

  z-index: 5;
  border-radius: 12.5rem;
  background: var(--white);
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.15);
}

.suppliers-slider .slick-prev {
  left: -50px;
}

.suppliers-slider .slick-next {
  right: -50px;
}

.suppliers-slider .slick-arrow::before {
  display: none;
}

.suppliers-slider .brand-image {
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 0 9px rgba(0, 0, 0, 0.10);
  display: flex;
  padding: 1.375rem 1.625rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  height: 6.25rem;
}

.suppliers-slider .brand-item img {
  max-height: 40px;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}


.suppliers-slider .owl-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #fff !important;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  box-shadow: 0 0px 10px rgba(0, 0, 0, .1);
  font-family: var(--font-family);
}

.suppliers-slider .owl-nav .owl-prev {
  left: -55px;
}

.suppliers-slider .owl-nav .owl-next {
  right: -55px;
}

.suppliers-slider .owl-nav span {
  font-size: 20px;
  font-weight: bold;
}

.right-scroll-content::-webkit-scrollbar {
  width: 6px;
}

.right-scroll-content::-webkit-scrollbar-thumb {
  background: #d0d7ff;
  border-radius: 4px;
}

/* Advantage of yTravSuite */
.advantage-section {
  padding: 50px 0px;
  background: #F1F1F1;
}

.advantage-container {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1.875rem;
}

.advantage-section h2 {
  color: var(--black);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 120%;
  font-family: var(--font-family);
}

.advantage-section h6 {
  color: var(--black);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 120%;
  font-family: var(--font-family);
}

.advantage-card {
  border: 1px solid #E7E7E7;
  background: #FFF;
  display: flex;
  padding: 0.5625rem 0.625rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
}

.advantage-card-body {
  background: #F8F9FB;
  display: flex;
  padding: 0.9375rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  width: 100%;
}

/* Advantage cards */
.advantage-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border-radius: 0.3125rem;
}

.advantage-icon.icon-one {
  background: #2A6BEE;
}

.advantage-icon.icon-two {
  background: #A855F7;
}

.advantage-icon.icon-three {
  background: #22C55E;
}

.advantage-icon.icon-four {
  background: #E58808;
}

.advantage-icon.icon-five {
  background: #EF4444;
}

.advantage-icon.icon-six {
  background: #6366F1;
}

.advantage-icon.icon-seven {
  background: #EC4899;
}

.advantage-icon.icon-eight {
  background: #14B8A6;
}

.advantage-icon.icon-nine {
  background: #06B6D4;
}

.advantage-icon.icon-ten {
  background: #EAB308;
}

.advantage-icon.icon-eleone {
  background: #409FFF;
}

.advantage-icon.icon-twelve {
  background: #B865FF;
}

.advantage-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
}

.advantage-content h5 {
  color: var(--black);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 140%;
  font-family: var(--font-family);
}

.advantage-content h5 span {
  font-weight: 400;
  font-size: 0.8125rem;
  font-family: var(--font-family);
}

.advantage-content p {
  color: var(--black);
  font-size: 1rem;
  font-weight: 400;
  line-height: 180%;
  font-family: var(--font-family);
}

.advantage-row {}

/* Smarter Control */
.small-icon-box {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

/* Secure Section */
.secure-section {
  background: linear-gradient(273deg, #6900C7 0.13%, #3D3CD9 50.07%, #0269AF 100%);

  padding: 50px 0px;

}

.secure-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.secure-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3125rem;
}

.secure-content h5 {
  color: var(--white);
  font-size: 1.375rem;
  font-weight: 600;
  font-family: var(--font-family);
}

.secure-content p {
  color: var(--white);
  font-size: 1.25rem;
  font-weight: 500;
  font-family: var(--font-family);
}

/*themes-section*/
.themes-section {
  background: #F8F9FB;
  padding: 50px 0px;
}

.ourallthemeslide {
  width: 100%;
  margin: auto;
}

.themes-section h2 {
  color: var(--black);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 140%;
  font-family: var(--font-family);
}

.themes-section p {
  color: var(--black);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 160%;
  font-family: var(--font-family);
}

.ourallthemeslide .slick-slide {
  opacity: 0.35;
  transform: scale(0.78);
  transition: all 0.45s ease;
}

.ourallthemeslide .slick-center {
  opacity: 1 !important;
  transform: scale(1) !important;
  z-index: 2;
}

.themeitmes {
  text-align: center;
}

.themeimgcard img {
  width: 100%;
  max-width: 620px;
  margin: auto;
  display: block;
}

.themeitmes h3 {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  font-family: var(--font-family);
}

.ourallthemeslide .slick-arrow {
  width: 46px;
  height: 46px;

  z-index: 5;
  border-radius: 12.5rem;
  background: var(--white);
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.15);
}

.ourallthemeslide .slick-prev {
  left: 0px;
}

.ourallthemeslide .slick-next {
  right: 0px;
}

.ourallthemeslide .slick-arrow::before {
  display: none;
}

.theme-button {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 30px 0px 0px;
}

.theme-button h3 {
  margin: 0px;
  border-radius: 0.3125rem;
  background: linear-gradient(90deg, #0D70E8 0%, #05B3DC 100%);
  display: flex;
  padding: 0.875rem 3.125rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  color: var(--white);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 160%;
  font-family: var(--font-family);
}

/*testimonials-section*/
.testimonials-section-landing {
  background-color: #F8F9FB;
  padding: 50px 0px;
}

.testimonials-section-landing h2 {
  color: var(--black);
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  font-family: var(--font-family);
}

.testimonials-section-landing p {
  color: var(--black);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  font-family: var(--font-family);
}

.testimonialsslide .slick-slide {
  padding: 20px 15px;
}

.testimonial-card {
  padding: 0px;
  background: none;
}

.testimonial-card .card-body {
  background-color: var(--white);
  border-radius: 1.25rem;
  box-shadow: 2px 2px 19px 0 rgba(0, 0, 0, 0.15);
  padding: 1.25rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  display: flex;

}

.testimonial-card .star-rating {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
}

.testimonial-card .star-rating i {
  color: #FBBF24;
  font-size: 1.25rem;
}

.testimonial-card p {
  font-size: 1.1875rem;
  font-style: italic;
  font-weight: 400;
  line-height: 160%;
  font-family: var(--font-family);
}

.testimonial-user {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.testimonial-user span.user-word {
  border-radius: 2.5rem;
  background: #2B6CEE;
  display: flex;
  padding: 0.8125rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  color: var(--white);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 160%;
}

.user-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.user-details h5 {
  color: var(--black);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 160%;
  font-family: var(--font-family);
}

.testimonial-card .user-details p {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 130%;
}

/* Why Choose */
.choose-section {
  padding: 50px 0px;
}

.choose-section h2 {
  color: var(--black);
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  font-family: var(--font-family);
}

.choose-section p {
  color: var(--black);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  font-family: var(--font-family);
}

.Choose-image--left {
  position: absolute;
  right: 0px;
  bottom: 50px;
  /* max-width: 450px; */
  left: auto;
}

.image--blue {
  background: var(--primary-color);
  align-items: center;
  display: flex;
  max-width: 150px;
  min-width: 150px;
  justify-content: center;
  border-radius: 5px 0px 0px 20px;
  flex-wrap: wrap;
}

.image--blue img {
  width: auto;
}

.image--blue h5 {
  font-size: 1rem;
  line-height: normal;
  font-weight: 500;
  width: 100%;
  color: var(--white);
  font-family: var(--font-family);
}

.image--white {
  background: #EEECEC;
  border-radius: 0px 5px 20px 0px;
  max-width: 220px;
  min-width: 200px;
}

.image--white li {
  padding: 10px 15px;
  border-bottom: 1px solid var(--white);
  line-height: 24px;
  font-size: 1rem;
  font-family: var(--font-ragular);
  display: flex;
  font-family: var(--font-family);
}

.image--item {
  padding: 10px;
  color: var(--white);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.image--item span.icon-choose {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fff;
  border-radius: 100%;
}

.image--item.color-1 {
  background: #E2465D;
}

.image--item.color-2 {
  background: #EFAA42;
}

.image--item.color-3 {
  background: #4467E0;
}

.image--item.color-4 {
  background: #8226D2;
}

.main-image--area {
  justify-content: end;
  width: 100%;
  display: flex;
}

.main-image--area img {
  width: 100%;
  height: auto;
}

.choose-wraaper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2.1875rem;
}

.choose-item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  align-self: stretch;
}

span.choose-icon {
  border-radius: 0.3125rem;

  display: flex;
  padding: 0.9375rem;
  align-items: center;
  gap: 0.625rem;
}

.choose-content h5 {
  color: var(--black);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 160%;
  font-family: var(--font-family);
}

.choose-content p {
  color: #999;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 160%;
  font-family: var(--font-family);
}

.choose-first {
  background: #06B699;
}

.choose-two {
  background: #FFD044;
}

.choose-three {
  background: #8640FF;
}

.choose-four {
  background: #409FFF;
}

.choose-five {
  background: #3B3DD7;
}

.choose-six {
  background: #B865FF;
}

.faq-section .accordion-button::after {
  background-size: 12px;
}

.faq-section .accordion-item h2 {
  padding: 2px 0px !important;
}

.faq-section .accordion-button .no {
  margin-right: 30px !important
}

.faq-section .accordion-body {
  padding: 0px 0px 20px 45px !important;
}

.faq-section button.accordion-button {
  padding: 5px 0px !important;
}

@media screen and (max-width:1399px) {
  .cloud-solution ul li span {
    font-size: 0.975rem;
  }

  .hero-button span {
    font-size: 1.25rem;
  }

  .hero-title {
    font-size: 3rem;
  }

  .hero-subtext {
    font-size: 1rem;
  }

  .hero-wrapper-content h5 {
    font-size: 1.2rem;
  }

  .title-header {
    font-size: 2rem;
  }

  .solution-area p {
    font-size: 0.9rem;
    line-height: 160%;
  }

  .solution-wrapper {
    gap: 1rem;
  }

  .solution {
    gap: 1rem;
  }

  .feature-block-content p {
    font-size: 0.8rem;
    line-height: 140%;
  }

  .left-sticky-content h2 {
    font-size: 2rem;
    line-height: 120%;

  }



  .step-content h3 {
    font-size: 1.25rem;
  }

  .testimonials-section h2 {
    font-size: 2rem;
  }

  .choose-section h2 {
    font-size: 2rem;
  }

  .themes-section h2 {
    font-size: 2.5rem;
  }

  .signup-section h2 {
    font-size: 2rem;
  }

  .signup-section h4 {
    font-size: 1rem;
  }

  .cloud-solution ul li span {
    font-size: 0.9rem;
    line-height: 130%;
  }

  .advantage-section h2 {
    font-size: 2rem;
  }

  .advantage-content h5 {
    font-size: 1rem;
  }

  .supplier-section h2 {
    font-size: 2rem;
  }

  .testimonials-section-landing h2 {
    font-size: 2rem;
  }
}

@media screen and (max-width: 1199px) {
  .hero-title {
    font-size: 2.25rem;
  }

  .hero-wrapper-content h5 {
    font-size: 1rem;
  }

  .hero-button span {
    font-size: 1rem;
  }

  .cloud-solution ul li span {
    font-size: 12px;

  }

  .title-header {
    font-size: 1.5rem;
  }

  .advantage-section h6 {

    font-size: 1rem;
  }

  .left-sticky-content {

    gap: 1rem;
  }

  .left-sticky-content p {
    font-size: 1rem;
  }

  .signup-section h4 {
    font-size: 1rem;
    padding: 10px 20px;
  }

  .step-content h3 {
    font-size: 1rem;
  }

  .step-content p {
    font-size: 14px;
    line-height: 140%;
  }

  .launch-timeline .hero-button span {
    font-size: 14px;
    font-family: var(--font-family);
  }

  .launch-timeline .hero-button span svg {
    display: none;
  }

  .combination p {
    font-size: 13px;
    line-height: 160%;
  }

  .themes-section h2 {
    font-size: 2rem;
  }

  .themes-section p {
    font-size: 15px;
    line-height: 160%;
  }

  .secure-wrapper {

    gap: 1rem;
  }

  .secure-content h5 {
    font-size: 1rem;
  }

  .secure-content p {
    font-size: 15px;
  }

  .choose-section h2 {
    font-size: 1.5rem;
  }

  .choose-wraaper {
    gap: 1rem;
  }

  .choose-content p {
    font-size: 13px;
  }

  .testimonials-section-landing h2 {
    font-size: 1.5rem;
  }

  .testimonial-card .card-body {
    padding: 1rem;
    gap: 10px;
  }

  .testimonial-card p {
    font-size: 15px;

  }

  .launch-title h5 {
    font-size: 1rem;
  }

  .launch-title h2 {
    font-size: 2rem;
  }
}

@media screen and (max-width: 991px) {
  .slick-next {
    right: 0px !important;
  }

  .right-scroll-content .slick-arrow.slick-next {
    right: 0px;
  }

  .advantage-row .col-12.col-md-6 {
    margin-bottom: 15px !important;
  }

  .slick-prev {
    left: 0px !important;
  }

  .hero-container figure {
    margin-top: 20px;
  }

  .left-sticky-content {
    margin-bottom: 20px;
  }

  .steps-items {
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 767px) {
  .price-modal {
    position: absolute;
    right: 0px;
    top: -61px;
  }

  .steps-items .line-getsteps {
    display: none;
  }

  .step-block h6.number {
    left: 0px;
    top: 11px;
  }

  .secure-wrapper {
    gap: 1rem;
    margin-bottom: 30px;
  }

  .Choose-image--left {
    display: none !important;
  }

  .cloud-solution ul {
    width: 100%;

    flex-wrap: wrap;
  }

  .cloud-solution ul li {
    gap: 0.5rem;
    width: 48%;
  }

  .cloud-solution ul li span {
    font-size: 1rem;
  }

  .feature-row .feature-left,
  .feature-row .feature-right {
    width: 100%;
  }

  .feature-row {
    flex-wrap: wrap;
    gap: 15px;
  }

  .supplier-section h2 {
    font-size: 1.5rem;
  }

  .suppliers-slider .slick-arrow {
    display: none !important;
  }

  .left-sticky-content h2 {
    font-size: 1.5rem;
    line-height: 120%;
  }

  .advantage-section h2 {
    font-size: 1.5rem;
  }

  .advantage-section h6 {
    font-size: 15px;
    line-height: 160%;
  }

  .signup-section h2 {
    font-size: 1.5rem;
  }

  .themes-section h2 {
    font-size: 1.5rem;
  }

  .themes-section h2 {
    font-size: 1.5rem;
  }

  .steps-list {

    gap: 0px;
  }
  .steps-section .hero-button .button-price {
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
  width: 100%;
}

}

@media screen and (max-width: 576px) {

.advantage-section h2 {
        font-size: 1.25rem;
    }
  .cloud-solution ul li {
    width: 100%;
  }

  .hero-button span svg {
    display: none;
  }

  .hero-button .button-price {
    padding: 0.6rem 10px;
    gap: 10px;
  }

  .hero-button span {
    font-size: 15px;
    text-align: left;
  }

  .hero-wrapper .d-flex.flex-wrap.gap-5 {
    gap: 15px !important;
  }

  .support-iocn h5 {
    font-size: 15px;
  }

  .support-iocn p {
    font-size: 14px;
  }

  .title-header {
    font-size: 1.2rem;
    line-height: 160%;
  }

  .feature-block-content h5 {
    font-size: 1rem;
  }

  .hero-button a.button-download {
    gap: 10px;
    font-size: 15px;
  }

  .hero-button .button-price {
    padding: 0.6rem 10px;
    font-size: 15px;
    gap: 7px;
  }

  .hero-button {
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero-button .button-price {
    padding: 0.6rem 10px;
    font-size: 15px;
    gap: 7px;
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .supplier-section h2 {
    font-size: 1.25rem;
  }

  .hero-title {
    font-size: 1.25rem;
  }

  .testimonials-section-landing h2 {
    font-size: 1.25rem;
  }

  .themes-section h2 {
    font-size: 1.25rem;
  }

  .price-modal {
    position: absolute;
    right: -40px;
    top: -42px;
  }

  .price-area h6.line-price {

    font-size: 14px;
    line-height: 140%;
  }

  .price-modal h4 {
    font-size: 1.25rem;
    padding-right: 0px;

  }
    .price-modal {
        right: -20px;
        top: -42px;
        width: 130px;
    }
  .price-modal figure img {
    width: 100%;
  }

      .price-area {
        bottom: 10px;
        width: 88%;
        height: 40px;
    }

  .timeline-card {
    border-radius: 0.625rem;
    background: var(--white);
    padding: 15px;
  }

  .launch-list ul li {
    font-size: 13px;
    line-height: 180%;
  }

  .signup-section {

    flex-wrap: wrap;
  }
  .launch-title h5 {
        font-size: 15px;
    }
    .launch-title h2 {
        font-size: 1.5rem;
    }
    .launch-header {
    display: flex;
    justify-content: space-between;
    position: relative;
}
}



/*Pricing page*/
.flexible-plans{
  padding:50px  0px;
}
.pricing-hero {
    padding: 80px 0;
    position: relative;
    background: linear-gradient(0deg, #18227D 0%, #5E008F 100%);
}

.pricing-hero::before {
  background: url(../images/plans-bg.png) no-repeat center top;
  position: absolute;
  top: 0px;
  left: 0px;
  content: "";
  width: 100%;
  height: 100%;
  z-index: 9;
}
.pricing-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}
.pricing-left h2 {
    color:var(--white);
    font-size: 3.875rem;
    font-weight: 700;
    line-height: 120%;
    font-family: var(--font-family);
}
.pricing-left h2 span{
  color: rgba(255, 255, 255, 0.00);
  text-transform: uppercase;
  -webkit-text-stroke-width: 1px;
  font-family: var(--font-family);
  -webkit-text-stroke-color: var(--white);
}
.pricing-left ul {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-direction: column;
    width: 100%;
}
.pricing-left ul li {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    align-self: stretch;
}
.pricing-left ul li span.icon-plans {
    border-radius: 0.3125rem;
    background: #006CB5;
    display: flex;
    padding: 0.625rem;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-family);
}
.pricing-left ul li h6 {
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 130%;
    font-family: var(--font-family);
}
.pricing-container {
  position: relative;
  z-index: 99
}
.price-right {
    display: inline-flex;
    align-items: center;
    gap: 1.5625rem;
    width: 100%;
    justify-content: center;
}
.price-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1875rem;
    padding: 40px 10px;
    border-radius: 10px;
    width: 13.75rem;
}
.price-item.price-one{
  background-color: rgba(6, 182, 153, 0.8);
}
.price-item.price-two{
  background-color: rgba(236, 82, 22, 0.5);
}
.price-item.price-three{
  background-color: rgba(64, 159, 255, 0.5);
}
.price-item .price-icon {
    border-radius: 0.3125rem;
    background: #FFF;
    display: flex;
    padding: 0.75rem;
    align-items: center;
    gap: 1.25rem;
}
.price-item.price-one .price-icon{
  stroke:#06B699;
}
.price-item.price-two .price-icon{
  fill: #EC5216;
}
.price-item.price-three .price-icon path{
  fill: #409FFF;
}
.price-contant {
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
    display: flex;
    text-align: center;
}
.price-contant h4 {
    color: var(--white);
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 140%;
    font-family: var(--font-family);
}
.price-contant p {
    color:var(--white);
    text-align: center;
    font-family: Poppins;
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    font-family: var(--font-family);
}
.price-heder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.pricing-hero .price-title {
  color: var(--black);
  text-align: center;
  font-size: 3.125rem;
  font-weight: 500;
  line-height: 130%;
  font-family: var(--font-family);
}

.price-list-section .price-list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.price-list-section .price-list li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--black);
  font-size: 1rem;
  font-weight: 500;
  line-height: 130%;
  font-family: var(--font-family);
}

.pricing-list li span {
  display: flex;
  padding: 0.125rem;
  align-items: center;
  gap: 0.625rem;
  border-radius: 1.875rem;
  background: #CAFFE8;
  font-family: var(--font-family);
}

.price-list-section .price-list li svg {
  color: #009D59;
}

.price-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  align-self: stretch;
  border-top: 1px solid rgba(255, 255, 255, 0.50);
  border-bottom: 1px solid rgba(255, 255, 255, 0.50);
  padding: 1.25rem 0px;
}

ul.price-box-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4375rem;
  align-self: stretch;
}

.price-box-list li {
  justify-content: space-between;
  width: 100%;
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  line-height: 186%;
}

.price-box-list li span {
  font-size: 1.25rem;
  font-family: var(--font-family);
}

.price-strike strong {
  font-weight: 600;
}

/* TABS */
.pricing-toggle-wrapper {
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: -32px;
  z-index: 999;
}

.pricing-toggle {
  gap: 6px;
  border-radius: 3.125rem;
  border: 1px solid #969696;
  background: var(--white);
  box-shadow: 0 7px 20px 0 rgba(0, 0, 0, 0.25);
  padding: 6px;
}

.pricing-toggle li.nav-item .nav-link {
  display: flex;
  padding: 0.9375rem 1.875rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 1.875rem;
  font-size: 1.0625rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  font-family: var(--font-family);
  color: var(--black);

}

.pricing-toggle li.nav-item .nav-link.active {
  background: #0060B4;
  ;
  color: var(--white);

}

.price-tab-content {
  padding: 50px 0px;
}

.pricing-card {
  padding: 30px;
  position: relative;

  border-radius: 0.625rem;
  background: linear-gradient(157deg, #2961EB 0%, #7C3AED 98.47%);
  display: inline-flex;
  padding: 1.875rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  width: 100%;
}

.pricing-card .badge {
  display: flex;
  padding: 0.75rem 1.5625rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 1.875rem;
  border: 2px solid #FFF8F8;
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  line-height: 100%;
}

.pricing-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  align-self: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.50);
  padding-bottom: 1.25rem;
}

.pricing-header h4 {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  color: var(--white);
  font-family: var(--font-family);
}

.pricing-header span.small {
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  font-family: var(--font-family);
}

.pricing-list-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
}

.pricing-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;

}

.pricing-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--white);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 178%;
  font-family: var(--font-family);
}

.price-list-section .price-list li i {
  border-radius: 1.875rem;
  background: #CAFFE8;
  display: flex;
  padding: 0.125rem;
  align-items: center;
  gap: 0.625rem;
  width: 1.125rem;
  height: 1.125rem;
}

.strike {
  text-decoration: line-through;
  opacity: .7;
}

.total-box {
  background: #ff9f2e;
  border-radius: 10px;
  justify-content: space-between;
  display: flex;
  padding: 0.75rem 1.25rem;
  align-items: flex-start;
  gap: 0.625rem;
  align-self: stretch;
  color: #FFF;
  font-family: var(--font-family);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  line-height: 180%;
}

.form-card {
  display: flex;
  padding: 1.875rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5625rem;
  border-radius: 0.625rem;
  border: 1px solid #E7E7E7;
  background: #FFF;
}

.form-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
}

.form-header h4 {
  color: var(--black);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 124%;
}

.form-header h4 span {
  color: #0060B4
}

.form-header p {
  color: var(--black);
  font-size: 1rem;
  font-weight: 400;
}

form.form--details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5625rem;
}

.form--details button.button-price {
  min-width: 17.5rem;
  padding: 10px 1.25rem;
}

.form--details .form-group label {
  color: var(--black);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 170%;
}

.form--details .form-group label sup {
  color: red;
}

.form--details .form-group .form-control {
  border-radius: 0.3125rem;
  border: 1px solid #E7E7E7;
  background: #FFF;
  display: flex;
  width: 100%;
  padding: 12px 20px;
  align-items: center;
  gap: 0.9375rem;
}

.form-group {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3125rem;
  flex: 1 0 0;
  display: flex;
}

.form-header h5 {
  color: var(--black);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 124%;
  display: flex;
  align-items: center;
  gap: 0.9375rem;
  align-self: stretch;
  font-family: var(--font-family);
}