/* SECTION */

.product-feature{

padding:70px 20px;

background:#fff;

overflow:hidden;

}



.product-feature h2{

text-align:center;

font-size:38px;

font-weight:700;

color:#222;

margin-bottom:60px;

}





/* MAIN LAYOUT */


.feature-wrapper{

max-width:1300px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

gap:0;

position:relative;

}





/* LEFT RIGHT AREA */


.feature-side{

width:36%;

}





/* CENTER IMAGE */


.feature-product{

width:28%;

text-align:center;

z-index:3;

margin:0 -35px;

}



.feature-product img{

width:100%;

max-width:500px;

height:auto;

display:block;

margin:auto;

object-fit:contain;

}







/* TEXT */


.feature-box{

margin-bottom:90px;

}



.feature-content h3{

font-size:22px;

font-weight:700;

color:#222;

margin:0 0 12px;

}



.feature-content p{

font-size:16px;

line-height:1.7;

color:#666;

margin:0;

}





/* LINE */


.feature-bottom{

display:flex;

align-items:center;

margin-top:22px;

position:relative;

z-index:1;

}



.feature-line{

height:1px;

background:#333;

flex:1;

}







/* NUMBER */


.feature-number{

width:30px;

height:30px;

border-radius:50%;

background:#222;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:13px;

font-weight:600;

position:relative;

z-index:3;

}







/* LEFT NUMBER */


.left .feature-bottom{

justify-content:flex-end;

}



.left .feature-number{

position:absolute;

right:-15px;

}







/* RIGHT NUMBER */


.right .feature-content{

text-align:right;

}



.right .feature-bottom{

justify-content:flex-start;

}



.right .feature-number{

position:absolute;

left:-15px;

}







/* ANIMATION */


.reveal-left{

opacity:0;

transform:translateX(-60px);

transition:all .9s ease;

}



.reveal-right{

opacity:0;

transform:translateX(60px);

transition:all .9s ease;

}



.reveal-scale{

opacity:0;

transform:scale(.85);

transition:all 1s ease;

}



.active{

opacity:1;

transform:none;

}







/* MOBILE */


@media(max-width:768px){


.product-feature{

padding:45px 15px;

}



.product-feature h2{

font-size:28px;

}



.feature-wrapper{

flex-direction:column;

}



.feature-product{

width:85%;

margin:0;

order:-1;

}



.feature-side{

width:100%;

}



.feature-box{

margin-bottom:45px;

}



.right .feature-content{

text-align:left;

}



.feature-bottom{

display:none;

}


}