*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    font-family: poppins, sans-serif;
    
    
}

html{
   scroll-behavior: smooth;
}

main{
    width: 100%;
    height: 100vh;
}

p{
  font-weight: 200;
  font-size: 1.1rem; 
}


.header-container{
    display: flex;
    max-width: 1400px;
    margin: auto;
    background: #fff;
    padding: 0 8%;
    padding-bottom: 2rem;
    align-items: center;
    justify-content: center;
    
}

.header{
   width: 90%;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 8rem;
   align-items: center;
   justify-items: start;
}

.nav-container{
   display: grid;
   max-width: 1400px;
   margin: auto;
   background-color: #f5f5f5;
   padding-bottom: 0.5rem;
}

nav{
    max-height: 4rem;
    width: 100%;
    padding: 0 8%;
    z-index: 100;
    display: flex;
    justify-content: space-between;
}


.nav-logo{
   padding-left: 60px;
   padding-top: 10px;
   padding-right: 5rem;
}
.nav-logo img{
   max-height: 3rem;
}

.nav-links{
    float: right;
    margin-right: 1.2rem;
 }

 .nav-links li{
    display: inline-block;
    line-height: 80px;
    margin: 0 0.5rem;
 }

 .nav-links a{
    color: #063941;
    font-size: 1rem;
    text-transform: uppercase;
    padding: 0.5rem 0.8rem;
    border-radius: 3px;
 }

 nav .nav-links a:active{
    background: #F9AB10;
    transition: .5s;
 }

 nav .nav-links a:hover{
   background: #F9AB10;
   transition: .5s;
 }

 .checkbtn{
    font-size: 30px;
    color: #063941;
    float: right;
    line-height: 80px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
 }

 #check{
    display: none;
 }


 .textbox{
    max-width: 30rem;
    display: flex;
    flex-direction: column;
    justify-items: start;
 }

 .header__title{
    font-size: 1.5rem;
    font-weight: 500;
    color: #063941;
    margin-bottom: 1rem;

 }

 .header__text{
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: #657575;
 }

 .header__btn{
    display: inline-block;
    padding: 0.6rem 1.2rem;
    text-decoration: none;
    margin-right: 20px;
    border-radius: 6px;
    background-color: #063941;
    font-size: 1.1rem;
    border: none;
 }
 
 .header__btn a{
    color: #fff;
 }

 .textbox a{
    display: inline-block;
    font-size: 1.1rem;
    text-decoration: none;
    font-weight: 500;
 }

 .header__pic{
   display: flex; 
   justify-content: right;
   align-items: center;
   max-width: 28rem;
   margin-top: 2rem;
 }

 .header__pic img{
    display: block;
    max-width: 100%;
 }


 .pillars{
   background-color: #f5f5f5;
   max-width: 1400px;
   margin: auto;
 }


 .pillars__container{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 8%;
 }

 .box{
    width: 25%;
    padding: 1rem;
    min-height:200px;
 }

 .box-1,
 .box-2,
 .box-3{
    align-items: center;
    justify-content: center;
    text-align: center;
 }

 .pbox_content{
    display: block;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
 }

 .pbox_content img{
    width: 73px;
    padding-bottom: 15px;
 }

 .pbox_content h3{
    padding-bottom: 10px;
 }

 .pbox_content p{
    color: #657575;
    font-size: 1.1rem;
 }

 .showcase-container{
   max-width: 1400px;
   margin: auto;
 }

 .showcase-titles{
    width: 100%;
    padding: 2rem 0;
    text-align: center;
    display: inline-block;
    background-color: #f5f5f5;
 }

 .small-title h3{
    font-size: 1rem;
    padding-bottom: 1rem;
    font-weight: 500;
    color: #07C5B5;
 }

 .large-title h2{
    font-size: 1.5rem;
    padding-bottom: 1rem;
    font-weight: 500;
    color: #063941;
 }

 .title-content p{
    font-size: 1.1rem;
    padding-bottom: 2rem;
    color: #657575;
 }

 
 .screens-container{
   padding: 0 12%;
   margin-left: auto;
   margin-right: auto;
   display: flex;
   align-items: center;
   justify-content: space-around;
   background-color: #f5f5f5;
 }

 .screens-container .owl-carousel .owl-item img{
   max-width: 220px;
   max-height: 444px;
 }

 .screens-container .owl-item.active .screens{
   transform: scale(0.8);
 }

 .screens-container .owl-item.active.center .screens{
   transform: scale(1);
 }

 .screens{
   
   display: flex;
   align-items: center;
   justify-content: space-around;
   flex-direction: column;
   text-align: center;
   
 }

 .screens img{
   width: 100%;
   padding-bottom: 20px;
 }

 .screens h3{
   font-size: 1rem;
   font-weight: 500;
   color: #07C5B5;
 }

 .screens p{
   max-width: 200px;
   margin: 10px 0;
   font-size: 15px;
   padding-bottom: 20px;
 }



 .owl-Carousel{
    position: absolute;
    width: 100%;
    padding: 0 8%;
    
 }

 .downloads-container{
   max-width: 1400px;
   margin: auto;
 }

 .download-tabs{
    width: 100%;
    max-height: 230px;
    background-color: #063941;
    margin-left: auto;
    margin-right: auto;
 }
 .download-title h2{
    font-size: 1.3rem;
    padding: 1.3rem 0;
    font-weight: 500;
    color: #F9AB10;
    text-align: center;
 }

 .download-content p{
    align-items: center;
    text-align: center;
    font-size: 1.1rem;
    color: #fff;
    padding-bottom: 1.5rem;
 }

 .download-tabs .buttons{
    display: inline-block;
    text-decoration: none;
    margin-right: 20px;
    border-radius: 6px;
    background-color: #F9AB10;
    font-size: 1.1rem;
 }

 .why-us-container{
   max-width: 1400px;
   margin: auto;
   background-color: #f5f5f5;
 }

 .why-us, .why-us-2{
    display: flex;
    width: 90%;
    padding-bottom: 3rem;
    justify-content: center;
    align-items: flex-start;
    gap: 5rem;
    margin: auto;
    
 }


 .testimonials__pic {
    max-width: 21rem;
    
 }

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

 .testimonials p{
    max-width: 21rem;
    font-size: 1.1rem;
    color: #657575;
    text-align: justify;
    
 }

 .testimonials-p2{
    color: #657575;
    text-align: justify;
 }

 .testimonials-p2 p{
   max-width: 21rem;
   font-size: 1.1rem;
   margin-left: auto;
 }

 .merchant-container{
    background-color: #F9AB10;
    max-width: 1400px;
    margin: auto;
    max-height: 12rem;
 }
