:root {
  --primary-color: #5EC698;
  --white-color: #ffffff;
  --black-color: #000000;
  --dark-bg: #2C2C2C;

}

body {
   font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;

  background-color: var(--dark-bg);
}
h1{
  font-size: 4rem;
  line-height: 4rem;
  font-weight: 700;
}

.header-section{
  background-image: url('../images/header-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  
}

.header-section h1{
  text-transform: uppercase;
  padding-left: 40px;
  padding-right: 70px;
  background: linear-gradient(to bottom, #ffffff, #5EC698);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.primary-btn{
  background-color: var(--black-color);
  color: var(--white-color);
  padding: 10px 32px;
  border-radius: 99px;
  text-decoration: none;
  font-weight: 500;
  gap: 10px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}

.primary-btn:hover{
  opacity: 0.8;
}

.banner-btn {
    position: relative;
    top: -130px;
    text-align: center;
}

.secondary-btn {
  background-color: var(--white-color);
  color: var(--black-color);
  padding: 10px 20px;
  border-radius: 99px;
  text-decoration: none;
  font-weight: 500;
  gap: 10px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}

.large-btn{
  height: 58px;
  display: flex;
  align-items: center;
  justify-self: center;
  padding-left: 32px;
  padding-right: 32px;
}

.banner-overlay{
  position: absolute;
  top: 25%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.banner-overlay a{  
  margin: 0 auto;
  max-width: max-content;
}

.header-section .menu ul {
      display: flex;
      list-style: none;
}

.header-section ul{
  margin-bottom: 0 !important;
}

.primary-btn a{
  color: var(--white-color);
  text-decoration: none;
  position: relative;
}

.primary-btn.with-icon a{
      padding-left: 24px;
}

.primary-btn.with-icon a::before{
      width: 24px;
      height: 24px;
      content: '';
      background-image: url('../images/apple.svg');
      background-repeat: no-repeat;
      position: absolute;
      left: -6px;
      top:0px;
}

.how-it-works{
  background-color: var(--dark-bg);
}

.how-it-works .card{
  width: 300px;
}

.how-it-works .card h5{
  text-align: center;
  font-size: 1.25rem;
}

.how-it-works  .card-wrap{
  height: 100%;
}
.how-it-works  .card-wrap .card{
  height: 100%;
  border: 4px solid var(--primary-color);
}
h2{
  font-size: 3.75rem;
  color: var(--primary-color);
  font-weight: 400;
}
h4{
  color: var(--white-color);
  font-size: 2rem;
}

.how-it-works .card h4{
  color: var(--black-color);
  font-size: 1rem;
  text-align: center;
  font-weight: 700;
}
.scenario{
background: rgba(94, 198, 152, 3.1);
background: radial-gradient(circle,rgba(94, 198, 152, 0.4) 0%, rgba(46, 96, 74, 0.4) 100%);
}
.scenario h4{
  font-size:1.25rem;
  font-weight: normal;
}

.scenario h3{
  font-size: 3rem;
}

.arrow-sec{
  position: absolute;
   left: 96%;
}

.scenario .content-col{
  height: 100%;
}

.scenario .content-col .content-sec{
  background-color: var(--primary-color);
  height: 100%;
  border-radius: 8px;
  color: var(--white-color);
  align-items: flex-start;
  justify-content: center;
  display: flex;
  padding: 32px;
  flex-direction: column;
}

.seondary-btn{
  background-color: var(--white-color);
  text-decoration: none;
  padding-left: 32px;
  padding-right: 32px;
  height: 50px;
  color: var(--black-color);
  border-radius: 24px;
  font-weight: 700;
  max-width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-sec {
    height: 500px;
}

.mobile-sec img {
  height: 100%;
}
footer{
  background-color: var(--dark-bg);
}
.footer-logo{
  height: 36px;
}
.footer-logo img{
  height: 100%;
  width: auto;
}

p{
  font-size: 14px;
}
.site-footer p{
  margin-bottom: 0;
  
}
main{
  background-color: var(--black-color);
}
.about-sendme {
  background-color: var(--dark-bg);
}

.about-sendme h2{
  color: var(--white-color);
}

.scenario .row .row{
  margin-left: -15px;
  margin-right: -15px;
}
@media(min-width:1400px){
  h1{
  font-size: 4.8rem;
  line-height:5rem;
}
}
@media(min-width:1500px){
  p{
  font-size: 1rem;
}

.scenario h3{
  font-size: 3.5rem;
}

.header-section{
  background-position: 0 -90px;
}

} 

@media(min-width:1700px){
  .header-section{
  background-position: 0 -170px;
}
}

@media(max-width:1200px){
    .arrow-sec{
    display: none;
  }
  .how-it-works .title-sec +   .row > div > div {
    height: 100% !important;
  }

    .how-it-works .title-sec +   .row > div > div .card{
      height: 100%;
    }
    h1{
      font-size: 3rem;
      line-height: 3rem;
    }

    .scenario h3 {
    font-size: 2rem;
  }
}

@media(max-width:991px){


  .how-it-works .card{
    margin: 0 auto;
  }

  .middle-card{
    margin: 32px 0;
  }

  .header-section{
    overflow: unset;
  }

  .banner-overlay {
    background-color: rgb(0,0,0, 0.5);
    position: relative;
        top: 0;
        left: 12px;
        width: 100%;
        height: 100%;
        z-index: 1;
        padding: 24px;
        text-align: center;
    }

    h2 {
    font-size: 3rem;
  }

.banner-btn {
    position: relative;
    top: 0;
    text-align: center;
}
.about-sendme{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-sendme .seondary-btn{
  margin: 0 auto 24px;
}
  .header-section h1{
    padding: 0;
    font-size: 2rem;
    line-height: 2rem;
  }
   .scenario .img-sec{
    height: 100%;
   }



  .scenario .row .row{
    padding-right: 0;
  }
  .scenario .img-sec{
    padding-right: 0;  
  }

  .scenario .content-col{
    padding-right: 0;
  }
}

@media(max-width:761px){
  .scenario .img-sec{
  height: auto;
}
  .scenario .content-col{
    height: auto;
  }

   .scenario .content-col .content-sec{
    height: auto;
    border-radius: 0 0 8px 8px;
    position: relative;
    top: -12px;
    left: -0.5px;
  }
}


@media(max-width:561px){
  .site-branding{
    max-width: 100px;
  }

  .site-branding img{
    width: 100% !important;
    height: auto;
  }

  .header-section ul{
    padding-left: 0 !important;
  }
h2 {
        font-size: 2.5rem;
    }
 
}