@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rozha+One&display=swap');
:root{

    --primary:#f9a11b;
    --text:#161616;
    --muted:#666;
    --border:#ececec;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'Outfit', sans-serif;
}
*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    width:100%;
    overflow:hidden;
}

body{
    font-family:Inter,sans-serif;
    background-color:#f2f2f2;
    color:var(--text);
    max-height:100vh;
    display:flex;
    flex-direction:column;

}
.google-play-btn{
    margin-left:-8px;
}

.hero{
    /*flex:1;*/
    display:flex;
    align-items:center;
    padding:0px 0;
    background-color:#f2f2f2;
    height: calc(100vh - 100px) !important;
}

.hero-wrap{
    display:grid;
    grid-template-columns:1fr 520px;
    gap:70px;
    /*align-items:center;*/
}

.container{
    width: min(1320px,98%);
    margin:auto;
}

.logo{
    margin-top:20px;
}
.logo img{

    height:22px;

    margin-bottom:35px;

}

.hero h1{

    font-size:3rem;
    margin-top:30px;
    margin-bottom:18px;

}

.hero h2{

    font-size:1.4rem;

    margin-bottom:20px;

}

.hero p{

    margin-bottom:12px;

    line-height:1.7;

}

.store-buttons{

    margin-bottom:5px;
    display: flex;
  align-items: center;

}

.mobile-web{

    margin-bottom:15px;

}

.accent{

    color:var(--primary);

}

.store-buttons img{

    height:58px;
    transition:.3s;

}

.store-buttons img:hover, .mobile-web:hover{

    transform:translateY(-3px);

}

.mobile-web{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 7px 28px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 400;
  margin-bottom: 3px;
  transition: .3s;
  width: max-content;
  display: flex;
  align-items: center;
  /*justify-content: center;*/
  background: #15141a;
  color: #fff;
  margin-left: 10px;

}

/*.mobile-web:hover{*/

/*    background:var(--primary);*/
/*    color:#fff;*/

/*}*/

.hero small{

    display:block;
    color:#666;
    font-size:.95rem;

}

.hero-right{
    display:flex;
    justify-content:center;
    align-items:center;
}

.phone{

    width:100%;

    height:640px;

    /*background:#111;*/

    border-radius:42px;

    padding:14px;

    /*box-shadow:0 40px 80px rgba(0,0,0,.18);*/

    position:relative;

}

/*.phone::before{*/

/*    content:"";*/

/*    position:absolute;*/

/*    top:10px;*/

/*    left:50%;*/

/*    transform:translateX(-50%);*/

/*    width:110px;*/

/*    height:22px;*/

/*    background:#222;*/

/*    border-radius:20px;*/

/*    z-index:10;*/

/*}*/

.phone-screen{

    width:100%;

    height:100%;

    overflow:hidden;

    border-radius:32px;

    position:relative;

    /*background:#eee;*/

}

.slide{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:0;

    transition:opacity .7s;

}

.slide.active{

    opacity:1;

}

/*==========================
FOOTER
==========================*/

.footer{

    padding:50px 0;

    border-top:1px solid #ededed;

    background:#f2f2f2;
    max-height: 100px;
}

.footer .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

}

.footer-links{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

.footer-links span{

    color:#cfcfcf;

}

.footer-links a{

    text-decoration:none;

    color:#888;

    font-weight:500;

    transition:.25s;

}

.footer-links a:hover{

    color:#f9a11b;

}

.footer p{

    color:#888;

    font-size:.95rem;

}

@media(max-width:991px){

.hero-wrap{

    grid-template-columns:1fr;
    text-align:center;

}

.logo{

    display:flex;
    justify-content:center;

}

.hero h1{

    font-size:4rem;

}

.hero h2{

    font-size:2rem;

}

.hero p{

    margin-inline:auto;

}

.store-buttons{

    justify-content:center;

}

.hero-right{

    margin-top:50px;

}

}