/*--------------------------------------------------------------
# Global styles
--------------------------------------------------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {

    /* Fonts */
    --font-primary: "Nunito", sans-serif;

    /* Color themes */
    --Primary-color: #A3C448;
    --Secondary-color: #66676C;
    --Teritary-color: #B1B1B1;
    --Orange-color:  #EBB143;

    /* Background colors */
    --Background-white: #fff;
    --Background-light-grey: #f7f7f7;

    /* Text colors */
    --Text-white: #fff;
    --Text-black: #000000;
    --Text-grey: #616161;
}

/* Smooth scroll behavior */
:root {
    scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
    background-color: var(--Background-white);
}

a {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
}

p {
    font-family: var(--font-primary);
    color: var(--Text-black);
}

/*--------------------------------------------------------------
# Sections & Section Header
--------------------------------------------------------------*/
section {
    overflow: hidden;
    padding: 44px 0px;
    scroll-margin-top: 90px;
    overflow: clip;
}


/*--------------------------------------------------------------
# banner-wrapper
--------------------------------------------------------------*/
.banner-wrapper {
    margin-top: 88px;
    display: flex;
    align-items: center;
    padding: 44px 0px;
}
.banner-wrapper .row{
    align-items: center;
}
.banner-wrapper .banner-contents .banner-heading h1 {
    color: var(--Text-black);
    font-family: var(--font-primary);
    font-size: 30px;
    font-weight: 700;
}

.banner-wrapper .banner-contents .banner-heading h1 span {
    color: var(--Orange-color);
}

.banner-wrapper .banner-contents .banner-para p {
    color: var(--Text-grey);
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 400;
}

.banner-wrapper .banner-image {
    height: 300px;
    width: 100%;
}

.banner-wrapper .banner-image img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
}

/*--------------------------------------------------------------
# About-us 
--------------------------------------------------------------*/
.about-us {
    background-color: var(--Background-light-grey);
}

.about-us .about-us-heading h2 {
    font-size: 30px;
    font-weight: 700;
    font-family: var(--font-primary);
    color: var(--Text-black);
}

.about-us .about-us-heading span {
    color: var(--Orange-color);
}

.about-us .about-us-para p {
    color: var(--Text-grey);
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 400;
}

.about-us .banner-image {
    height: 300px;
    width: 100%;
}

.about-us .banner-image img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
}

.about-us .row {
    align-items: center;
}

/*--------------------------------------------------------------
# key-features
--------------------------------------------------------------*/
.key-features {
    background-color: var(--Background-white);
}

.key-features .sec-heading h2 {
    font-size: 30px;
    font-weight: 700;
    font-family: var(--font-primary);
    color: var(--Text-black);
}

.key-features .sec-heading h2 span {
    color: var(--Orange-color);
}

.key-features .card .card-heading h2 {
    font-size: 18px;
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--Text-black);
    text-align: center;
}

.key-features .card .card-content p {
    color: var(--Text-grey);
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
    text-align: center;
}

.key-features .card {
    padding: 20px 12px;
    display: flex;
    align-items: center;
    justify-content: start;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    min-height: 290px;
    height: 100%;

}

.key-features .card .card-icon {
    height: 75px;
    width: 75px;
    background-color: var(--Orange-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.key-features .card .card-icon i {
    font-size: 25px;
    color: var(--Text-white);
}


/*--------------------------------------------------------------
# Accountability-Features
--------------------------------------------------------------*/
.Accountability-Features {
    background-color: var(--Background-light-grey);
}

.Accountability-Features .Accountability-Features-heading h2 {
    font-size: 20px;
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--Text-black);
}

.Accountability-Features .Accountability-Features-para p {
    color: var(--Text-grey);
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}

.Accountability-Features .sec-heading h2 {
    font-size: 30px;
    font-weight: 700;
    font-family: var(--font-primary);
    color: var(--Text-black);
}

.Accountability-Features .sec-heading h2 span {
    color: var(--Primary-color);
}

.Accountability-Features .Accountability-Features-heading h2 span {
    color: var(--Primary-color);
}

/*--------------------------------------------------------------
# Hb-content-cards
--------------------------------------------------------------*/

.Hb-content-cards {
    background-color: var(--Background-white);
}

.Hb-content-cards .row {
    justify-content: center;
}

.Hb-content-cards .card {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    min-height: 245px;
    height: 100%;
}

.Hb-content-cards .Hb-content-heading {
    padding: 10px 15px;
    background-color: var(--Secondary-color);
}

.Hb-content-cards .card-contents {
    padding: 20px 15px;
}

.Hb-content-cards .Hb-content-heading h2 {
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-primary);
    color: var(--Text-white);
    margin-bottom: 0;
}

.Hb-content-cards .Hb-content-sub-heading h3 {
    font-size: 20px;
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--Primary-color)
}

.Hb-content-cards .Hb-content-sub-heading h3 span {
    color: var(--Primary-color)
}

.Hb-content-cards .Hb-content-para p {
    color: var(--Text-grey);
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}


/*--------------------------------------------------------------
# Scroll top button
--------------------------------------------------------------*/
.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 100px;
    z-index: 99999;
    background-color: var(--Orange-color);
    width: 44px;
    height: 44px;
    border-radius: 50px;
    transition: all 0.4s;
  }
  
  .scroll-top i {
    font-size: 20px;
    color: #fff;
    line-height: 0;
  }
  
  .scroll-top:hover {
    background: var(--Orange-color);
    color: var(--Background-white);
    text-decoration: none;
  }
  
  .scroll-top.active {
    visibility: visible;
    opacity: 1;
  }
  
  /*--------------------------------------------------------------
  # download-stores
  --------------------------------------------------------------*/
  .download-stores {
    padding: 30px 0px;
    background-color: #f7f8fa;
  }
  
  .download-stores .download-store-heading h2 {
    font-size: 20px;
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--Text-black);
    margin-bottom: 0;
  }
  
  .download-stores .app-icon-links a {
    text-decoration: none;
    margin: 0px 10px;
  }
  .download-stores .app-icon-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  .download-stores .icon-width {
    height: 50px;
    width: auto;
  }
  .download-stores .icon-width img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
  

  .header-wrapper .login-button a {
    background-color: var(--Primary-color);
    color: var(--Text-white);
    font-size: 16px;
    font-family: var(--font-primary);
    font-weight: 400;
    padding: 8px 30px;
    border-radius: 50px;
    transition: all 0.3s ease 0s;
    text-decoration: none;
  }
  /*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/
.footer {
    background-color: var(--Primary-color);
    padding: 30px 0px;
}

.footer .footer-copyrights p {
    color: var(--Text-white);
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}

.footer  .footer-contents {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer .footer-icons i{
    font-size: 18px;
    color: var(--Text-white);
}
/* Responsive styles */
@media(max-width:767px) {
    .key-features .card {
        justify-content: center;
    }
}
@media(max-width:400px){
    .download-stores .icon-width {
        margin-bottom: 15px;
    }
    .footer-icons {
        margin-top: 15px;
    }
}