.merchant-container .btn button{
   background-color: #063941;
   color: #fff;
}

 .merchant-title h2{
    text-align: center;
    padding-top: 1rem;
 }
 .merchant-content h3{
    text-align: center;
    margin: 1.3rem;
    font-size: 1.2rem;
    font-weight: 500;
 }
 
 .btn{
    text-align: center;
    padding-bottom: 1.2rem;
 }
 
 .btn button{
    
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 6px;
    background-color: #F9AB10;
    font-size: 1.1rem;
    color: #063941;
    border: none;
    cursor: pointer;
 }

 .partners-container{
   background-color: #f5f5f5;
   max-width: 1400px;
   margin: auto;
 }

 .our-partners{
    align-items: center;
    justify-content: center;
 }


 .partner-call{
    font-size: 1.1rem;
    padding-bottom: 1.2rem;
    font-weight: 500;
    color: #07C5B5;
    text-align: center;
    padding-top: 2.5rem;
 }

footer{
   max-width: 1400px;
   margin: auto;
}

 footer .container{
    background-color: #063941;
    border-radius: 50px 50px 0 0;
 }

 .footer-logo{
   display: inline-block;
   padding: 0 100px;
 }

 .footer-logo img{
   max-height: 120px;
 }

 .row-f{
    display: flex;
    flex-wrap: wrap;
    padding: 40px 100px;
    color: #fff;
    justify-content: space-around;
 }


 .footer-col{
   max-width: 20%;
   margin: 0.5rem;
 }

 .footer-col ul{
    list-style: none;
    display: block;
 }

 .footer-col h4{
    color: #fff;
    margin-bottom: 25px;
    font-size: 1.3rem;
    position: relative;
 }

 .footer-col h4::before{
    content: '';
    width: 70px;
    height: 2px;
    position: absolute;
    background-color: #F9AB10;
    margin-top: 30px;
 }

 .footer-col ul li:not(:last-child){
	margin-bottom: 10px;
 }

 .footer-col ul li a{
	font-size: 1rem;
	text-transform: capitalize;
	color: #ffffff;
	text-decoration: none;
	font-weight: 300;
	display: block;
	transition: all 0.3s ease;
 }

 .footer-col ul li a:hover{
	color: #ffffff;
	padding-left: 8px;
 }

 

 .footer-col input{
    border: none;
    width: 200px;
    height: 45px;
    display: block;
    padding-left: 20px;
    margin: 14px 0;
    border-radius: 6px;
 }

 .footer-col form .inputsubmit{
    padding: 0px 20px;
    background-color: #F9AB10;
    border: none;
    color: #fff;
    
 }

 .footer-col p{
   max-width: 250px;
 }

 .contact-form input{
   border: none;
   width: 200px;
   height: 45px;
   display: block;
   padding: 20px;
   margin: 14px 0;
   border-radius: 6px;
}

