/*======================================================
RESPONSIVE.CSS
Premium Government Template
======================================================*/

/*======================================================
1600px
======================================================*/

@media (max-width:1600px){

:root{

--container:1280px;

}

.hero-content{

padding-left:6%;

}

.hero-content h2{

font-size:58px;

}

}

/*======================================================
1400px
======================================================*/

@media (max-width:1400px){

:root{

--container:1180px;

}

.hero-content h2{

font-size:52px;

}

.section-title h2{

font-size:40px;

}

.news-grid{

grid-template-columns:repeat(3,1fr);

gap:28px;

}

.quick-grid{

gap:24px;

}

.service-grid{

gap:24px;

}

}

/*======================================================
1280px
======================================================*/

@media (max-width:1280px){

.container{

width:min(100% - 50px,var(--container));

}

.hero-content{

max-width:640px;

}

.hero-content h2{

font-size:48px;

}

.hero-content p{

font-size:18px;

}

.welcome-grid{

grid-template-columns:450px 1fr;

gap:60px;

}

.footer-grid{

gap:45px;

}

}

/*======================================================
1200px
======================================================*/

@media (max-width:1200px){

.quick-grid{

grid-template-columns:repeat(2,1fr);

}

.service-grid{

grid-template-columns:repeat(2,1fr);

}

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

.partner-slider{

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.gallery-grid{

grid-template-columns:repeat(2,1fr);

}

.footer-grid{

grid-template-columns:repeat(2,1fr);

}

.news-grid{

grid-template-columns:repeat(2,1fr);

}

.agenda-grid{

grid-template-columns:repeat(2,1fr);

}

}

/*======================================================
1024px
======================================================*/

@media (max-width:1024px){

.header .container{

height:80px;

}

.navigation{

display:none;

}

.mobile-menu-button{

display:flex;

}

.hero-slider{

height:720px;

}

.hero-content{

padding:0 40px;

justify-content:center;

}

.hero-content h2{

font-size:46px;

}

.hero-content p{

font-size:17px;

}

.welcome-grid{

grid-template-columns:1fr;

}

.welcome-image{

max-width:550px;

margin:auto;

}

.welcome-content{

text-align:center;

}

.cta-box h2{

font-size:42px;

}

.section-title h2{

font-size:38px;

}

.section-header h2{

font-size:38px;

}

}

/*======================================================
992px
======================================================*/

@media (max-width:992px){

.quick-grid{

grid-template-columns:repeat(2,1fr);

}

.news-grid{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:repeat(2,1fr);

}

.partner-slider{

grid-template-columns:repeat(3,1fr);

}

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-grid img{

margin:auto;

}

.footer-grid ul{

padding:0;

}

}
/*======================================================
768px
======================================================*/

@media (max-width:768px){

section{

padding:70px 0;

}

.container{

width:min(100% - 30px,var(--container));

}

.topbar{

display:none;

}

.header{

position:fixed;

left:0;

right:0;

top:0;

}

.header .container{

height:72px;

}

.logo-area img{

height:46px;

}

.logo-area h1{

font-size:22px;

}

.logo-area p{

display:none;

}

.hero-slider{

height:640px;

min-height:640px;

margin-top:72px;

}

.hero-content{

padding:0 25px;

text-align:center;

align-items:center;

}

.hero-content span{

font-size:11px;

letter-spacing:1px;

}

.hero-content h2{

font-size:40px;

line-height:1.15;

}

.hero-content p{

font-size:16px;

line-height:1.8;

max-width:100%;

}

.slider-navigation{

padding:0 15px;

}

.slider-navigation button{

width:48px;

height:48px;

font-size:18px;

}

.quick-access{

margin-top:0;

}

.quick-grid{

grid-template-columns:1fr;

gap:22px;

}

.quick-card{

padding:32px 24px;

}

.quick-card .icon{

width:72px;

height:72px;

font-size:30px;

}

.section-title h2,

.section-header h2{

font-size:34px;

}

.section-title p,

.section-description{

font-size:15px;

}

.welcome-grid{

gap:40px;

}

.welcome-content{

text-align:left;

}

.welcome-content h2{

font-size:36px;

}

.article-box{

padding:35px;

}

.stats-grid{

grid-template-columns:1fr;

}

.news-grid{

grid-template-columns:1fr;

}

.service-grid{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

}

.partner-slider{

grid-template-columns:repeat(2,1fr);

gap:25px;

}

.agenda-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

gap:35px;

}

.footer-bottom{

font-size:14px;

}

}

/*======================================================
640px
======================================================*/

@media (max-width:640px){

.hero-content h2{

font-size:34px;

}

.hero-content p{

font-size:15px;

}

.cta-box h2{

font-size:34px;

}

.cta-box p{

font-size:16px;

}

.btn-primary,

.btn-secondary{

width:100%;

justify-content:center;

}

.cta-button{

flex-direction:column;

}

.running-info .container{

display:block;

}

.running-label{

margin-bottom:15px;

display:inline-block;

}

.announcement-item{

display:block;

}

.announcement-date{

display:block;

margin-bottom:12px;

}

}

/*======================================================
576px
======================================================*/

@media (max-width:576px){

.hero-slider{

height:560px;

min-height:560px;

}

.hero-content{

padding:0 18px;

}

.hero-content h2{

font-size:30px;

}

.hero-content p{

font-size:14px;

}

.section-title{

margin-bottom:45px;

}

.section-title h2,

.section-header h2{

font-size:30px;

}

.welcome-content h2{

font-size:30px;

}

.article-box{

padding:28px;

}

.news-content{

padding:24px;

}

.news-content h3{

font-size:22px;

}

.gallery-grid img{

height:240px;

}

.stats-card{

padding:35px 20px;

}

}

/*======================================================
480px
======================================================*/

@media (max-width:480px){

.hero-slider{

height:520px;

}

.hero-content h2{

font-size:28px;

}

.hero-content span{

padding:8px 14px;

}

.logo-area h1{

font-size:18px;

}

.section-title h2,

.section-header h2{

font-size:27px;

}

.quick-card h3,

.service-card h3{

font-size:20px;

}

.cta-box h2{

font-size:28px;

}

.partner-slider{

grid-template-columns:1fr;

}

}

/*======================================================
390px
======================================================*/

@media (max-width:390px){

.hero-content{

padding:0 15px;

}

.hero-content h2{

font-size:25px;

}

.hero-content p{

font-size:13px;

}

.slider-navigation{

display:none;

}

.news-content{

padding:20px;

}

.article-box{

padding:22px;

}

}

/*======================================================
360px
======================================================*/

@media (max-width:360px){

.container{

width:min(100% - 20px,var(--container));

}

.hero-content h2{

font-size:22px;

}

.section-title h2,

.section-header h2{

font-size:24px;

}

.btn-primary,

.btn-secondary{

padding:14px 18px;

font-size:14px;

}

}

/*======================================================
320px
======================================================*/

@media (max-width:320px){

.hero-content h2{

font-size:20px;

}

.hero-content p{

font-size:12px;

}

.logo-area img{

height:40px;

}

.logo-area h1{

font-size:17px;

}

.quick-card,

.service-card,

.stats-card{

padding:25px 16px;

}

.gallery-grid img{

height:200px;

}

}
@media(max-width:992px){

.page-grid{

grid-template-columns:1fr;

}

.sidebar{

position:relative;

top:0;

}

.page-hero h1{

font-size:40px;

}

}

@media(max-width:768px){

.page-hero{

padding:120px 0 70px;

}

.page-hero h1{

font-size:32px;

}

.page-hero p{

font-size:15px;

}

}