/* ------------------------------------------------

 Template Name: Zi 2022
 version: 1.1

 Author: Artncod Interactive Pvt Ltd
 Author website: www.artncod.com
------------------------------------------------ */
/* -----------------------------------------------------------------
    - General Styles
----------------------------------------------------------------- */
*,
::before,
::after {
  background-repeat: no-repeat;
  box-sizing: border-box;
  transition: all 0.1s ease;
}

html {
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  -ms-overflow-x: hidden;
  scroll-behavior: smooth;
}

body,
html {
  font-size: 1rem;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: #ffffff;
  color: var(--textColor);
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 1px;
  -ms-overflow-style: scrollbar;
  -webkit-font-smoothing: antialiased;
}

.mx-auto {
  margin: 0px auto;
}

.mr-auto {
  margin-right: auto;
  margin-left: 0px;
}

.ml-auto {
  margin-left: auto;
  margin-right: 0px;
}

.ml--0 {
  margin-left: 0px;
}

.mr--0 {
  margin-right: 0px;
}

.mt--0 {
  margin-top: 0px;
}
.mt--5 {
  margin-top: 5px;
}
.mt--10 {
  margin-top: 10px;
}
.mt--20 {
  margin-top: 20px;
}
.mt--30 {
  margin-top: 30px;
}
.mt--40 {
  margin-top: 40px;
}
.mt--50 {
  margin-top: 50px;
}
.mt--60 {
  margin-top: 60px;
}
.mt--70 {
  margin-top: 70px;
}
.mt--80 {
  margin-top: 80px;
}
.mt--90 {
  margin-top: 90px;
}
.mt--100 {
  margin-top: 100px;
}

.mb--0 {
  margin-bottom: 0px;
}
.mb--5 {
  margin-bottom: 5px;
}
.mb--10 {
  margin-bottom: 10px;
}
.mb--20 {
  margin-bottom: 20px;
}
.mb--30 {
  margin-bottom: 30px;
}
.mb--40 {
  margin-bottom: 40px;
}
.mb--50 {
  margin-bottom: 50px;
}
.mb--60 {
  margin-bottom: 60px;
}
.mb--70 {
  margin-bottom: 70px;
}
.mb--80 {
  margin-bottom: 80px;
}
.mb--90 {
  margin-bottom: 90px;
}
.mb--100 {
  margin-bottom: 100px;
}

.pt--0 {
  padding-top: 0px;
}
.pt--5 {
  padding-top: 5px;
}
.pt--10 {
  padding-top: 10px;
}
.pt--20 {
  padding-top: 20px;
}
.pt--30 {
  padding-top: 30px;
}
.pt--40 {
  padding-top: 40px;
}
.pt--50 {
  padding-top: 50px;
}
.pt--60 {
  padding-top: 60px;
}
.pt--70 {
  padding-top: 70px;
}
.pt--80 {
  padding-top: 80px;
}
.pt--90 {
  padding-top: 90px;
}
.pt--100 {
  padding-top: 100px;
}

.pb--0 {
  padding-bottom: 0px;
}
.pb--5 {
  padding-bottom: 5px;
}
.pb--10 {
  padding-bottom: 10px;
}
.pb--20 {
  padding-bottom: 20px;
}
.pb--30 {
  padding-bottom: 30px;
}
.pb--40 {
  padding-bottom: 40px;
}
.pb--50 {
  padding-bottom: 50px;
}
.pb--60 {
  padding-bottom: 60px;
}
.pb--70 {
  padding-bottom: 70px;
}
.pb--80 {
  padding-bottom: 80px;
}
.pb--90 {
  padding-bottom: 90px;
}
.pb--100 {
  padding-bottom: 100px;
}

.black-text {
  font-weight: 900;
}

.bold-text {
  font-weight: 700;
}

.semi-bold-text {
  font-weight: 500;
}

.medium-bold-text {
  font-weight: 500;
}

.regular-text {
  font-weight: 400;
}

.light-text {
  font-weight: 300;
}

.capitalize-text {
  text-transform: capitalize;
}

.uppercase-text {
  text-transform: uppercase;
}

.lowercase-text {
  text-transform: lowercase;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

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

.shadow-text {
  text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.61);
}

.letter-space--10 {
  letter-spacing: 10px;
}
.letter-space--20 {
  letter-spacing: 20px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.3;
  letter-spacing: 0px;
  color: var(--titleColor);
  font-family: "Poppins", sans-serif;
}

p {
  font-family: "Poppins", sans-serif;
}

h1 {
  font-size: 4rem;
  font-weight: 500;
}

h2 {
  font-size: 2.8rem;
  font-weight: 500;
}

h3 {
  font-size: 1.8rem;
  font-weight: 400;
}

h4 {
  font-size: 1.5rem;
  font-weight: 400;
}

h5 {
  font-size: 1.2rem;
  font-weight: 400;
}

h6 {
  font-size: 1rem;
  font-weight: 400;
}

p {
  font-size: 1rem;
  font-weight: 400;
  text-align: justify;
}

a {
  font-size: 0.8rem;
}

.vn-main-title {
  font-size: 5rem;
  font-weight: 900;
  font-family: var(--HeadFontFamily);
  line-height: normal !important;
}

.main-title {
  font-size: 2.8rem;
  font-weight: 900;
  font-family: var(--HeadFontFamily);
  line-height: normal !important;
}

.title {
  font-size: 3rem;
  font-weight: 700;
}