.contact-form form .inputsubmit{
   padding: 0px 20px;
   background-color: #F9AB10;
   border: none;
   color: #657575;
}





/** Media Querries Begin Here**/





 
 
 @media (max-width: 1100px){

   .header__title{
      font-size: 1.2rem;
   }

   .nav-links a{
      padding: 0.5rem;
   }

   .nav-logo{
      padding-left: 40px;
      padding-right: 2rem;
   }

   

 }


 @media (max-width: 880px){

   .checkbtn{
      display: block;
  }

  nav ul{
      position: fixed;
      width: 80%;
      min-height: 50vh;
      background: #063941;
      top: 80px;
      text-align: center;
      transition: all 0.5s;
      align-items: center;
      justify-content: center;
      left: -100%;
      transition: all 0.5s;
  }
  .nav-links li{
      display: block;
      margin: 10px 0;
      line-height: 1.7rem;
  }
  .nav-links a{
      font-size: 1.2rem;
      color: #fff;
  }
  
  #check:checked ~ .nav-links{
       left: 10%;
  }

   
   
   .header{
      grid-gap: 4rem;
   }
   .footer-col ul li a{
      font-size: 0.8rem;
   }
   .footer-col p{
      font-size: 0.9rem;
   }

   .footer-col h4{
      font-size: 1.2rem;
   }

   .footer-col input{
      width: 150px;
      height: 30px;
      font-size: 0.8rem;
   }

   .row-f{
      padding: 20px 80px;
   }

   .footer-logo img{
      max-height: 80px;
   }

   .box{
      padding: 0.5rem;
   }

   .pillars__container{
      padding: 15px 6%;
   }

 }

 @media (max-width: 786px){
   .header{
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      gap: 1rem;
      text-align: center;
   }

   .pillars__container{
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
   }

   .box{
      min-width: 250px;
   }

   .showcase-titles{
      padding:0 30px;
   }

   .large-title h2{
      font-size: 1.2rem;
   }

   .download-title h2{
      font-size: 1.1rem;
   }

   .download-content p{
      font-size: 1rem;
      padding-bottom: 0.8rem;
   }

   .download-tabs{
      padding: 0 30px;
   }

   .why-us-container{
      padding-top: 20px;
   }

   .why-us{
      display: flex;
      flex-direction: column-reverse;
      gap: 1rem;
      align-items: center;
      text-align: center;
   }

   .why-us-2{
      display: flex;
      flex-direction: column;
      gap: 1rem;
      align-items: center;
      text-align: center;
   }

   .testimonials-p2 h1{
      text-align: center;
   }

   .merchant-container{
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   .partners-container{
      padding-top: 20px;
   }

   .partners-container .large-title h2{
      font-size: 1.1rem;
   }

   .row-f{
      display: flex;
      flex-direction: column;
   }

   .footer-col{
      min-width: 250px;
   }
 }