/* ==========================
 ABOUT SECTION
========================== */


.about{

padding:100px 5%;

background:#0f0c29;

}



.about-container{


max-width:1200px;

margin:auto;


display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;


}





/* ABOUT IMAGE */


.about-image{


height:450px;

position:relative;


display:flex;

align-items:center;

justify-content:center;


}





.about-card{


width:330px;

height:330px;


display:flex;

flex-direction:column;

justify-content:center;

align-items:center;


border-radius:40px;


background:

linear-gradient(
135deg,
#6c63ff,
#00d4ff
);



box-shadow:

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


}



.about-card h3{


font-size:45px;


}



.about-card p{


font-size:18px;


}






.experience-box{


position:absolute;


bottom:40px;

right:30px;


padding:25px 35px;


background:

rgba(255,255,255,.1);


backdrop-filter:blur(20px);


border-radius:25px;


border:1px solid rgba(255,255,255,.2);


}





.experience-box h2{


font-size:45px;


color:#00d4ff;


}




.experience-box p{


color:#ddd;


}








/* ABOUT CONTENT */


.section-label{


color:#6c63ff;

font-weight:700;

letter-spacing:2px;

font-size:14px;

margin-bottom:15px;


}



.about-content h2{


font-size:45px;

line-height:1.2;

margin-bottom:25px;


}



.about-content>p{


color:#c5c5c5;

line-height:1.8;

font-size:17px;


}







/* MISSION VISION */


.mission-box{


display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin-top:35px;


}



.mission-box div{


padding:25px;


background:

rgba(255,255,255,.08);


border-radius:25px;


border:1px solid rgba(255,255,255,.15);


}



.mission-box h3{


margin-bottom:10px;


}



.mission-box p{


color:#bbb;

line-height:1.6;


}







/* ==========================
 WHY CHOOSE US
========================== */


.why-us{


padding:100px 5%;

background:#0b0920;


}





.feature-grid{


max-width:1200px;

margin:auto;


display:grid;

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

gap:30px;


}





.feature-card{


padding:35px;


background:

rgba(255,255,255,.08);


border-radius:30px;


border:1px solid rgba(255,255,255,.15);


transition:.5s;


}




.feature-card:hover{


transform:

translateY(-15px);


box-shadow:

0 30px 60px rgba(0,0,0,.4);


}




.feature-card div{


font-size:40px;

margin-bottom:20px;


}



.feature-card h3{


font-size:25px;

margin-bottom:15px;


}



.feature-card p{


color:#bbb;

line-height:1.7;


}