.title--sp{
  font-size: 4rem;
  font-weight: 700;
}
.sp-text-main {
 background: linear-gradient(to right, #AD54A0 0%, #847fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.sp-text {
  color: var(--primaryColor) !important;
}

.sub-title {
  font-size: 1.2rem;
  font-weight: 500;
}

.content {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  text-align: justify;
}

.special-text {
  color: var(--primaryColor);
}

.other-special-text {
  color: var(--otherprimeColor);
}

.light-title {
  color: var(--lightgrayColor);
}

.small-label {
  font-size: 0.8rem;
}
 .space-letter{
    letter-spacing: 5px !important;
  }

@media only screen and (max-width: 992px) {
  h1 {
    font-size: 2rem;
    font-weight: 500;
  }
  h2 {
    font-size: 1.8rem;
    font-weight: 500;
  }
  h3 {
    font-size: 1.2rem;
    font-weight: 400;
  }
  h4 {
    font-size: 1rem;
    font-weight: 400;
  }
  h5 {
    font-size: 0.8rem;
    font-weight: 400;
  }
  h6 {
    font-size: 0.9rem;
    font-weight: 400;
  }
  p {
    font-size: 1rem;
    font-weight: 400;
  }
  .main-title {
    font-size: 2rem;
    font-weight: 700;
  }
  .title {
    font-size: 1.8rem;
    font-weight: 500;
  }
  .sub-title {
    font-size: 1.2rem;
    font-weight: 500;
  }
  .content {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
  }
  .title--sp{
    font-size: 3rem;
    font-weight: 700;
  }
}
@media only screen and (max-width: 560px) {
  h1 {
    font-size: 2rem;
    font-weight: 500;
  }
  h2 {
    font-size: 1.8rem;
    font-weight: 500;
  }
  h3 {
    font-size: 1.5rem;
    font-weight: 400;
  }
  h4 {
    font-size: 1.3rem;
    font-weight: 400;
  }
  h5 {
    font-size: 1.1rem;
    font-weight: 400;
  }
  h6 {
    font-size: 1rem;
    font-weight: 400;
  }
  p {
    font-size: 1rem;
    font-weight: 400;
  }
  .main-title {
    font-size: 2rem;
    font-weight: 700;
  }
 
  .title {
    font-size: 1.5rem;
    font-weight: 500;
  }
  .sub-title {
    font-size: 1.2rem;
    font-weight: 500;
  }
  .content {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
  }
  .letter-space--20 {
    letter-spacing: 10px;
  }
  .title--sp{
    font-size: 2rem;
    font-weight: 700;
  }
}
a {
  text-decoration: none;
  font-size: 1rem;
}
a :hover,
a :focus,
a :active {
  text-decoration: none;
}

:root {
  --fontFamily: "Poppins", sans-serif;
  --primaryColor: #9a19ff;
  --secondaryColor: #7A7BBB;
  --otherprimeColor: #2a3b8e;
  --titleColor: #292929;
  --primeGradient: linear-gradient(90deg, #9a19ff 0%, #7A7BBB 96.75%);
  --borderGradient: radial-gradient(circle at top left, #9a19ff, #7A7BBB);
  --lightgrayColor: #f5f5f5;
  --textColor: #474747;
  --secondarytextColor: #8d8986;
  --white: #ffffff;
  --black: #000000;
  --sp-color: #EE3023;
}

.white-text {
  color: var(--white);
}

.light-text {
  color: var(--lightgrayColor);
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number] input[type=password],
input[type=date],
input[type=time],
select,
textarea {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  min-height: 40px;
  font-size: 0.8rem;
  font-weight: 200;
  line-height: 1.5;
  color: var(--lightgrayColor);
  background: none !important;
  border: 1px solid transparent;
  -o-border-image: var(--primeGradient);
     border-image: var(--primeGradient);
  border-image-slice: 1;
  padding: 20px 20px;
  background: rgba(0, 0, 0, 0.2745098039);
  transition: border-color 0.15s;
}

::-moz-placeholder {
  color: rgba(255, 255, 255, 0.342) !important;
}

::placeholder {
  color: rgba(255, 255, 255, 0.342) !important;
}

input[type=checkbox],
input[type=radio] {
  width: 15px;
  height: 15px;
}

*:focus {
  outline: 0;
}

input[type=text]:focus {
  outline: 0;
}

input:focus,
input:active {
  outline: 0;
}

.form-control input:focus {
  outline: 0;
}

.btn:hover {
  box-shadow: 3px 4px 7px 0px rgba(0, 0, 0, 0.2117647059);
}

button {
  outline: none;
}

button:focus {
  outline: 0;
}

.grade-btn {
  color: var(--white);
  background: var(--primeGradient);
  padding: 10px 20px;
  min-width: 150px;
  width: auto;
  font-weight: 500 !important;
  position: relative;
  border-radius: 30px;
}
@media only screen and (max-width: 768px) {
  .grade-btn {
    width: auto !important;
    padding: 10px 10px;
  }
 
}
.grade-btn a {
  color: var(--white);
}
.grade-btn:hover {
  color: var(--white);
  box-shadow: 3px 4px 7px 0px rgba(0, 0, 0, 0.2117647059);
}

.border-btn {
  color: var(--white);
  background: none;
  padding: 10px 20px;
  min-width: 150px;
  width: auto;
  font-weight: 500 !important;
  position: relative;
  border-radius: 30px;
  border: 1px solid var(--white);
}
@media only screen and (max-width: 768px) {
  .border-btn {
    width: auto !important;
    padding: 10px 10px;
  }
}
.border-btn a {
  color: var(--white);
}
.border-btn:hover {
  color: var(--white);
  box-shadow: 3px 4px 7px 0px rgba(0, 0, 0, 0.2117647059);
}

.brand-btn {
  border-radius: 30px;
  background: linear-gradient(to right, #AD54A0 0%, #847fff 100%);
  padding: 5px 20px;
  min-width: 150px;
  width: auto;
  font-weight: 500 !important;
  position: relative;
}
.brand-btn a {
  color: var(--white);
  font-weight: 600;
}

.center-btn {
  margin: 0px auto;
}

.white-btn {
  border-radius: 30px;
  background: var(--white);
  color: var(--titleColor);
  padding: 10px 20px;
  min-width: 150px;
  width: auto;
  font-weight: 600;
}
.white-btn a {
  color: var(--titleColor);
}

.overlay {
  position: relative;
}

.overlay ::before {
  position: absolute;
  background: var(--black);
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
}
.overlay--80::before {
  position: absolute;
  background: var(--black);
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.8;
}
.overlay--50::before {
  position: absolute;
  background: var(--black);
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.5;
}
.overlay--25::before {
  position: absolute;
  background: var(--black);
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.25;
}

.inner-container {
  padding: 1rem 4rem;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}

.size--80 {
  width: 80%;
}
.size--60 {
  width: 60%;
}
.size--50 {
  width: 50%;
}

.in-middle {
  margin: 0px auto;
}

@media only screen and (max-width: 992px) {
  .inner-container {
    padding: 1rem 2rem;
  }
  .size--80 {
    width: 100%;
  }
  .size--60 {
    width: 100%;
  }
  .size--50 {
    width: 100%;
  }
}
.main-nav {
  width: 100%;
  position: absolute;
  z-index: 1111;
}

.nav-container {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem 0rem;
  margin: 0px auto;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-width: 992px) {
  .nav-container {
    width: 90%;
  }
}
.logo-container {
  width: 150px;
  max-width: 200px;
  min-width: 60px;
}

.menu-container {
  display: inline;
}

.main-menu {
  padding: 0px;
  margin: 0px;
  list-style: none;
}
.main-menu .menu-link {
  padding: 0.5rem 1rem;
  display: inline;
  
}
.main-menu .menu-link a {
  color: var(--textColor);
  font-weight: 700;
  font-size: 1rem;
}
.main-menu .menu-link a:hover {
  background: var(--primeGradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mob-more-menu {
  display: none;
  width: auto !important;
}
.mob-more-menu .hover-links .hover-link a {
  color: #333333;
  font-size: 1.2rem;
}
.mob-more-menu .hover-links .hover-link {
 text-align: left;
}

.hover-link{
  list-style: none;
}

.mob-show-now {
  display: block;
}
.hover-link i{
  margin-right: 10px;
}

.more-menu {
  width: 20%;
  height: 0%;
  background: var(--white);
  padding:20px 20px 20px 20px;
  border: 1px solid #ddd;
  position: absolute;
  right: auto;
  left: 50%;
  top: 85px;
  z-index: 11111;
  display: none;
  color: var(--secondarytextColor);
  box-shadow: 0px 10px 10px 0px rgba(24, 21, 23, 0.1490196078);
}

.show-now {
  display: block;
  height: auto;
  position: fixed;
}


.special-link {
  background: var(--otherprimeColor);
  color: var(--white);
  padding: 0.5rem 1rem;
  border-radius: 30px;
  margin-left: 20px;
  font-weight: 500;
}
.special-link:hover {
  background: var(--primaryColor) !important;
}
.special-link i {
  margin-right: 10px;
}

.white-logo:hover {
  display: none;
}
.white-logo:hover .default-logo {
  display: block;
}

.navbar--default {
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1019607843);
  background: var(--white);
}
.navbar--default .default-logo {
  display: block;
}
.navbar--default .white-logo {
  display: none;
}

.default-logo {
  display: none;
}

.navbar--transparent {
  background: none;
}
.navbar--transparent .white-logo {
  display: block;
}
.navbar--transparent .logo-container {
  width: 150px;
}
.navbar--transparent .menu-link a {
  color: var(--textColor);
  font-weight: 600;
}
.navbar--transparent .menu-link a:hover {
  color: var(--primaryColor);
}
.navbar--transparent .special-link {
  background: var(--white);
  color: var(--otherprimeColor);
}
.navbar--transparent .special-link:hover {
  background: var(--white) !important;
  color: var(--primaryColor) !important;
}
.navbar--transparent .more-link::after {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.355em;
  vertical-align: 0.055em;
  content: "";
  border-top: 0.4em solid var(--primaryColor) !important;
  border-right: 0.4em solid transparent;
  border-bottom: 0;
  border-left: 0.4em solid transparent;
}

.fixed-nav {
  position: fixed;
  background: #ffffff !important;
}
.fixed-nav .logo-container {
  width: 150px;
}
.fixed-nav .nav-container {
  padding: 0.5rem 0rem;
}

.no-bg {
  background: none;
  box-shadow: none;
}
.no-bg .default-logo {
  display: none;
}
.no-bg .white-logo {
  display: block;
}
.no-bg .hamburger__inner::after,
.no-bg .hamburger__inner::before {
  background-color: #110f10;
}

.hamburger-container {
  display: none;
}

.hamburger {
  cursor: pointer;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.3s ease;
  background-color: transparent;
  border: 0;
  padding: 0;
  vertical-align: middle;
  margin-left: 20px;
}

.hamburger__inner {
  display: block;
  height: 24px;
  width: 25px;
  position: relative;
}

.hamburger__inner:before,
.hamburger__inner:after {
  background-color: #110f10;
  content: "";
  display: block;
  margin-left: -12px;
  height: 3px;
  width: 30px;
  border-radius: 30px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform-origin: center center;
  transition: top 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.25s, transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.navbar--transparent .hamburger__inner:before,
.navbar--transparent .hamburger__inner:after {
  background-color: #110f10;
}

.hamburger__inner:after {
  top: 20px;
}

.is-active .hamburger__inner {
  color: #110f10;
}

.is-active .hamburger__inner:before,
.is-active .hamburger__inner:after {
  top: 50%;
  transition: top 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.is-active .hamburger__inner:before {
  transform: rotate(45deg);
}

.is-active .hamburger__inner:after {
  transform: rotate(-45deg);
}

.hamburger--black .hamburger__inner:before,
.hamburger--black .hamburger__inner:after {
  background-color: #110f10 !important;
}

.mobile-menu {
  display: none;
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  font-family: var(--fontFamily);
  text-align: left;
}
.mobile-menu .menu-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.mobile-menu .menu-bg.one {
  width: 4px;
  background: var(--primeGradient);
}
.mobile-menu .menu-bg.two {
  width: 0;
  background-color: var(--white);
}
.mobile-menu .menu-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mobile-menu .menu-inner {
  position: relative;
}
.mobile-menu .main-menu .nav-link {
  font-size: 2rem;
  font-weight: 700;
  color: var(--textColor);
}
.mobile-menu .main-menu .mob-service-link {
  font-size: 2rem;
  font-weight: 700;
  color: var(--textColor);
  padding: .5rem 1rem;
}
.mobile-menu .main-menu .more-link::after {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.355em;
  vertical-align: 0.055em;
  content: "";
  border-top: 0.3em solid var(--primaryColor);
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
.mobile-menu .main-menu .nav-link a {
  font-size: 2rem;
  font-weight: 700;
  color: var(--textColor);
}
.fa-twitter{
  background-image:image(s);
}
@media only screen and (max-width: 1200px) {
  .logo-container {
    width: 150px !important;
  }
  .menu-container {
    display: none;
  }
  .hamburger-container {
    display: block;
  }
  .mobile-menu {
    display: block;
  }
}
@media only screen and (max-width: 500px) {
  .logo-container {
    width: 100px !important;
  }
}
.product-links {
  margin-top: 20px;
}
.product-links .product-list {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.product-links .product-link:hover {
  padding-left: 10px;
  font-weight: 500;
}
.product-links .product-link:hover i {
  color: var(--primaryColor);
}
.product-links .product-link a {
  color: var(--textColor);
  text-decoration: none;
}
.product-links .product-link i {
  margin-right: 10px;
  font-size: 20px;
  color: var(--otherprimeColor);
}

.offernow-intro {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 992px) {
  .offernow-intro {
    height: auto !important;
    display: block;
  }
}
.offernow-intro .sm-mock-holder {
  display: none;
  margin-bottom: 30px;
  width: 100%;
}
@media only screen and (max-width: 992px) {
  .offernow-intro .sm-mock-holder {
    display: block;
    margin-top: 40px;
  }
}
.offernow-intro .mock-holder {
  position: relative;
  height: 100vh;
  width: 55%;
}
@media only screen and (max-width: 992px) {
  .offernow-intro .mock-holder {
    display: none;
  }
}
.offernow-intro .mock-holder .intro-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: auto;
  bottom: 0%;
  overflow: hidden;
  z-index: 0;
}
.offernow-intro .mock-holder .intro-bg img {
  width: 100%;
  position: absolute;
  bottom: 0px;
  top: auto;
}
.offernow-intro .mock-holder .app-mock-mobiles {
  position: absolute;
  width: 65%;
  left: auto;
  right: 35%;
  bottom: 0%;
  
  z-index: 10;
  animation: zoomInOut 3s infinite alternate;
}
@keyframes zoomInOut {
  from {
    transform: scale(1) rotate(5deg);
    right: 40%;
  }
  to {
    transform: scale(1.02) rotate(6deg);
    right: 38%;
  }
}
.offernow-intro .intro-text {
  position: relative;
  padding-left: 10%;
  width: 45%;
}
@media only screen and (max-width: 600px) {
  .offernow-intro .intro-text {
    padding: 2.5%;
  }
}

.offernow-intro .intro-text .main-title{
  background: linear-gradient(to bottom left, #ad54a0 0%, #9a19ff 100%);
  margin-bottom: 30px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



@media only screen and (max-width: 992px) {
  .offernow-intro .intro-text {
    width: 100% !important;
  }
}
@media only screen and (max-width: 1024px) {
  .offernow-intro .intro-text .main-title {
    line-height: 50px !important;
    font-size: 2rem;
  }
}
@media only screen and (max-width: 768px) {
  .offernow-intro .intro-text .main-title {
    line-height: 50px !important;
  }
}

.imp-title {
  color: var(--titleColor);
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.imp-title-sm {
  color: var(--titleColor);
  font-size: 12px;
  line-height: 14px;
}

.sp-title p {
  color: var(--sp-color);
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.imp-titles p {
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
}

.button-container {
  display: flex;
  width: 300px;
  margin: 20px auto;
}
.button-container .right-btn {
  margin-left: 10px;
}

.app-download-links .links-img img {
  width: 150px;
}
.app-download-links .links-img:hover img {
  transform: scale(0.95);
}

.menu-button-container {
  display: flex;
}
.menu-button-container .right-btn {
  margin-left: 10px;
}
@media only screen and (max-width: 992px) {
  .menu-button-container {
    display: none;
  }
}

.offernow-about {
  margin-top: 100px;
}
.offernow-about .about .text-container .about-text {
  font-weight: 500;
  line-height: 51px;
}
@media only screen and (max-width: 768px) {
  .offernow-about .about .text-container .about-text {
    line-height: 30px;
  }
}
.offernow-about .full-link {
  margin-top: 60px;
}

.full-link {
  width: 100%;
  position: relative;
  height: 50px;
}
.full-link .link-text {
  position: absolute;
  left: 0px;
  right: auto;
  top: 20%;
  color: var(--secondaryColor);
  text-transform: uppercase;
}
@media only screen and (max-width: 768px) {
  .full-link .link-text {
    left: 2%;
  }
}
.full-link .link-img {
  position: absolute;
  right: 0px;
  left: auto;
  width: 50px;
  height: 50px;
}
@media only screen and (max-width: 768px) {
  .full-link .link-img {
    right: 2%;
  }
}
.full-link .line {
  background: var(--primeGradient);
  height: 1px;
  width: 80%;
  right: 6%;
  left: auto;
  position: absolute;
  top: 49%;
}
@media only screen and (max-width: 768px) {
  .full-link .line {
    width: 35%;
    right: 20%;
  }
}
.full-link:hover .link-img {
  animation: rotateIn 1s;
}
@keyframes rotateIn {
  from {
    transform: rotate(-43deg);
  }
  to {
    transform: rotate(0deg);
  }
}

.offernow-projects {
  padding: 120px 0px;
}
.offernow-projects .link-container {
  margin-top: 60px;
}

.ziProjectSwiper {
  width: 100%;
  height: auto;
  align-items: center;
  padding-bottom: 100px;
}
.ziProjectSwiper .swiper-wrapper {
  padding-top: 60px;
}
.ziProjectSwiper .swiper-slide-active {
  opacity: 1 !important;
  transform: scale(1.5);
  z-index: 1;
}
@media only screen and (max-width: 768px) {
  .ziProjectSwiper .swiper-slide-active {
    transform: scale(1.2);
  }
}
.ziProjectSwiper .swiper-slide-active .project-img {
  box-shadow: -5px 25px 30px 0px rgba(0, 0, 0, 0.2705882353);
}
.ziProjectSwiper .swiper-slide-active .project-link {
  display: block !important;
}
.ziProjectSwiper .swiper-slide-active .project-details {
  display: block !important;
}
.ziProjectSwiper .swiper-slide-active .project-details h4 {
  font-size: 1rem;
}
.ziProjectSwiper .project {
  text-align: center;
  font-size: 18px;
  opacity: 0.5;
  width: 215px !important;
  margin-right: 2%;
  margin-left: 2%;
  margin-top: 10%;
  /* Center slide text vertically */
}
.ziProjectSwiper .project .project-img {
  width: 100%;
  position: relative;
}
.ziProjectSwiper .project .project-img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.ziProjectSwiper .project .project-img .project-link {
  position: absolute;
  bottom: -8%;
  right: -16%;
  left: auto;
  top: auto;
  width: 60px;
  height: 60px;
  display: none;
  animation: rotateIn 2s;
}
@keyframes rotateIn {
  from {
    transform: rotate(-90deg);
    opacity: 0;
  }
  to {
    transform: rotate(0deg);
    opacity: 1;
  }
}
.ziProjectSwiper .project .project-details {
  width: 100%;
  margin-top: 20px;
  display: none;
  animation: fadeIn 2s;
}
@keyframes fadeIn {
  from {
    transform: scale(1.1);
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.ziProjectSwiper .project-nav {
  position: absolute;
  top: 20px;
  right: 10%;
  left: auto;
  display: flex;
}
@media only screen and (max-width: 768px) {
  .ziProjectSwiper .project-nav {
    top: auto;
  }
}
.ziProjectSwiper .project-nav .swiper-button-next {
  margin-left: 20px;
}
.ziProjectSwiper .project-nav .swiper-button-next img {
  width: 40px;
}
.ziProjectSwiper .project-nav .swiper-button-prev img {
  width: 40px;
}

.offernow-expertise {
  padding: 60px 0px 40px 0px;
}
.offernow-expertise .exp-details {
  margin-bottom: 40px;
}
.offernow-expertise .expertise-details {
  width: 100%;
}
.offernow-expertise .expertise-details .text-container h3 {
  margin-bottom: 30px;
}
.offernow-expertise .expertize-img {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}
@media only screen and (max-width: 992px) {
  .offernow-expertise .expertize-img {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}
.offernow-expertise .link-container {
  margin-top: 60px;
}
.offernow-expertise .features {
  margin-bottom: 20px;
  border: 1px solid #DDD;
  border-radius: 20px;
  padding: 20px;
}
.offernow-expertise .feature {
  margin-bottom: 20px;
}
.offernow-expertise .features .head {
  display: flex;
  align-items: start;
  margin-bottom: 20px;
}
.offernow-expertise .features .head .icon {
  width: 60px;
  height: 60px;
}
.offernow-expertise .features .head .icon img {
  width: 100%;
}
.offernow-expertise .features .head .heading {
  width: 80%;
  margin-left: 10px;
}
.offernow-expertise .features .head .heading h4 {
  margin-bottom: 10px;
  font-weight: 600;
}
.offernow-expertise .feature .head .heading {
  width: 80%;
  margin-left: 10px;
}
.offernow-expertise .feature .head .heading h4 {
  margin-bottom: 10px;
  font-weight: 600;
}
.sp-link a {
  color: var(--white);
  text-transform: uppercase;
  line-height: 13px;
  letter-spacing: 0.18em;
  font-size: 12px;
  position: relative;
  padding-left: 60px;
}
.sp-link a:hover {
  color: var(--white);
  margin-left: 20px;
}
.sp-link a:hover::before {
  margin-left: -5px;
}
.sp-link a::before {
  position: absolute;
  width: 45px;
  height: 0px;
  left: 0px;
  top: 5px;
  content: "";
  border: 2px solid #6f36bb;
  transform: rotate(-180deg);
}

.exp-points {
  padding: 30px 0px;
}
.exp-points .main-container {
  padding: 40px 20px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}
.exp-points .bg {
  background-image: url(../images/white-bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: animatedBackground 10s linear infinite alternate;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
}
@keyframes animatedBackground {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(2);
  }
}
.exp-points .img-conatiner {
  mix-blend-mode: multiply;
}
.exp-points .point {
  align-items: center;
  padding-left: 40px;
}
@media only screen and (max-width: 768px) {
  .exp-points .point {
    width: 300px;
    margin: 20px 10px;
  }
}
.exp-points .point:hover .point-icon {
  width: 25px;
  height: 25px;
}
.exp-points .point .point-icon {
  width: 20px;
  height: 20px;
  margin-right: 20px;
  display: inline;
  margin-top: -10px;
  animation: infiniteRotate 2s infinite;
}
@keyframes infiniteRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.exp-points .point h3 {
  margin: 0px;
  display: inline;
}

.offernow-products {
  padding: 80px 0px;
}
.offernow-products .link-container {
  margin-top: 60px;
}
.offernow-products .products {
  margin-top: 40px;
}
.offernow-products .products .product {
  margin: 20px 10px;
}
.offernow-products .products .product .product-details {
  margin-top: 20px;
}
.offernow-products .products .product .product-details .product-title {
  color: var(--titleColor);
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.offernow-products .products .product .sp-link {
  text-align: right;
}

.partners {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-top: 100px;
  margin-top: -80px;
}
@media only screen and (max-width: 768px) {
  .partners {
    margin-top: 0px;
  }
}
.partners .navigation {
  width: 160px;
  display: flex;
  position: absolute;
  top: 2px;
  height: 35px;
  right: 0px;
  text-align: right;
}
.partners .navigation .swiper-button-next {
  margin-left: 20px;
}
@media only screen and (max-width: 992px) {
  .img-container {
    margin: 20px 0px;
  }
}

@media only screen and (max-width: 992px) {
  .sp-section-img .img-container {
    margin: 0px 0px;
  }
}

.offernow-about-section {
  background: linear-gradient(90deg, #AD54A0, #C296F0, #847fff);
  background-position: center;
  background-size: cover;
  height: auto;
 margin-top: 60px;
  padding: 10px 0px;
  position: relative;
  display: flex;
  align-items: center;
  background-image: url(../images/vn-bg.png);
}

.offernow-about-section .row [class*=col-]{
  display: flex;
}

@media only screen and (max-width: 992px) {
  .offernow-about-section {
    display: block;
    height: auto;
  }
}
@media only screen and (max-width: 992px) {
  .offernow-about-section {
    padding-top: 0px !important;
  }
}
.offernow-about-section .about-section {

}
@media only screen and (max-width: 992px) {
  .offernow-about-section .about-section {
    
  }
}
.offernow-about-section .sp-section-img {
  display: none;
  width: 100%;
}
.offernow-about-section .sp-section-img img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}
@media only screen and (max-width: 992px) {
  .offernow-about-section .sp-section-img {
    display: block;
    margin-bottom: 0px;
  }
}
.offernow-about-section .sp-img-container {
  position: relative;
}
.offernow-about-section .sp-img-container .sp-round{
  width: 500px;
  height:500px;
  background: #00000008;
  border-radius: 50%;
  margin: 0px auto;
}

.offernow-about-section .sp-img-container .screen{
 position: absolute;
 width: 90%;
 left: 5%;
 right: auto;
 top: -20%;
}
.offernow-about-section .sp-img-container img{
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 1100px) {
  .offernow-about-section .sp-img-container .sp-round {
    width: 400px;
    height:400px;
  }
  .offernow-about-section .sp-img-container .screen {
    width: 90%;
    left: 5%;
  }
 
}


@media only screen and (max-width: 992px) {
  .offernow-about-section .sp-img-container .sp-round {
    width: 400px;
    height:400px;
  }
  .offernow-about-section .sp-img-container .screen {
    width: 50%;
    left: 25%;
  }
  .offernow-about-section .row [class*=col-]{
    display: block;
  }
}

@media only screen and (max-width: 768px) {
  .offernow-about-section .sp-img-container .sp-round {
    width: 400px;
    height:400px;
  }
  .offernow-about-section .sp-img-container .screen {
    width: 60%;
    left: 20%;
  }
  .offernow-about-section .row [class*=col-]{
    display: block;
  }
}
@media only screen and (max-width: 600px) {
  .offernow-about-section .sp-img-container .sp-round {
    width: 400px;
    height:400px;
  }
  .offernow-about-section .sp-img-container .screen {
    width: 80%;
    left: 10%;
  }
  .offernow-about-section .row [class*=col-]{
    display: block;
  }
}

.counter-section {
  padding: 100px 0px 0px 0px;
  position: relative;
}
.counter-section .counter-img {
  margin: 0px auto;
}
.counter-section .counter-img img {
  margin: 0px auto;
}

.counter {
  margin-bottom: 40px;
}
.counter .counter-container {
  line-height: 1;
  min-width: 150px;
}
.counter .count {
  font-size: 3rem;
  color: var(--primaryColor);
  display: inline;
  font-weight: 700;
}
.counter h3 {
  font-size: 25px;
}

.offernow-special-section {
  background-image: url(../images/map-bg.png);
  background-position: left;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 30px 0px 0px 0px;
  position: relative;
  overflow: hidden;
  height: 100vh;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 992px) {
  .offernow-special-section {
    padding-top: 0px !important;
    height: auto;
    display: block;
  }
}
.offernow-special-section .text-container .main-title {
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3882352941);
}
.offernow-special-section .special-section {
  width: 50%;
  padding-left: 10%;
}
@media only screen and (max-width: 992px) {
  .offernow-special-section .special-section {
    width: 100%;
    padding: 5%;
  }
}
.offernow-special-section .sp-section-img {
  display: none;
  width: 100%;
}
@media only screen and (max-width: 992px) {
  .offernow-special-section .sp-section-img {
    display: block;
    margin-bottom: 0px;
  }
}
.offernow-special-section .sp-img-container {
  position: absolute;
  width: 50%;
  right: 0px;
  bottom: 0px;
}
@media only screen and (max-width: 992px) {
  .offernow-special-section .sp-img-container {
    display: none;
  }
}

.offernow-clients {
  padding: 80px 0px;
}
.offernow-clients .clients-texts {
  margin-bottom: 40px;
}
.offernow-clients .clients .client {
  display: flex;
  margin: 20px;
  align-self: center;
  justify-content: center;
}

.footer-link {
  text-align: right;
}
@media only screen and (max-width: 768px) {
  .footer-link {
    text-align: center;
  }
}
.footer-link .links {
  color: var(--white);
  margin: 0px;
  padding: 0px;
}
.footer-link .links li {
  list-style: none;
  display: inline;
  margin-left: 20px;
}
.footer-link .links li a {
  color: var(--white);
}
.footer-link .links li a:hover {
  color: var(--primaryColor);
}

.offernow-footer {
  padding: 40px 0px 0px 0px;
  background: #ffffff;
}
.offernow-footer .text-container {
  margin-bottom: 30px;
}
.offernow-footer .footer-info {
  padding: 0px 20px;
}
.offernow-footer .footer-info h2 {
  background: linear-gradient(to right, #AD54A0 0%, #847fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media only screen and (max-width: 768px) {
  .offernow-footer .footer-info {
    margin-bottom: 40px;
  }
}
.offernow-footer .footer-info .info-links ul {
  list-style: none;
  color: var(--white);
  padding: 0px;
  margin: 0px;
}
.offernow-footer .footer-info .info-links ul li a {
  color: var(--white);
}
.offernow-footer .footer-info .info-links ul li a:hover {
  color: var(--primaryColor);
  margin-left: 5px;
}
.offernow-footer .offernow-social .social-links .social-list {
  padding: 0px;
  list-style: none;
}
.offernow-footer .offernow-social .social-links .social-list li {
  display: inline-block;
  margin-right: 10px;
}
.offernow-footer .offernow-social .social-links .social-list li a {
  color: var(--white);
}
.offernow-footer .offernow-social .social-links .social-list li a .icon-holder {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding-top: 0px;
  background: linear-gradient(to right, #AD54A0 0%, #847fff 100%);

  display: block;
  text-align: center;
  z-index: 0;
}
.offernow-footer .offernow-social .social-links .social-list li a .icon-holder i {
  font-size: 1rem;
  color: var(--white);
  z-index: 1;
}
.offernow-footer .offernow-social .social-links .social-list li a:hover {
  color: var(--white);
}
.offernow-footer .offernow-social .social-links .social-list li a:hover .icon-holder {
  background: linear-gradient(to bottom left, #847fff 0%, #AD54A0 100%);

}
.offernow-footer .offernow-social .social-links .social-list li a:hover .icon-holder i {
  animation: pulse 0.5s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.offernow-footer .agency-name {
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--titleColor);
  margin-bottom: 40px;
}
.offernow-footer .offernow-address .address-style {
  color: var(--textColor);
}
.offernow-footer .offernow-address .contact-list ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.offernow-footer .offernow-address .contact-list ul li {
  display: flex;
  position: relative;
  margin-bottom: 10px;
}
.offernow-footer .offernow-address .contact-list ul li i {
  font-size: 1rem;
  color: var(--white);
  margin-top: 5px;
  z-index: 1;
}
.offernow-footer .offernow-address .contact-list ul li::after {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primaryColor);
  background: linear-gradient(to right, #AD54A0 0%, #847fff 100%);

  z-index: 0;
  position: absolute;
  content: "";
  left: -7.5px;
}
.offernow-footer .offernow-address .contact-list ul li:hover::after {
  background: linear-gradient(to bottom left, #847fff 0%, #AD54A0 100%);
}
.offernow-footer .offernow-address .contact-list ul li:hover i {
  animation: pulse 0.5s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.offernow-footer .offernow-address .contact-list ul li address {
  margin-left: 20px;
}
.offernow-footer .offernow-address .contact-list ul li a {
  margin-left: 20px;
}
.offernow-footer .connect {
  text-transform: uppercase;
  color: var(--titleColor);
}
.offernow-footer .connect h5 {
  margin-bottom: 10px;
}
.offernow-footer .connect p {
  margin-bottom: 10px;
  line-height: 14px;
}
.offernow-footer .connect a {
  text-transform: none;
  font-size: 14px;
  letter-spacing: normal;
  color: var(--titleColor);
  line-height: 14px;
}
.offernow-footer .connect a:hover {
  background: var(--primeGradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bottom-footer {
  padding: 30px 0px;
}
.bottom-footer .copyright {
  display: flex;
  justify-content: center;
  align-items: center;
}
.bottom-footer .copyright a {
  text-transform: capitalize;
  letter-spacing: normal;
  color: var(--textColor);
  line-height: 14px;
}
.bottom-footer .copyright a:hover {
  color: var(--primaryColor);
}
.bottom-footer .copyright a .power-logo {
  padding: 0px 5px;
}
.bottom-footer .copyright a .power-logo img {
  width: 100px;
}
@media only screen and (max-width: 768px) {
  .bottom-footer .copyright {
    text-align: center;
  }
}
@media only screen and (max-width: 768px) {
  .bottom-footer .footer-logos {
    margin-bottom: 20px;
  }
}

.offernow-about-intro {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .offernow-about-intro {
    height: auto !important;
  }
}
.offernow-about-intro .intro-bg {
  width: 50%;
  height: 100vh;
  position: absolute;
  right: 10%;
  overflow: hidden;
  z-index: 0;
}
.offernow-about-intro .intro-bg img {
  width: 100%;
}
@media only screen and (max-width: 500px) {
  .offernow-about-intro .intro-bg {
    width: 100%;
    right: 0%;
  }
  .offernow-about-intro .intro-bg img {
    width: 100%;
  }
}
.offernow-about-intro .intro-text {
  padding-top: 35vh;
  position: relative;
}
@media only screen and (max-width: 560px) {
  .offernow-about-intro .intro-text {
    padding-top: 30vh;
  }
}
@media only screen and (max-width: 992px) {
  .offernow-about-intro .intro-text .main-title {
    line-height: normal !important;
  }
}
.offernow-about-intro .scrol-now {
  position: absolute;
  width: 12px;
  right: 5.5%;
  bottom: 10%;
}

.offernow-team {
  padding: 80px 0px;
}
.offernow-team .team-details {
  margin-bottom: 40px;
}
.offernow-team .team-details {
  width: 90%;
}
.offernow-team .team-details .text-container h3 {
  margin-bottom: 30px;
}
.offernow-team .team-img {
  background-image: url(../images/offernow-team.jpg);
  background-position: center;
  background-size: cover;
  height: 400px;
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .offernow-team .team-img {
    margin-top: 30px;
  }
}
.offernow-team .link-container {
  margin-top: 60px;
}

.offernow-value {
  padding: 80px 0px;
}
.offernow-value .link-container {
  margin-top: 60px;
}
.offernow-value .values {
  margin-top: 40px;
  border: 1px solid transparent;
  -o-border-image: var(--primeGradient);
     border-image: var(--primeGradient);
  border-image-slice: 1;
  padding: 10px 10px;
}
@media only screen and (max-width: 768px) {
  .offernow-value .values {
    width: auto !important;
    padding: 10px 10px;
  }
}
.offernow-value .values .value {
  margin: 20px 10px;
}
.offernow-value .values .value .value-details {
  margin-top: 20px;
}
.sp-about-text {
  background: var(--primeGradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.offernow-service-intro {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  padding-top: 25vh;
}
@media only screen and (max-width: 768px) {
  .offernow-service-intro {
    height: auto !important;
    padding-top: 15vh;
  }
}
.offernow-service-intro .intro-text {
  position: relative;
}
@media only screen and (max-width: 768px) {
  .offernow-service-intro .intro-text .main-title {
    line-height: 50px !important;
  }
}
.offernow-service-intro .service-img {
  background-image: url(../images/services.jpg);
  background-position: center;
  background-size: cover;
  height: 400px;
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .offernow-service-intro .service-img {
    margin-top: 30px;
  }
}
.offernow-service-intro .scrol-now {
  position: absolute;
  width: 12px;
  right: 5.5%;
  bottom: 10%;
}

.offernow-do {
  padding: 80px 0px;
}
.offernow-do .link-container {
  margin-top: 60px;
}
.offernow-do .dos {
  margin-top: 40px;
}
.offernow-do .dos .do {
  margin: 20px 0px;
}
.offernow-do .dos .do .do-details {
  margin-top: 20px;
}
.offernow-do .dos .do .sp-link {
  text-align: right;
}

.offernow-clients {
  padding: 80px 0px;
}
.offernow-clients .clients-texts {
  margin-bottom: 40px;
}
.offernow-clients .clients .client {
  display: flex;
  margin: 20px;
  align-self: center;
  justify-content: center;
}

.do-list ul {
  padding: 0px;
  list-style: none;
}
.do-list ul li {
  color: var(--white);
  font-size: 14px;
}

.do-icon {
  width: 15px;
  height: 15px;
  margin-right: 20px;
  display: inline;
  animation: infiniteRotate 2s infinite;
}
@keyframes infiniteRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.offernow-portfolio-intro {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .offernow-portfolio-intro {
    height: auto !important;
  }
}
.offernow-portfolio-intro .intro-bg {
  width: 50%;
  height: 100vh;
  position: absolute;
  right: 10%;
  overflow: hidden;
  z-index: 0;
  mix-blend-mode: lighten;
}
@media only screen and (max-width: 500px) {
  .offernow-portfolio-intro .intro-bg {
    width: 100%;
    right: 0%;
  }
  .offernow-portfolio-intro .intro-bg img {
    padding-top: 8vh;
    padding-left: 15vw;
    transform: scale(1.5);
  }
}
.offernow-portfolio-intro .intro-bg img {
  mix-blend-mode: lighten;
  width: 100%;
}
.offernow-portfolio-intro .intro-text {
  padding-top: 35vh;
  position: relative;
}
@media only screen and (max-width: 560px) {
  .offernow-portfolio-intro .intro-text {
    padding-top: 30vh;
  }
}
@media only screen and (max-width: 768px) {
  .offernow-portfolio-intro .intro-text .main-title {
    line-height: 50px !important;
  }
}
.offernow-portfolio-intro .scrol-now {
  position: absolute;
  width: 12px;
  right: 5.5%;
  bottom: 10%;
}

.left-work {
  margin-top: 0px;
}

.center-work {
  margin-top: 50px;
}

.right-work {
  margin-top: 100px;
}

.work:hover .work-img {
  box-shadow: -5px 34px 31px 0px rgba(0, 0, 0, 0.2705882353);
}
.work:hover .work-link {
  display: block !important;
}
.work:hover .work-details {
  margin-top: 30px;
  transform: scale(1.1);
}

.work-img {
  width: 80%;
  position: relative;
  margin: 0px auto;
}
.work-img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.work-img .work-link {
  position: absolute;
  bottom: -8%;
  right: -14%;
  left: auto;
  top: auto;
  width: 70px;
  height: 80px;
  display: none;
  animation: rotateIn 2s;
}
@keyframes rotateIn {
  from {
    transform: rotate(-90deg);
    opacity: 0;
  }
  to {
    transform: rotate(0deg);
    opacity: 1;
  }
}

.work-details {
  width: 80%;
  text-align: center;
  margin: 20px auto;
  animation: fadeIn 2s;
}
@keyframes fadeIn {
  from {
    transform: scale(1.1);
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.offernow-contact-intro {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .offernow-contact-intro {
    height: auto !important;
  }
}
.offernow-contact-intro .intro-bg {
  width: 50%;
  height: 100vh;
  position: absolute;
  right: 10%;
  overflow: hidden;
  z-index: 0;
  mix-blend-mode: lighten;
}
@media only screen and (max-width: 500px) {
  .offernow-contact-intro .intro-bg {
    width: 100%;
    right: 0%;
  }
  .offernow-contact-intro .intro-bg img {
    padding-top: 8vh;
    padding-left: 15vw;
    transform: scale(1.5);
  }
}
.offernow-contact-intro .intro-bg img {
  mix-blend-mode: lighten;
  width: 100%;
}
.offernow-contact-intro .intro-text {
  padding-top: 25vh;
  position: relative;
}
@media only screen and (max-width: 560px) {
  .offernow-contact-intro .intro-text {
    padding-top: 30vh;
  }
}
@media only screen and (max-width: 768px) {
  .offernow-contact-intro .intro-text .main-title {
    line-height: 50px !important;
  }
}
.offernow-contact-intro .scrol-now {
  position: absolute;
  width: 12px;
  right: 5.5%;
  bottom: 10%;
}

.offernow-connect {
  margin-top: 60px;
  border: 1px solid transparent;
  -o-border-image: var(--primeGradient);
     border-image: var(--primeGradient);
  border-image-slice: 1;
  padding: 20px 20px;
  background: rgba(0, 0, 0, 0.2745098039);
}
@media only screen and (max-width: 768px) {
  .offernow-connect {
    width: auto !important;
    padding: 10px 10px;
  }
}
.offernow-connect .offernow-address h5 {
  margin-bottom: 10px;
}
.offernow-connect .offernow-address .address-style {
  color: var(--titleColor);
}

.connect-zi {
  padding: 80px 0px;
}
.connect-zi .offernow-form {
  padding: 20px 0px;
}
.connect-zi .offernow-social ul {
  padding: 0px;
  list-style: none;
}
.connect-zi .offernow-social ul li {
  display: inline;
  margin: 10px;
}
@media only screen and (max-width: 768px) {
  .connect-zi .offernow-social ul li {
    display: inline;
    margin: 10px;
  }
}
.connect-zi .offernow-social ul li a {
  color: var(--titleColor);
  font-size: 1.2rem;
}
.connect-zi .offernow-social ul li a i {
  color: var(--titleColor);
}
.connect-zi .offernow-social ul li a *:hover {
  background: var(--primeGradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: scale(1.2);
}
.connect-zi .offernow-social ul li a *:hover i {
  background: var(--primeGradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.connect {
  color: var(--titleColor);
}
.connect h5 {
  margin-bottom: 10px;
}
.connect p {
  margin-bottom: 10px;
  line-height: 14px;
}
.connect a {
  text-transform: none;
  font-size: 14px;
  letter-spacing: normal;
  color: var(--titleColor);
  line-height: 14px;
}
.connect a:hover {
  background: var(--primeGradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fixed_qr {
  position: fixed;
  right: 2.5%;
  bottom: 2.5%;
  left: auto;
  top: auto;
  width: 150px;
  text-align: center;
}
.fixed_qr span {
  font-weight: 600;
  text-align: center;
  font-size: 12px;
  line-height: normal;
}

.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}
.road-div{
  height: 300px !important;
  position: relative;
  overflow: visible !important;
}
@media only screen and (max-width: 992px) {
  .road-div{
    height: 200px !important;
    
  }
}

@media only screen and (max-width: 768px) {
  .road-div{
    height: 150px !important;
    
  }
  .rocket{
    
    bottom: 0% !important;
   
  }
}

@media only screen and (max-width: 400px) {
  .road-div{
    height: 150px !important;
    
  }
  .rocket{
    
    bottom: 30% !important;
   
  }
}
.rocket{
  position: absolute;
  width: 80%;
  bottom: 0px;
  left: auto;
  right: 0px;
  top: auto;
}
.vn-intro{
  position: relative;
  min-height: auto;
  padding-top: 8%;
}

.bg-road{
  position: absolute;
  z-index: -1;
  bottom: auto;
  top: 40%;
  left: 0px;
  right: auto;
  width: 100%;
}
.bg-road img{
  width: 100%;
}


.bg-onwhite{
  position: absolute;
  z-index: -1;
  bottom: auto;
  top: 0%;
  left: 0px;
  right: auto;
  width: 100%;
}
.bg-onwhite img{
  width: 100%;
}
.vn-main-intro{
  font-size: 4.5rem;
  text-align: center;
  background: linear-gradient(to right, #AD54A0 0%, #847fff 100%);
  margin-bottom:60px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vn-main-intro-final{
  font-size: 4.5rem;
  text-align: center;
  background: linear-gradient(to right, #AD54A0 0%, #847fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vn-main-intro-medium{
  font-size: 3.5rem;
  text-align: center;
  background: linear-gradient(to right, #AD54A0 0%, #847fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media only screen and (max-width: 768px) {
  .vn-main-intro-final{
    font-size: 2.5rem;

  }
  .vn-main-intro-medium{
    font-size: 2.5rem;
  }
}
.bottom-div{
  background: linear-gradient(90deg, #AD54A0, #C296F0, #847fff);
  height: 300px;
  border-radius: 30px;
  position: relative;
  display: flex;
  padding: 40px;
}
.bottom-div .text-container h4{

}
.text-orverlay{
  position: absolute;
  bottom: 0px;
  top: auto;
  left: 40px;
  right: auto;

}
.text-orverlay h2{
  color: #ffffff;
  font-size: 4rem;
  opacity: .3;
}
.people-img{
  position: absolute;
  right: 80px;
  left: auto;
  bottom: 0px;
  width: 350px;
}
.screen-img{
  position: absolute;
  left: 25%;
  right: auto;
  bottom: -5%;
  top: auto;
  width: 55%;
}

@media only screen and (max-width: 992px) {
  .vn-intro{
    padding-top: 20%;
  }
 
  .screen-img{
    width: 70%;
    left: 15%;
    bottom: 0%;
  }
  

}

@media only screen and (max-width: 768px) {
  .vn-intro{
    padding-top: 20%;
  }
  .vn-main-intro{
    font-size: 2.5rem;
  }
  .screen-img{
    width: 70%;
    left: 15%;
    bottom: 0px;
  }
  .people-img{
    width: 200px;
    right: 10px;
  }
  .text-orverlay h2{
    font-size: 2rem;
  }
  .text-orverlay{
    left: 20px;
  }
  .bottom-div{
    padding: 20px;
    height: 200px;
    border-radius: 20px;
  }
  .bg-onwhite{
    bottom: 0px;
    top: auto;
  }
  

}

@media only screen and (max-width: 600px) {
  .vn-intro{
    padding-top: 30%;
  }
  .vn-main-intro{
    font-size: 2.5rem;
  }
  .screen-img{
    width: 80%;
    left: 10%;
    bottom: 60px;
  }
  .people-img{
    width: 200px;
    right: 10px;
  }
  .text-orverlay h2{
    font-size: 2rem;
  }
  .text-orverlay{
    left: 20px;
  }
  .bottom-div{
    padding: 20px;
    height: 200px;
    border-radius: 20px;
  }
  .bg-onwhite{
    bottom: 0px;
    top: auto;
  }
  

}

@media only screen and (max-width: 500px) {
  .vn-intro{
    padding-top: 30%;
  }
  .vn-main-intro{
    font-size: 2.5rem;
  }
  .screen-img{
    width: 100%;
    left: 0px;
    bottom: 60px;
  }
  .people-img{
    width: 200px;
    right: 10px;
  }
  .text-orverlay h2{
    font-size: 2rem;
  }
  .text-orverlay{
    left: 20px;
  }
  .bottom-div{
    padding: 20px;
    height: 200px;
    border-radius: 20px;
  }
  .bg-onwhite{
    bottom: 0px;
    top: auto;
  }
  

}


@media only screen and (max-width: 400px) {
  .vn-intro{
    padding-top: 30%;
  }
  .vn-main-intro{
    font-size: 2.5rem;
  }
  .screen-img{
    width: 100%;
    left: 0px;
    bottom: 80px;
  }
  .people-img{
    width: 130px;
    right: 10px;
  }
  .text-orverlay h2{
    font-size: 2rem;
  }
  .text-orverlay{
    left: 20px;
  }
  .bottom-div{
    padding: 20px;
    height: 200px;
    border-radius: 20px;
  }
  .bg-onwhite{
    bottom: 0px;
    top: auto;
  }
  

}


.vn-second-section{
  padding: 60px 0px;
}

.vn-expertise, .vn-p-packages{
  background-image: url(../images/vn-bg.png);
  background-position: center;
  background-size: cover;
  height: auto;

  padding: 60px 0px;
}
.feature-list{
    
}

.road-expertise{
  background-image: url(../images/vn-bg.png);
  background-position: center;
  background-size: cover;
  height: auto;

  padding: 60px 0px;
}
.road-expertise .feature-list .row [class*=col-]{
  display: flex;
}
.vn-expertise .feature-list .row [class*=col-]{
  display: flex;
}

.vn-p-packages .feature-list .row [class*=col-]{
  display: flex;
}


.vn-expertise .features {
  margin-bottom: 20px;
  background: #ffffff;
  border-radius: 60px;
  padding: 30px;
}
.vn-p-packages .features {
  margin-bottom: 20px;
  background: #ffffff;
  border-radius: 30px;
  padding: 20px;

}
.vn-p-packages .features .head .heading h4{
  font-size: 1.5rem;
  text-align: center;
  background: linear-gradient(to right, #AD54A0 0%, #847fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}
.vn-p-packages .features .head .heading h3{
  font-size: 1.2rem;
  text-align: center;
  font-weight: bold;

}

.vn-p-packages .features .head{
 border-bottom: 2px solid #f5f5f5;
 margin-top: 0px;
}
.vn-p-packages .features .head .heading{
  margin-top: 10px;
  width: 90%;
 }

 .vn-p-packages .features .body .features-list{
  border-bottom: 2px solid #f5f5f5;
  margin-bottom: 20px;
  padding-bottom: 10px;
 }
 .vn-p-packages .features .body .features-list li{

  font-size: .9rem;
 }

 .vn-p-packages .extra-services{
  padding-top: 30px;
}

.vn-p-packages .extra-services .service{
  margin-bottom: 20px;
  background: white;
  padding: 20px 20px;
}

.simple-div{
  background: #f5f5f5;
  border-radius: 30px;
  padding: 10px;
  border: 1px solid #e5e5e5;
}
.line{
  width: 100%;
  height: 2px;
  background: #f5f5f5;
  margin: 20px 0px;
}
.sp-heading h4{
  color: #AD54A0;
  font-weight:500;
  font-size: 1.2rem;
}
.simple-div-white{
  background: #ffffff;
  border-radius: 30px;
  padding: 40px 20px;
  border: 1px solid #ffffff;
}

.vn-p-packages .extra-services .service p{
  margin: 0px;
}

.vn-p-why .features {
  margin-bottom: 20px;
  background: #ffffff;
  border-radius: 30px;
  padding: 20px;
  border: 1px solid #e5e5e5;

}
.vn-p-why .features .head .heading{
  margin-top: 0px;
  margin-left: 0px;
}
.vn-p-why .features .head .heading h4{
  font-size: 1.2rem;
}
.vn-p-why .features .body .content{
  text-align: left;
}



.road .features {
  margin-bottom: 20px;
  background: #ffffff;
  border-radius: 30px;
  padding: 20px;
  border: 1px solid #e5e5e5;
  width: 100%;

}
.road .features {

}

@media only screen and (max-width: 768px) {
  .road .features {
    display: block;
    }
    .road .features .num {
      margin-bottom: 20px;
      width: 100% !important;
      min-width: none !important;
      max-width: none !important;
    }
}
.road .features .num {
  background: linear-gradient(90deg, #AD54A0, #C296F0, #847fff);
  border-radius: 10px;
  padding: 5px;
  height:auto;
  width: auto;
  min-width: 20%;
  max-width: 40%;
  text-align: center;
  align-items: end;
  display: flex;
  margin-bottom: 20px;
  }

  .road .features .num h2 {
    margin: 0px;
    line-height: normal;
    }
    .road .features .num p {
      margin: 0px;
      line-height: 10px;
      }

.road .features .body{
  margin-left: 20px;
}
.road .features .body .heading h4{
  font-size: 1.2rem;
}
.road .features .body ul{
  padding-left: 1rem;
}
.row-container{}
.vn-expertise .features {
  margin-bottom: 20px;
  
}


.vn-expertise .features .head {
  display: flex;
  align-items: start;
  margin-bottom: 20px;
  
}

.road-expertise .features {
  margin-bottom: 20px;
  background: #ffffff;
  border-radius: 30px;
  padding: 20px;
  border: 1px solid #e5e5e5;
  width: 100%;
  
}
.road-expertise .features .head {
  display: flex;
  align-items: center;
  
}

@media only screen and (max-width: 768px) {
  .road-expertise .features .head {
    display: block;
    align-items: center;
    
    
  }
  .road-expertise .features .head .icon {
    margin-bottom: 20px;
  }
}
.vn-expertise .features .head .icon {
  width: 100px;
  height: 100px;
}
.vn-expertise .features .head .icon img {
  width: 100% !important;
}
.road-expertise .features .head .heading {
  width: 80%;
  margin-left: 10px;
  margin-top: 0px;
}

.road-expertise .features .head .heading p{
  margin: 0px;
  text-align: left;
}
.vn-expertise .features .head .heading {
  width: 80%;
  margin-left: 10px;
  margin-top: 40px;
}
.vn-expertise .features .head .heading h4 {
  margin-bottom: 10px;
  font-weight: 600;
}
.vn-expertise .feature .head .heading {
  width: 80%;
  margin-left: 10px;
}
.vn-expertise .feature .head .heading h4 {
  margin-bottom: 10px;
  font-weight: 600;
}
.whySwiper{
  margin-bottom: 80px;
  position: relative;
}
.whySwiper{
  background: #ffffff;
  border-radius: 60px;
  min-height: auto;

}
.whySwiper .swiper-slide{
  padding: 40px;
  
}
.whySwiper .swiper-slide .text-faded{

}
.whySwiper .swiper-slide .text-faded h2{
  background: linear-gradient(to right, #AD54A0 0%, #847fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block; /* Ensures proper rendering */
  font-size: 3rem; /* Optional: Adjust as needed */
}

@media only screen and (max-width: 768px) {
  .whySwiper .swiper-slide .text-faded h2{
   
    font-size: 2.5rem; /* Optional: Adjust as needed */
  }
  
}

.whySwiper .swiper-slide .slide-img{
  overflow: hidden;

}

.nav-btns{
position: absolute;
bottom: 30px;
right: 30px;
left: auto;
width: 140px;
display: flex;
justify-content: space-between;
z-index: 2;
}
.nav-btns .swiper-button-next{
width: 60px;
height: 60px;
}
.nav-btns .swiper-button-prev{
  width: 60px;
  height: 60px;
}

.vn-future{
  padding: 150px 0px 30px 0px;
  position: relative;
}

.on-future{
  padding: 20px 0px;
  position: relative;
}
.section-intro{
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 60vh;
}
.section-screen{
  position: absolute;
  top: -30%;
  bottom: auto;
  right: 0px;
  left: auto;
  width: 60%;
  
}
.vn-big-text{
  font-size: 6.5rem;
  color: #847fff5e;
}
.on-big-text{
  font-size: 6.5rem;
  color: #847fff5e;
}
.section-screen-mb{
  padding: 20px;
}

@media only screen and (max-width: 992px) {
  .vn-future{
    padding: 30px 0px;
    position: relative;
  }
  .section-intro{
    height: 30vh;
  }

  .section-screen{
    position: absolute;
    top: -10%;
    bottom: auto;
    right: 0px;
    left: auto;
    width: 80%;
  }
  .vn-big-text{
    font-size: 3rem;
    color: #847fff5e;
  }
  .on-big-text{
    font-size: 5rem;
    color: #847fff5e;
  }
}

@media only screen and (max-width: 768px) {
  .vn-future{
    padding: 30px 0px;
    position: relative;
  }
  .section-intro{
    height: auto;
    display: block;
  }

  .section-screen{
    position: relative;
  }
  .vn-big-text{
    font-size: 2.3rem;
    color: #847fff5e;
  }
  .on-big-text{
    font-size: 3.5rem;
    color: #847fff5e;
  }
}
@media only screen and (max-width: 400px) {
  .vn-future{
    padding: 30px 0px;
    position: relative;
  }
  .section-intro{
    height: auto;
    display: block;
  }

  .section-screen{
    position: relative;
  }
  .vn-big-text{
    font-size: 2rem;
    color: #847fff5e;
  }
  .vn-big-text{
    font-size: 3rem;
    color: #847fff5e;
  }
}
.connect-vn{
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 60px;
  margin-top: 40px;
  padding: 40px 0px;
  width: 90%;
  margin: 0px auto;
  height: auto;
  margin-bottom: 100px;
  -webkit-box-shadow: 10px 50px 100px -50px rgba(0,0,0,0.25);
  -moz-box-shadow: 10px 50px 100px -50px rgba(0,0,0,0.25);
  box-shadow: 10px 50px 100px -50px rgba(0,0,0,0.25);
}

.cta{
  margin: 20px auto;
  position: relative;
  width: 250px;

}
.cta-sp-btn{
  width: 250px;
  border-radius: 50px;
  padding: 10px 20px;
  background: linear-gradient(to right, #AD54A0 0%, #847fff 100%);
}
.cta-sp-btn h4{
  margin: 0px auto;
}
.vn-future-sections .img-container{
  padding: 20px;
}
@media only screen and (max-width: 768px) {
  .connect-vn{
    margin-bottom: 60px;

  }

  .vn-future-sections{

  }
}

.mobile-menu .brand-btn{
  width: 250px;
  margin: 0px auto;
  text-align: center;
  padding: 10px 30px !important;
}


.vn-expertise .feature-list .row [class*=col-]{
  display: flex;
}

.vn-p-why .feature-list .row [class*=col-]{
  display: flex;
}

.road .feature-list .row [class*=col-]{
  display: flex;
}

.pp-btm-div{
  overflow:visible !important;
  height: auto !important;
}
.pp-btm-div .img-container{
  position: relative;
  height: 250px;
}

.pp-btm-div .ab-img{
  position: absolute;
  bottom: 0;
  left: -20%;
  width: 120%;
  z-index: 2;
}
@media only screen and (max-width: 1200px) {
  .pp-btm-div .ab-img{
    width:130%;
    left: -30%;
  }
}
@media only screen and (max-width: 990px) {
  .pp-btm-div .ab-img{
    width:120%;
    left: -20%;
  }
}
@media only screen and (max-width: 768px) {
  .pp-btm-div .ab-img{
    width: 80%;
    left: 10%;
  }
  .pp-btm-div .text-orverlay h2{
    font-size: 3rem;
  }
}


@media only screen and (max-width: 568px) {
  .pp-btm-div .ab-img{
    width: 80%;
    left: 10%;
  }
  .pp-btm-div .text-orverlay h2{
    font-size: 2rem;
  }
}

.vn-expertise .features {
  margin-bottom: 20px;
  background: #ffffff;
  border-radius: 60px;
  padding: 30px;
}
.row-container{}
.vn-expertise .features {
  margin-bottom: 20px;
  
}
.vn-expertise .features .head {
  display: flex;
  align-items: start;
  margin-bottom: 20px;
  
}
.features .head .icon {
  width: 100px;
  height: 100px;
}
.features .head .icon img {
  width: 100% !important;
}
 .features .head .heading {
  width: 80%;
  margin-left: 10px;
  margin-top: 40px;
}
.features .head .heading h4 {
  margin-bottom: 10px;
  font-weight: 600;
}
.feature .head .heading {
  width: 80%;
  margin-left: 10px;
}
.feature .head .heading h4 {
  margin-bottom: 10px;
  font-weight: 600;
}



.on-intro{
  position: relative;
  min-height: auto;
  padding-top: 7.5%;
}

.on-bg-onwhite{
  position: absolute;
  z-index: -1;
  bottom: auto;
  top:0%;
  left: 0px;
  right: auto;
  width: 100%;
}
.on-bg-onwhite img{
  width: 100%;
}
.on-main-intro{
  font-size: 4.5rem;
  text-align: center;
  background: linear-gradient(to right, #AD54A0 0%, #847fff 100%);
  margin-bottom:10px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.on-main-intro-final{
  font-size: 4.5rem;
  text-align: center;
  background: linear-gradient(to right, #AD54A0 0%, #847fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media only screen and (max-width: 768px) {
  .on-main-intro-final{
    font-size: 2.5rem;

  }
}
.on-bottom-div{
  background: linear-gradient(90deg, #AD54A0, #C296F0, #847fff);
  height: 300px;
  border-radius: 30px;
  position: relative;
  display: flex;
  padding: 40px;
  overflow:hidden;
}
.on-bottom-div .text-container h4{

}
.on-text-orverlay{
  position: absolute;
  bottom: 0px;
  top: auto;
  left: 40px;
  right: auto;

}
.on-text-section{
  margin-bottom: 10%;
}
.on-text-orverlay h2{
  color: #ffffff;
  font-size: 4rem;
  opacity: .3;
}
.on-div-bg-img{
  position: absolute;
  right: 0px;
  left: auto;
  bottom: 0px;
  width: 100%;
  height: 100%;
  top: auto;
}
.on-div-bg-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .6;
}
.on-screen-img{
  position: absolute;
  left: 25%;
  right: auto;
  bottom: -10%;
  top: auto;
  width: 50%;
  z-index: 1;
}

@media only screen and (max-width: 992px) {
  .on-intro{
    padding-top: 20%;
  }
  .on-text-section{
    margin-bottom: 20%;
  }
  .on-screen-img{
    width: 70%;
    left: 15%;
    bottom: 0%;
  }
  .pp-intro .bg-onwhite{
    bottom: auto !important;
    top: 25% !important;
  }
  

}

@media only screen and (max-width: 768px) {
  .on-intro{
    padding-top: 20%;
  }
  .on-main-intro{
    font-size: 2.5rem;
  }
  .on-text-section{
    margin-bottom: 20%;
  }
  .on-screen-img{
    width: 60%;
    left: 20%;
    bottom: 0px;
  }

  .on-text-orverlay h2{
    font-size: 2rem;
  }
  .on-text-orverlay{
    left: 20px;
  }
  .on-bottom-div{
    padding: 20px;
    height: 200px;
    border-radius: 20px;
  }
  .on-bg-onwhite{
    bottom: 0px;
    top: auto;
  }
  .pp-intro .bg-onwhite{
    bottom: auto !important;
    top: 10% !important;
  }
  

}

@media only screen and (max-width: 600px) {
  .on-intro{
    padding-top: 30%;
  }
  .on-main-intro{
    font-size: 2.5rem;
  }
  .on-text-section{
    margin-bottom: 30%;
  }
  .on-screen-img{
    width: 80%;
    left: 10%;
    bottom: 0px;
  }

  .on-text-orverlay h2{
    font-size: 2rem;
  }
  .on-text-orverlay{
    left: 20px;
  }
  .on-bottom-div{
    padding: 20px;
    height: 200px;
    border-radius: 20px;
  }
  .on-bg-onwhite{
    bottom: 0px;
    top: auto;
  }
  .pp-intro .bg-onwhite{
    bottom: auto !important;
    top: 10% !important;
  }
  

}

@media only screen and (max-width: 500px) {
  .on-intro{
    padding-top: 30%;
  }
  .on-main-intro{
    font-size: 2.5rem;
  }
  .on-text-section{
    margin-bottom: 30%;
  }
  .on-screen-img{
    width: 100%;
    left: 0px;
    bottom: 0px;
  }

  .on-text-orverlay h2{
    font-size: 2rem;
  }
  .on-text-orverlay{
    left: 20px;
  }
  .on-bottom-div{
    padding: 20px;
    height: 200px;
    border-radius: 20px;
  }
  .on-bg-onwhite{
    bottom: 0px;
    top: auto;
  }
  .pp-intro .bg-onwhite{
    bottom: auto !important;
    top: 15% !important;
  }
  

}


@media only screen and (max-width: 400px) {
  .on-intro{
    padding-top: 30%;
  }
  .on-main-intro{
    font-size: 2.5rem;
  }
  .on-text-section{
    margin-bottom: 30%;
  }
  .on-screen-img{
    width: 100%;
    left: 0px;
    bottom: 0px;
  }

  .on-text-orverlay h2{
    font-size: 2rem;
  }
  .on-text-orverlay{
    left: 20px;
  }
  .on-bottom-div{
    padding: 20px;
    height: 200px;
    border-radius: 20px;
  }
  .on-bg-onwhite{
    bottom: 0px;
    top: auto;
  }
  .pp-intro .bg-onwhite{
    bottom: auto !important;
    top: 20% !important;
  }
 
  

}



.counter-section {
  background: #ffffff;
  padding: 100px 0px 60px 0px;
}
.counter-section .points {
  margin-top: 20px;
}
.counter-section .points .point {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 500px) {
  .counter-section .points .point {

  }
}
@media only screen and (max-width: 992px) {
  .counter-section .points .point {
    margin-bottom: 30px;
  }

  
}
.counter-section .points .point .icon {
  width: 90px;
  margin-right: 20px;
}
.counter-section .points .point .details .title--h1 {
  font-size: 60px !important;
  font-weight: 600;
  line-height: 2.5rem;
  margin-bottom: 5px;
}
.counter-section .points .point .details span {
  font-size: 40px !important;
  font-weight: 600;
}
.counter-section .points .point .details p {
  font-size: 16px;
  font-weight: 500;
  margin: 0px;
  text-transform: uppercase;
}

.on-expertise{
  padding: 30px 0px;
}
.features .body .content{
  text-align: center;
}
.on-expertise .features {
  margin-bottom: 20px;

  background: #ffffff;
  border-radius: 60px;
  padding: 30px;
  border: 1px solid #847fff;
}
.on-expertise .features {
  margin-bottom: 20px;
  
}
.on-expertise .features .head {
  display: flex;
  align-items: start;
  margin-bottom: 20px;
  
}
.on-expertise .features .head .icon {
  width: 100px;
  height: 100px;
}
.on-expertise .features .head .icon img {
  width: 100% !important;
}
.on-expertise .features .head .heading {
  width: 80%;
  margin-left: 10px;
  margin-top: 40px;
}
.on-expertise .features .head .heading h4 {
  margin-bottom: 10px;
  font-weight: 600;
}
.on-expertise .row [class*=col-]{
  display: flex;
}


.process-section {
  background: #ffffff;
  padding: 60px 0px;
  position: relative;

}
.process-section  .bg-img{
  width: 100%;
  text-align: center;

}
.process-section .process-container {
  position: absolute;
  width: 80%;
  left: 10%;
  right: auto;
  bottom: 20%;
}
@media only screen and (max-width: 992px) {
  .process-section .process-container {
    position: relative;
  }
}
.process-section .process-container .process {
  margin-top: 60px;
  display: flex;
  align-items: start;
}
@media only screen and (max-width: 992px) {
  .process-section .process-container .process {
    display: block;
    width: 100% !important;
  }
}
.process-section .process-container .process .step {
  width: 25%;
  text-align: center;
  z-index: 1;
}
@media only screen and (max-width: 992px) {
  .process-section .process-container .process .step {
    width: 100% !important;
    margin-bottom: 30px;
  }
}
.process-section .process-container .process .step .point {
  width: 150px;
  height: 150px;
  border-radius: 50%;

  margin: 0px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  position: relative;
  transform: scale(0);
}
.process-section .process-container .process .step .point img {
  width: 120px !important;
}
.process-section .process-container .process .step .point-name {
  margin: 0px auto;
  background: #f5f5f5;
  width: 80%;
  border-radius: 30px;
  padding: 5px 10px;

}
.process-section .process-container .process .step .point-name p {
  font-size: 14px;
  font-weight: 600;
  margin: 0px;
  text-align: center;
}
@media only screen and (max-width: 992px) {
  .process-section .process-container .process .step .point-name p {
    font-size: 18px;
  }
}
.process-section .process-container .process .step-1 {
  position: relative;
}
.process-section .process-container .process .step-1::after {
  position: absolute;
  content: "";
  z-index: 0;
  top: 33%;
  margin: 5px 0;
  width: 0%;
  left: auto;
  right: -25%;
  height: 5px;
  background: repeating-linear-gradient(to right, transparent, transparent 10px, #292929 10px, #292929 20px);
}
@media only screen and (max-width: 992px) {
  .process-section .process-container .process .step-1::after {
    display: none;
  }
}
.process-section .process-container .process .step-2 {
  position: relative;
}
.process-section .process-container .process .step-2::after {
  position: absolute;
  content: "";
  z-index: 0;
  top: 33%;
  margin: 5px 0;
  width: 0%;
  left: auto;
  right: -25%;
  height: 5px;
  background: repeating-linear-gradient(to right, transparent, transparent 10px, #292929 10px, #292929 20px);
}
@media only screen and (max-width: 992px) {
  .process-section .process-container .process .step-2::after {
    display: none;
  }
}
.process-section .process-container .process .step-3 {
  position: relative;
}
.process-section .process-container .process .step-3::after {
  position: absolute;
  content: "";
  z-index: 0;
  top: 33%;
  margin: 5px 0;
  width: 0%;
  left: auto;
  right: -25%;
  height: 5px;
  background: repeating-linear-gradient(to right, transparent, transparent 10px, #292929 10px, #292929 20px);
}
@media only screen and (max-width: 992px) {
  .process-section .process-container .process .step-3::after {
    display: none;
  }
}
.process-section .process-container .process .step-4 {
  position: relative;
}
.process-section .process-container .process .step-4::after {
  position: absolute;
  content: "";
  z-index: 0;
  top: 33%;
  margin: 5px 0;
  width: 0%;
  left: auto;
  right: -15%;
  height: 5px;
  background: repeating-linear-gradient(to right, transparent, transparent 10px, #292929 10px, #292929 20px);
}
@media only screen and (max-width: 992px) {
  .process-section .process-container .process .step-4::after {
    display: none;
  }
}
.process-section .process-container .active .step-1 .point {
  animation: popUp 0.2s steps(28) forwards;
}
@keyframes popUp {
  to {
    transform: scale(1);
  }
}
.process-section .process-container .active .step-1 .point img {
  animation: popUp 0.3s steps(28) forwards;
}
@keyframes popUp {
  to {
    transform: scale(1);
  }
}
.process-section .process-container .active .step-1::after {
  animation: connect 0.4s steps(28) forwards;
}
@keyframes connect {
  to {
    width: 50%;
  }
}
.process-section .process-container .active .step-2 .point {
  animation: popUp 0.5s steps(28) forwards;
}
@keyframes popUp {
  to {
    transform: scale(1);
  }
}
.process-section .process-container .active .step-2 .point img {
  animation: popUp 0.6s steps(28) forwards;
}
@keyframes popUp {
  to {
    transform: scale(1);
  }
}
.process-section .process-container .active .step-2::after {
  animation: connect 0.7s steps(28) forwards;
}
@keyframes connect {
  to {
    width: 50%;
  }
}
.process-section .process-container .active .step-3 .point {
  animation: popUp 0.8s steps(28) forwards;
}
@keyframes popUp {
  to {
    transform: scale(1);
  }
}
.process-section .process-container .active .step-3 .point img {
  animation: popUp 0.9s steps(28) forwards;
}
@keyframes popUp {
  to {
    transform: scale(1);
  }
}
.process-section .process-container .active .step-3::after {
  animation: connect 0.1s steps(28) forwards;
}
@keyframes connect {
  to {
    width: 50%;
  }
}
.process-section .process-container .active .step-4 .point {
  animation: popUp 1.1s steps(28) forwards;
}
@keyframes popUp {
  to {
    transform: scale(1);
  }
}
.process-section .process-container .active .step-4 .point img {
  animation: popUp 1.2s steps(28) forwards;
}
@keyframes popUp {
  to {
    transform: scale(1);
  }
}

.text-faded h2{
  background: linear-gradient(to right, #AD54A0 0%, #847fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block; /* Ensures proper rendering */
  font-size: 3rem; /* Optional: Adjust as needed */
}
.text-faded h3{
  background: linear-gradient(to right, #AD54A0 0%, #847fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block; /* Ensures proper rendering */
  font-size: 2.4rem; /* Optional: Adjust as needed */
}


.testimony-section {
  background: linear-gradient(90deg, #AD54A0, #C296F0, #847fff);
  background-position: center;
  background-size: cover;
  height: auto;
  margin-top: 60px;
  padding: 40px 0px;
  position: relative;
  display: flex;
  align-items: center;
  background-image: url(../images/vn-bg.png);
}
.testimony-section .testimony-slider {
  margin-top: 60px;
}
.testimony-section .testimony-slider .testimonySwiper {
  position: relative;
  padding-bottom: 50px;
}
.testimony-section .testimony-slider .testimonySwiper .swiper-slide .testimony {
  text-align: center;
}
.testimony-section .testimony-slider .testimonySwiper .swiper-slide .testimony .client-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0px auto;
}
.testimony-section .testimony-slider .testimonySwiper .swiper-slide .testimony .details {
  margin-top: 20px;
}
.testimony-section .testimony-slider .testimonySwiper .swiper-slide .testimony .details h4 {
  margin-bottom: auto !important;
}
.testimony-section .testimony-slider .testimonySwiper .swiper-slide .testimony .details .position {
  font-weight: 500;
  text-align: center;
}
.testimony-section .testimony-slider .testimonySwiper .swiper-slide .testimony .quote {
  background: #ffffff;
  border: 1px solid #E5E5E5;
  border-radius: 30px;
  padding: 20px 20px;
  width: 60%;
  min-height: 200px;
  margin: 0px auto;
  display: flex;
  align-items: center;
}
.testimony-section .testimony-slider .testimonySwiper .swiper-slide .testimony .quote i {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.8rem;
}
@media only screen and (max-width: 992px) {
  .testimony-section .testimony-slider .testimonySwiper .swiper-slide .testimony .quote {
    width: 85%;
  }
}
.testimony-section .testimony-slider .testimonySwiper .pagination {
  margin: 0px auto;
  position: absolute;
  bottom: 2%;
  left: 45%;
}
.testimony-section .testimony-slider .testimonySwiper .pagination .swiper-pagination-bullet {
  background: #ce3ff6 !important;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: 5px;
}
.testimony-section .testimony-slider .testimonySwiper .navigation {
  position: absolute;
  width: 100%;
  bottom: 45%;
  right: auto;
  left: auto;
  z-index: 1;
}
@media only screen and (max-width: 798px) {
  .testimony-section .testimony-slider .testimonySwiper .navigation {
    bottom: 10%;
  }
}
.testimony-section .testimony-slider .testimonySwiper .navigation .swiper-next {
  width: 40px;
  position: absolute;
  right: 2%;
  left: auto;
}
.testimony-section .testimony-slider .testimonySwiper .navigation .swiper-prev {
  width: 40px;
  position: absolute;
  left: 2%;
  right: auto;
}
.info-div{
  background: linear-gradient(90deg, #AD54A0, #C296F0, #847fff);
  height: 300px;
  border-radius: 30px;
  position: relative;
  display: grid;
}
.info-div .info{

  text-align: center;
}
.bg-gray{
  background: #fafafa !important;
}
.info-growth .point{
  border-left: 3px solid #AD54A0 !important;
  padding: 5px 20px;
  border: 1px solid #DDD;
  margin-bottom: 20px;
}
.point .head p{
margin: 0px;
}
.info-div .info .icon{
      width: 100px;
    height: 100px;
    margin: 0px auto;
    padding: 20px;
    border: 4px solid #fff;
    border-radius: 30px;

}

@media only screen and (max-width: 992px) {
  .info-div .info .icon {
   width: 60px;
   height: 60px;
   padding: 0px;
   border: none;
  }
  .info-div .info .name{
  margin-top: 10px;
  
}
}
.info-div .info .name{
  margin-top: 20px;
}

.info-div .text-orverlay{
  position: relative;
}
.info-second-section{
 padding: 60px 0px;
}

.info-second-section .feature-list .row [class*=col-]{
  display: flex;
}
.info-second-section .feature-list .text-container{
  margin-bottom: 30px;
}
.info-second-section .features {
  margin-bottom: 20px;
  border: 1px solid #DDD;
  border-radius: 20px;
  padding: 20px;
  width: 100%;
}
.info-second-section .feature {
  margin-bottom: 20px;
}
.info-second-section .features .head {
  /* display: flex; */
  align-items: start;
  margin-bottom: 20px;
}
.info-second-section .features .head .icon {
  width: 80px;
  height: auto;
  margin:0px auto;
}


.info-flow {
  background-image: url(../images/vn-bg.png);
  background-position: center;
  background-size: cover;
  min-height: 100vh;
  height: auto;
 position: relative;
  padding: 60px 0px;
  margin-bottom: 40px;

}
@media only screen and (max-width: 992px) {
  .info-flow  {
   height: auto;
  }
}

.info-flow   .bg-img{
 width: 100%;
    text-align: center;
    position: absolute;
    left: 0%;
    top: 20%;
    right: auto;
    bottom: auto;
}

.info-flow .flow-container {
  
  
}
@media only screen and (max-width: 992px) {
  .info-flow .flow-container {
    position: relative;
  }
}
.info-flow .flow-container .flow {
  margin-top: 10%;
  display: flex;
  align-items: start;
}
@media only screen and (max-width: 992px) {
  .info-flow .flow-container .flow {
    display: block;
    width: 100% !important;
  }
}
/* .info-flow .flow-container .flow  [class*=step-]{
  display: flex;
} */
.info-flow .flow-container .flow .step {
  width: 24%;
  text-align: center;
  z-index: 1;
  background: #ffffff;
  border-radius: 30px;
  padding: 20px;
  margin-right: 1%;
  min-height: 450px;
}
@media only screen and (max-width: 992px) {
  .info-flow .flow-container .flow .step {
    width: 100% !important;
    margin-bottom: 30px;
  }
}
.info-flow .flow-container .flow .step .image {
  width: 100%;
  height: 200px;
  margin-bottom: 10px;
}

.info-flow .flow-container .flow .step .point {
  width:100%;
  height: 50px;
  border-radius: 15px;
  background: linear-gradient(90deg, #AD54A0, #C296F0, #847fff);
  margin: 0px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  position: relative;
  transform: scale(0);
}
.info-flow .flow-container .flow .step .point img {
  width: 120px !important;
}
.info-flow .flow-container .flow .step .point-name {
  width: 100%;
  border-radius: 30px;

}
.info-flow .flow-container .flow .step .point-name p {
  font-size: 14px;
  font-weight: 600;
  margin: 0px;
  text-align: center;
}
@media only screen and (max-width: 992px) {
  .info-flow .flow-container .flow .step .point-name p {
    font-size: 18px;
  }
}
.info-flow .flow-container .flow .step-1 {
  position: relative;
}
.info-flow .flow-container .flow .step-1::after {
  position: absolute;
  content: "";
  z-index: 1;
  top: 55%;
  margin: 5px 0;
  width: 0%;
  left: auto;
  right: -25%;
  height: 5px;
  background: repeating-linear-gradient(to right, transparent, transparent 10px, #292929 10px, #292929 20px);
}
@media only screen and (max-width: 992px) {
  .info-flow .flow-container .flow .step-1::after {
    display: none;
  }
}
.info-flow .flow-container .flow .step-2 {
  position: relative;
}
.info-flow .flow-container .flow .step-2::after {
  position: absolute;
  content: "";
  z-index: 1;
  top: 55%;
  margin: 5px 0;
  width: 0%;
  left: auto;
  right: -25%;
  height: 5px;
  background: repeating-linear-gradient(to right, transparent, transparent 10px, #292929 10px, #292929 20px);
}
@media only screen and (max-width: 992px) {
  .info-flow .flow-container .flow .step-2::after {
    display: none;
  }
}
.info-flow .flow-container .flow .step-3 {
  position: relative;
}
.info-flow .flow-container .flow .step-3::after {
  position: absolute;
  content: "";
  z-index: 1;
  top: 55%;
  margin: 5px 0;
  width: 0%;
  left: auto;
  right: -25%;
  height: 5px;
  background: repeating-linear-gradient(to right, transparent, transparent 10px, #292929 10px, #292929 20px);
}
@media only screen and (max-width: 992px) {
  .info-flow .flow-container .flow .step-3::after {
    display: none;
  }
}
.info-flow .flow-container .flow .step-4 {
  position: relative;
}
.info-flow .flow-container .flow .step-4::after {
  position: absolute;
  content: "";
  z-index: 1;
  top: 55%;
  margin: 5px 0;
  width: 0%;
  left: auto;
  right: -15%;
  height: 5px;
  background: repeating-linear-gradient(to right, transparent, transparent 10px, #292929 10px, #292929 20px);
}
@media only screen and (max-width: 992px) {
  .info-flow .flow-container .flow .step-4::after {
    display: none;
  }
}
.info-flow .flow-container .active .step-1 .point {
  animation: popUp 0.2s steps(28) forwards;
}
@keyframes popUp {
  to {
    transform: scale(1);
  }
}
.info-flow .flow-container .active .step-1 .point img {
  animation: popUp 0.3s steps(28) forwards;
}
@keyframes popUp {
  to {
    transform: scale(1);
  }
}
.info-flow .flow-container .active .step-1::after {
  animation: connect 0.4s steps(28) forwards;
}
@keyframes connect {
  to {
    width: 50%;
  }
}
.info-flow .flow-container .active .step-2 .point {
  animation: popUp 0.5s steps(28) forwards;
}
@keyframes popUp {
  to {
    transform: scale(1);
  }
}
.info-flow .flow-container .active .step-2 .point img {
  animation: popUp 0.6s steps(28) forwards;
}
@keyframes popUp {
  to {
    transform: scale(1);
  }
}
.info-flow .flow-container .active .step-2::after {
  animation: connect 0.7s steps(28) forwards;
}
@keyframes connect {
  to {
    width: 50%;
  }
}
.info-flow .flow-container .active .step-3 .point {
  animation: popUp 0.8s steps(28) forwards;
}
@keyframes popUp {
  to {
    transform: scale(1);
  }
}
.info-flow .flow-container .active .step-3 .point img {
  animation: popUp 0.9s steps(28) forwards;
}
@keyframes popUp {
  to {
    transform: scale(1);
  }
}
.info-flow .flow-container .active .step-3::after {
  animation: connect 0.1s steps(28) forwards;
}
@keyframes connect {
  to {
    width: 50%;
  }
}
.info-flow .flow-container .active .step-4 .point {
  animation: popUp 1.1s steps(28) forwards;
}
@keyframes popUp {
  to {
    transform: scale(1);
  }
}
.info-flow .flow-container .active .step-4 .point img {
  animation: popUp 1.2s steps(28) forwards;
}
@keyframes popUp {
  to {
    transform: scale(1);
  }
}

.work-flow{
  background-image: url(../images/growth-bg.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background: #f5f5f5;
  padding: 40px 0px;
}
.theflow{/* margin-top: 30px; */display: flex;}

.theflow .step{
  margin-bottom: 20px;
  border: 1px solid #DDD;
  border-radius: 20px;
  padding: 20px;
  background: #fff;
  width: 40%;
  height: 300px;
  
}

.theflow .step .head{
    display: flex;
  align-items: center;
  margin-bottom: 20px;
  
}



.theflow .step .head .icon{
  width: 80px;
  height: auto;
  margin-right: 20px;
}
.theflow .step-1{
  position: relative;
  margin-left: 10%;
  min-height: 300px;
}
.theflow .step-1::after{
    width: 20%;
    height: 20%;
    border-top: 5px solid #AD54A0;
    border-right: 5px solid #AD54A0;
    border-top-right-radius: 15px;
    position: absolute;
    content: "";
    left: auto;
    right: -20%;
    bottom: auto;
    top: 25%;
}
.theflow .step-2{
  position: relative;
  margin-top: 10%;
  margin-left: 5%;
  min-height: 300px;
}
.theflow .step-2::after{
    width: 60%;
    height: 20%;
    border-top: 5px solid #AD54A0;
    border-left: 5px solid #AD54A0;
    border-top-left-radius: 15px;
    position: absolute;
    content: "";
    left: -60%;
    right: auto;
    bottom: -10%;
    top: auto;
}


.theflow .step-3{
  position: relative;
  margin-left: 10%;
  min-height: 350px;
}
.theflow .step-3::after{
    width: 20%;
    height: 20%;
    border-top: 5px solid #AD54A0;
    border-right: 5px solid #AD54A0;
    border-top-right-radius: 15px;
    position: absolute;
    content: "";
    left: auto;
    right: -20%;
    bottom: auto;
    top: 20%;
}
.theflow .step-4{
  position: relative;
  margin-top: 10%;
  margin-left: 5%;
  min-height: 300px;
}
.theflow .step-4::after{
   width: 60%;
    height: 20%;
    border-top: 5px solid #AD54A0;
    border-left: 5px solid #AD54A0;
    border-top-left-radius: 15px;
    position: absolute;
    content: "";
    left: -60%;
    right: auto;
    bottom: -10%;
    top: auto;
}


.theflow .step-5{
  position: relative;
  margin-left: 10%;
  min-height: 300px;
}
.theflow .step-5::after{
    display: none;
}

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

  .theflow{
display: block; }
 .theflow .step{
  width: 100% !important;
  margin-left: auto;
  height: auto;
 }
 .theflow .step-1{
  margin-bottom: 20px;
  margin-top: auto;
 }
 .theflow .step-2{
  margin-bottom: 20px;
  margin-top: auto !important;
 }
 .theflow .step-3{
  margin-bottom: 20px;
  margin-top: auto;
 }
 .theflow .step-4{
  margin-bottom: 20px;
  margin-top: auto;
 }
 .theflow .step-5{
  margin-bottom: 20px;
  margin-top: auto !important;
 }

  .theflow .step-1::after{
  display: none;
  margin-bottom: 20px;
  margin-top: auto !important;
 }
 .theflow .step-2::after{
  display: none;
  margin-bottom: 20px;
  margin-top: auto !important;
 }
 .theflow .step-3::after{
  display: none;
  margin-bottom: 20px;
  margin-top: auto;
 }
 .theflow .step-4::after{
  display: none;
  margin-bottom: 20px;
  margin-top: auto;
 }
 .theflow .step-5::after{
  display: none;
  margin-bottom: 20px;
  margin-top: auto !important;
 }
 
 
}
.growth {
  margin-top: 30px;
}
.growth .features {
  margin-bottom: 20px;
  background: #ffffff;
  border-radius: 0px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  width: 100%;
}
.growth .features .head {
  display: flex;
  align-items: center;
  
}
.growth .features .head{
 margin: 0px auto;
}

.growth .features .head .heading {
  /* width: 80%; */
  margin-left: 10px;
  margin-top: 0px;
}
.growth .features .head .heading p{
  margin: 0px auto;
}


.scale-flow{
  background-image: url(../images/growth-bg.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background: #f5f5f5;
  padding: 40px 0px;
}
.scaletheflow{/* margin-top: 30px; */display: flex;}

.scaletheflow .step{
  margin-bottom: 20px;
  border: 1px solid #DDD;
  border-radius: 20px;
  padding: 20px;
  background: #fff;
  width: 50%;
  height: auto;
  
}

.scaletheflow .step .head{
    display: flex;
  align-items: center;
  margin-bottom: 20px;
  
}



.scaletheflow .step .head .icon{
  width: 80px;
  height: auto;
  margin-right: 20px;
}
.scaletheflow .step-1{
  position: relative;
 
  height: 300px !important;
}
.scaletheflow .step-1::after{
    width: 20%;
    height: 20%;
    border-top: 5px solid #AD54A0;
    border-right: 5px solid #AD54A0;
    border-top-right-radius: 15px;
    position: absolute;
    content: "";
    left: auto;
    right: -20%;
    bottom: auto;
    top: 25%;
}
.scaletheflow .step-2{
  position: relative;
  margin-top: 10%;
  margin-left: 5%;
  min-height: 300px;
}
.scaletheflow .step-2::after{
    width: 60%;
    height: 20%;
    border-top: 5px solid #AD54A0;
    border-left: 5px solid #AD54A0;
    border-top-left-radius: 15px;
    position: absolute;
    content: "";
    left: -60%;
    right: auto;
    bottom: -10%;
    top: auto;
}


.scaletheflow .step-3{
  position: relative;
 
  height: 400px;
}
.scaletheflow .step-3::after{
    width: 20%;
    height: 20%;
    border-top: 5px solid #AD54A0;
    border-right: 5px solid #AD54A0;
    border-top-right-radius: 15px;
    position: absolute;
    content: "";
    left: auto;
    right: -20%;
    bottom: auto;
    top: 20%;
}
.scaletheflow .step-4{
  position: relative;
  margin-top: 10%;
  margin-left: 5%;
  min-height: 300px;
}

.bb-1{
  border-bottom: 1px solid #f5f5f5;
  padding-top: 40px;
}




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

  .scaletheflow{
display: block; }
 .scaletheflow .step{
  width: 100% !important;
  margin-left: auto;
  height: auto;
 }
 .scaletheflow .step-1{
  margin-bottom: 20px;
  margin-top: auto;
  height: auto !important;
 }
 .scaletheflow .step-2{
  margin-bottom: 20px;
  margin-top: auto !important;
  height: auto;
 }
 .scaletheflow .step-3{
  margin-bottom: 20px;
  margin-top: auto;
  height: auto;
 }
 .scaletheflow .step-4{
  margin-bottom: 20px;
  margin-top: auto;
  height: auto;
 }


  .scaletheflow .step-1::after{
  display: none;
  margin-bottom: 20px;
  margin-top: auto !important;
 }
 .scaletheflow .step-2::after{
  display: none;
  margin-bottom: 20px;
  margin-top: auto !important;
 }
 .scaletheflow .step-3::after{
  display: none;
  margin-bottom: 20px;
  margin-top: auto;
 }
 .scaletheflow .step-4::after{
  display: none;
  margin-bottom: 20px;
  margin-top: auto;
 }
 
 
 
}