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

@media (max-width: 991px){

    section{

        padding:80px 0;

    }

    .section-header{

        margin-bottom:50px;

        text-align:center;

    }

    .section-title{

        font-size:2.2rem;

        line-height:1.25;

    }

    .section-description{

        font-size:16px;

        max-width:100%;

        padding:0 10px;

    }

}

@media (max-width:576px){

    section{

        padding:70px 0;

    }

    .container{

        padding-left:20px;

        padding-right:20px;

    }

    .section-title{

        font-size:1.9rem;

    }

    .section-description{

        font-size:15px;

        line-height:1.8;

    }

}

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

@media (max-width:991px){

    .pn-navbar{

        top:12px;

        left:12px;

        right:12px;

        width:auto;

        transform:none;

        border-radius:20px;

        padding:10px 0;

    }

    .pn-navbar .container{

        padding-left:18px;

        padding-right:18px;

    }

    .navbar-brand{

    display:flex;

    align-items:center;

    gap:10px;

}

.navbar-brand img{

    width:56px;

    flex-shrink:0;

}


.brand-title{

    font-size:1.6rem !important;

    display:flex;

    align-items:center;

    line-height:1;

    margin:0;

}

.brand-piggy,

.brand-nest{

    font-size:inherit;

}

.navbar-brand > div{

    display:flex;

    align-items:center;

}

.navbar-brand > div > span{

    display:none;

}

    .navbar-brand h4{

        font-size:1.5rem;

    }

    .navbar-brand > div > span{

        display:none;

    }

    .navbar-collapse{

        margin-top:18px;

        padding:20px;

        background:#fff;

        border-radius:18px;

        box-shadow:0 20px 45px rgba(15,23,42,.12);

    }

    .navbar-nav{

        gap:8px;

    }

    .nav-link{

        padding:16px !important;

        border-radius:12px;

        text-align:center;

    }

    .nav-link:hover{

        background:#EFF6FF;

    }

    .nav-buttons{

        margin-top:20px;

    }

}


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

@media (max-width:991px){

    .hero-section{

        min-height:auto;

        padding-top:130px;

        padding-bottom:70px;

        text-align:center;

    }

    .hero-content{

        margin-bottom:50px;

    }

    .hero-title{

        font-size:2.7rem;

        line-height:1.18;

        max-width:100%;

    }

    .hero-description{

        font-size:17px;

        max-width:100%;

        margin:0 auto 35px;

    }

    .hero-buttons{

        justify-content:center;

        margin-bottom:30px;

    }

    .hero-trust{

        justify-content:center;

    }

    .trust-item{

        font-size:14px;

        padding:12px 16px;

    }

}


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

@media (max-width:991px){

    .hero-visual{

        margin-top:30px;

        min-height:500px;

    }

    .hero-phone{

        max-width:340px;

    }

}


/*==================================================
    FLOATING CARDS
==================================================*/

@media (max-width:991px){

    .floating-card{

        min-width:180px;

        padding:14px 16px;

        border-radius:18px;

    }

    .floating-icon{

        width:46px;

        height:46px;

        font-size:22px;

    }

    .floating-card strong{

        font-size:16px;

    }

    .floating-card small{

        font-size:12px;

    }

    .savings-card{

        left:-10px;

        top:30px;

    }

    .trophy-card{

        right:-10px;

        top:180px;

    }

    .goal-card{

        left:10px;

        bottom:20px;

    }

}


/*==================================================
    SMALL PHONES
==================================================*/

@media (max-width:576px){

    .hero-section{

        padding-top:115px;

        padding-bottom:55px;

    }

    .hero-title{

        font-size:2.1rem;

    }

    .hero-description{

        font-size:15px;

    }

    .hero-buttons{

        flex-direction:column;

        gap:14px;

    }

    .hero-buttons a{

        width:100%;

        justify-content:center;

    }

    .hero-trust{

        display:grid;

        grid-template-columns:1fr;

        gap:12px;

    }

    .hero-phone{

        max-width:270px;

    }

    .hero-visual{

        min-height:380px;

    }

    /*
      Instead of squeezing
      the cards, hide them
      on very small devices.
    */

    .floating-card{

        display:none;

    }

    .hero-piggy{

        width:75px;

        right:5px;

        bottom:-5px;

    }

}