/*==================================================
    SENDAM MOBILE RESPONSIVE
==================================================*/


/* TABLET + MOBILE */

@media(max-width:992px){


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


.container{

    width:92%;

}



body{

    overflow-x:hidden;

}



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


.nav-links,
.nav-actions{

    display:none;

}



.mobile-toggle{

    display:block;

}




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


.hero{

    padding-top:30px;

    padding-bottom:60px;

}



.hero-grid{

    display:flex;

    flex-direction:column;

    gap:50px;

}



.hero-content{

    text-align:center;

}



.hero-badge{

    font-size:12px;

    padding:8px 14px;

}



.hero-title{

    font-size:38px;

    line-height:1.15;

    margin-top:20px;

}



.hero-title span{

    display:block;

}



.hero-description{

    font-size:16px;

    margin-top:20px;

}




.hero-buttons{

    display:flex;

    flex-direction:column;

    gap:15px;

    width:100%;

}



.hero-buttons .btn{

    width:100%;

}



.hero-stats{

    display:grid;

    grid-template-columns:1fr;

    gap:18px;

    margin-top:40px;

}



.hero-stats div{

    padding:20px;

    border-radius:18px;

}





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


.hero-phone{

    width:100%;

    min-height:auto;

    overflow:hidden;

}



.phone{

    width:300px;

    height:620px;

    border-width:10px;

    border-radius:35px;

}



.phone-status{

    height:35px;

}



.wa-header{

    height:60px;

}



.avatar{

    width:35px;

    height:35px;

    font-size:18px;

}



.chat{

    padding:12px;

    gap:10px;

}



.bubble{

    font-size:12px;

    padding:10px 12px;

}



.payment-card{

    padding:12px;

}



.payment-title{

    font-size:14px;

}



.payment-methods span{

    font-size:10px;

    padding:5px 8px;

}



.pay-btn{

    height:42px;

    font-size:14px;

}



/* Hide floating cards */

.floating-card{

    display:none;

}




/*==================================================
TRUSTED
==================================================*/


.logo-grid{

    grid-template-columns:repeat(2,1fr);

    gap:15px;

}



.logo-card{

    padding:20px 10px;

}




/*==================================================
SECTION HEADINGS
==================================================*/


.section-heading h2{

    font-size:34px;

}



.section-heading p{

    font-size:16px;

}





/*==================================================
ECOSYSTEM
==================================================*/


.ecosystem-wrapper{

    transform:scale(.55);

    transform-origin:center;

    height:450px;

    margin-left:-100px;

}




/*==================================================
WORKFLOW
==================================================*/


.workflow-line{

    display:none;

}



.workflow-grid{

    grid-template-columns:1fr;

}




/*==================================================
PRICING
==================================================*/


.pricing-grid{

    grid-template-columns:1fr;

}



.price-card{

    padding:30px;

}



.featured{

    transform:none;

}



.price-card h3{

    font-size:38px;

}





/*==================================================
CTA
==================================================*/


.cta{

    padding:60px 0;

}



.cta h2{

    font-size:34px;

}





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


.footer-grid{

    grid-template-columns:1fr;

    gap:30px;

}



.footer-bottom{

    flex-direction:column;

    text-align:center;

}



}







/* SMALL PHONES */

@media(max-width:480px){



.hero-title{

    font-size:32px;

}



.hero-badge{

    font-size:11px;

}



.phone{

    width:280px;

    height:590px;

}



.section-heading h2{

    font-size:30px;

}



.btn{

    font-size:15px;

}



}

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

.ecosystem-mobile{

    display:none;

}



@media(max-width:992px){

.ecosystem-desktop{

    display:none;

}



.ecosystem-mobile{

    display:block;

}



.mobile-hub{

    text-align:center;

    margin-bottom:35px;

}



.mobile-logo{

    width:140px;

    height:140px;

    margin:auto;

    border-radius:50%;

    background:#111827;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:26px;

    font-weight:800;

}



.mobile-hub p{

    margin-top:20px;

    color:#64748b;

}



.mobile-modules{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

}



.mobile-module{

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:18px;

    padding:20px;

    text-align:center;

    font-weight:700;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

}

}



@media(max-width:480px){

.mobile-modules{

    grid-template-columns:1fr;

}

}

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

@media(max-width:992px){

.workflow{

    padding:80px 0;

}


.workflow-line{

    display:none;

}


.workflow-grid{

    display:flex;

    flex-direction:column;

    gap:30px;

}


.workflow-step{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:20px;

    padding:25px;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:24px;

    box-shadow:0 15px 35px rgba(0,0,0,.06);

}


.workflow-step::before{

    content:"";

    position:absolute;

    left:36px;

    top:-30px;

    width:3px;

    height:30px;

    background:#2563eb;

}


.workflow-step:first-child::before{

    display:none;

}


.workflow-icon{

    width:60px;

    height:60px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#2563eb;

    color:#fff;

    font-size:24px;

    font-weight:700;

}


.workflow-content{

    flex:1;

}


.workflow-content h3{

    font-size:22px;

    margin-bottom:10px;

}


.workflow-content p{

    color:#64748b;

    line-height:1.7;

}

}

@media(max-width:992px){

.proof-grid{

    grid-template-columns:1fr;

}

.proof-card{

    padding:30px;

}

}