:root {
   --purple-1: #1c0030;
   --purple-2: #240141;
   --purple-3: #0a1439;
   --red-1: #e83743;
   --red-2: #ff0a5a;
   --red-3: #fc0254;
   --black: #1a2936;
   --gray: #39424e;
}

.s-heading {
   font-size: 22px;
   font-weight: 800;
   color: var(--black);
   text-align: center;
   margin-bottom: 20px;
}

.s-sub-heading {
   font-size: 18px;
   font-weight: 800;
   color: #ff0a5a;
   position: relative;
   text-align: center;
   margin-bottom: 20px;
}

.s-content {
   font-size: 16px;
   font-weight: 700;
   color: var(--gray);
   text-align: center;
}

@media screen and (min-width: 576px) {
   .s-heading {
      font-size: 30px;
      font-weight: 800;
      color: var(--black);
   }

   .s-sub-heading {
      font-size: 22px;
      font-weight: 800;
      color: #ff0a5a;
      position: relative;
   }

   .s-content {
      font-size: 18px;
      font-weight: 700;
      color: var(--gray);
   }
}

@media screen and (min-width: 768px) {
   .s-heading {
      font-size: 32px;
      font-weight: 800;
      color: var(--black);
   }

   .s-sub-heading {
      font-size: 22px;
      font-weight: 800;
      color: #ff0a5a;
      position: relative;
   }

   .s-content {
      font-size: 20px;
      font-weight: 700;
      color: var(--gray);
   }
}

@media screen and (min-width: 992px) {
   .s-heading {
      font-size: 35px;
      font-weight: 800;
      color: var(--black);
   }

   .s-sub-heading {
      font-size: 25px;
      font-weight: 800;
      color: #ff0a5a;
      position: relative;
   }
}

@media screen and (min-width: 1200px) {
   .s-heading {
      font-size: 42px;
      font-weight: 800;
      color: var(--black);
   }

   .s-sub-heading {
      font-size: 28px;
      font-weight: 800;
      color: #ff0a5a;
      position: relative;
   }
}

@media screen and (min-width: 1400px) {
   .s-heading {
      font-size: 48px;
      font-weight: 800;
      color: var(--black);
   }

   .s-sub-heading {
      font-size: 30px;
      font-weight: 800;
      color: #ff0a5a;
      position: relative;
   }
}

/**** header ****/
header {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1000;
   width: 100%;
}

