@import './base.css';

.saving-wrapper {
  
    background: var(--primary-bg);
    color: white;
    height:900px;
}

@media (min-width:900px) {


    .saving-wrapper {
        display: grid;
        align-items: center;
        justify-items: center;
        grid-template-columns: 78% auto;
        gap: 125px;
       
        background: var(--primary-bg);
        color: white;
    }
    .saving-wrapper-cont .text-content{
        padding-left:50px;
    }
    .saving-wrapper-cont .text-content h1 {
        font-size: 56px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
    }

    .saving-wrapper-cont .text-content p {
        font-size: 20px;
        font-style: normal;
        margin-bottom: 2rem;
        font-weight: 400;
        line-height: 150%;
    }

    .custom-button {
        margin: 0;
    }

}


.make-it-personal-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 900px;
    
    padding: 1rem;
    box-sizing: border-box;
}

.make-it-personal-wrapper-cont {
    display: grid;
    align-items: center;
    justify-items: center;
    grid-template-columns: 50% auto;
    gap: 125px;
}


.make-it-personal-wrapper-cont .text-content h1 {
    font-family: "Aeonik Pro TRIAL";
    font-size: 2.5rem;
    font-style: normal;
    margin-bottom:1rem;
    font-weight: 700;
    line-height: 150%;
}

.make-it-personal-wrapper-cont .text-content p {
    color: #000;
    font-family: "Aeonik Pro TRIAL";
    font-size:  1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}





    .make-it-personal-wrapper-cont .text-content h1 {
        color: #000;
        font-family: "Aeonik Pro TRIAL";
        font-size:  40px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
    }

    .make-it-personal-wrapper-cont .text-content p {
        color: #000;
        font-family: "Aeonik Pro TRIAL";
        font-size:  1.25rem;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }

.img-cont .round-up-cont {
    padding: 12px 24px;
    position:absolute;
    top:55%;
    left:-25%;
    gap: 24px;
    border-radius: 500px;
    background: #FFF;
    box-shadow: 12px 12px 24px 0px rgba(0, 0, 0, 0.12);
   
}

    .img-cont .round-up-cont h4 {
        font-size: 1rem;
       
    }

.img-cont .vecation-cont {
    border-radius: 500px;
    padding: 12px 24px;
    background: #FFF;
    box-shadow: 12px 12px 24px 0px rgba(0, 0, 0, 0.12);
    position: absolute;
    top:25%;
    right:-15%;
}

.img-cont .goal-cont {
    border-radius: 500px;
    padding: 12px 24px;
    background: #FFF;
    box-shadow: 12px 12px 24px 0px rgba(0, 0, 0, 0.12);
    position: absolute;
    bottom: 10%;
    left:-8%;
}

@media (max-width:1200px){
    .make-it-personal-wrapper-cont {
        display: grid;
        align-items: center;
        justify-items: center;
        grid-template-columns: 50% auto;
        gap: 50px;
    }
}

@media (max-width:1000px) {
    .make-it-personal-wrapper-cont {
        display: grid;
        align-items: center;
        justify-items: center;
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .make-it-personal-wrapper-cont .text-content{
        text-align:center;
    }
    .make-it-personal-wrapper-cont .text-content button{
        margin:auto;
    }
}

@media (max-width:600px) {
    .make-it-personal-wrapper-cont {
        display: grid;
        padding:2rem;
        align-items: center;
        justify-items: center;
        grid-template-columns: 1fr;
        gap: 50px;
    }

        .make-it-personal-wrapper-cont .text-content {
            text-align: center;
        }
         .vecation-img {
            width: 300px;
            max-width:100%;
            height: 300px;
        }

        .make-it-personal-wrapper-cont .text-content button {
            margin: auto;
        }
}



.make-it-grow-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 900px;
    max-height:100vh;
    padding: 1rem;
    box-sizing: border-box;
}

.make-it-grow-wrapper-cont {
    display: grid;
    align-items: center;
    max-width:1000px;
    width:100%;
    justify-items: center;
    grid-template-columns: 50% auto;
    gap: 112px;
}

.make-it-grow-wrapper-cont h1 {
    color: #000;
    margin-bottom:1rem;
    font-variant-numeric: lining-nums tabular-nums;
    font-family: "Aeonik Pro TRIAL";
    font-size:  2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
}

    .make-it-grow-wrapper-cont p {
        color:  #000;
        font-family: "Aeonik Pro TRIAL";
        font-size:  1.25rem;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }
    .make-it-grow-wrapper-cont .img-cont img{
        border-radius: 24px;
    }

