@media(max-width:1100px){

.cards{

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

}

}

@media(max-width:700px){

.cards{

grid-template-columns:1fr;

}

.hero h1{

font-size:54px;

}

.section-title h2{

font-size:36px;

}

}

@media(max-width:900px){

.features{

grid-template-columns:1fr;

}

.about h2{

font-size:50px;

}

.about h3{

font-size:28px;

}

.about p{

font-size:18px;

}

}

@media(max-width:900px){

.plans-header h2{

font-size:42px;

}

.plans-header p{

font-size:18px;

}

.plan-tabs{

flex-direction:column;

align-items:center;

}

.tab-btn{

width:100%;

max-width:340px;

}

}

@media(max-width:700px){

.site-footer{
padding:22px;
}

.site-footer p{
font-size:13px;
}

}

@media(max-width:600px){

.dropdown-menu{
min-width:200px;
max-width:80vw;
}

}

@media(max-width:500px){

.hero-buttons{
flex-direction:column;
width:100%;
max-width:280px;
}

.hero-buttons .btn{
width:100%;
text-align:center;
}

}

@media(max-width:600px){

.ping-widget{
bottom:14px;
left:14px;
padding:6px 12px;
gap:6px;
max-width:calc(100vw - 28px);
box-sizing:border-box;
}

.ping-signal{
height:12px;
}

.ping-text{
font-size:11px;
}

}

@media(max-width:480px){

.plan-card > *{
max-width:100%;
}

.plan-spec{
font-size:13px;
}

.plan-card{
padding:22px;
}

}

@media(max-width:900px){

.plan-grid{
grid-template-columns:1fr;
gap:14px;
}

}