:root {
  --color-black: #000;
  --color-white: #fff;
  --color-pry: #18181b;
  --color-sec: #5d6270;
  --color-tet: #2e3192;
  --color-base: #161c2d;

  --fs-sm: 1.5rem;
  --fs-mid: 1.6rem;
  --fs-big: 2rem;
}
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* outline: solid 1px red; */
}
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
body {
  font-family: "Sora", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  overflow-x: hidden;
}
li {
  text-decoration: none;
  list-style-type: none;
}

button {
  outline: none;
  border: none;
  background: var(--color-tet);
  cursor: pointer;
  font-weight: 600;
  transition: background-color 500ms ease;
  text-decoration: none;
}

.nav button {
  font-size: var(--fs-mid);
  font-weight: 500;
  border: solid 1px #6c70e0;
  padding: 1.5rem 1.5rem;
  border-radius: .7rem;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.nav a{
  font-size: var(--fs-mid);
  font-family: "Sora", sans-serif;
  font-weight: 500;
  padding: 1.5rem 1.5rem;
  border-radius: 1rem;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
}

p{
  letter-spacing: .5px;
}

.logo{
  background-color: #fff;
  border-radius: 15px;
}
.logo img{
   width: 150px;
   height: auto;
}

input {
  background-color: none;
  outline: none;
  border: none;
}

/* 
///////////////////////////////////////////////
             UTILITY STYLES
///////////////////////////////////////////////
 */
.container {
  width: 80%;
  max-width: 2000px;
  margin: 0 auto;
}
.flex {
  display: flex;
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 1;
}
.flex-3 {
  flex: 3;
}
.flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-wrap {
  flex-wrap: wrap;
}
.justify-sb {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.align-center {
  align-items: center;
}
.gap-0 {
  gap: 0rem;
}
.gap-1 {
  gap: 1rem;
}
.gap-2 {
  gap: 2rem;
}
.gap-3 {
  gap: 3rem;
}
.gap-4 {
  gap: 4rem;
}
.gap-5 {
  gap: 5rem;
}
.gap-6 {
  gap: 6rem;
}
.gap-7 {
  gap: 7rem;
}
.gap-8 {
  gap: 8rem;
}
.gap-9 {
  gap: 9rem;
}
.gap-10 {
  gap: 10rem;
}
.text-center {
  text-align: center;
}
.mb-0 {
  margin-bottom: 0rem;
}
.mb-1 {
  margin-bottom: 1rem;
}
.mb-2 {
  margin-bottom: 2rem;
}
.mb-3 {
  margin-bottom: 3rem;
}
.mb-4 {
  margin-bottom: 4rem;
}
.mb-5 {
  margin-bottom: 5rem;
}
.mb-6 {
  margin-bottom: 6rem;
}
.mb-7 {
  margin-bottom: 7rem;
}
.mb-8 {
  margin-bottom: 8rem;
}
.mb-9 {
  margin-bottom: 9rem;
}
.mb-10 {
  margin-bottom: 10rem;
}
.mt-0 {
  margin-top: 0rem;
}
.mt-1 {
  margin-top: 1rem;
}
.mt-2 {
  margin-top: 2rem;
}
.mt-3 {
  margin-top: 3rem;
}
.mt-4 {
  margin-top: 4rem;
}
.mt-5 {
  margin-top: 5rem;
}
.mt-6 {
  margin-top: 6rem;
}
.mt-7 {
  margin-top: 7rem;
}
.mt-8 {
  margin-top: 8rem;
}
.mt-9 {
  margin-top: 9rem;
}
.mt-10 {
  margin-top: 10rem;
}
.mx-auto {
  margin: 0 auto;
}
.w-full {
  width: 100%;
}
.w-half {
  width: 50%;
}
.w-half-Plus {
  width: 65%;
}

.w-qutr {
  width: 33%;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fw-100 {
  font-weight: 100;
}
.fw-200 {
  font-weight: 200;
}
.fw-300 {
  font-weight: 300;
}
.fw-400 {
  font-weight: 400;
}
.fw-500 {
  font-weight: 500;
}
.overflow-auto {
  overflow: auto;
}

/* Elements */
.fs-sm {
  font-size: var(--fs-sm);
}
.fs-md {
  font-size: var(--fs-mid);
}
.fs-big {
  font-size: var(--fs-big);
}
.accent-text {
  color: #2e3192;
  font-size: 2rem;
  font-weight: 500;
}
.main-text {
  font-size: 5.7rem;
  color: var(--color-pry);
  font-weight: 700;
}
.main-text2 {
  font-size: 4rem;
  color: var(--color-pry);
  font-weight: 700;
}

.sub-text {
  font-size: var(--fs-big);
  color: var(--color-sec);
  letter-spacing: 0px;
  line-height: 30px;
  text-wrap: balance;
  font-family: inter;
}


.btn-pry {
  background-color: var(--color-tet);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  padding: 1.7rem 2.5rem;
  font-size: var(--fs-sm);
  font-family: "Sora", sans-serif;
  text-decoration: none;
  font-weight: 600;
  border-radius: .7rem;
  color: var(--color-white);
  width: fit-content;
  margin-right: 5px;
  transition: background-color 500ms ease;
}
.btn-pry-1 {
  font-family: "Sora", sans-serif;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  margin-top: 2rem;
  text-decoration: none;
  transition: background-color 500ms ease;
  border: none;
}
.btn-pry-3 {
  color:#2E3192;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  font-size: 1.8rem;
  font-family: "Sora", sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 500ms ease;
  background-color: #fff;
  border: 1px solid #2E3192;
  padding: 1.5rem 3rem;
  border-radius: 10px;
}
.btn-hero {
  margin-top: 2rem;
  text-decoration: none;
  font-family: "Sora", sans-serif;
  transition: background-color 500ms ease;
  color: var(--color-white);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.btn-hero2 {
  color: black;
  font-family: "Sora", sans-serif;
 text-decoration: none !important;
  transition: background-color 500ms ease;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.btn-pry:hover {
  background-color: var(--color-white);
  color: var(--color-tet) !important;
  box-shadow: #3a3ec9;
}
.btn-pry-1:hover {
  background-color: var(--color-tet);
  color: #fff !important;
}

/* 
///////////////////////////////////////////////
             HEADER STYLES
///////////////////////////////////////////////
 */

.header {
  position: relative;
}
.top-content {
  padding: 2rem 0;
  position: fixed;
  width: inherit;
  margin: 0 auto;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  width: 100%;
  margin: 0 auto;
  z-index: 10;
}

.nav ul li {
  display: none;
  font-size: var(--fs-sm);
  color: var(--color-black);
  font-weight: 500;
}

.hero {
  background-color: #F3F6F9;
  margin-top: 1rem;
  padding-top: 20rem;
   padding-bottom: 6rem;
}


.hero__text  {
  width: 100%;
  padding-bottom: 5rem;
  
}
.hero__text h1 {
  width: 100%;
  font-weight: 700;
  line-height: 100px;
  font-size: 8rem;
  opacity: 0;
  animation: fade-in 2s ease forwards;
}
.hero__text p {
  width: 90%;
  color: var(--color-sec);
  margin-bottom: 6rem;
  font-size: var(--fs-big);
  line-height: 32px;
  font-weight: 300;
  font-family: inter;
}
.hero__image {
  width: 100%;
  transform: scale(1.2);
  margin-right: -15rem;
}
.hero__form {
  border: none;
  padding: 0rem;
  border-radius: 1rem;
  width: fit-content;
  gap: 2rem;
}

.hero__form .btn-pry-1 {
  font-size: var(--fs-mid);
  color: var(--color-tet);
  font-weight: 500;
  border: solid 1px #6c70e0;
  padding: 1.5rem 2rem;
  border-radius: .7rem;
  margin-left: 1.5rem;
}


/* 
///////////////////////////////////////////////
             SECTION FEATURE STYLES
///////////////////////////////////////////////
 */
.feature-text{
  text-align: left;
  padding: 3rem 0;
}
.feature-text h2{
  font-size: 4rem;
  font-weight: 600;

}
.feature-box__section{
  margin-top: 2rem;
  margin-bottom: 10rem;
}
.feature__box img{
  max-width: 100%;

}
.feature__box h6{
  font-size: 1.8rem;
  font-weight: 600;
  padding: 2rem 0;
}
.feature__box p{
  font-size: var(--fs-mid);
  font-family: inter;
  padding-bottom: 2rem;
  line-height: 32px;
  color: #50607B;
}
.feature__box a{
  font-size: 1.5rem;
  color: #15198E;
  text-decoration: none;
  border-bottom: 1px solid #15198E;
  padding-bottom: 1rem;
  font-weight: 600;

}





/* 
///////////////////////////////////////////////
             SECTION ABOUT STYLES
///////////////////////////////////////////////
 */
.section__about{
  text-align: left;
  padding: 3rem 0;
}
.section__about h2{
  font-size: 4rem;
}

.section__about h5{
  font-size: 4rem;
  font-weight: 600;
  padding-right: 5rem;
}
.section__about p{
  font-size: var(--fs-mid);
  font-family: inter;
  text-align: left;
  padding-bottom: 2rem;
  line-height: 32px;
  word-spacing: 1px;
  color: var(--color-sec);
}

.section__about2 img{
  max-width: 100%;
}


/* 
///////////////////////////////////////////////
             SECTION READY STYLES
///////////////////////////////////////////////
 */
.section__ready{
  background-color: #0E1320;
  padding: 5rem 0;
}
.section__ready h5{
 color: #fff;
 font-size: 2.5rem;
 font-weight: 600;
}
.section__ready span{
 color: #fff;
 font-size: 2rem;
 font-weight: 400;
}




/* 
///////////////////////////////////////////////
             SECTION WHY STYLES
///////////////////////////////////////////////
 */

.why__city {
  background-color: #f3f6f9;
  width: 100%;
  left: 0;
  right: 0;
  padding-top: 10rem;
  padding-bottom: 8rem;
}

.why {
  background: #fff;
  border-radius: 10px;
  padding:  3rem;
  width: 100%;
}

.why__top {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 7rem;
  padding-top: 0rem;
}
.why__text {
  margin-top: 3rem;
  padding-top: 0rem !important;
  margin-bottom: 30;
}
.why__text .my-custom-icon{
  margin-top: -2rem;
}
.why__text .my-custom-icon-1{
  margin-top: -3.5rem;
}

.why div p {
  font-size: 1.6rem;
}
.why__top .sub-text{
 padding-right: 19rem;
 font-size: 1.6rem;
 font-family: inter;
 text-wrap: wrap;
}
.why-box .sub-text{
 text-wrap: wrap;
 font-family: inter;
}

/* 
///////////////////////////////////////////////
             SECTION FOOTER STYLES
///////////////////////////////////////////////
 */
.footer__section {
  background-color: #fff;
  padding-top: 6rem;
  padding-bottom: 3rem;
}
.footer-left h5{
 color: #3F434E;
 font-size: 2.5rem;
 font-weight: 500;
}
.footer-right img{
   width: 150px;
   height: auto;
}
/* 
///////////////////////////////////////////////
             SECTION COPYRIGHT STYLES
///////////////////////////////////////////////
 */
.copyright__section {
  background-color: #fff;
  padding: 2rem 0;
  font-family: inter;
}
.copyright-left h5{
 color: #5D6270;
 font-size: 1.6rem;
 font-weight: 300;
}
.copyright-left span{
  font-weight: 600;
}





/* 
///////////////////////////////////////////////
             ANIMATIONS
///////////////////////////////////////////////
 */

.animate{
  opacity: 0;
  filter: blur(5px);
  transform: translateY(10%);
  transition: all 1s ease;
}

.show{
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

@media(prefers-reduced-motion){
  .animate{
    transition: none;
  }
}

.delay:nth-child(2){
  transition-delay: 200ms;
}
.delay:nth-child(3){
  transition-delay: 300ms;
}
/* .delay:nth-child(4){
  animation-delay: 600ms;
} */



    @keyframes fade-in {
        0% {
            opacity: 0;
            transform: translateX(-100%);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .hero__text:nth-child(1) {
        animation-delay: 0.5s;
    }

    .hero__text:nth-child(2) {
        animation-delay: 1s;
    }

    .hero__text:nth-child(3) {
        animation-delay: 1.3s;
    }

    .animate-fade {
  opacity: 0;
  animation: fade-in 4s ease forwards;
}
    .hero__form {
  opacity: 0;
  animation: fade-in 5s ease forwards;
}