/*----------- Google Fonts ----------*/
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/*----------- Variables CSS ----------*/
:root{
  --primary: #0574D6;
  --primary-hover: #058aff;
  --linear-primary: linear-gradient(45deg,#0574D6, #058aff);
  --white: #FFFFFF;
  --bg-color:#F7f9ff;
  --text: #475467;
  --title-color:#281014;
  --shadow-lg: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
  --shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
  --transition: all .3s ease-in-out;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Onest", sans-serif;
}
html{
  scroll-behavior: smooth; /* for smooth scrolling */
}
body {
  overflow-x: hidden;
}
ul{
  list-style: none;
}
h1,h2,h3,h4,h5,h6{
  margin: 0;
}
p{
  font-size: 1.2rem;
  word-spacing: 1px;
}
a {
  text-decoration: none;
  transition: var(--transition);
}
a.active{
  color: var(--primary-hover) !important;
}
a:hover{
  color: var(--primary-hover) !important;
}
button, input, textarea {
  outline: none;
}
::selection {
  color: var(--white);
  background: var(--primary);
}
::-webkit-scrollbar{
  width: 10px;
  background: #e6e9e8;
  
}
::-webkit-scrollbar-thumb{
  background: var(--primary);
}

:focus{
  box-shadow: none !important;
}

/* Nav */
nav.sticky{
  position: fixed !important;
  left: 0;
  top: 0;
  margin-top: 0 !important;
  padding: 1.5rem 0;
  background-color: #0c0e11ad;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg);  
}
/* Hero */
#hero{
  padding-top: 15rem;
  height: 100%;
  background-color: #0574D6;
  background: url(../images/Hero_bg.jpg) no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  z-index: 1;
}
#hero::after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  background: #0c0e11;
  opacity: .8;
}
#hero .card-item{
  background: rgba(187, 186, 186, 0.109);
  backdrop-filter: blur(15px);
  position: relative;
  transition: var(--transition);
}
#hero .card-item.border-danger:hover{
  background: rgba(227, 100, 100, 0.346);
}
#hero .card-item.border-success:hover{
  background: rgba(100, 227, 168, 0.346);
}
.hero-title{
  font-size: 3.5rem;
  line-height: 3.5rem;
  font-weight: 600;
  width: 60%;
  font-family: "Montserrat", sans-serif;
}
span.problem, span.solution{
  position: absolute;
  height: 1px;
  width: 20%;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
}
span.problem{
  background-color: rgb(241, 68, 68);
}
.scollDown{
  animation: scollDown linear .5s infinite alternate;
}
@keyframes scollDown {
  0%{
    transform: translateY(-5px);
  }
  0%{
    transform: translateY(5px);
  }
}
/* STEPS */
span.bigLetter{
  position: absolute;
  font-size: 15rem;
  z-index: -1;
  opacity: .1;
  top: -50%;
}
#why_us .info{
  max-width: 800px;
}

/* Benefits */
#benefits .benefit{
  padding: 1.5rem 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 0 auto;
  height: 100%;
  position: relative;
}
#benefits .benefit span.number{
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
}
#benefits .benefit:hover span.number{
  transform: translateX(-50%) scale(1.1);
}
#benefits .benefit img{
  transition: var(--transition);
}
#benefits .benefit:hover img{
  transform: scaleX(-1);
}



/* Testimonials */
#testimonials .item{
  border: 1px solid transparent;
  transition: var(--transition);
}
#testimonials .item:hover{
  border: 1px solid var(--primary);
}
/* Owl Caousel Customization */
.owl-carousel .owl-stage{
  display: flex;
}
.item {
    display: flex;
    flex: 1 0 auto;
    height: 100%;
}
.owl-theme .owl-nav {
  display: none;
}


/* How it Works */
#how_it_work .item-card{
  flex: 1 0 auto;
  height: 100%;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
#how_it_work .item-card:hover{
 background: var(--primary);
}
#how_it_work .item-card:hover img{ 
  transform: translateY(-10rem);
}
#how_it_work .item-card:hover h3.headline{ 
  transform: translateY(-2rem);
  color: var(--white);
}
#how_it_work .item-card:hover p.info{ 
  transform: translateY(-2rem);
  font-size: 1rem !important;
  color: var(--white);
}
#how_it_work .item-card span.step{ 
  position: absolute;
  left: 15px;
  top: 15px;
  background-color: #5dd96a;
  font-weight: 600;
}


/* What You'll Get */
#features span.number{
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
}
#features li:hover span.number{
  transform:translateY(-50%) scale(1.1);
}
#features ul li{
  transition: var(--transition);
}
#features ul li:hover{
  background: var(--primary) !important;
  color: var(--white);
}
#features ul li strong{
  transition: var(--transition);
}
#features ul li:hover strong{
  color: var(--white);
}

/*================================================
Utilities
=================================================*/
span.number{
  height: 2.5rem;
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  border-radius: 50%;
  border: 3px solid var(--white);
  font-weight: 700;
  font-size: 1.5rem;
  background: var(--primary);
  position: absolute;
  transition: var(--transition);
}
.btn-primary{
  padding: .5rem 1.5rem;
  border-radius: 50px;
  font-weight: 600;
  color: var(--white);
  background: var(--primary);
  transition: var(--transition);
}
.btn-primary:hover{
  color:var(--white) !important;
  background:var(--primary-hover) !important;
}
.linear-text{
  font-weight: bold;
    background: -webkit-linear-gradient(#058aff, #13c0ff);
    -webkit-background-clip: text;
   color: transparent;
}
.text-primary{
  color: var(--primary) !important;
}
.title-color{
  color: var(--title-color);
}
.text-color{
  color: var(--text);
}
.bg-color{
  background-color: var(--bg-color);
}
.bg-primary{
  background-color: var(--primary) !important;
}
.bg-linear-primary{
  background: var(--linear-primary);
}
.fw-500{
  font-weight: 500;
}
.line-h4{
  line-height: 1.4;
}
.vh-75{
  height: 75vh !important;
}
.vh-100{
  height: 100vh !important;
}
.fs-point9{
  font-size: .9rem !important;
}
.fs-point8{
  font-size: .8rem !important;
}
.fs-point7{
  font-size: .7rem !important;
}
.object-cover{
  object-fit: cover !important;
}
.custom-shadow-sm{
  box-shadow: var(--shadow);
}
.custom-shadow-lg{
  box-shadow: var(--shadow-lg);
}
.transition{
  transition: var(--transition);
}
.mt-7{
  margin-top: 3rem;
}