/* ===========================
   GLOBAL
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#2E6B3D;
    color:#fff;
    overflow-x:hidden;
}

/* ===========================
   NAVBAR
=========================== */

.navbar{
    padding:20px 0;
}

.navbar-brand img{
    height:90px;
}

.store-buttons{
    display:flex;
    align-items:center;
    gap:14px;
}

.google-play-link,
.app-store-link{
    display:block;
    line-height:0;
}

.google-play-link img,
.app-store-link img{
    width:180px;
    height:auto;
    display:block;
}

.google-play-link img{
    cursor:pointer;
    transition:transform .25s ease;
}

.google-play-link img:hover{
    transform:translateY(-3px);
}

.app-store-link img{
    cursor:default;
    opacity:.8;
}


/* MOBILE */

@media(max-width:768px){

    .store-buttons{
        gap:8px;
        justify-content:center;
    }

    .google-play-link img,
    .app-store-link img{
        width:150px;
    }

}
/* MOBILE */

@media(max-width:768px){

    .store-buttons{
        gap:8px;
    }

    .google-play-link img{
        width:150px;
    }

    .app-store-coming{
        height:50px;
        padding:0 12px;
    }

}

/* ===========================
   HERO
=========================== */

.hero{

    padding:60px 0 110px;

}

.hero-badge{

    display:inline-block;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.2);
    padding:10px 22px;
    border-radius:40px;
    margin-bottom:25px;
    font-size:15px;

}

.hero h1{

    font-size:64px;
    line-height:1.08;
    font-weight:800;
    margin-bottom:25px;

}

.hero p{

    font-size:20px;
    color:#E7F3E9;
    line-height:1.8;
    max-width:560px;

}

.hero-info{

    display:flex;
    gap:50px;
    margin-top:45px;

}

.hero-info h3{

    font-size:34px;
    font-weight:700;
    color:#F9E652;

}

.hero-info span{

    color:#DDEBDD;
    font-size:15px;

}

.hero-phone{

    width:390px;
    border-radius:35px;
    box-shadow:0 35px 90px rgba(0,0,0,.35);
    animation:float 5s ease-in-out infinite;

}

/* ===========================
   FEATURES
=========================== */

.features{

    background:#fff;
    color:#222;
    padding:90px 0;
    border-radius:60px 60px 0 0;
    margin-top:30px;

}

.feature-card{

    background:#fff;
    border-radius:24px;
    padding:35px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-8px);

}

.feature-card i{

    font-size:46px;
    color:#2E6B3D;

}

.feature-card h4{

    margin-top:20px;
    font-weight:700;

}

.feature-card p{

    margin-top:15px;
    color:#666;
    line-height:1.7;

}

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

footer{

    padding:60px 0;
    text-align:center;
    background:#fff;
    color:#555;

}

.footer-logo{

    height:70px;
    margin-bottom:20px;

}

footer small{

    color:#888;

}

/* ===========================
   ANIMATION
=========================== */

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0px);

    }

}

/* ===========================
   TABLET
=========================== */

@media(max-width:992px){

.hero{

text-align:center;
padding:50px 0;

}

.hero h1{

font-size:46px;

}

.hero p{

margin:auto;

}

.hero-phone{

margin-top:60px;
width:300px;

}

.hero-info{

justify-content:center;

}

.navbar-brand img{

height:70px;

}

}

/* ===========================
   MOBILE
=========================== */

@media(max-width:768px){

.navbar .container{

flex-direction:column;
gap:20px;

}

.store-buttons{

width:100%;
justify-content:center;
flex-wrap:wrap;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:17px;

}

.hero-info{

flex-direction:column;
gap:20px;

}

.hero-phone{

width:250px;

}

.features{

border-radius:35px 35px 0 0;
padding:60px 0;

}

.feature-card{

padding:25px;

}

}
/* ===========================
PHONE MOCKUP
=========================== */

.phone-wrapper{

    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:650px;

}

.circle{

    position:absolute;
    border-radius:50%;
    filter:blur(40px);

}

.circle1{

    width:260px;
    height:260px;
    background:#F9E652;
    opacity:.25;
    top:60px;
    left:40px;

}

.circle2{

    width:220px;
    height:220px;
    background:#ffffff;
    opacity:.08;
    bottom:80px;
    right:20px;

}

.phone{

    width:340px;
    background:#111;
    padding:12px;
    border-radius:45px;
    box-shadow:0 40px 100px rgba(0,0,0,.45);
    position:relative;
    z-index:5;
    animation:float 5s ease-in-out infinite;

}

.phone::before{

    content:'';
    position:absolute;
    width:120px;
    height:28px;
    background:#111;
    left:50%;
    top:8px;
    transform:translateX(-50%);
    border-radius:0 0 20px 20px;

}

.phone img{

    width:100%;
    border-radius:35px;

}

.carousel-inner{

    border-radius:35px;

}
/* SECTION */

.section-tag{

display:inline-block;
padding:10px 20px;
background:#F9E652;
color:#2E6B3D;
font-weight:700;
border-radius:30px;
margin-bottom:20px;

}

.section-title{

font-size:46px;
font-weight:800;
color:#222;

}

.section-subtitle{

color:#777;
font-size:18px;
margin-top:15px;

}

/* FEATURES */

.feature-icon{

font-size:55px;
margin-bottom:20px;

}

/* CATEGORIES */

.categories{

background:#f8f8f8;
padding:100px 0;

}

.category-card{

background:white;
padding:35px;
border-radius:25px;
text-align:center;
font-size:60px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.35s;

}

.category-card:hover{

transform:translateY(-8px);

}

.category-card h5{

margin-top:20px;
font-weight:700;

}