@media (max-width:1200px) {
    .make-it-grow-wrapper-cont {
        display: grid;
        align-items: center;
        justify-items: center;
        grid-template-columns: 50% auto;
        gap: 50px;
    }
}

@media (max-width:1000px) {
    .make-it-grow-wrapper-cont {
        display: grid;
        align-items: center;
        justify-items: center;
        grid-template-columns: 1fr;
        gap: 50px;
    }

        .make-it-grow-wrapper-cont .text-content {
            text-align: center;
        }

            .make-it-grow-wrapper-cont .text-content button {
                margin: auto;
            }
        .make-it-grow-wrapper-cont .text-content {
            text-align: center;
            order: 2;
        }

        .make-it-grow-wrapper-cont .img-cont {
            order: 1;
        }
}

@media (max-width:600px) {
    .make-it-grow-wrapper-cont {
        display: grid;
        padding: 2rem;
        align-items: center;
        justify-items: center;
        grid-template-columns: 1fr;
        gap: 50px;
    }

       

    .make-it-grow-wrapper-cont .text-content button {
        margin: auto;
    }
        .make-it-grow-wrapper-cont .img-cont img{
            max-width:300px;
            width:100%;
          
        }


}


.access-money-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 900px;
    max-height:100vh;
    padding: 1rem;
    box-sizing: border-box;
}

.access-money-wrapper-cont {
    display: grid;
    align-items: center;
    max-width: 1000px;
    width: 100%;
    justify-items: center;
    grid-template-columns:auto 50% ;
    gap: 112px;
}
    .access-money-wrapper-cont .text-content h1 {
        color: #000;
        font-family: "Aeonik Pro TRIAL";
        margin-bottom:1rem;
        font-size:  2.5rem;
        font-style: normal;
        font-weight: 800;
        line-height: 150%;
    }

    .access-money-wrapper-cont .text-content p {
        color: #000;
        font-family: "Aeonik Pro TRIAL";
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }

    .access-money-wrapper-cont .img-cont .anytime-cont {
        
        padding: 12px 24px;
        position:absolute;
        border-radius: 16px;
        background: #FFF;
        box-shadow: 12px 12px 24px 0px rgba(0, 0, 0, 0.12);
        top:18%;
        right:-8%;
    }

    .access-money-wrapper-cont .img-cont .no-fee-cont {
        padding: 12px 24px;
        position: absolute;
        border-radius: 16px;
        background: #FFF;
        box-shadow: 12px 12px 24px 0px rgba(0, 0, 0, 0.12);
        bottom: 18%;
        left: -20%;
    }

@media (max-width:1200px) {
    .access-money-wrapper-cont {
        display: grid;
        align-items: center;
        justify-items: center;
        grid-template-columns: 50% auto;
        gap: 50px;
    }
}

@media (max-width:1000px) {
    .access-money-wrapper-cont {
        display: grid;
        align-items: center;
        justify-items: center;
        grid-template-columns: 1fr;
        gap: 50px;
    }

        .access-money-wrapper-cont .text-content {
            text-align: center;
        }

            .access-money-wrapper-cont .text-content button {
                margin: auto;
            }
}

@media (max-width:600px) {
    .access-money-wrapper-cont {
        display: grid;
        padding: 2rem;
        align-items: center;
        justify-items: center;
        grid-template-columns: 1fr;
        gap: 50px;
    }

        .access-money-wrapper-cont .text-content {
            text-align: center;
            order: 2;
        }

        .access-money-wrapper-cont .img-cont {
            order: 1;
        }

        .access-money-wrapper-cont .text-content button {
            margin: auto;
        }

        .access-money-wrapper-cont .img-cont .main-img {
            max-width: 300px;
            width: 100%;
          
        }
}



.enable-round-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 900px;
    max-height: 100vh;
    padding: 1rem;
    box-sizing: border-box;
}

