/*=========================================
LAPTOP
=========================================*/

@media(max-width:1200px){

.about-container{

grid-template-columns:1fr;

gap:70px;

}

.about-left{

text-align:center;

max-width:900px;

margin:auto;

}

.section-badge{

margin:auto auto 30px;

}

.about-left h2{

font-size:52px;

}

.about-list{

max-width:700px;

margin:40px auto;

}

.about-small-cards{

justify-content:center;

}

.stats-grid{

max-width:850px;

margin:auto;

}

.about-banner{

max-width:850px;

margin:30px auto 0;

}

}


/*=========================================
TABLET
=========================================*/

@media(max-width:992px){

.about{

padding:90px 0;

}

.about-left h2{

font-size:44px;

}

.about-left p{

font-size:16px;

}

.stats-grid{

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

}

.about-list{

grid-template-columns:1fr;

}

}


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

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

@media(max-width:768px){

.about{

padding:70px 0;

}

.about-container{

width:94%;

gap:50px;

}

.about-left{

text-align:center;

}

.about-left h2{

font-size:34px;

line-height:1.2;

}

.about-left p{

font-size:15px;

line-height:1.8;

}

.about-list{

grid-template-columns:1fr;

gap:14px;

margin:30px 0;

text-align:left;

}

.about-small-cards{

display:grid;

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

gap:14px;

}

.small-card{

padding:18px 12px;

}

.small-card h3{

font-size:26px;

}

.small-card span{

font-size:12px;

line-height:1.5;

}

/* ===== STATS ===== */

.stats-grid{

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

gap:14px;

}

.stat-card{

padding:20px 14px;

border-radius:18px;

}

.stat-card i{

width:52px;

height:52px;

font-size:22px;

margin-bottom:14px;

border-radius:16px;

}

.stat-card h3{

font-size:34px;

margin-bottom:6px;

}

.stat-card span{

font-size:13px;

line-height:1.5;

}

.about-banner{

height:150px;

margin-top:20px;

}

.about-banner h3{

font-size:24px;

}

.about-banner p{

font-size:14px;

}

.section-badge{

font-size:11px;

padding:7px 15px;

}

}

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

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

@media(max-width:480px){

.about{

padding:60px 0;

}

.about-container{

width:92%;

}

.about-left h2{

font-size:28px;

}

.about-left p{

font-size:14px;
text-align:left;

}

.about-small-cards{

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

gap:10px;

}

.small-card{

padding:15px 8px;

border-radius:14px;

}

.small-card h3{

font-size:22px;

}

.small-card span{

font-size:11px;

}

/* Two cards per row */

.stats-grid{

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

gap:12px;

}

.stat-card{

padding:18px 10px;

border-radius:16px;

}

.stat-card i{

width:46px;

height:46px;

font-size:20px;

margin-bottom:12px;

border-radius:14px;

}

.stat-card h3{

font-size:26px;

}

.stat-card span{

font-size:12px;

line-height:1.4;

}

.about-banner{

height:135px;

}

.about-banner h3{

font-size:20px;

}

.about-banner p{

font-size:12px;

}

}