.header {
   height: 70px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.logo {
   display: inline-block;
   border-right: 1px solid #494949;
}

.logo-img {
   width: 45px;
   margin-right: 20px;
}

.nav-link {
   display: inline-block;
   position: relative;
   color: #fff;
   margin-left: 25px;
   transition: all 0.2s;
   font-weight: 600;
   text-transform: capitalize;
   font-size: 16px;
   height: 50px;
   line-height: 50px;
}

.nav-link::before {
   position: absolute;
   content: '';
   left: 0;
   bottom: 5px;
   width: 0;
   height: 2px;
   background-color: var(--red-2);
   border-radius: 5px;
   transition: all 0.2s;
}

.nav-link:hover {
   color: var(--red-2);
}

.nav-link:hover::before {
   width: 100%;
}

.login {
   color: #ffffff;
   font-size: 15px;
   font-weight: 600;
   text-transform: capitalize;
   border: 1px solid #ffffff;
   border-radius: 5px;
   padding: 5px 0;
   margin-right: 10px;
   width: 85px;
   text-align: center;
   display: inline-block;
}

.signup {
   color: #fff;
   background-color: var(--red-2);
   border-radius: 5px;
   padding: 5px 0;
   font-size: 15px;
   border: 1px solid var(--red-2);
   font-weight: 600;
   text-transform: capitalize;
   width: 85px;
   text-align: center;
   display: inline-block;
}

.signup:hover {
   color: #fff;
}

.login:hover {
   color: #fff;
}

@media screen and (min-width: 992px) {
   header {
      display: block;
   }
}

@media screen and (min-width: 1200px) {
   .nav-link {
      margin-left: 35px;
   }
}

@media screen and (min-width: 1400px) {
   .nav-link {
      margin-left: 45px;
   }
}

/**** hero section ****/
.hero-wrapper {
   position: relative;
   background-color: #01040c;
   overflow: hidden;
   min-height: 100vh;
}

.circle-1 {
   width: 350px;
   height: 350px;
   border-radius: 50%;
   position: absolute;
   background-color: #6295ac;
   top: 35vh;
   left: 120px;
}

.circle-2 {
   width: 400px;
   height: 400px;
   border-radius: 50%;
   position: absolute;
   background-color: #8fb4dc;
   top: 25vh;
   left: 60%;
}

.hero {
   position: relative;
   min-height: 100vh;
   backdrop-filter: blur(200px);
}

.tablet {
   margin-top: 60px;
}

.tablet-img {
   width: 90%;
   display: block;
   margin: auto;
}

.hero-heading {
   color: #fff;
   font-size: 34px;
   font-weight: 800;
   text-align: center;
}

.desktop-word {
   background: linear-gradient(135deg, #67bd45 0, #45b971 16%, #41bda3 33%, #69c079 50%, #41bda3 67%, #45b971 84%, #67bd45 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-size: 200% auto;
   animation: shine 7s linear infinite;
}

@keyframes shine {
   to {
      background-position: 200% center;
      will-change: background-position
   }
}

.time-word {
   position: relative;
}

.time-word::before {
   position: absolute;
   content: '';
   width: calc(100% + 6px);
   height: 5px;
   z-index: -1;
   background-color: #ff0a5a;
   border-radius: 5px;
   left: -3px;
   bottom: 0;
   transition: all 0.2s;
}

.time-word:hover::before {
   height: calc(100% - 3px);
}

.where-word {
   position: relative;
}

.where-word::before {
   position: absolute;
   content: '';
   width: calc(100% + 6px);
   height: 5px;
   z-index: -1;
   background-color: #ff0a5a;
   border-radius: 5px;
   left: -3px;
   bottom: 0;
   transition: all 0.2s;
}

.where-word:hover::before {
   height: calc(100% - 3px);
}

.hero-sub-heading {
   color: #fff;
   font-size: 18px;
   font-weight: 500;
   margin-top: 40px;
   text-align: center;
}

.hero-btns {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
   margin-top: 40px;
}

.hero-btn {
   color: #fff;
   font-size: 15px;
   font-weight: 600;
   background-color: var(--red-2);
   border: 1px solid var(--red-2);
   border-radius: 5px;
   padding: 8px;
   width: calc(50% - 10px);
   max-width: 220px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.hero-btn span {
   transition: all 0.3s ease;
   transform: translateX(14px);
}

.hero-btn i {
   transition: all 0.3s ease;
   font-size: 15px;
   margin-left: 10px;
   width: 14px;
   transform: translateX(-7px);
   opacity: 0;
}

.hero-btn:hover {
   color: #fff;
   box-shadow: 0 0 20px 0 #020e26;
}

.hero-btn:hover span {
   transform: translateX(0);
}

.hero-btn:hover i {
   transform: translateX(0);
   opacity: 1;
}

.demo-btn {
   font-size: 15px;
   font-weight: 600;
   color: #fff;
   border-radius: 5px;
   padding: 8px;
   border: 1px solid #fff;
   width: calc(50% - 10px);
   max-width: 220px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.demo-btn span {
   transition: all 0.3s ease;
   transform: translateX(14px);
}

.demo-btn i {
   transition: all 0.3s ease;
   font-size: 15px;
   margin-left: 10px;
   width: 14px;
   transform: translateX(-7px);
   opacity: 0;
}

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

.demo-btn:hover span {
   transform: translateX(0);
}

.demo-btn:hover i {
   transform: translateX(0);
   opacity: 1;
}

.earth {
   position: absolute;
   left: 5%;
   bottom: -20%;
   width: 50%;
   z-index: -1;
   display: none;
}

.mobile-app {
   color: #fff;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 30px;
   margin-top: 30px;
}

.app {
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 5px;
   padding: 10px;
   width: calc(50% - 15px);
   max-width: 200px;
   border: 1px solid #fff;
}

.app i {
   font-size: 25px;
   margin-right: 10px;
}

.app p {
   font-size: 10px;
   margin-bottom: 3px;
}

.app h6 {
   font-size: 14px;
   font-weight: 700;
   margin-bottom: 0;
}

.shape-divider {
   position: absolute;
   bottom: -2px;
   left: 0;
   width: 100%;
   overflow: hidden;
   line-height: 0;
   display: none;
}

.shape-divider svg {
   position: relative;
   display: block;
   width: calc(200% + 2px);
   height: 150px;
   transform: rotateY(180deg);
}

.shape-divider .shape-fill {
   fill: #fafbff;
}

@media screen and (min-width: 576px) {
   .hero-heading {
      font-size: 40px;
   }

   .hero-sub-heading {
      font-size: 20px;
   }

   .app i {
      font-size: 35px;
      margin-right: 25px;
   }

   .app p {
      font-size: 12px;
      margin-bottom: 3px;
   }

   .app h6 {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 0;
   }
}

@media screen and (min-width: 768px) {
   .hero-heading {
      font-size: 45px;
   }

   .hero-sub-heading {
      font-size: 22px;
   }

   .tablet-img {
      width: 80%;
   }

   .hero-btn {
      font-size: 17px;
   }

   .demo-btn {
      font-size: 17px;
   }
}

@media screen and (min-width: 992px) {
   .hero-wrapper {
      min-height: calc(100vh + 150px);
   }

   .hero-heading {
      font-size: 44px;
      text-align: left;
   }

   .hero-sub-heading {
      font-size: 20px;
      text-align: left;
   }

   .earth {
      display: block;
   }

   .shape-divider {
      display: block;
   }

   .tablet {
      margin-top: 100px;
   }

   .tablet-img {
      width: 100%;
   }

   .hero-btns {
      justify-content: flex-start;
      padding-right: 15px;
   }
}

@media screen and (min-width: 1200px) {
   .hero-heading {
      font-size: 54px;
   }

   .hero-sub-heading {
      font-size: 22px;
   }
}

@media screen and (min-width: 1400px) {
   .hero-heading {
      font-size: 60px;
   }

   .hero-sub-heading {
      font-size: 25px;
   }
}

/**** section 2 ****/
.benefit {
   width: 100%;
   padding: 25px 15px;
   background-color: #fff;
   margin-bottom: 30px;
   text-align: center;
   border-radius: 10px;
   box-shadow: 0 10px 30px -10px #ccc;
}

.benefit i {
   font-size: 45px;
   margin-bottom: 15px;
   color: var(--red-2);
}

.benefit h5 {
   font-size: 18px;
   font-weight: 700;
   margin: 10px;
}

.benefit p {
   font-size: 15px;
   margin-bottom: 0;
   font-weight: 600;
}

/**** section 3 ****/
.steps {
   width: 100%;
   padding: 30px;
   background-color: #fff;
   margin-bottom: 30px;
   text-align: center;
   border-radius: 10px;
   box-shadow: 0 10px 30px -10px #ccc;
}

.steps .step-num {
   font-size: 35px;
   font-weight: 800;
   width: 70px;
   height: 70px;
   margin: 0 auto;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
}

.num-1 {
   background-color: #ceffcd;
   color: #1e8908;
}

.num-2 {
   background-color: #ffd3e1;
   color: #ff0a5a;
}

.num-3 {
   background-color: #fff6c2;
   color: #b07000;
}

.num-4 {
   background-color: #d7fcff;
   color: #195d7b;
}

.steps h5 {
   font-size: 18px;
   font-weight: 700;
   margin: 30px 0 20px 0;
}

.steps p {
   font-size: 15px;
   margin-bottom: 0;
   font-weight: 600;
}

/**** section 4 ****/
.s4-img {
   width: 100%;
}

/**** section 5 ****/
.s5-img {
   width: 100%;
}

/**** section 6 ****/
.org-benefit {
   width: 100%;
   padding: 30px;
   background-color: #fff;
   margin-bottom: 30px;
   text-align: center;
   border-radius: 10px;
   box-shadow: 0 10px 30px -10px #ccc;
}

.org-benefit i {
   font-size: 40px;
   margin-bottom: 15px;
   color: var(--red-2);
}

.org-benefit h5 {
   font-size: 18px;
   font-weight: 700;
   margin: 30px 0 20px 0;
}

.org-benefit p {
   font-size: 15px;
   margin-bottom: 0;
   font-weight: 600;
}

/**** footer ****/
footer {
   background-color: #1d2736;
   color: #fff;
}

.footer-head {
   font-size: 20px;
   font-weight: 800;
   margin-bottom: 20px;
}

.footer-link {
   color: #fff;
   font-size: 18px;
   font-weight: 600;
   display: block;
   margin-bottom: 10px;
}

.footer-link:hover {
   color: #fff;
}