/* Responsive.css for SJCC */
/* Generated baseline responsive overrides */

html,body{overflow-x:hidden}
img,video,iframe{max-width:100%;height:auto}
.container{width:100%;padding-left:15px;padding-right:15px}

@media (min-width:1600px){
.container{max-width:1400px}
}

@media (max-width:1440px){
section{padding:70px clamp(24px,4vw,48px);}
}

@media (max-width:1200px){
.canvas-container{width:100%;max-width:1200px}
.prog-grid{grid-template-columns:repeat(2,1fr)}
.collab-grid{grid-template-columns:repeat(3,1fr)}
.ranks-grid{grid-template-columns:repeat(2,1fr)}
.footer-top{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:992px){
section{padding:60px 24px}
.topbar{padding:8px 20px;flex-wrap:wrap}
.quicklinks{padding:20px}
.ql-inner{grid-template-columns:repeat(4,1fr)}
.why-grid,.ann-layout{grid-template-columns:1fr!important;display:grid!important}
.why-visual{grid-template-columns:1fr}
.parallax,.bg-3,.why{background-attachment:scroll}
.sjcc-title{font-size:clamp(2rem,6vw,3.8rem)}
.principal-profile-container{width:180px;height:180px}
}

@media (max-width:768px){
.topbar-left,.topbar-right{width:100%;justify-content:center;flex-wrap:wrap}
.prog-grid,.why-pillars{grid-template-columns:1fr}
.ql-inner{grid-template-columns:repeat(3,1fr)}
.collab-grid{grid-template-columns:repeat(2,1fr)}
.footer-top{grid-template-columns:1fr;text-align:center}
.footer-bottom{flex-direction:column;text-align:center}
.ticker-inner{font-size:13px}
.ticker-badge{font-size:12px;padding:8px 10px}
.event-card{flex:0 0 100%}
.tcard{width:260px}
}

@media (max-width:576px){
section{padding:48px 18px}
.ql-inner{grid-template-columns:repeat(2,1fr)}
.principal-profile-container{width:160px;height:160px}
.hero h1,.section-title,.title-heading{font-size:clamp(1.6rem,7vw,2.2rem)}
}

@media (max-width:430px){
.ql-inner{grid-template-columns:1fr}
.topbar{font-size:11px}
}

@media (max-width:360px){
.btn-gold,.btn-ghost{padding:12px 18px;font-size:13px}
body{font-size:14px}
}

@media (max-width:320px){
section{padding:40px 15px}
}