/*=========================================
GY SUMMIT 2026
RESPONSIVE.CSS
=========================================*/

/* ==========================
LARGE LAPTOPS
========================== */

@media(max-width:1400px){

.container{
max-width:1200px;
}

.hero h1{
font-size:60px;
}

.hero h2{
font-size:26px;
}

}


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

@media(max-width:1200px){

.navbar{

padding:0 5%;

}

section{

padding:70px 5%;

}

.hero h1{

font-size:52px;

}

.hero h2{

font-size:24px;

}

.about-wrapper{

grid-template-columns:1fr;

}

.dashboard-grid{

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

}

.summary-grid{

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

}

}


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

@media(max-width:992px){

.navbar{

height:auto;

padding:20px;

flex-direction:column;

gap:20px;

}

.navbar nav{

flex-wrap:wrap;

justify-content:center;

gap:18px;

}

.hero{

padding-top:140px;

}

.hero h1{

font-size:42px;

}

.hero h2{

font-size:22px;

}

.theme{

font-size:26px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.stats-grid,

.department-grid,

.event-grid,

.gallery-grid,

.announcement-grid,

.report-grid{

grid-template-columns:1fr 1fr;

}

.dashboard-grid{

grid-template-columns:1fr;

}

.summary-grid{

grid-template-columns:1fr;

}

.admin-layout{

flex-direction:column;

}

.sidebar{

position:relative;

width:100%;

height:auto;

}

.main-content{

margin-left:0;

width:100%;

padding:25px;

}

.page-header{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

}


/* ==========================
PHONE
========================== */

@media(max-width:768px){

.hero{

height:auto;

padding:170px 20px 80px;

}

.hero-logo{

width:110px;

}

.hero h1{

font-size:34px;

}

.hero h2{

font-size:20px;

}

.theme{

font-size:22px;

}

.tagline{

font-size:18px;

}

.verse{

font-size:15px;

}

.stats-grid,

.department-grid,

.gallery-grid,

.event-grid,

.announcement-grid,

.parish-grid,

.report-grid{

grid-template-columns:1fr;

}

.form-grid{

grid-template-columns:1fr;

}

.count-grid{

flex-direction:column;

align-items:center;

}

.time-box{

width:100%;

max-width:240px;

}

.dashboard-header{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.page-header h1{

font-size:26px;

}

.table-container{

overflow-x:auto;

}

table{

min-width:700px;

}

.hero-buttons a{

width:220px;

text-align:center;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.social-links{

justify-content:center;

}

}


/* ==========================
SMALL PHONES
========================== */

@media(max-width:576px){

.logo-area{

flex-direction:column;

text-align:center;

}

.logo-area img{

width:65px;

}

.hero h1{

font-size:28px;

}

.hero h2{

font-size:18px;

}

.theme{

font-size:18px;

}

.hero-buttons{

width:100%;

}

.hero-buttons a{

width:100%;

}

.stat-card h3{

font-size:42px;

}

.section-title{

font-size:30px;

}

.form-container{

padding:25px;

}

.pass-card{

padding:25px;

}

.pass-photo{

width:110px;

height:110px;

}

.pass-qr{

width:180px;

}

.pass-code{

font-size:18px;

letter-spacing:1px;

}

.sidebar{

padding:20px;

}

.main-content{

padding:15px;

}

.page-header{

margin-bottom:20px;

}

.summary-card h2{

font-size:34px;

}

}


/* ==========================
VERY SMALL DEVICES
========================== */

@media(max-width:400px){

.hero{

padding-top:180px;

}

.hero h1{

font-size:24px;

}

.hero h2{

font-size:16px;

}

.theme{

font-size:16px;

}

.tagline{

font-size:15px;

}

.verse{

font-size:14px;

}

.btn{

padding:13px 18px;

font-size:14px;

}

.register-btn{

padding:10px 18px;

}

}