/* TABLET + MOBILE */

@media(max-width:900px){

.container{
width:calc(100% - 30px)
}


/* HEADER */

.nav{
height:70px;
justify-content:center
}


.brand{
position:absolute;
left:50%;
transform:translateX(-50%)
}


.brand div:not(.brand-logo){
display:none
}


.brand-logo{
width:55px;
height:55px
}


.menu{
display:none
}


.mobile-btn{
display:block;
position:absolute;
left:10px
}



/* HERO */

.hero{
padding:45px 0;
text-align:center
}


.hero-grid{
grid-template-columns:1fr;
gap:25px
}


.hero h1{
font-size:28px
}


.hero p{
font-size:14px
}


.buttons{
justify-content:center;
flex-wrap:wrap
}


.circle{
width:220px;
height:220px
}



/* دو ستونه موبایل */

.cards,
.quick-grid{
grid-template-columns:repeat(2,1fr);
gap:12px
}


.card{
padding:16px;
min-height:140px
}


.card h3{
font-size:14px
}


.card p{
font-size:12px
}



/* ABOUT */

.about{
grid-template-columns:1fr
}



/* STATS */

.stats{
grid-template-columns:repeat(2,1fr);
gap:12px
}



/* PROFESSORS */

.professors{
grid-template-columns:repeat(2,1fr);
gap:12px
}



/* FOOTER */

.footer-grid{
grid-template-columns:1fr 1fr;
gap:12px
}


.footer-box{
padding:18px
}


.footer-logo{
width:90px;
height:90px
}

}



/* گوشی‌های کوچک */

@media(max-width:450px){

.container{
width:calc(100% - 24px)
}


/*
کارت‌ها عمداً تک ستونه نمی‌شوند.
طبق طراحی پروژه مرکز سنجش:
تمام موبایل‌ها دو ستونه باقی می‌مانند.
*/


.cards,
.quick-grid{
grid-template-columns:repeat(2,1fr);
gap:10px
}


.card{
min-height:125px;
padding:12px;
border-radius:18px
}


.card h3{
font-size:12px
}


.card p{
font-size:10.5px;
line-height:1.7
}



.stats,
.professors{
grid-template-columns:repeat(2,1fr)
}



.cta{
width:calc(100% - 24px);
padding:35px 15px;
border-radius:22px
}


.cta h2{
font-size:21px
}


.footer-grid{
grid-template-columns:1fr 1fr
}


.footer-box{
font-size:12px;
padding:14px
}


.footer h4{
font-size:14px
}


.footer p,
.footer a{
font-size:11px
}


.mobile-menu{
width:220px
}

}