.enable-round-wrapper-cont {
    display: grid;
    align-items: center;
    max-width: 1000px;
    width: 100%;
    justify-items: center;
    grid-template-columns: 50% auto;
    gap: 153px;
}

    .enable-round-wrapper-cont .text-content h1 {
        color: #000;
        margin-bottom:1rem;
        font-variant-numeric: lining-nums tabular-nums;
        font-family: "Aeonik Pro TRIAL";
        font-size:  2.5rem;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
    }

    .enable-round-wrapper-cont .text-content p {
        color: #000;
        font-family: "Aeonik Pro TRIAL";
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }

.img-cont .piggy-bank-cont {
    padding: 12px 24px;
    border-radius: 16px;
    position:absolute;
    top:30%;
    left:-25%;
    background: #FFF;
    box-shadow: 12px 12px 24px 0px rgba(0, 0, 0, 0.12);
}

.img-cont .coffee-cont {
  
    
    padding: 10px;
   
    gap: 34px;
    border-radius: 16px;
    position: absolute;
    bottom: 15%;
    left: -10%;
    background: #FFF;
    box-shadow: 12px 12px 24px 0px rgba(0, 0, 0, 0.12);
}

.coffee-cont .bg-blue-price-custom {
    padding: 10px;
    margin-left:10px;
    color:white;
    border-radius: 50px;
    background: #6935D3;
}
    .coffee-cont span{
     color: #000;

    font-variant-numeric: lining-nums tabular-nums;
    
    font-family: "Aeonik Pro TRIAL";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    }


@media (max-width:1200px) {
    .enable-round-wrapper-cont {
        display: grid;
        align-items: center;
        justify-items: center;
        grid-template-columns: 50% auto;
        gap: 50px;
    }
}

@media (max-width:1000px) {
    .enable-round-wrapper-cont {
        display: grid;
        align-items: center;
        justify-items: center;
        grid-template-columns: 1fr;
        gap: 50px;
    }

        .enable-round-wrapper-cont .text-content {
            text-align: center;
        }

            .enable-round-wrapper-cont .text-content button {
                margin: auto;
            }
        .enable-round-wrapper-cont .text-content {
            text-align: center;
            order: 2;
        }

        .enable-round-wrapper-cont .img-cont {
            order: 1;
        }
}

@media (max-width:600px) {
    .enable-round-wrapper-cont {
        display: grid;
        padding: 2rem;
        align-items: center;
        justify-items: center;
        grid-template-columns: 1fr;
        gap: 50px;
    }

       

        .enable-round-wrapper-cont .text-content button {
            margin: auto;
        }

        .enable-round-wrapper-cont .img-cont .main-img {
            max-width: 300px;
            width: 100%;
        }
}


.bills-section-wrapper  {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 900px;
    padding: 1rem;
    box-sizing: border-box;
}

.bills-section-wrapper-cont {
    display: grid;
    align-items: center;
    max-width: 1000px;
    width: 100%;
    justify-items: center;
    grid-template-columns:auto 52% ;
    gap: 112px;
}

    .bills-section-wrapper-cont h1 {
        color: #000;
        margin-bottom: 1rem;
        font-variant-numeric: lining-nums tabular-nums;
        font-family: "Aeonik Pro TRIAL";
        font-size: 2.5rem;
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
    }

    .bills-section-wrapper-cont p {
        color: #000;
        font-family: "Aeonik Pro TRIAL";
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }

    .bills-section-wrapper-cont .img-cont img {
        border-radius: 24px;
    }

@media (max-width:1200px) {
    .bills-section-wrapper-cont {
        display: grid;
        align-items: center;
        justify-items: center;
        grid-template-columns: 50% auto;
        gap: 50px;
    }
}

@media (max-width:1000px) {
    .bills-section-wrapper-cont {
        display: grid;
        align-items: center;
        justify-items: center;
        grid-template-columns: 1fr;
        gap: 50px;
    }

        .bills-section-wrapper-cont .text-content {
            text-align: center;
        }

            

   
}

@media (max-width:600px) {
    .bills-section-wrapper {
        display: grid;
        padding: 2rem;
        align-items: center;
        justify-items: center;
        grid-template-columns: 1fr;
        gap: 50px;
    }



        .bills-section-wrapper .text-content button {
            margin: auto;
        }

        .bills-section-wrapper .img-cont img {
            max-width: 300px;
            width: 100%;
        }
}


.zenbankBenefit-wrapper {
    height: 900px !important;
    
}
.FAQ-wrapper {
    height: 900px;
    
    background: rgb(255, 255, 255);
}