:root{
    --black-color:#333;
    --main-color:#A5C0F3;
    --white-color:#fff;
    --text-color:#10101080;
    --gray-color:#5D6166
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,li{
    padding: 0;
}
body{
    font-family: "Open Sans",sans-serif;
    color: var(--black-color);
}
/* -------------header ----------------------*/

.header{
    background-image: linear-gradient(172.71deg,rgba(21, 175, 199, 1),
     rgba(11, 32, 66, 1),rgb(79 1 88));
    background-repeat:no-repeat;
    background-size:cover;
    background-position:top center;
    font-family: "inter";
    font-weight: 600;
    position: relative;
    height: calc(100vh - 90px);
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.navbar-light .navbar-toggler:hover{
    color: var(--white-color);
}
.navbar-light .navbar-toggler:focus{
    color: transparent;
}
.navbar-light .navbar-toggler:hover .icon{
    color: var(--white-color);
}
.navbar-light .icon{
    color: var(--main-color);
    font-size: 2rem;
}

.navbar-light .navbar-nav .nav-link{
    color: var(--main-color);  
}
.navbar-light .navbar-nav .nav-item{
    margin-left: 1rem;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link.active{
    color: var(--white-color);
}
.navbar-brand .logo_img{
    height: 4rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

.header_content{
    padding-left: 2rem;
    transition: all .5s;
}
.header_content .header_text{
    text-align: left;
}
.header_content .header_text .header_title{
    font-weight: 600;
    font-size: 3rem;
    color: var(--white-color);
	margin-top: 6.9rem;

}
@media screen and (max-width:992px){
    .header_content.active{
        opacity: 0;
    }
    .header_content .header_text .header_title{
        font-size: 2rem;
        margin-top: 1rem;
    }
}
@media screen and (max-width:992px){
    .navbar-collapse{
        margin-top: 1rem;
        text-align: center;
        z-index: 99999;
    }
    .navbar-light .navbar-nav .nav-item{
        margin-bottom: 1rem;
    }
}
.header_content .header_text .header_para{
    color: var(--main-color);
    font-size: .9rem;
    width: 70%;
    line-height: 1.3;
}
.header_content .header_text .header_store{
    margin-top: 2rem;
    display: flex;
    width: 50%;
}
.header_content .header_text .header_store img{
    width: 100%;
}
.header_content .header_text .header_store .store:not(:last-child){
    margin-right: 1rem;
}
.header_content .header_img .cards{
    width: 100%;
    transform: translateY(-80px);
}
/* -------------footer------------------- */
.footer{
    font-family: "inter";
    text-transform: capitalize;
    padding: 2rem;
    background-color:#EDF5FF;
}
.footer .footer_text{
    margin-bottom: 1rem;
}
.footer .footer_text .footer_header{
    font-size: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
}
.footer .footer_text .footer_nav{
    list-style: none;
    padding: 0;
}
.footer .footer_text .footer_nav li{
    margin-bottom: .2rem;
}
.footer .footer_text .footer_nav li a{
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    font-size: 0.9rem;
}
.footer_copyright{
    color: var(--main-color);
    font-family: 'Montserrat', sans-serif;
    border-top: 1px solid var(--main-color);
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.footer_copyright .footer_copyright_para{
    font-size: .9rem;
    color: var(--text-color);
}
@media screen and (max-width:576px){
.footer_copyright .footer_copyright_para{
        font-size: .7rem;
    }
  }
.footer_copyright_icons a{
    margin-right: .5rem;
}
.footer_copyright_icons img{
    height: 1rem;
}
/* framework */
main{
    background-color: #f5f1ff;
  }
.section-padding{
    padding: 3rem 0;
  }
  .section_header{
    text-transform: capitalize;
    font-size: 3rem;
    color: black;
    text-align: center;
    margin-bottom: 3rem;
  }
  .apx_link{
    background-image: linear-gradient(to right,#f52f2d,#ff9e21);
    color: #fff;
    -webkit-box-shadow: 0 0 15px hsla(0,0%,100%,.8);
    box-shadow: 0 0 15px hsla(0,0%,100%,.8);
    cursor: pointer;
    font-weight: 700;
    border: 1px solid #fff;
    padding: 10px;
    margin-top: 1.5rem;
    display: inline-block;
    text-decoration: none;
    font-size: 14px;
    width: fit-content;
    transition: all .2s;
  }
  .apx_link:hover{
    transform: translateY(-3px);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
    color: var(--white-color);
  }
  
  
  /* framework */