/* =====================================
   MOBILE APP SECTION
===================================== */


.mobile-app-section{

    padding:50px 0;

    overflow:hidden;


    background:

    radial-gradient(
        circle at right,
        rgba(255,80,50,.15),
        transparent 35%
    ),


    linear-gradient(
        135deg,
        #fff8f5,
        #ffffff 50%,
        #fff1eb
    );

}




.mobile-app-container{

    max-width:1350px;

    margin:auto;

    padding:0 40px;

    display:flex;

    align-items:center;

    gap:70px;

}




/* =====================================
   LEFT CONTENT
===================================== */


.mobile-app-content{

    width:55%;

}




.mobile-app-content h2{


    font-size:45px;

    line-height:1.15;

    font-weight:700;

    color:#161d2d;


}



.mobile-app-content h2 span{


    display:block;

    color:#90331c;


}





.app-desc{


    font-size:18px;

    line-height:1.7;

    color:#64748b;

    margin:20px 0 35px;


}




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


.app-feature{


    display:flex;

    gap:18px;

    margin-bottom:25px;

    padding:15px;

    border-radius:18px;

    transition:.35s ease;

    cursor:pointer;

}




.app-feature:hover{


    transform:

    translateX(10px);


    background:

    linear-gradient(
        135deg,
        rgba(144,51,28,.08),
        rgba(255,255,255,.8)
    );


    box-shadow:

    0 15px 35px rgba(144,51,28,.12);


}




/* ICON */


.app-icon{


    width:60px;

    height:60px;

    min-width:60px;


    border-radius:15px;


    display:flex;

    align-items:center;

    justify-content:center;


    background:

    linear-gradient(
        135deg,
        #ffe5df,
        #fff
    );


    color:#90331c;


    font-size:25px;


    transition:.4s ease;


}





.app-feature:hover .app-icon{


    transform:

    rotate(8deg)

    scale(1.12);


    background:

    linear-gradient(
        135deg,
        #90331c,
        #ce5234
    );


    color:white;


}




.app-feature h4{


    margin:0;

    font-size:20px;

    color:#000;

    transition:.3s ease;

}



.app-feature:hover h4{


    color:#90331c;


}




.app-feature p{


    margin:5px 0;

    color:#64748b;

    font-size:17px;


}





/* =====================================
   BUTTON
===================================== */


.app-action{


    display:flex;

    gap:20px;

    margin-top:30px;


}




.app-action button{


    width:280px;

    height:58px;


    border:0;

    border-radius:50px;


    background:

    linear-gradient(
        90deg,
        #90331c,
        #ce5234
    );


    color:#fff;


    font-size:18px;

    font-weight:700;


    cursor:pointer;


    position:relative;

    overflow:hidden;


    transition:.4s ease;


}



.app-action button:hover{


    transform:

    translateY(-5px);


    box-shadow:

    0 18px 35px rgba(144,51,28,.35);


}



.app-action button::before{


    content:"";

    position:absolute;


    top:0;

    left:-100%;


    width:100%;

    height:100%;


    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.4),
        transparent
    );


    transition:.5s ease;


}



.app-action button:hover::before{


    left:100%;


}







/* =====================================
   RIGHT IMAGE
===================================== */


.mobile-app-image{
    width:40%;
    height:600px;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}





.mobile-app-image::before{


    content:"";


    position:absolute;


    width:420px;

    height:420px;


    border-radius:50%;


    background:


    radial-gradient(
        circle,
        rgba(255,100,70,.25),
        transparent 65%
    );


    transition:.5s ease;


}




.mobile-app-image:hover::before{
    transform:

    scale(1.15);
}





.mobile-app-image img{
    width:420px;
    height:600px;
    object-fit:contain;
    z-index:2;
    transition:.6s ease;
}





/* .mobile-app-image:hover img{


    transform:

    translateY(-15px)

    scale(1.04);


    filter:

    drop-shadow(
        0 30px 40px rgba(144,51,28,.25)
    );


} */





/* =====================================
 DOWNLOAD BOX
===================================== */


.download-box_1{


    background:#eeecec;


    padding:10px;


    position:absolute;


    bottom:160px;


    z-index:3;


    display:flex;

    gap:15px;


    border-radius:20px;


    transition:.4s ease;


}





.download-box_1:hover{


    transform:

    translateY(-10px);


    box-shadow:

    0 20px 40px rgba(0,0,0,.25);


}




.download-box_1 div{


    padding:16px 25px;


    background:#000;


    color:white;


    border-radius:15px;


    font-size:15px;


    font-weight:700;


    display:flex;

    align-items:center;


    transition:.35s ease;


}





.download-box_1 div:hover{


    background:

    linear-gradient(
        135deg,
        #90331c,
        #ce5234
    );


    transform:

    translateY(-5px);


}



.download-icon{

    padding-right:5px;

}





/* =====================================
 RESPONSIVE
===================================== */


@media(max-width:992px){


.mobile-app-container{


    flex-direction:column;

    text-align:center;

    gap:40px;


}



.mobile-app-content,

.mobile-app-image{


    width:100%;


}



.mobile-app-content h2{


    font-size:42px;


}



.app-feature{


    text-align:left;


}



.mobile-app-image{


    height:500px;


}


}




@media(max-width:576px){


.mobile-app-section{

    padding:45px 0;

}



.mobile-app-container{


    padding:0 20px;


}



.mobile-app-content h2{


    font-size:32px;


}



.app-desc{


    font-size:16px;


}



.app-icon{


    width:48px;

    height:48px;

    min-width:48px;


    font-size:20px;


}



.app-feature h4{


    font-size:17px;


}



.app-feature p{


    font-size:14px;


}



.app-action{


    flex-direction:column;


}



.app-action button{


    width:100%;


}



.mobile-app-image{


    height:420px;


}



.mobile-app-image img{


    width:240px;


}



.download-box_1{


    bottom:20px;

}



.download-box_1 div{


    padding:12px 15px;

    font-size:13px;


}


}