/*====================================================
 ABOUT SIMAR
====================================================*/


.about{

padding:120px 0;

background:#fff;

overflow:hidden;

}



.about-grid{

display:grid;

grid-template-columns:

1fr 1fr;

gap:80px;

align-items:center;

}





/* IMAGE */

.about-image{

position:relative;

}



.about-image img{


width:100%;

height:600px;

object-fit:cover;

border-radius:35px;

box-shadow:

0 30px 70px rgba(0,0,0,.15);

}




.experience-box{


position:absolute;

right:-30px;

bottom:40px;

background:white;

padding:30px;

border-radius:25px;

box-shadow:

0 20px 50px rgba(0,0,0,.15);

display:flex;

align-items:center;

gap:15px;

}



.experience-box strong{


font-size:55px;

color:#0066ff;

font-weight:900;

}



.experience-box span{


font-size:15px;

color:#555;

font-weight:600;

}





/* CONTENT */


.section-tag{


color:#0077ff;

font-weight:700;

letter-spacing:3px;

font-size:14px;

margin-bottom:20px;

}




.about-content h2{


font-size:48px;

line-height:1.2;

font-weight:800;

color:#031b34;

margin-bottom:30px;

}



.about-content p{


font-size:17px;

line-height:1.9;

color:#64748b;

margin-bottom:20px;

}





/* FEATURES */


.about-features{


display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

margin-top:40px;

}



.feature{


display:flex;

gap:18px;

align-items:flex-start;

}



.feature-icon{


min-width:60px;

height:60px;

border-radius:20px;

background:

linear-gradient(

135deg,

#0066ff,

#00d4ff

);


display:flex;

align-items:center;

justify-content:center;


color:white;

font-size:22px;


}




.feature h3{


font-size:18px;

color:#031b34;

margin-bottom:8px;

}



.feature span{


font-size:14px;

color:#64748b;

line-height:1.5;

}




/* BUTTON */


.about-btn{


display:inline-flex;

align-items:center;

gap:12px;

margin-top:45px;

padding:17px 35px;

background:#0066ff;

color:white;

border-radius:50px;

font-weight:600;

transition:.4s;

}



.about-btn:hover{


transform:translateY(-5px);

background:#004ecc;

}





/*====================================================
 TABLETTE
====================================================*/


@media(max-width:992px){


.about{

padding:90px 0;

}



.about-grid{


grid-template-columns:1fr;

gap:60px;

}



.about-content{


text-align:center;

}



.about-features{


text-align:left;

}


.about-image{


max-width:700px;

margin:auto;

}


}





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


@media(max-width:600px){


.about{


padding:70px 0;

}



.about-image img{


height:400px;

border-radius:25px;

}



.experience-box{


right:15px;

bottom:20px;

padding:20px;

}



.experience-box strong{


font-size:40px;

}



.about-content h2{


font-size:34px;

}



.about-content p{


font-size:15px;

}



.about-features{


grid-template-columns:1fr;

}



.feature-icon{


min-width:55px;

height:55px;

}



.about-btn{


width:100%;

justify-content:center;

}



}