/* ============================
  Template Name: Applayer
  Author: uideck
  Description: Medical App landing HTML5 Template.
  Version: 1.0
=============================== */
/*===========================
    01.COMMON css 
===========================*/
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&family=Heebo:wght@300;400;500;600;700&display=swap");
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Heebo", sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #60698D;
  overflow-x: hidden;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

a:focus,
input:focus,
textarea:focus,
button:focus,
.btn:focus,
.btn.focus,
.btn:not(:disabled):not(.disabled).active,
.btn:not(:disabled):not(.disabled):active {
  text-decoration: none;
  outline: none;
  box-shadow: none;
}

a:hover {
  color: #fff;
}

a {
  transition: all 0.3s ease-out 0s;
}

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

i,
span,
a {
  display: inline-block;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Fira Sans", sans-serif;
  font-weight: 700;
  margin: 0px;
  color: #1D2A5D;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}

h1 {
  font-size: 45px;
}

@media (max-width: 767px) {
  h1 {
    font-size: 36px;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  h1 {
    font-size: 40px;
  }
}

.section-title span {
  font-size: 25px;
  font-weight: 600;
  color: #487CFF;
  margin-bottom: 20px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 25px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

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

p {
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  margin: 0px;
}

.img-bg {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.error {
  color: orangered;
}

.success {
  color: #fff;
}

/*===== All Button Style =====*/
.main-btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  padding: 17px 37px;
  font-size: 18px;
  border-radius: 50px;
  color: #fff;
  cursor: pointer;
  z-index: 5;
  transition: all .4s ease-in-out;
  border: none;
  background: #487CFF;
  overflow: hidden;
}

.main-btn:hover {
  color: #fff;
}

.btn-hover {
  position: relative;
  overflow: hidden;
}

.btn-hover::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 0%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  top: 50%;
  left: 50%;
  padding: 50%;
  z-index: -1;
  transition: all 0.3s ease-out 0s;
  transform: translate3d(-50%, -50%, 0) scale(0);
}

.btn-hover:hover::after {
  transform: translate3d(-50%, -50%, 0) scale(1.3);
}

.scroll-top {
  width: 45px;
  height: 45px;
  background: #400033;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #fff;
  border-radius: 5px;
  position: fixed;
  bottom: 80px;
  right: 30px;
  z-index: 9;
  cursor: pointer;
  transition: all 0.3s ease-out 0s;
}

.scroll-top:hover {
  color: #fff;
  background: rgba(72, 124, 255, 0.8);
}

@keyframes animation1 {
  0% {
    transform: translateY(30px);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(30px);
  }
}

/*===== All Preloader Style =====*/
.preloader {
  /* Body Overlay */
  position: fixed;
  top: 0;
  left: 0;
  display: table;
  height: 100%;
  width: 100%;
  /* Change Background Color */
  background: #fff;
  z-index: 99999;
}

.preloader .loader {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.preloader .loader .spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  margin-left: -32px;
  z-index: 18;
  pointer-events: none;
}

.preloader .loader .spinner .spinner-container {
  pointer-events: none;
  position: absolute;
  width: 100%;
  padding-bottom: 100%;
  top: 50%;
  left: 50%;
  margin-top: -50%;
  margin-left: -50%;
  animation: spinner-linspin 1568.2353ms linear infinite;
}

.preloader .loader .spinner .spinner-container .spinner-rotator {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.preloader .loader .spinner .spinner-container .spinner-rotator .spinner-left {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  right: 50%;
}

.preloader .loader .spinner .spinner-container .spinner-rotator .spinner-right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  left: 50%;
}

.preloader .loader .spinner-circle {
  box-sizing: border-box;
  position: absolute;
  width: 200%;
  height: 100%;
  border-style: solid;
  /* Spinner Color */
  border-color: #487CFF #487CFF #ddd;
  border-radius: 50%;
  border-width: 6px;
}

.preloader .loader .spinner-left .spinner-circle {
  left: 0;
  right: -100%;
  border-right-color: #ddd;
  animation: spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.preloader .loader .spinner-right .spinner-circle {
  left: -100%;
  right: 0;
  border-left-color: #ddd;
  animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

/* Preloader Animations */

@keyframes spinner-linspin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spinner-easespin {
  12.5% {
    transform: rotate(135deg);
  }
  25% {
    transform: rotate(270deg);
  }
  37.5% {
    transform: rotate(405deg);
  }
  50% {
    transform: rotate(540deg);
  }
  62.5% {
    transform: rotate(675deg);
  }
  75% {
    transform: rotate(810deg);
  }
  87.5% {
    transform: rotate(945deg);
  }
  to {
    transform: rotate(1080deg);
  }
}

@keyframes spinner-left-spin {
  0% {
    transform: rotate(130deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(130deg);
  }
}

@keyframes right-spin {
  0% {
    transform: rotate(-130deg);
  }
  50% {
    transform: rotate(5deg);
  }
  to {
    transform: rotate(-130deg);
  }
}

/*===========================
    02.HEADER css 
===========================*/
/*===== NAVBAR =====*/
.navbar-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  transition: all 0.3s ease-out 0s;
  background: #19012c;
}

.sticky {
  position: fixed;
  z-index: 99;
  background-color: #2d084f;
  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease-out 0s;
}

.sticky .navbar {
  padding: 8px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .sticky .navbar {
    padding: 15px 0;
  }
}

.sticky .navbar .navbar-nav .nav-item a {
  color: #fff;
}

.sticky .navbar .navbar-nav .nav-item a::before {
  background: #b8084d;
}

.sticky .navbar .navbar-toggler .toggler-icon {
  background: #1D2A5D;
}

.navbar {
  padding: 0;
  border-radius: 5px;
  position: relative;
  transition: all 0.3s ease-out 0s;
  padding: 10px 0 6px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar {
    padding: 17px 0;
  }
}

.navbar-brand {
  padding: 0;
}

.navbar-brand img {
  max-width: 80px;
}

.sticky .navbar-brand img {
  max-width: 70px;
}

.navbar-toggler {
  padding: 0;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

.navbar-toggler .toggler-icon {
  width: 30px;
  height: 2px;
  background-color: #000;
  display: block;
  margin: 8px 0;
  position: relative;
  transition: all 0.3s ease-out 0s;
}

.navbar-toggler.active .toggler-icon:nth-of-type(1) {
  transform: rotate(45deg);
  top: 13px;
}

.navbar-toggler.active .toggler-icon:nth-of-type(2) {
  opacity: 0;
}

.navbar-toggler.active .toggler-icon:nth-of-type(3) {
  transform: rotate(135deg);
  top: -7px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 9;
    box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    padding: 5px 12px;
  }
}

.navbar-nav .nav-item {
  position: relative;
  margin-left: 40px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-nav .nav-item {
    margin-left: 20px;
  }
}

.navbar-nav .nav-item a {
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  transition: all 0.3s ease-out 0s;
  padding: 10px 0;
  position: relative;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-nav .nav-item a {
    display: inline-block;
    padding: 6px 10px;
    color: #60698D;
  }
}

.navbar-nav .nav-item a::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b8084d;
  position: absolute;
  bottom: 0;
  left: 50%;
  transition: all 0.3s ease-out 0s;
  z-index: -1;
  opacity: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-nav .nav-item a::before {
    background: #487CFF;
  }
}

.navbar-nav .nav-item a:hover::before, .navbar-nav .nav-item a.active::before {
  opacity: 1;
}

.navbar-nav .nav-item:hover .sub-menu {
  top: 100%;
  opacity: 1;
  visibility: visible;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-nav .nav-item:hover .sub-menu {
    top: 0;
  }
}

@media (max-width: 767px) {
  .navbar-nav .nav-item:hover .sub-menu {
    top: 0;
  }
}

.navbar-nav .nav-item .sub-menu {
  width: 200px;
  background-color: #fff;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 110%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-nav .nav-item .sub-menu {
    position: relative;
    width: 100%;
    top: 0;
    display: none;
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 767px) {
  .navbar-nav .nav-item .sub-menu {
    position: relative;
    width: 100%;
    top: 0;
    display: none;
    opacity: 1;
    visibility: visible;
  }
}

.navbar-nav .nav-item .sub-menu li {
  display: block;
}

.navbar-nav .nav-item .sub-menu li a {
  display: block;
  padding: 8px 20px;
  color: #222;
}

.navbar-nav .nav-item .sub-menu li a.active, .navbar-nav .nav-item .sub-menu li a:hover {
  padding-left: 25px;
  color: #487CFF;
}

.navbar-nav .sub-nav-toggler {
  display: none;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-nav .sub-nav-toggler {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background: none;
    color: #222;
    font-size: 18px;
    border: 0;
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 767px) {
  .navbar-nav .sub-nav-toggler {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background: none;
    color: #222;
    font-size: 18px;
    border: 0;
    width: 30px;
    height: 30px;
  }
}

.navbar-nav .sub-nav-toggler span {
  width: 8px;
  height: 8px;
  border-left: 1px solid #222;
  border-bottom: 1px solid #222;
  transform: rotate(-45deg);
  position: relative;
  top: -5px;
}

.hero-section {
  position: relative;
  z-index: 1;
  background-image: url("../img/hero/hero-bg.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom left;
  padding: 150px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-section .hero-content {
    margin-bottom: 50px;
  }
}

@media (max-width: 767px) {
  .hero-section .hero-content {
    margin-bottom: 120px;
  }
}

.hero-section .hero-content h1 {
  font-size: 60px;
  margin-bottom: 35px;
  color: #b8084d;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero-section .hero-content h1 {
    font-size: 55px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-section .hero-content h1 {
    font-size: 48px;
  }
}

@media (max-width: 767px) {
  .hero-section .hero-content h1 {
    font-size: 40px;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .hero-section .hero-content h1 {
    font-size: 50px;
  }
}

.hero-section .hero-content p {
  margin-bottom: 40px;
  color: #000;
}

.hero-section .hero-content .main-btn {
  background: #b8084d;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  padding: 18px 52px;
}

.hero-section .hero-img {
  position: relative;
  text-align: right;
  z-index: 4;
}

.hero-section .hero-img .img-1 {
  position: relative;
  z-index: 5;
   box-shadow:
        0 20px 40px rgba(0,0,0,0.08),
        0 0 80px rgba(0,0,0,0.06);
        border-radius: 50px;
}

.hero-section .hero-img .img-3,
.hero-section .hero-img .img-2 {
  position: absolute;
  right: 0;
  bottom: 0;
  
}

.hero-section .hero-img .img-2 {
  z-index: 1;
}

.hero-section .hero-img .img-3 {
  z-index: -1;
}



.client-logo-section .client-logo-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 30px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .client-logo-section .client-logo-wrapper {
    justify-content: center;
  }
}

.client-logo-section .client-logo-wrapper .single-logo {
  width: 180px;
  margin: 10px;
  opacity: .4;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .client-logo-section .client-logo-wrapper .single-logo {
    width: 160px;
  }
}

.client-logo-section .client-logo-wrapper .single-logo:hover {
  opacity: 1;
}

.client-logo-section .client-logo-wrapper .single-logo img {
  max-width: 100%;
}

.feature-section .single-feature {
  text-align: center;
  padding: 30px;
}

.feature-section .single-feature:hover .icon::after {
  top: 8px;
  right: 8px;
}

.feature-section .single-feature .icon {
  width: 75px;
  height: 75px;
  border-radius: 5px;
  background: #487CFF;
  color: #fff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  z-index: 1;
  margin: 0 auto 10px;
}

.feature-section .single-feature .icon::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  top: -8px;
  right: -8px;
  opacity: .2;
  border-radius: inherit;
  z-index: -1;
  transition: all 0.3s ease-out 0s;
}

.feature-section .single-feature .icon.color-2 {
  background: #FFB260;
}

.feature-section .single-feature .icon.color-3 {
  background: #FF92A5;
}

.feature-section .single-feature .content h3 {
  font-weight: 600;
  margin-bottom: 5px;
}

.single-department {
  margin-bottom: 55px;
}

.single-department span {
  width: 12px;
  height: 12px;
  background: #487CFF;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(72, 124, 255, 0.34);
  margin-bottom: 25px;
}

.single-department h3 {
  margin-bottom: 20px;
}

.steps-content {
  margin-left: 70px;
}

.steps-content .single-department {
  margin-bottom: 35px;
}

.faq-section .faq-wrapper {
  margin-right: 50px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .faq-section .faq-wrapper {
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .faq-section .faq-wrapper {
    margin-right: 0;
  }
}

.faq-section .single-faq {
  background: #fff;
  border-radius: 5px;
  margin-bottom: 20px;
  box-shadow: 0px 3px 6px rgba(142, 142, 142, 0.16);
}

.faq-section .single-faq button {
  background: #fff;
  border: 0;
  font-size: 18px;
  font-weight: 700;
  font-family: "Fira Sans", sans-serif;
  text-align: left;
  padding: 18px 25px;
  padding-right: 45px;
  position: relative;
  color: #1D2A5D;
}

.faq-section .single-faq button.collapsed {
  opacity: .8;
}

.faq-section .single-faq button.collapsed::after {
  transform: rotate(0deg);
}

.faq-section .single-faq button::after {
  content: '';
  position: absolute;
  top: 27px;
  right: 25px;
  border-top: 9px solid #60698D;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  transition: all 0.3s ease-out 0s;
  transform: rotate(180deg);
}

.faq-section .single-faq .faq-content {
  padding: 7px 25px 18px;
}

.faq-section .faq-image img {
  width: 100%;
}

.footer {
  padding-top: 350px;
  background-image: url("../img/footer/footer-bg.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer {
    padding-top: 220px;
    margin-top: 50px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer {
    padding-top: 160px;
    margin-top: 100px;
  }
}

@media (max-width: 767px) {
  .footer {
    padding-top: 120px;
    margin-top: 100px;
  }
}

.footer .widget-wrapper .footer-widget {
  margin-bottom: 40px;
}

.footer .widget-wrapper .footer-widget h3 {
  color: #fff;
  margin-bottom: 25px;
  font-weight: 600;
}

.footer .widget-wrapper .footer-widget .links li a {
  color: #fff;
  font-size: 16px;
  line-height: 30px;
}

.footer .widget-wrapper .footer-widget .links li a:hover {
  padding-left: 6px;
}

.footer .widget-wrapper .footer-widget .download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.footer .widget-wrapper .footer-widget .download li:first-child {
  margin-right: 20px;
}

.footer .widget-wrapper .footer-widget .download li a {
  display: inline-flex;
  background: #fff;
  border-radius: 10px;
  padding: 15px 25px;
  margin-bottom: 15px;
  align-items: center;
}

.footer .widget-wrapper .footer-widget .download li a .icon {
  font-size: 30px;
  color: #1D2A5D;
  margin-right: 10px;
}

.footer .widget-wrapper .footer-widget .download li a .text {
  font-size: 10px;
  color: #60698D;
}

.footer .widget-wrapper .footer-widget .download li a .text b {
  color: #1D2A5D;
  font-size: 16px;
  font-weight: 700;
  display: block;
}

.footer .copy-right-wrapper {
  border-top: 2px solid rgba(255, 255, 255, 0.17);
  padding: 25px 0;
}

.footer .copy-right-wrapper .copy-right p {
  color: rgba(255, 255, 255, 0.66);
  font-size: 16px;
}

@media (max-width: 767px) {
  .footer .copy-right-wrapper .copy-right p {
    text-align: center;
    margin-bottom: 20px;
  }
}

.footer .copy-right-wrapper .copy-right p a {
  color: inherit;
}

.footer .copy-right-wrapper .copy-right p a:hover {
  color: #fff;
}

.footer .copy-right-wrapper .socials ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 767px) {
  .footer .copy-right-wrapper .socials ul {
    justify-content: center;
  }
}

.footer .copy-right-wrapper .socials ul li a {
  color: rgba(255, 255, 255, 0.66);
  font-size: 18px;
  margin-left: 20px;
}

.footer .copy-right-wrapper .socials ul li a:hover {
  color: #fff;
}

/* ======================
    DEFAULT CSS
========================= */
.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-25 {
  margin-top: 25px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-35 {
  margin-top: 35px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-45 {
  margin-top: 45px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-55 {
  margin-top: 55px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-65 {
  margin-top: 65px;
}

.mt-70 {
  margin-top: 70px;
}

.mt-75 {
  margin-top: 75px;
}

.mt-80 {
  margin-top: 80px;
}

.mt-85 {
  margin-top: 85px;
}

.mt-90 {
  margin-top: 90px;
}

.mt-95 {
  margin-top: 95px;
}

.mt-100 {
  margin-top: 100px;
}

.mt-105 {
  margin-top: 105px;
}

.mt-110 {
  margin-top: 110px;
}

.mt-115 {
  margin-top: 115px;
}

.mt-120 {
  margin-top: 120px;
}

.mt-125 {
  margin-top: 125px;
}

.mt-130 {
  margin-top: 130px;
}

.mt-135 {
  margin-top: 135px;
}

.mt-140 {
  margin-top: 140px;
}

.mt-145 {
  margin-top: 145px;
}

.mt-150 {
  margin-top: 150px;
}

.mt-155 {
  margin-top: 155px;
}

.mt-160 {
  margin-top: 160px;
}

.mt-165 {
  margin-top: 165px;
}

.mt-170 {
  margin-top: 170px;
}

.mt-175 {
  margin-top: 175px;
}

.mt-180 {
  margin-top: 180px;
}

.mt-185 {
  margin-top: 185px;
}

.mt-190 {
  margin-top: 190px;
}

.mt-195 {
  margin-top: 195px;
}

.mt-200 {
  margin-top: 200px;
}

.mt-205 {
  margin-top: 205px;
}

.mt-210 {
  margin-top: 210px;
}

.mt-215 {
  margin-top: 215px;
}

.mt-220 {
  margin-top: 220px;
}

.mt-225 {
  margin-top: 225px;
}

.mb-5 {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-35 {
  margin-bottom: 35px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-45 {
  margin-bottom: 45px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-55 {
  margin-bottom: 55px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-65 {
  margin-bottom: 65px;
}

.mb-70 {
  margin-bottom: 70px;
}

.mb-75 {
  margin-bottom: 75px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mb-85 {
  margin-bottom: 85px;
}

.mb-90 {
  margin-bottom: 90px;
}

.mb-95 {
  margin-bottom: 95px;
}

.mb-100 {
  margin-bottom: 100px;
}

.mb-105 {
  margin-bottom: 105px;
}

.mb-110 {
  margin-bottom: 110px;
}

.mb-115 {
  margin-bottom: 115px;
}

.mb-120 {
  margin-bottom: 120px;
}

.mb-125 {
  margin-bottom: 125px;
}

.mb-130 {
  margin-bottom: 130px;
}

.mb-135 {
  margin-bottom: 135px;
}

.mb-140 {
  margin-bottom: 140px;
}

.mb-145 {
  margin-bottom: 145px;
}

.mb-150 {
  margin-bottom: 150px;
}

.mb-155 {
  margin-bottom: 155px;
}

.mb-160 {
  margin-bottom: 160px;
}

.mb-165 {
  margin-bottom: 165px;
}

.mb-170 {
  margin-bottom: 170px;
}

.mb-175 {
  margin-bottom: 175px;
}

.mb-180 {
  margin-bottom: 180px;
}

.mb-185 {
  margin-bottom: 185px;
}

.mb-190 {
  margin-bottom: 190px;
}

.mb-195 {
  margin-bottom: 195px;
}

.mb-200 {
  margin-bottom: 200px;
}

.mb-205 {
  margin-bottom: 205px;
}

.mb-210 {
  margin-bottom: 210px;
}

.mb-215 {
  margin-bottom: 215px;
}

.mb-220 {
  margin-bottom: 220px;
}

.mb-225 {
  margin-bottom: 225px;
}

.pt-5 {
  padding-top: 5px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-15 {
  padding-top: 15px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-25 {
  padding-top: 25px;
}

.pt-30 {
  padding-top: 30px;
}

.pt-35 {
  padding-top: 35px;
}

.pt-40 {
  padding-top: 40px;
}

.pt-45 {
  padding-top: 45px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-55 {
  padding-top: 55px;
}

.pt-60 {
  padding-top: 60px;
}

.pt-65 {
  padding-top: 65px;
}

.pt-70 {
  padding-top: 70px;
}

.pt-75 {
  padding-top: 75px;
}

.pt-80 {
  padding-top: 80px;
}

.pt-85 {
  padding-top: 85px;
}

.pt-90 {
  padding-top: 90px;
}

.pt-95 {
  padding-top: 95px;
}

.pt-100 {
  padding-top: 100px;
}

.pt-105 {
  padding-top: 105px;
}

.pt-110 {
  padding-top: 110px;
}

.pt-115 {
  padding-top: 115px;
}

.pt-120 {
  padding-top: 120px;
}

.pt-125 {
  padding-top: 125px;
}

.pt-130 {
  padding-top: 130px;
}

.pt-135 {
  padding-top: 135px;
}

.pt-140 {
  padding-top: 140px;
}

.pt-145 {
  padding-top: 145px;
}

.pt-150 {
  padding-top: 150px;
}

.pt-155 {
  padding-top: 155px;
}

.pt-160 {
  padding-top: 160px;
}

.pt-165 {
  padding-top: 165px;
}

.pt-170 {
  padding-top: 170px;
}

.pt-175 {
  padding-top: 175px;
}

.pt-180 {
  padding-top: 180px;
}

.pt-185 {
  padding-top: 185px;
}

.pt-190 {
  padding-top: 190px;
}

.pt-195 {
  padding-top: 195px;
}

.pt-200 {
  padding-top: 200px;
}

.pt-205 {
  padding-top: 205px;
}

.pt-210 {
  padding-top: 210px;
}

.pt-215 {
  padding-top: 215px;
}

.pt-220 {
  padding-top: 220px;
}

.pt-225 {
  padding-top: 225px;
}

.pb-5 {
  padding-bottom: 5px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-15 {
  padding-bottom: 15px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-25 {
  padding-bottom: 25px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pb-35 {
  padding-bottom: 35px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pb-45 {
  padding-bottom: 45px;
}

.pb-50 {
  padding-bottom: 50px;
}

.pb-55 {
  padding-bottom: 55px;
}

.pb-60 {
  padding-bottom: 60px;
}

.pb-65 {
  padding-bottom: 65px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pb-75 {
  padding-bottom: 75px;
}

.pb-80 {
  padding-bottom: 80px;
}

.pb-85 {
  padding-bottom: 85px;
}

.pb-90 {
  padding-bottom: 90px;
}

.pb-95 {
  padding-bottom: 95px;
}

.pb-100 {
  padding-bottom: 100px;
}

.pb-105 {
  padding-bottom: 105px;
}

.pb-110 {
  padding-bottom: 110px;
}

.pb-115 {
  padding-bottom: 115px;
}

.pb-120 {
  padding-bottom: 120px;
}

.pb-125 {
  padding-bottom: 125px;
}

.pb-130 {
  padding-bottom: 130px;
}

.pb-135 {
  padding-bottom: 135px;
}

.pb-140 {
  padding-bottom: 140px;
}

.pb-145 {
  padding-bottom: 145px;
}

.pb-150 {
  padding-bottom: 150px;
}

.pb-155 {
  padding-bottom: 155px;
}

.pb-160 {
  padding-bottom: 160px;
}

.pb-165 {
  padding-bottom: 165px;
}

.pb-170 {
  padding-bottom: 170px;
}

.pb-175 {
  padding-bottom: 175px;
}

.pb-180 {
  padding-bottom: 180px;
}

.pb-185 {
  padding-bottom: 185px;
}

.pb-190 {
  padding-bottom: 190px;
}

.pb-195 {
  padding-bottom: 195px;
}

.pb-200 {
  padding-bottom: 200px;
}

.pb-205 {
  padding-bottom: 205px;
}

.pb-210 {
  padding-bottom: 210px;
}

.pb-215 {
  padding-bottom: 215px;
}

.pb-220 {
  padding-bottom: 220px;
}

.pb-225 {
  padding-bottom: 225px;
}

.with_applogo{
  width: 150px;
}

.gradient-btn{
    width: auto;
    height: auto;
    border: none;
    border-radius:10px;
    cursor: pointer;
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    padding: 15px 30px;

    /* Gradient */
       background: linear-gradient(90deg, #e5007d 0%, #b85b5a 50%, #910bd6 100%);

    
}

.mobile_feature{
  position: absolute;
  z-index: -1;
  max-width: 100%;
}

.owl-carousel{
    position:relative;
}

.owl-nav{
    display:block !important;
}

.owl-nav button{
    width:50px !important;
    height:50px !important;
    border-radius:50% !important;
    background:#fff !important;
    box-shadow:0 5px 20px rgba(0,0,0,.15);
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

.owl-nav .owl-prev{
    left:-25px;
}

.owl-nav .owl-next{
    right:-25px;
}

.owl-nav button span{
    font-size:30px;
    line-height:1;
}

@media(max-width:767px){
    .owl-nav .owl-prev{
        left:5px;
    }

    .owl-nav .owl-next{
        right:5px;
    }
}
.owl-nav{
    visibility:visible !important;
    opacity:1 !important;
}

.owl-nav button{
    display:flex !important;
    align-items:center;
    justify-content:center;
}
.feature_bg{
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  padding: 100px 0;
}

.how-it-works{
    background:#f8f9fc;
}

.work-card{
    position:relative;
    background:#fff;
    padding:60px 30px 35px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:all .4s ease;
    overflow:hidden;
    height:100%;
}

.work-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

.step-number{
    position:absolute;
    top:20px;
    right:20px;
    font-size:42px;
    font-weight:700;
    color:#d4d4d4;
    line-height:1;
}

.icon-box{
    width:90px;
    height:90px;
    margin:0 auto 25px;
    border-radius:20px;
    background: linear-gradient(135deg, #ff0f7b, #f3a0b3);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:36px;
    box-shadow:0 10px 25px rgba(255,15,123,0.25);
}

.work-card h4{
    font-weight:700;
    margin-bottom:15px;
}

.work-card p{
    color:#6c757d;
    margin-bottom:0;
    line-height:1.8;
}

@media (max-width:991px){
    .work-card{
        margin-bottom:20px;
    }
}

.app-download-section{
    position: relative;
    min-height: 500px;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 100px 0;
}

.app-download-section .overlay{
    position:absolute;
    inset:0;
    background:rgba(25,0,25,.75);
}

.app-download-section h2{
    font-size:48px;
    line-height:1.2;
}

.app-text{
    font-size:28px;
    line-height:1.6;
    max-width:900px;
    margin:auto;
}

.store-btn{
    border:1px solid rgb(142, 142, 142);
    color:#fff;
    padding:12px 25px;
    border-radius:4px;
    transition:.3s;
    min-width:260px;
}

.store-btn:hover{
    background:rgba(255,255,255,.1);
    color:#fff;
}

.store-btn small{
    display:block;
    font-size:13px;
    line-height:1;
}

.store-btn h5{
    font-size:28px;
}

@media(max-width:768px){

    .app-download-section{
        min-height:400px;
        padding:60px 15px;
    }

    .app-download-section h2{
        font-size:32px;
    }

    .app-text{
        font-size:18px;
    }

    .store-btn{
        min-width:220px;
    }

    .store-btn h5{
        font-size:22px;
    }
}

.footer-section{
    position: relative;
    background: #fcd8ec;
    overflow: hidden;
}

.footer-top{
    border-bottom: 1px solid rgb(201, 163, 163);
    padding: 15px 0;
}

.footer-logo{
    max-height: 60px;
}

.footer-bottom{
    padding: 14px 0;
    position: relative;
    z-index: 2;
}

.copyright-text{
    color: #111;
    font-size: 16px;
    font-weight: 500;
}

.social-icons a{
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-size: 24px;
    margin-left: 8px;
}

.facebook{
    background: #1877f2;
}

.instagram{
    background: linear-gradient(
        45deg,
        #f58529,
        #dd2a7b,
        #8134af,
        #515bd4
    );
}

.whatsapp{
    background: #25d366;
}

/* Decorative Hearts */
.heart{
    position: absolute;
    color: #ff7eb6;
    font-size: 18px;
    opacity: .9;
    z-index: 0;
}

.green-heart{
    color: #9ccc65;
}

.h1{top:10px;left:40px;}
.h2{top:20px;left:230px;}
.h3{top:15px;right:190px;}
.h4{top:45px;right:25px;}

.h5{top:85px;left:0;}
.h6{top:115px;left:385px;}
.h7{top:110px;right:235px;}
.h8{top:120px;right:365px;}

/** delete-account **/

.delete-account-page{
    min-height:100vh;
    padding-top:120px!important;
    background:
    linear-gradient(135deg,#fff0f5 0%,#fdfdfd 100%);
}

.delete-card{
    background:#fff;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.delete-left{
    background: linear-gradient(260deg, #cb0d62, #df17eb);
    color:#fff;
    padding:70px 40px;
    height:100%;
}

.icon-wrap{
    width:120px;
    height:120px;
    margin:auto;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:55px;
    margin-bottom:30px;
}

.delete-left h2{
    font-weight:700;
    margin-bottom:20px;
}

.delete-points{
    list-style:none;
    padding:0;
    margin-top:30px;
}

.delete-points li{
    margin-bottom:15px;
    font-size:16px;
}

.delete-points i{
    margin-right:10px;
}

.delete-right{
    padding:60px;
}

.badge-delete{
    display:inline-block;
    background:#fff2f2;
    color:#ff4b5c;
    padding:10px 18px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;
}

.delete-right h3{
    font-size:34px;
    font-weight:700;
    margin-bottom:15px;
}

.form-control,
.form-select{
    height:55px;
    border-radius:14px;
}

textarea.form-control{
    height:auto;
}

.warning-box{
    background:#fff8e5;
    color:#a56b00;
    padding:15px 20px;
    border-radius:14px;
    font-weight:500;
}

.warning-box i{
    margin-right:8px;
}

.btn-delete{
    background:linear-gradient(135deg,#ff5a7b,#ff8c68);
    border:none;
    color:#fff;
    padding:14px 35px;
    border-radius:50px;
    font-weight:600;
}

.btn-delete:hover{
    color:#fff;
    transform:translateY(-2px);
}

@media(max-width:991px){

    .delete-left{
        padding:50px 25px;
    }

    .delete-right{
        padding:35px 25px;
    }
}



.privacy-hero{
    padding:160px 0 120px;
    background:linear-gradient(135deg,#ff5a7b 0%,#ff8c68 100%);
    position:relative;
    overflow:hidden;
}

.privacy-hero h1{
    color:#fff;
    font-size:60px;
    font-weight:800;
    margin:20px 0;
}

.privacy-hero p{
    color:rgba(255,255,255,.9);
    max-width:700px;
    margin:auto;
    font-size:18px;
}

.policy-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:rgba(255,255,255,.15);
    color:#fff;
    padding:12px 22px;
    border-radius:50px;
    backdrop-filter:blur(10px);
}

.last-update{
    margin-top:25px;
    color:#fff;
    font-weight:600;
}

.privacy-section{
    background:#f8f9fc;
    padding:80px 0;
    margin-top:-60px;
}

.policy-sidebar{
    background:#fff;
    border-radius:20px;
    padding:30px;
    box-shadow:0 10px 40px rgba(0,0,0,.06);
    position:sticky;
    top:100px;
}

.policy-sidebar h6{
    font-weight:700;
    margin-bottom:20px;
}

.policy-sidebar a{
    display:block;
    text-decoration:none;
    color:#555;
    padding:12px 0;
    border-bottom:1px solid #eee;
    transition:.3s;
}

.policy-sidebar a:hover{
    color:#ff5a7b;
    padding-left:8px;
}

.policy-card{
    background:#fff;
    border-radius:25px;
    padding:50px;
    box-shadow:0 15px 50px rgba(0,0,0,.08);
}

.policy-block{
    padding-bottom:40px;
    margin-bottom:40px;
    border-bottom:1px solid #eee;
}

.policy-icon{
    width:65px;
    height:65px;
    border-radius:18px;
   background: linear-gradient(135deg, #f42b8b, #3a8f15);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    margin-bottom:20px;
}

.policy-block h3{
    font-size:28px;
    font-weight:700;
    margin-bottom:15px;
}

.policy-block p{
    color:#666;
    line-height:1.9;
    margin-bottom:0;
}

@media(max-width:991px){

    .privacy-hero{
        padding:130px 0 90px;
    }

    .privacy-hero h1{
        font-size:40px;
    }

    .policy-sidebar{
        margin-bottom:30px;
        position:relative;
        top:auto;
    }

    .policy-card{
        padding:30px;
    }
}


.terms-hero{
    padding:160px 0 120px;
    background: linear-gradient(135deg, #f42b8b, #3a8f15);
    position:relative;
    overflow:hidden;
}

.terms-hero h1{
    font-size:60px;
    font-weight:800;
    color:#fff;
    margin:20px 0;
}

.terms-hero p{
    color:rgba(255,255,255,.9);
    font-size:18px;
    max-width:700px;
    margin:auto;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
    color:#fff;
    padding:12px 24px;
    border-radius:50px;
}

.update-date{
    margin-top:25px;
    color:#fff;
    font-weight:600;
}

.terms-content{
    background:#f6f8fc;
    padding:80px 0;
    margin-top:-70px;
}

.terms-sidebar{
    background:#fff;
    border-radius:25px;
    padding:30px;
    box-shadow:0 10px 40px rgba(0,0,0,.08);
    position:sticky;
    top:100px;
}

.terms-sidebar h5{
    font-weight:700;
    margin-bottom:20px;
}

.terms-sidebar a{
    display:block;
    text-decoration:none;
    color:#555;
    padding:12px 0;
    border-bottom:1px solid #eee;
    transition:.3s;
}

.terms-sidebar a:hover{
    color:#2575fc;
    padding-left:8px;
}

.terms-card{
    background:#fff;
    border-radius:30px;
    padding:50px;
    box-shadow:0 15px 50px rgba(0,0,0,.08);
}

.terms-item{
    margin-bottom:45px;
    padding-bottom:35px;
    border-bottom:1px solid #eee;
}

.terms-icon{
    width:70px;
    height:70px;
    border-radius:20px;
    background: linear-gradient(135deg, #f42b8b, #3a8f15);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    margin-bottom:20px;
}

.terms-item h3{
    font-size:28px;
    font-weight:700;
    margin-bottom:15px;
}

.terms-item p{
    color:#666;
    line-height:1.9;
    margin-bottom:0;
}

@media(max-width:991px){

    .terms-hero{
        padding:130px 0 90px;
    }

    .terms-hero h1{
        font-size:40px;
    }

    .terms-sidebar{
        position:relative;
        top:auto;
        margin-bottom:30px;
    }

    .terms-card{
        padding:30px;
    }
}
/** delete-account end **/

@media(max-width:768px){
    .footer-bottom{
        text-align:center;
    }

    .social-icons{
        margin-top:15px;
    }
    .hero-section {
      padding: 95px 0;
    }
     .hero-section .hero-content {
      margin-bottom: 25px;
    }
    .hero-section .hero-img .img-3, .hero-section .hero-img .img-2 {
      max-width: 100%;
    }
    .mobile_feature {
      width: 80%;
    }
}







/** add css **/
/* =========================================================
   CREATIVE APP HERO SECTION
   File: hero-custom.css
========================================================= */


/* =========================================================
   HERO SECTION
========================================================= */

.hero-section {
    position: relative;
    min-height: 760px;
    padding: 110px 0 90px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(117, 83, 255, 0.18),
            transparent 32%
        ),
        radial-gradient(
            circle at 10% 85%,
            rgba(0, 195, 255, 0.10),
            transparent 30%
        ),
        #080b18;
}


/* Background glow */

.hero-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    top: -220px;
    right: -100px;
    background: rgba(108, 78, 255, 0.16);
    filter: blur(100px);
    pointer-events: none;
}


.hero-section::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    bottom: -200px;
    left: -120px;
    background: rgba(0, 190, 255, 0.08);
    filter: blur(100px);
    pointer-events: none;
}


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


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 600px;
}


/* Small label */

/* .hero-content::before {
    content: "APP SOLUTION";
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 18px;
    margin-bottom: 22px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50px;

    color: #bdb4ff;
    background: rgba(255, 255, 255, 0.035);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;

    backdrop-filter: blur(10px);
} */


/* Heading */

.hero-content h1 {
    margin: 0 0 25px;

    color: #ffffff;

    font-size: 64px;
    line-height: 1.08;
    font-weight: 800;

    letter-spacing: -2.5px;
}


/* Gradient heading effect */

.hero-content h1 {
    background: linear-gradient(
        100deg,
        #ffffff 15%,
        #bcb1ff 55%,
        #78e8ff 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* Paragraph */

.hero-content p {
    max-width: 540px;

    margin: 0 0 32px;

    color: #a8aec1;

    font-size: 17px;
    line-height: 1.8;
}


/* =========================================================
   APP STORE BUTTONS
========================================================= */

.hero-content > a {
    display: inline-block;

    margin-right: 8px;

    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}


.hero-content > a:hover {
    transform: translateY(-5px);
    opacity: 0.9;
}


.hero-content .with_applogo {
    display: block;

    width: 155px;
    height: auto;
}


/* =========================================================
   DOWNLOAD BUTTON
========================================================= */

.hero-content .mt-3 {
    margin-top: 30px !important;
}


.hero-content .gradient-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 175px;

    padding: 15px 32px;

    border-radius: 50px;

    overflow: hidden;

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    text-decoration: none;

    background: linear-gradient(
        135deg,
        #6f55ff,
        #9270ff,
        #35c9ff
    );

    box-shadow:
        0 15px 35px rgba(101, 79, 255, 0.28);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.hero-content .gradient-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.30),
        transparent
    );

    transition: left 0.7s ease;
}


.hero-content .gradient-btn:hover::before {
    left: 100%;
}


.hero-content .gradient-btn:hover {
    color: #ffffff;

    transform: translateY(-5px);

    box-shadow:
        0 20px 45px rgba(101, 79, 255, 0.40);
}


/* =========================================================
   RIGHT SIDE APP SHOWCASE
========================================================= */

.hero-img {
    position: relative;

    width: 100%;
    max-width: 650px;
    height: 620px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    perspective: 1400px;
}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.hero-img::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(115, 87, 255, 0.30) 0%,
            rgba(82, 147, 255, 0.12) 45%,
            transparent 72%
        );

    filter: blur(8px);

    animation: heroGlow 5s ease-in-out infinite;
}


/* =========================================================
   OUTER RING
========================================================= */

.hero-img::after {
    content: "";

    position: absolute;

    width: 510px;
    height: 510px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.09);

    box-shadow:
        0 0 40px rgba(115, 87, 255, 0.06);

    transform: rotate(-20deg);

    animation: ringRotate 18s linear infinite;
}


/* =========================================================
   MAIN IMAGE
========================================================= */

.hero-img .img-1 {
    position: relative;

    z-index: 5;

    width: 300px;
    max-width: 55%;

    height: auto;

    transform-style: preserve-3d;

    filter:
        drop-shadow(
            0 35px 35px rgba(0, 0, 0, 0.45)
        )
        drop-shadow(
            0 0 35px rgba(108, 83, 255, 0.22)
        );

    animation:
        mainPhoneFloat 5s ease-in-out infinite;
}


/* =========================================================
   LEFT FLOATING IMAGE
========================================================= */

.hero-img .img-2 {
    position: absolute;

    z-index: 4;

    width: 205px;
    height: auto;

    left: 25px;
    top: 120px;

    transform-style: preserve-3d;

    transform:
        perspective(900px)
        rotateY(20deg)
        rotateZ(-7deg)
        rotateX(4deg);

    filter:
        drop-shadow(
            0 25px 30px rgba(0, 0, 0, 0.45)
        );

    animation:
        leftPhoneFloat 6s ease-in-out infinite;
}


/* =========================================================
   RIGHT FLOATING IMAGE
========================================================= */

.hero-img .img-3 {
    position: absolute;

    z-index: 4;

    width: 205px;
    height: auto;

    right: 25px;
    bottom: 100px;

    transform-style: preserve-3d;

    transform:
        perspective(900px)
        rotateY(-20deg)
        rotateZ(7deg)
        rotateX(4deg);

    filter:
        drop-shadow(
            0 25px 30px rgba(0, 0, 0, 0.45)
        );

    animation:
        rightPhoneFloat 5.5s ease-in-out infinite;
}


/* =========================================================
   SMALL FLOATING DOTS
========================================================= */

.hero-img {
    --dot-animation: dotFloat;
}


/* Dot 1 */

.hero-img .img-2::after {
    content: "";

    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 20px rgba(255, 255, 255, 0.6);
}


/* =========================================================
   ANIMATIONS
========================================================= */


/* Main phone */

@keyframes mainPhoneFloat {

    0%,
    100% {
        transform:
            translateY(0)
            scale(1);
    }

    50% {
        transform:
            translateY(-16px)
            scale(1.015);
    }
}


/* Left phone */

@keyframes leftPhoneFloat {

    0%,
    100% {
        transform:
            perspective(900px)
            translateY(0)
            rotateY(20deg)
            rotateZ(-7deg)
            rotateX(4deg);
    }

    50% {
        transform:
            perspective(900px)
            translateY(-22px)
            rotateY(14deg)
            rotateZ(-4deg)
            rotateX(3deg);
    }
}


/* Right phone */

@keyframes rightPhoneFloat {

    0%,
    100% {
        transform:
            perspective(900px)
            translateY(0)
            rotateY(-20deg)
            rotateZ(7deg)
            rotateX(4deg);
    }

    50% {
        transform:
            perspective(900px)
            translateY(-25px)
            rotateY(-14deg)
            rotateZ(4deg)
            rotateX(3deg);
    }
}


/* Glow */

@keyframes heroGlow {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}


/* Ring */

@keyframes ringRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }
}


/* =========================================================
   EXTRA DECORATIVE CIRCLES
========================================================= */

.hero-img .img-1 {
    isolation: isolate;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (max-width: 1199px) {

    .hero-section {
        min-height: 720px;
    }

    .hero-content h1 {
        font-size: 55px;
    }

    .hero-img {
        height: 570px;
    }

    .hero-img::before {
        width: 390px;
        height: 390px;
    }

    .hero-img::after {
        width: 450px;
        height: 450px;
    }

    .hero-img .img-1 {
        width: 265px;
    }

    .hero-img .img-2,
    .hero-img .img-3 {
        width: 180px;
    }

    .hero-img .img-2 {
        left: 20px;
    }

    .hero-img .img-3 {
        right: 20px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .hero-section {
        min-height: auto;

        padding-top: 100px;
        padding-bottom: 70px;
    }


    .hero-content {
        max-width: 700px;

        margin: 0 auto 60px;

        text-align: center;
    }


    .hero-content p {
        margin-left: auto;
        margin-right: auto;
    }


    .hero-content::before {
        margin-left: auto;
        margin-right: auto;
    }


    .hero-img {
        height: 550px;

        max-width: 620px;

        margin-top: 20px;
    }


    .hero-img .img-2 {
        left: 70px;
    }


    .hero-img .img-3 {
        right: 70px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .hero-section {
        padding-top: 80px;
        padding-bottom: 50px;
    }


    .hero-content {
        margin-bottom: 35px;
    }


    .hero-content h1 {
        font-size: 42px;
        line-height: 1.12;

        letter-spacing: -1.5px;
    }


    .hero-content p {
        font-size: 15px;
        line-height: 1.75;
    }


    .hero-content .with_applogo {
        width: 135px;
    }


    .hero-content .gradient-btn {
        min-width: 160px;
        padding: 14px 26px;
    }


    .hero-img {
        height: 470px;
    }


    .hero-img::before {
        width: 300px;
        height: 300px;
    }


    .hero-img::after {
        width: 350px;
        height: 350px;
    }


    .hero-img .img-1 {
        width: 220px;
    }


    .hero-img .img-2,
    .hero-img .img-3 {
        width: 145px;
    }


    .hero-img .img-2 {
        left: 15px;
        top: 105px;
    }


    .hero-img .img-3 {
        right: 15px;
        bottom: 65px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .hero-section {
        padding-top: 65px;
        padding-bottom: 35px;
    }


    .hero-content h1 {
        font-size: 35px;

        letter-spacing: -1px;
    }


    .hero-content p {
        font-size: 14px;
    }


    .hero-content::before {
        font-size: 9px;

        padding: 7px 14px;

        letter-spacing: 1.5px;
    }


    .hero-content .with_applogo {
        width: 122px;
    }


    .hero-content > a {
        margin-right: 3px;
        margin-left: 3px;
    }


    .hero-img {
        height: 400px;
    }


    .hero-img::before {
        width: 250px;
        height: 250px;
    }


    .hero-img::after {
        width: 290px;
        height: 290px;
    }


    .hero-img .img-1 {
        width: 185px;
    }


    .hero-img .img-2,
    .hero-img .img-3 {
        width: 115px;
    }


    .hero-img .img-2 {
        left: 0;
        top: 95px;
    }


    .hero-img .img-3 {
        right: 0;
        bottom: 50px;
    }
}


/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .hero-content h1 {
        font-size: 31px;
    }


    .hero-img {
        height: 350px;
    }


    .hero-img .img-1 {
        width: 165px;
    }


    .hero-img .img-2,
    .hero-img .img-3 {
        width: 100px;
    }


    .hero-img .img-2 {
        left: -5px;
        top: 90px;
    }


    .hero-img .img-3 {
        right: -5px;
        bottom: 45px;
    }
}


/* =========================================================
   CREATIVE FEATURE SECTION - WHITE VERSION
========================================================= */

.feature-section {
    position: relative;
    padding: 110px 0 120px;
    overflow: hidden;
    background: #ffffff;
}


/* =========================================================
   SOFT BACKGROUND EFFECTS
========================================================= */

/* Purple glow - top right */

.feature-section::before {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    top: -220px;
    right: -150px;

    border-radius: 50%;

    background: rgba(112, 82, 255, 0.10);

    filter: blur(90px);

    pointer-events: none;
}


/* Cyan glow - bottom left */

.feature-section::after {
    content: "";
    position: absolute;

    width: 450px;
    height: 450px;

    bottom: -200px;
    left: -150px;

    border-radius: 50%;

    background: rgba(0, 190, 255, 0.08);

    filter: blur(90px);

    pointer-events: none;
}


/* =========================================================
   SUBTLE DOT PATTERN
========================================================= */

.feature-section .container::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: 20px;
    left: -80px;

    background-image:
        radial-gradient(
            rgba(105, 80, 255, 0.18) 1px,
            transparent 1px
        );

    background-size: 16px 16px;

    opacity: 0.45;

    pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.feature-section .container {
    position: relative;
    z-index: 3;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.feature-section .section-title {
    position: relative;

    max-width: 650px;

    margin-left: auto;
    margin-right: auto;

    margin-bottom: 65px !important;
}


/* Small label */

/* .feature-section .section-title::before {
    content: "POWERFUL FEATURES";

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 8px 18px;

    margin-bottom: 18px;

    border: 1px solid rgba(105, 80, 255, 0.18);

    border-radius: 50px;

    background: rgba(105, 80, 255, 0.05);

    color: #7257e8;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
} */


/* Heading */

.feature-section .section-title h1 {
    margin-bottom: 20px !important;

    color: #15182b;

    font-size: 48px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1.5px;

    background: linear-gradient(
        100deg,
        #171827,
        #6955df,
        #149dcb
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* Paragraph */

.feature-section .section-title p {
    max-width: 590px;

    margin: 0 auto;

    color: #73798b;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   FEATURE CARD
========================================================= */

.single-feature {
    position: relative;

    /* display: flex; */
    align-items: flex-start;

    width: 100%;

    margin-bottom: 20px;

    padding: 23px 24px;

    border: 1px solid #e9eaf1;

    border-radius: 18px;

    background: rgba(255, 255, 255, 0.80);

    box-shadow:
        0 10px 35px rgba(40, 45, 80, 0.06);

    backdrop-filter: blur(12px);

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


/* Soft card glow */

.single-feature::before {
    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    right: -90px;
    top: -90px;

    border-radius: 50%;

    background: rgba(111, 83, 255, 0.09);

    filter: blur(20px);

    opacity: 0;

    transition: opacity 0.4s ease;
}


/* Top shine */

.single-feature::after {
    content: "";

    position: absolute;

    width: 100%;
    height: 2px;

    top: 0;
    left: -100%;

    background: linear-gradient(
        90deg,
        transparent,
        #8976ff,
        #52d8ff,
        transparent
    );

    transition: left 0.6s ease;
}


.single-feature:hover {
    transform: translateY(-6px);

    border-color: rgba(110, 84, 230, 0.20);

    box-shadow:
        0 18px 45px rgba(50, 55, 100, 0.10),
        0 0 30px rgba(105, 80, 255, 0.05);
}


.single-feature:hover::before {
    opacity: 1;
}


.single-feature:hover::after {
    left: 100%;
}


/* =========================================================
   FEATURE ICON
========================================================= */

.single-feature .icon {
    position: relative;

    z-index: 2;

    flex: 0 0 58px;

    width: 58px;
    height: 58px;

    margin-right: 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 16px;

    font-size: 23px;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.single-feature:hover .icon {
    transform:
        translateY(-4px)
        rotate(-4deg);
}


/* =========================================================
   ICON COLOR 1
========================================================= */

.single-feature .icon.color-1 {
    color: #7055ee;

    background:
        linear-gradient(
            135deg,
            rgba(112, 85, 238, 0.14),
            rgba(112, 85, 238, 0.04)
        );

    box-shadow:
        0 8px 25px rgba(112, 85, 238, 0.10);
}


/* =========================================================
   ICON COLOR 2
========================================================= */

.single-feature .icon.color-2 {
    color: #129ec8;

    background:
        linear-gradient(
            135deg,
            rgba(18, 158, 200, 0.14),
            rgba(18, 158, 200, 0.04)
        );

    box-shadow:
        0 8px 25px rgba(18, 158, 200, 0.10);
}


/* =========================================================
   ICON COLOR 3
========================================================= */

.single-feature .icon.color-3 {
    color: #e0529a;

    background:
        linear-gradient(
            135deg,
            rgba(224, 82, 154, 0.14),
            rgba(224, 82, 154, 0.04)
        );

    box-shadow:
        0 8px 25px rgba(224, 82, 154, 0.10);
}


/* =========================================================
   ICON COLOR 4
========================================================= */

.single-feature .icon.color-4 {
    color: #e89a20;

    background:
        linear-gradient(
            135deg,
            rgba(232, 154, 32, 0.15),
            rgba(232, 154, 32, 0.04)
        );

    box-shadow:
        0 8px 25px rgba(232, 154, 32, 0.10);
}


/* =========================================================
   FEATURE CONTENT
========================================================= */

.single-feature .content {
    position: relative;

    z-index: 2;

    flex: 1;
}


.single-feature .content h3 {
    margin: 2px 0 8px;

    color: #1c1f32;

    font-size: 18px;

    line-height: 1.4;

    font-weight: 700;
}


.single-feature .content p {
    margin: 0;

    color: #7a8091;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   RIGHT IMAGE AREA
========================================================= */

.feature-section .col-md-6:last-child {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 600px;
}


/* Large soft glow */

.feature-section .col-md-6:last-child::before {
    content: "";

    position: absolute;

    width: 390px;
    height: 390px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(111, 84, 255, 0.16),
            rgba(55, 190, 230, 0.07) 45%,
            transparent 70%
        );

    filter: blur(5px);

    animation:
        featureGlow 5s ease-in-out infinite;
}


/* Decorative circle */

.feature-section .col-md-6:last-child::after {
    content: "";

    position: absolute;

    width: 470px;
    height: 470px;

    border-radius: 50%;

    border: 1px solid rgba(105, 80, 255, 0.10);

    animation:
        featureRing 20s linear infinite;
}


/* =========================================================
   MOBILE MOCKUP
========================================================= */

.feature-section
.col-md-6:last-child
img.img-fluid {

    position: relative;

    z-index: 5;

    width: 350px;

    max-width: 80%;

    height: auto;

    filter:
        drop-shadow(
            0 30px 35px rgba(45, 50, 80, 0.18)
        )
        drop-shadow(
            0 0 30px rgba(105, 80, 255, 0.12)
        );

    animation:
        featurePhoneFloat 5s ease-in-out infinite;
}


/* =========================================================
   BACKGROUND MOBILE FEATURE IMAGE
========================================================= */

.mobile_feature {
    position: absolute;

    z-index: 1;

    width: 900px;

    max-width: 90%;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    opacity: 0.035;

    pointer-events: none;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes featurePhoneFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-18px)
            rotate(1deg);
    }
}


@keyframes featureGlow {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.65;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}


@keyframes featureRing {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .feature-section {
        padding: 90px 0 100px;
    }

    .feature-section .section-title h1 {
        font-size: 43px;
    }

    .feature-section
    .col-md-6:last-child {
        min-height: 540px;
    }

    .feature-section
    .col-md-6:last-child
    img.img-fluid {
        width: 310px;
    }

    .feature-section
    .col-md-6:last-child::before {
        width: 340px;
        height: 340px;
    }

    .feature-section
    .col-md-6:last-child::after {
        width: 410px;
        height: 410px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .feature-section {
        padding: 75px 0 80px;
    }

    .feature-section .section-title {
        margin-bottom: 45px !important;
    }

    .feature-section .section-title h1 {
        font-size: 36px;
    }

    .feature-section .section-title p {
        font-size: 14px;
    }

    .single-feature {
        padding: 20px;
        margin-bottom: 16px;
    }

    .single-feature:hover {
        transform: translateY(-5px);
    }

    .single-feature .icon {
        flex: 0 0 52px;

        width: 52px;
        height: 52px;

        margin-right: 15px;

        border-radius: 14px;

        font-size: 21px;
    }

    .single-feature .content h3 {
        font-size: 16px;
    }

    .single-feature .content p {
        font-size: 12px;
    }

    .feature-section
    .col-md-6:last-child {

        min-height: 480px;

        margin-top: 25px;
    }

    .feature-section
    .col-md-6:last-child
    img.img-fluid {

        width: 260px;

        max-width: 65%;
    }

    .feature-section
    .col-md-6:last-child::before {

        width: 290px;
        height: 290px;
    }

    .feature-section
    .col-md-6:last-child::after {

        width: 350px;
        height: 350px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .feature-section {
        padding: 65px 0 65px;
    }

    .feature-section .section-title h1 {
        font-size: 31px;
    }

    .feature-section .section-title::before {
        font-size: 9px;
        padding: 7px 14px;
    }

    .single-feature {
        padding: 17px;
        border-radius: 15px;
    }

    .single-feature .icon {
        flex: 0 0 48px;

        width: 48px;
        height: 48px;

        margin-right: 13px;

        border-radius: 13px;

        font-size: 19px;
    }

    .single-feature .content h3 {
        font-size: 15px;
    }

    .single-feature .content p {
        font-size: 11px;
    }

    .feature-section
    .col-md-6:last-child {

        min-height: 400px;

        margin-top: 15px;
    }

    .feature-section
    .col-md-6:last-child
    img.img-fluid {

        width: 220px;
    }

    .feature-section
    .col-md-6:last-child::before {

        width: 240px;
        height: 240px;
    }

    .feature-section
    .col-md-6:last-child::after {

        width: 290px;
        height: 290px;
    }
}




/* =========================================================
   HOW IT WORKS - CREATIVE DARK DESIGN
========================================================= */

.how-it-works {
    position: relative;
    padding: 110px 0 !important;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(109, 76, 255, 0.16),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(0, 190, 255, 0.10),
            transparent 30%
        ),
        #080b18;
}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.how-it-works::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -250px;
    left: -180px;

    border-radius: 50%;

    background: rgba(105, 80, 255, 0.12);

    filter: blur(100px);

    pointer-events: none;
}


.how-it-works::after {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -200px;
    bottom: -220px;

    border-radius: 50%;

    background: rgba(0, 196, 255, 0.08);

    filter: blur(100px);

    pointer-events: none;
}


/* =========================================================
   DOT PATTERN
========================================================= */

.how-it-works .container {
    position: relative;
    z-index: 3;
}


.how-it-works .container::before {
    content: "";

    position: absolute;

    width: 200px;
    height: 200px;

    top: -40px;
    right: -80px;

    background-image:
        radial-gradient(
            rgba(133, 112, 255, 0.25) 1px,
            transparent 1px
        );

    background-size: 16px 16px;

    opacity: 0.35;

    pointer-events: none;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.how-it-works .text-center {
    position: relative;

    margin-bottom: 70px !important;
}


/* .how-it-works .text-center::before {
    content: "SIMPLE PROCESS";

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 8px 18px;

    margin-bottom: 18px;

    border: 1px solid rgba(126, 102, 255, 0.28);

    border-radius: 50px;

    color: #fff;

    background: rgba(111, 83, 255, 0.08);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;

    backdrop-filter: blur(10px);
} */


.how-it-works h2 {
    margin-bottom: 18px;

    color: #ffffff;

    font-size: 48px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1.5px;

    background: linear-gradient(
        100deg,
        #ffffff 20%,
        #bcb1ff 60%,
        #70ddff 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


.how-it-works .text-muted {
    color: #9299ad !important;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   CONNECTING LINE
========================================================= */

.how-it-works .row.position-relative::before {
    content: "";

    position: absolute;

    left: 16.66%;
    right: 16.66%;

    top: 53px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(119, 91, 255, 0.65),
            rgba(50, 207, 255, 0.65),
            transparent
        );

    z-index: 0;
}


/* Glowing dots on line */

.how-it-works .row.position-relative::after {
    content: "";

    position: absolute;

    left: 49.5%;
    top: 48px;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 8px #ffffff,
        0 0 20px rgba(114, 87, 255, 0.8),
        0 0 35px rgba(67, 207, 255, 0.5);

    z-index: 2;

    animation: linePulse 2s ease-in-out infinite;
}


/* =========================================================
   WORK CARD
========================================================= */

.work-card {
    position: relative;

    z-index: 3;

    min-height: 200px;

    padding: 42px 30px 35px;

    border: 1px solid rgba(255, 255, 255, 0.09);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.025)
        );

    backdrop-filter: blur(18px);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.22);

    overflow: hidden;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}


/* Card top gradient */

.work-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 15%;

    width: 70%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #8067ff,
            #42d7ff,
            transparent
        );

    opacity: 0.6;
}


/* Card glow */

.work-card::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -100px;
    bottom: -100px;

    border-radius: 50%;

    background: rgba(104, 80, 255, 0.10);

    filter: blur(30px);

    transition: all 0.5s ease;
}


.work-card:hover {
    transform: translateY(-12px);

    border-color: rgba(128, 105, 255, 0.35);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.35),
        0 0 35px rgba(105, 80, 255, 0.08);
}


.work-card:hover::after {
    width: 250px;
    height: 250px;

    opacity: 1;
}


/* =========================================================
   STEP NUMBER
========================================================= */

.step-number {
    position: absolute;

    top: 18px;
    right: 22px;

    color: #fff;

    font-size: 52px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -3px;

    transition:
        color 0.4s ease,
        transform 0.4s ease;
}


.work-card:hover .step-number {
    color: rgba(126, 101, 255, 0.20);

    transform: scale(1.08);
}


/* =========================================================
   ICON BOX
========================================================= */

.icon-box {
    position: relative;

    width: 78px;
    height: 78px;

    margin: 10px auto 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 22px;

    color: #ffffff;

    font-size: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(117, 87, 255, 0.25),
            rgba(48, 202, 255, 0.10)
        );

    border: 1px solid rgba(137, 116, 255, 0.28);

    box-shadow:
        0 15px 35px rgba(90, 70, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


/* Icon glow */

.icon-box::before {
    content: "";

    position: absolute;

    inset: -7px;

    border-radius: 26px;

    border: 1px solid rgba(112, 91, 255, 0.15);

    opacity: 0;

    transform: scale(0.85);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}


.work-card:hover .icon-box {
    transform:
        translateY(-5px)
        rotate(-4deg);

    box-shadow:
        0 20px 45px rgba(90, 70, 255, 0.30),
        0 0 25px rgba(66, 203, 255, 0.10);
}


.work-card:hover .icon-box::before {
    opacity: 1;

    transform: scale(1);
}


/* =========================================================
   CARD TITLE
========================================================= */

.work-card h4 {
    position: relative;

    z-index: 4;

    margin-bottom: 14px;

    color: #ffffff;

    font-size: 20px;

    line-height: 1.4;

    font-weight: 700;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.work-card p {
    position: relative;

    z-index: 4;

    max-width: 320px;

    margin: 0 auto;

    color: #8f97ab;

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes linePulse {

    0%,
    100% {
        transform: scale(1);

        opacity: 0.7;
    }

    50% {
        transform: scale(1.5);

        opacity: 1;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .how-it-works {
        padding: 90px 0 !important;
    }


    .how-it-works h2 {
        font-size: 42px;
    }


    .work-card {
        min-height: 360px;

        padding: 38px 22px 30px;
    }


    .how-it-works .row.position-relative::before {
        display: none;
    }


    .how-it-works .row.position-relative::after {
        display: none;
    }


    .icon-box {
        width: 70px;
        height: 70px;

        font-size: 27px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .how-it-works {
        padding: 75px 0 !important;
    }


    .how-it-works .text-center {
        margin-bottom: 45px !important;
    }


    .how-it-works h2 {
        font-size: 36px;
    }


    .how-it-works .text-muted {
        font-size: 14px;
    }


    .work-card {
        min-height: auto;

        padding: 35px 25px 30px;

        border-radius: 20px;

        margin-bottom: 5px;
    }


    .step-number {
        font-size: 45px;

        top: 15px;
        right: 18px;
    }


    .icon-box {
        width: 68px;
        height: 68px;

        margin-bottom: 22px;

        border-radius: 19px;

        font-size: 26px;
    }


    .work-card h4 {
        font-size: 18px;
    }


    .work-card p {
        font-size: 12px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .how-it-works {
        padding: 65px 0 !important;
    }


    .how-it-works h2 {
        font-size: 31px;
    }


    .how-it-works .text-center::before {
        font-size: 9px;

        padding: 7px 14px;

        letter-spacing: 1.5px;
    }


    .work-card {
        padding: 30px 20px 27px;
    }


    .step-number {
        font-size: 40px;
    }


    .icon-box {
        width: 62px;
        height: 62px;

        font-size: 23px;
    }


    .work-card h4 {
        font-size: 17px;
    }


    .work-card p {
        font-size: 11px;

        line-height: 1.7;
    }
}


/* =========================================================
   A GLIMPSE INSIDE - WHITE CREATIVE SECTION
========================================================= */

.feature_bg {
    position: relative;

    padding: 100px 0 110px;

    overflow: hidden;

    background: #ffffff;
}


/* =========================================================
   SOFT BACKGROUND GLOW
========================================================= */

.feature_bg::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    top: -250px;
    left: -180px;

    border-radius: 50%;

    background: rgba(111, 82, 255, 0.10);

    filter: blur(100px);

    pointer-events: none;
}


.feature_bg::after {
    content: "";

    position: absolute;

    width: 480px;
    height: 480px;

    right: -220px;
    bottom: -230px;

    border-radius: 50%;

    background: rgba(0, 190, 255, 0.09);

    filter: blur(100px);

    pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.feature_bg .container {
    position: relative;

    z-index: 3;
}


/* =========================================================
   DOT PATTERN
========================================================= */

.feature_bg .container::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -30px;
    right: -70px;

    background-image:
        radial-gradient(
            rgba(108, 82, 240, 0.20) 1px,
            transparent 1px
        );

    background-size: 15px 15px;

    opacity: 0.45;

    pointer-events: none;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.feature_bg .section-title {
    position: relative;

    margin-bottom: 55px !important;

    z-index: 5;
}


/* Small label */

/* .feature_bg .section-title::before {
    content: "APP PREVIEW";

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 8px 18px;

    margin-bottom: 17px;

    border-radius: 50px;

    border: 1px solid rgba(105, 80, 255, 0.18);

    background: rgba(105, 80, 255, 0.05);

    color: #7056df;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
} */


/* Heading */

.feature_bg .section-title h1 {
    margin-bottom: 0 !important;

    color: #171a2a !important;

    font-size: 48px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1.5px;

    background: linear-gradient(
        100deg,
        #171827,
        #6d55dc,
        #149fc8
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* =========================================================
   CAROUSEL AREA
========================================================= */

.feature_bg .testimonial-slider {
    position: relative;

    z-index: 4;

    padding: 20px 10px 35px;
}


/* =========================================================
   SLIDE ITEM
========================================================= */

.feature_bg .testimonial-slider .item {
    position: relative;

    padding: 15px;

    transition:
        transform 0.4s ease;
}


.feature_bg .testimonial-slider .item:hover {
    transform: translateY(-8px);
}


/* =========================================================
   SCREENSHOT CARD
========================================================= */

.feature_bg .testimonial-slider .item img {
    position: relative;

    display: block;

    width: 100%;

    height: auto;

    border-radius: 22px;

    border: 1px solid #e7e8ef;

    background: #ffffff;

    padding: 8px;

    box-shadow:
        0 15px 35px rgba(38, 43, 75, 0.08),
        0 5px 15px rgba(38, 43, 75, 0.04);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}


.feature_bg .testimonial-slider .item:hover img {
    border-color: rgba(108, 82, 240, 0.25);

    box-shadow:
        0 25px 55px rgba(40, 45, 85, 0.13),
        0 0 35px rgba(105, 80, 255, 0.08);

    transform: scale(1.015);
}


/* =========================================================
   SCREENSHOT GLOW BEHIND EACH ITEM
========================================================= */

.feature_bg .testimonial-slider .item::before {
    content: "";

    position: absolute;

    width: 70%;

    height: 70%;

    left: 15%;
    top: 15%;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(112, 84, 255, 0.10),
            rgba(42, 202, 240, 0.08)
        );

    filter: blur(30px);

    opacity: 0;

    transition: opacity 0.4s ease;

    z-index: -1;
}


.feature_bg .testimonial-slider .item:hover::before {
    opacity: 1;
}


/* =========================================================
   OWL CAROUSEL NAVIGATION
========================================================= */

.feature_bg .owl-nav {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-top: 15px;
}


.feature_bg .owl-nav button {
    width: 46px;
    height: 46px;

    margin: 0 !important;

    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    border-radius: 50% !important;

    border: 1px solid #e5e6ee !important;

    background: #ffffff !important;

    color: #6252d9 !important;

    font-size: 18px !important;

    box-shadow:
        0 8px 20px rgba(35, 40, 75, 0.07);

    transition:
        all 0.3s ease;
}


.feature_bg .owl-nav button:hover {
    color: #ffffff !important;

    border-color: #7058e8 !important;

    background:
        linear-gradient(
            135deg,
            #7058e8,
            #35c6eb
        ) !important;

    transform: translateY(-3px);

    box-shadow:
        0 12px 25px rgba(92, 73, 220, 0.20);
}


/* =========================================================
   OWL DOTS
========================================================= */

.feature_bg .owl-dots {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 20px;
}


.feature_bg .owl-dots .owl-dot span {
    width: 7px !important;
    height: 7px !important;

    margin: 0 !important;

    border-radius: 50%;

    background: #d8dbe5 !important;

    transition:
        all 0.3s ease;
}


.feature_bg .owl-dots .owl-dot.active span {
    width: 25px !important;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #7058e8,
            #38c9eb
        ) !important;
}


/* =========================================================
   DECORATIVE FLOATING CIRCLES
========================================================= */

.feature_bg .row {
    position: relative;
}


.feature_bg .row::before {
    content: "";

    position: absolute;

    width: 18px;
    height: 18px;

    top: 45%;

    left: -35px;

    border-radius: 50%;

    border: 4px solid rgba(110, 85, 230, 0.15);

    box-shadow:
        0 0 0 8px rgba(110, 85, 230, 0.04);

    animation:
        smallFloat 4s ease-in-out infinite;

    pointer-events: none;
}


.feature_bg .row::after {
    content: "";

    position: absolute;

    width: 12px;
    height: 12px;

    top: 25%;

    right: -25px;

    border-radius: 50%;

    background: rgba(40, 194, 225, 0.25);

    box-shadow:
        0 0 20px rgba(40, 194, 225, 0.20);

    animation:
        smallFloat 5s ease-in-out infinite reverse;

    pointer-events: none;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes smallFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .feature_bg {
        padding: 85px 0 90px;
    }


    .feature_bg .section-title h1 {
        font-size: 42px;
    }


    .feature_bg .testimonial-slider {
        padding-left: 5px;
        padding-right: 5px;
    }


    .feature_bg .testimonial-slider .item {
        padding: 10px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .feature_bg {
        padding: 70px 0 75px;
    }


    .feature_bg .section-title {
        margin-bottom: 35px !important;
    }


    .feature_bg .section-title h1 {
        font-size: 36px;
    }


    .feature_bg .section-title::before {
        font-size: 9px;

        padding: 7px 14px;
    }


    .feature_bg .testimonial-slider {
        padding-bottom: 20px;
    }


    .feature_bg .testimonial-slider .item {
        padding: 12px 25px;
    }


    .feature_bg .testimonial-slider .item img {
        border-radius: 18px;

        padding: 6px;
    }


    .feature_bg .owl-nav button {
        width: 40px;
        height: 40px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .feature_bg {
        padding: 60px 0 65px;
    }


    .feature_bg .section-title h1 {
        font-size: 31px;
    }


    .feature_bg .testimonial-slider .item {
        padding: 8px 20px;
    }


    .feature_bg .testimonial-slider .item img {
        border-radius: 15px;

        padding: 5px;
    }


    .feature_bg .owl-dots {
        margin-top: 15px;
    }
}


/* =========================================================
   FAQ SECTION
   DARK PREMIUM / FUTURISTIC DESIGN
========================================================= */

.faq-section {
    position: relative;

    padding: 120px 0 130px !important;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(105, 78, 255, 0.18),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(0, 195, 235, 0.12),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #070a16 0%,
            #0b0e1d 50%,
            #080b18 100%
        );

    isolation: isolate;
}


/* =========================================================
   BACKGROUND GLOW
========================================================= */
/* 
.faq-section::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    top: -330px;
    right: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(112, 82, 255, 0.16),
            transparent 70%
        );

    filter: blur(30px);

    z-index: -2;

    animation:
        faqGlow 9s ease-in-out infinite;
} */


.faq-section::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -280px;
    bottom: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 198, 238, 0.12),
            transparent 70%
        );

    filter: blur(35px);

    z-index: -2;

    animation:
        faqGlow 11s ease-in-out infinite reverse;
}


/* =========================================================
   GRID BACKGROUND
========================================================= */

.faq-section .container {
    position: relative;

    z-index: 3;
}

/* 
.faq-section .container::before {
    content: "";

    position: absolute;

    top: -40px;
    left: 50%;

    width: 950px;
    height: 650px;

    transform: translateX(-50%);

    background-image:
        linear-gradient(
            rgba(120, 105, 220, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(120, 105, 220, 0.035) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    mask-image:
        radial-gradient(
            ellipse,
            black 10%,
            transparent 72%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse,
            black 10%,
            transparent 72%
        );

    pointer-events: none;

    z-index: -1;
} */


/* =========================================================
   SECTION TITLE
========================================================= */

.faq-section .section-title {
    position: relative;

    margin-bottom: 65px !important;

    z-index: 5;
}


/* Label */
/* 
.faq-section .section-title::before {
    content: "NEED HELP?";

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 8px 18px;

    margin-bottom: 18px;

    border: 1px solid rgba(127, 104, 255, 0.28);

    border-radius: 50px;

    background:
        rgba(112, 85, 255, 0.08);

    color: #a89cff;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    box-shadow:
        0 0 25px rgba(105, 80, 255, 0.08);
} */


/* Heading */

.faq-section .section-title h1 {
    color: #ffffff !important;

    font-size: 48px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1.5px;

    margin-bottom: 20px !important;

    background:
        linear-gradient(
            100deg,
            #ffffff 15%,
            #c0b6ff 55%,
            #70dcff 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* Heading underline */

.faq-section .section-title h1::after {
    content: "";

    display: block;

    width: 55px;
    height: 3px;

    margin: 18px auto 0;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #7559ed,
            #38c9e9
        );

    box-shadow:
        0 0 15px rgba(95, 80, 235, 0.5);
}


/* Description */

.faq-section .section-title p {
    color: #9199ad !important;

    font-size: 15px;

    line-height: 1.8;

    max-width: 650px;

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   FAQ WRAPPER
========================================================= */

.faq-wrapper {
    position: relative;

    padding-right: 20px;
}


/* =========================================================
   SINGLE FAQ
========================================================= */

.faq-section .single-faq {
    position: relative;

    margin-bottom: 15px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.025)
        );

    backdrop-filter: blur(15px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.18);

    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}


/* Left glowing line */

.faq-section .single-faq::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 3px;
    height: 0;

    border-radius: 0 5px 5px 0;

    background:
        linear-gradient(
            to bottom,
            #7658ed,
            #36caea
        );

    box-shadow:
        0 0 15px rgba(112, 85, 240, 0.5);

    transition:
        height 0.4s ease;
}


.faq-section .single-faq:hover {
    transform: translateX(5px);

    border-color:
        rgba(120, 98, 245, 0.25);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.25),
        0 0 30px rgba(100, 80, 230, 0.05);
}


.faq-section .single-faq:hover::before {
    height: 100%;
}


/* =========================================================
   FAQ BUTTON
========================================================= */

.faq-section .single-faq button {
    position: relative;

    display: flex !important;

    align-items: center;

    min-height: 70px;

    padding: 20px 60px 20px 24px !important;

    border: 0 !important;

    outline: none !important;

    background: transparent !important;

    color: #ffffff !important;

    text-align: left;

    font-size: 15px;

    line-height: 1.5;

    font-weight: 600;

    cursor: pointer;

    transition:
        color 0.3s ease;
}


/* =========================================================
   PLUS / MINUS ICON
========================================================= */

.faq-section .single-faq button::after {
    content: "+";

    position: absolute;

    right: 22px;
    top: 50%;

    width: 31px;
    height: 31px;

    transform: translateY(-50%);

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(129, 106, 255, 0.25);

    border-radius: 50%;

    background:
        rgba(109, 83, 245, 0.08);

    color: #9b8dff;

    font-size: 20px;

    font-weight: 400;

    transition:
        all 0.35s ease;
}


/* Active */

.faq-section .single-faq button:not(.collapsed)::after {
    content: "−";

    color: #ffffff;

    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            #7257e8,
            #2fc7e9
        );

    box-shadow:
        0 0 18px rgba(105, 82, 235, 0.25);

    transform:
        translateY(-50%)
        rotate(180deg);
}


/* Active text */

.faq-section .single-faq button:not(.collapsed) {
    color: #bfb5ff !important;
}


/* =========================================================
   FAQ CONTENT
========================================================= */

.faq-section .faq-content {
    padding:
        0
        60px
        23px
        24px;

    color: #8e97ab;

    font-size: 13px;

    line-height: 1.8;

    border-top:
        1px solid rgba(255, 255, 255, 0.05);
}


/* =========================================================
   FAQ IMAGE AREA
========================================================= */

.faq-section .faq-image {
    position: relative;

    min-height: 560px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding-left:0px;
}


/* Large spotlight */

.faq-section .faq-image::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(109, 82, 255, 0.18),
            rgba(42, 196, 234, 0.07) 42%,
            transparent 70%
        );

    filter: blur(8px);

    animation:
        faqImageGlow 6s ease-in-out infinite;
}


/* Circular ring */

.faq-section .faq-image::after {
    content: "";

    position: absolute;

    width: 470px;
    height: 470px;

    border-radius: 50%;

    border: 1px solid rgba(121, 101, 245, 0.12);

    box-shadow:
        inset 0 0 50px rgba(90, 80, 230, 0.03);

    animation:
        faqRing 18s linear infinite;
}


/* =========================================================
   FAQ IMAGE
========================================================= */

.faq-section .faq-image img {
    position: relative;

    z-index: 5;

    width: 430px;

    max-width: 90%;

    height: auto;

    filter:
        drop-shadow(
            0 35px 50px rgba(0, 0, 0, 0.38)
        )
        drop-shadow(
            0 0 35px rgba(103, 81, 240, 0.14)
        );

    animation:
        faqPhoneFloat 5s ease-in-out infinite;
}


/* =========================================================
   DECORATIVE FLOATING DOTS
========================================================= */

.faq-section .faq-image img::before {
    display: none;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes faqGlow {

    0%,
    100% {
        transform: scale(1) translate(0, 0);
    }

    50% {
        transform: scale(1.08) translate(15px, -10px);
    }
}


@keyframes faqImageGlow {

    0%,
    100% {
        transform: scale(1);

        opacity: 0.7;
    }

    50% {
        transform: scale(1.08);

        opacity: 1;
    }
}


@keyframes faqPhoneFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}


@keyframes faqRing {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .faq-section {
        padding: 90px 0 100px !important;
    }


    .faq-section .section-title h1 {
        font-size: 43px;
    }


    .faq-wrapper {
        padding-right: 0;
    }


    .faq-section .faq-image {
        min-height: 500px;

        padding-left: 0;

        margin-top: 40px;
    }


    .faq-section .faq-image img {
        width: 350px;
    }


    .faq-section .faq-image::before {
        width: 360px;
        height: 360px;
    }


    .faq-section .faq-image::after {
        width: 400px;
        height: 400px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .faq-section {
        padding: 75px 0 80px !important;
    }


    .faq-section .section-title {
        margin-bottom: 45px !important;
    }


    .faq-section .section-title h1 {
        font-size: 36px;

        letter-spacing: -1px;
    }


    .faq-section .section-title p {
        font-size: 14px;
    }


    .faq-section .single-faq {
        border-radius: 15px;

        margin-bottom: 12px;
    }


    .faq-section .single-faq button {
        min-height: 64px;

        padding:
            17px
            52px
            17px
            20px !important;

        font-size: 14px;
    }


    .faq-section .single-faq button::after {
        right: 17px;

        width: 28px;
        height: 28px;

        font-size: 18px;
    }


    .faq-section .faq-content {
        padding:
            0
            50px
            20px
            20px;

        font-size: 12px;
    }


    .faq-section .faq-image {
        min-height: 420px;

        margin-top: 25px;
    }


    .faq-section .faq-image img {
        width: 290px;
    }


    .faq-section .faq-image::before {
        width: 300px;
        height: 300px;
    }


    .faq-section .faq-image::after {
        width: 330px;
        height: 330px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .faq-section {
        padding: 65px 0 70px !important;
    }


    .faq-section .section-title h1 {
        font-size: 31px;
    }


    .faq-section .section-title::before {
        padding: 7px 14px;

        font-size: 9px;
    }


    .faq-section .single-faq button {
        font-size: 13px;

        min-height: 60px;

        padding:
            16px
            48px
            16px
            17px !important;
    }


    .faq-section .single-faq button::after {
        right: 14px;

        width: 27px;
        height: 27px;
    }


    .faq-section .faq-content {
        padding:
            0
            45px
            18px
            17px;

        font-size: 11px;

        line-height: 1.7;
    }


    .faq-section .faq-image {
        min-height: 350px;
    }


    .faq-section .faq-image img {
        width: 230px;
    }


    .faq-section .faq-image::before {
        width: 240px;
        height: 240px;
    }


    .faq-section .faq-image::after {
        width: 270px;
        height: 270px;
    }
}


/* =========================================================
   APP DOWNLOAD - WHITE PREMIUM DESIGN
========================================================= */

.app-download-section {
    position: relative;
    min-height: 500px;
    padding: 100px 20px;

    overflow: hidden;
    isolation: isolate;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


/* =========================================================
   WHITE OVERLAY
========================================================= */

.app-download-section::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.91) 45%,
            rgba(248, 250, 255, 0.94) 100%
        );

    z-index: -2;
}


/* =========================================================
   PURPLE + CYAN GLOW
========================================================= */

.app-download-section::after {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(112, 84, 245, 0.12) 0%,
            rgba(44, 198, 232, 0.07) 38%,
            transparent 70%
        );

    filter: blur(20px);

    z-index: -1;

    animation: downloadWhiteGlow 8s ease-in-out infinite;
}


/* =========================================================
   CONTAINER
========================================================= */

.app-download-section .container {
    position: relative;
    z-index: 5;
}


/* =========================================================
   SUBTLE GRID
========================================================= */

.app-download-section .container::before {
    content: "";

    position: absolute;

    width: 900px;
    height: 500px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    background-image:
        linear-gradient(
            rgba(90, 75, 190, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(90, 75, 190, 0.035) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    mask-image:
        radial-gradient(
            ellipse,
            black 15%,
            transparent 72%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse,
            black 15%,
            transparent 72%
        );

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   HEADING
========================================================= */

.app-download-section h2 {
    position: relative;

    color: #171827 !important;

    font-size: 48px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1.5px;

    margin-bottom: 22px !important;

    background:
        linear-gradient(
            100deg,
            #171827 15%,
            #6752d9 58%,
            #159fc7 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* Heading line */

.app-download-section h2::after {
    content: "";

    display: block;

    width: 60px;
    height: 3px;

    margin: 18px auto 0;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #7357e7,
            #31c5e5
        );

    box-shadow:
        0 4px 15px rgba(102, 79, 220, 0.20);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.app-download-section p {
    color: #667085 !important;

    font-size: 15px;

    line-height: 1.8;

    margin-bottom: 40px !important;
}


/* =========================================================
   STORE BUTTONS
========================================================= */

.app-download-section .store-btn {
    position: relative;

    min-width: 215px;

    padding: 15px 22px;

    border-radius: 16px;

    border: 1px solid rgba(103, 82, 205, 0.14);

    background:
        rgba(255, 255, 255, 0.82);

    backdrop-filter: blur(12px);

    box-shadow:
        0 12px 30px rgba(40, 45, 80, 0.08);

    overflow: hidden;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}


/* Gradient top line */

.app-download-section .store-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #7358e7,
            #31c6e6
        );

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform 0.4s ease;
}


.app-download-section .store-btn:hover::before {
    transform: scaleX(1);
}


.app-download-section .store-btn:hover {
    transform: translateY(-8px);

    border-color:
        rgba(103, 82, 220, 0.28);

    box-shadow:
        0 22px 45px rgba(38, 43, 80, 0.12),
        0 0 30px rgba(100, 80, 230, 0.07);
}


/* =========================================================
   STORE ICON
========================================================= */

.app-download-section .store-btn i {
    color: #5e4bd0 !important;

    font-size: 34px !important;

    transition:
        transform 0.35s ease;
}


.app-download-section .store-btn:hover i {
    transform:
        scale(1.12)
        rotate(-5deg);
}


/* =========================================================
   STORE TEXT
========================================================= */

.app-download-section .store-btn small {
    color: #8a91a3 !important;

    font-size: 10px;

    display: block;

    margin-bottom: 3px;
}


.app-download-section .store-btn h5 {
    color: #202333 !important;

    font-size: 16px;
}


/* =========================================================
   DECORATIVE CIRCLE
========================================================= */

.app-download-section .container::after {
    content: "";

    position: absolute;

    width: 15px;
    height: 15px;

    top: 10%;
    left: 4%;

    border-radius: 50%;

    border: 3px solid rgba(106, 82, 225, 0.20);

    box-shadow:
        0 0 0 8px rgba(106, 82, 225, 0.04),
        0 0 20px rgba(106, 82, 225, 0.10);

    animation:
        downloadFloat 5s ease-in-out infinite;

    pointer-events: none;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes downloadWhiteGlow {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(1);

        opacity: 0.7;
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.12);

        opacity: 1;
    }
}


@keyframes downloadFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .app-download-section {
        min-height: 460px;
        padding: 90px 20px;
    }

    .app-download-section h2 {
        font-size: 42px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .app-download-section {
        min-height: auto;
        padding: 75px 20px 80px;
    }

    .app-download-section h2 {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .app-download-section p {
        font-size: 13px;
        margin-bottom: 32px !important;
    }

    .app-download-section .store-btn {
        width: 220px;
        min-width: 0;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .app-download-section {
        padding: 65px 18px 70px;
    }

    .app-download-section h2 {
        font-size: 31px;
    }

    .app-download-section p {
        font-size: 12px;
    }

    .app-download-section .store-btn {
        width: 205px;
        padding: 13px 17px;
    }

    .app-download-section .store-btn h5 {
        font-size: 14px;
    }

}



/* =========================================================
   ULTRA CREATIVE APP FOOTER
========================================================= */

.footer-section {
    position: relative;
    overflow: hidden;
    padding: 95px 0 0;
    background:
        radial-gradient(
            circle at 15% 35%,
            rgba(119, 83, 255, 0.20),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 55%,
            rgba(0, 202, 239, 0.16),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #050711 0%,
            #090c19 45%,
            #060914 100%
        );
    isolation: isolate;
}


/* =========================================================
   CURVED TOP EDGE
========================================================= */

.footer-section::before {
    content: "";
    position: absolute;

    width: 130%;
    height: 150px;

    left: -15%;
    top: -105px;

    border-radius: 50%;

    background: #ffffff;

    z-index: -1;
}


/* =========================================================
   AMBIENT LIGHT
========================================================= */

.footer-section::after {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    left: 50%;
    top: -280px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(113, 83, 255, 0.15),
            rgba(31, 199, 237, 0.05) 40%,
            transparent 70%
        );

    filter: blur(25px);

    z-index: -2;

    animation: footerAmbient 9s ease-in-out infinite;
}


/* =========================================================
   GRID
========================================================= */

.footer-section .footer-top {
    position: relative;
}

.footer-section .footer-top::before {
    content: "";

    position: absolute;

    width: 900px;
    height: 450px;

    left: 50%;
    top: -120px;

    transform: translateX(-50%);

    background-image:
        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    mask-image:
        radial-gradient(
            ellipse,
            black 15%,
            transparent 72%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse,
            black 15%,
            transparent 72%
        );

    pointer-events: none;
}


/* =========================================================
   LOGO AREA
========================================================= */

.footer-top {
    padding-bottom: 65px;

    z-index: 5;
}


/* =========================================================
   LOGO GLASS CAPSULE
========================================================= */

.footer-top img {
    position: relative;

    width: 120px !important;

    padding: 16px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.13),
            rgba(255,255,255,0.035)
        );

    border:
        1px solid rgba(255,255,255,0.14);

    box-shadow:
        0 25px 60px rgba(0,0,0,0.35),
        0 0 45px rgba(110,82,240,0.12);

    backdrop-filter: blur(20px);

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}


.footer-top img:hover {
    transform:
        translateY(-8px)
        scale(1.04);

    box-shadow:
        0 30px 70px rgba(0,0,0,0.40),
        0 0 60px rgba(110,82,240,0.22);
}


/* =========================================================
   LOGO GLOW RING
========================================================= */

.footer-top::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    left: 50%;
    top: 15px;

    transform: translateX(-50%);

    border-radius: 50%;

    border:
        1px solid rgba(112,86,245,0.15);

    box-shadow:
        0 0 0 25px rgba(112,86,245,0.025),
        0 0 0 50px rgba(112,86,245,0.015);

    pointer-events: none;

    z-index: -1;

    animation: logoRing 7s ease-in-out infinite;
}


/* =========================================================
   DECORATIVE ORBS
========================================================= */

.footer-section .h1,
.footer-section .h2,
.footer-section .h3,
.footer-section .h4,
.footer-section .h5,
.footer-section .h6,
.footer-section .h7,
.footer-section .h8 {
    position: absolute;

    display: block;

    width: 9px;
    height: 9px;

    padding: 0;

    font-size: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #7658ec,
            #38c8e8
        );

    box-shadow:
        0 0 12px rgba(111,84,240,0.7),
        0 0 30px rgba(47,199,232,0.25);

    opacity: .55;

    pointer-events: none;

    animation:
        footerParticle 5s ease-in-out infinite;
}


/* =========================================================
   PARTICLE POSITIONS
========================================================= */

.footer-section .h1 {
    top: 28%;
    left: 8%;
}

.footer-section .h2 {
    top: 52%;
    left: 19%;
    animation-delay: .8s;
}

.footer-section .h3 {
    top: 20%;
    left: 32%;
    animation-delay: 1.4s;
}

.footer-section .h4 {
    top: 45%;
    right: 20%;
    animation-delay: 2s;
}

.footer-section .h5 {
    top: 27%;
    right: 8%;
    animation-delay: 2.6s;
}

.footer-section .h6 {
    top: 18%;
    right: 33%;
    animation-delay: 3.2s;
}

.footer-section .h7 {
    top: 58%;
    left: 48%;
    animation-delay: 3.8s;
}

.footer-section .h8 {
    top: 34%;
    right: 43%;
    animation-delay: 4.4s;
}


/* =========================================================
   BOTTOM BAR
========================================================= */

.footer-bottom {
    position: relative;

    padding: 24px 0;

    border-top:
        1px solid rgba(255,255,255,0.07);

    background:
        rgba(3,5,13,0.65);

    backdrop-filter: blur(20px);

    z-index: 10;
}


/* Top gradient line */

.footer-bottom::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 10%;

    width: 80%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(112,84,245,.45),
            rgba(48,201,232,.45),
            transparent
        );
}


/* =========================================================
   COPYRIGHT
========================================================= */

.footer-section .copyright-text {
    color: #7f879b;

    font-size: 12px;

    line-height: 1.8;
}


.footer-section .copyright-text a {
    color: #9ba3b7 !important;

    text-decoration: none;

    transition:
        color .3s ease;
}


.footer-section .copyright-text a:hover {
    color: #9b8cff !important;
}


/* =========================================================
   SOCIAL ICONS
========================================================= */

.footer-section .social-icons {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 11px;
}


.footer-section .social-icons a {
    position: relative;

    width: 43px;
    height: 43px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    color: #9ca5ba;

    text-decoration: none;

    border:
        1px solid rgba(255,255,255,0.09);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.08),
            rgba(255,255,255,0.025)
        );

    box-shadow:
        0 10px 25px rgba(0,0,0,.22);

    backdrop-filter: blur(12px);

    overflow: hidden;

    transition:
        all .35s ease;
}


/* Social shine */

.footer-section .social-icons a::before {
    content: "";

    position: absolute;

    width: 60px;
    height: 130%;

    left: -90px;
    top: -15px;

    transform: rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    transition:
        left .55s ease;
}


.footer-section .social-icons a:hover::before {
    left: 100%;
}


.footer-section .social-icons a:hover {
    color: #ffffff;

    border-color:
        rgba(115,91,235,.45);

    transform:
        translateY(-6px);

    background:
        linear-gradient(
            135deg,
            #7156e7,
            #2fc6e8
        );

    box-shadow:
        0 15px 35px rgba(85,68,210,.30),
        0 0 20px rgba(72,190,235,.12);
}


.footer-section .social-icons a i {
    position: relative;

    z-index: 2;

    font-size: 16px;

    transition:
        transform .35s ease;
}


.footer-section .social-icons a:hover i {
    transform:
        scale(1.18);
}


/* =========================================================
   FLOATING PARTICLES
========================================================= */

@keyframes footerParticle {

    0%,
    100% {
        transform:
            translate(0,0)
            scale(1);

        opacity: .35;
    }

    50% {
        transform:
            translate(0,-18px)
            scale(1.35);

        opacity: .85;
    }
}


/* =========================================================
   AMBIENT ANIMATION
========================================================= */

@keyframes footerAmbient {

    0%,
    100% {
        transform:
            translateX(-50%)
            scale(1);

        opacity: .65;
    }

    50% {
        transform:
            translateX(-50%)
            scale(1.12);

        opacity: 1;
    }
}


/* =========================================================
   LOGO RING
========================================================= */

@keyframes logoRing {

    0%,
    100% {
        transform:
            translateX(-50%)
            scale(1);

        opacity: .5;
    }

    50% {
        transform:
            translateX(-50%)
            scale(1.08);

        opacity: 1;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .footer-section {
        padding-top: 80px;
    }

    .footer-section .copyright-text {
        font-size: 11px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .footer-section {
        padding-top: 65px;
    }

    .footer-top {
        padding-bottom: 45px;
    }

    .footer-top img {
        width: 105px !important;
        padding: 13px;
        border-radius: 22px;
    }

    .footer-top::after {
        width: 145px;
        height: 145px;
    }

    .footer-bottom {
        padding: 22px 15px;
    }

    .footer-section .copyright-text {
        text-align: center;
        font-size: 10px;
        line-height: 2;
    }

    .footer-section .social-icons {
        justify-content: center;
        margin-top: 17px;
    }

    .footer-section .social-icons a {
        width: 39px;
        height: 39px;
        border-radius: 12px;
    }

    .footer-section .h1,
    .footer-section .h2,
    .footer-section .h3,
    .footer-section .h4,
    .footer-section .h5,
    .footer-section .h6,
    .footer-section .h7,
    .footer-section .h8 {
        width: 6px;
        height: 6px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .footer-section {
        padding-top: 55px;
    }

    .footer-top img {
        width: 95px !important;
    }

    .footer-section .copyright-text {
        font-size: 9px;
    }

    .footer-section .social-icons a {
        width: 36px;
        height: 36px;
    }

}