/* =====================================================
   Responsive Styles
   36th Division NMC Website
===================================================== */


/* ===============================
   Large Laptop (1200px and below)
================================= */

@media (max-width:1200px){

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

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

.hero-content{
    width:55%;
}

.hero-image{
    width:40%;
}

}


/* ===============================
   Tablet Landscape
================================= */

@media (max-width:992px){

.navbar{

    height:75px;

}

.hero{

    flex-direction:column-reverse;

    text-align:center;

    padding-top:140px;

}

.hero-content{

    width:100%;

}

.hero-image{

    width:70%;

    margin-bottom:50px;

}

.hero h1{

    font-size:48px;

}

.hero h2{

    font-size:24px;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

}

.section-title{

    font-size:36px;

}

.footer-content{

    grid-template-columns:1fr;

    text-align:center;

}

.screenshots{

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

}

}


/* ===============================
   Tablet Portrait
================================= */

@media (max-width:768px){

/* Navigation */

.nav-links{

    position:absolute;

    top:80px;

    left:0;

    width:100%;

    background:#1E3A5F;

    flex-direction:column;

    align-items:center;

    display:none;

    padding:25px 0;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.nav-links.active{

    display:flex;

}

.nav-links li{

    margin:15px 0;

}

.menu-toggle{

    display:block;

}

/* Hero */

.hero{

    padding:130px 20px 70px;

}

.hero-image{

    width:85%;

}

.hero h1{

    font-size:40px;

}

.hero h2{

    font-size:22px;

}

.hero p{

    font-size:17px;

}

.btn{

    margin-top:10px;

}

.btn-secondary{

    margin-left:0;

}

/* About */

.section{

    padding:70px 0;

}

.section-title{

    font-size:32px;

}

/* Features */

.feature-grid{

    grid-template-columns:1fr;

}

/* Screenshots */

.screenshots{

    grid-template-columns:1fr;

}

/* Download */

.download-section h2{

    font-size:34px;

}

/* CTA */

.cta h2{

    font-size:34px;

}

}


/* ===============================
   Mobile
================================= */

@media (max-width:576px){

.logo span{

    display:none;

}

.logo img{

    width:45px;

}

.hero{

    min-height:auto;

}

.hero-image{

    width:100%;

}

.hero h1{

    font-size:34px;

}

.hero h2{

    font-size:20px;

}

.hero p{

    font-size:16px;

}

.section-title{

    font-size:28px;

}

.section-text{

    font-size:16px;

}

.feature-card{

    padding:25px;

}

.download-section{

    padding:70px 20px;

}

.download-section h2{

    font-size:30px;

}

.cta{

    padding:70px 20px;

}

.cta h2{

    font-size:30px;

}

.footer-content{

    gap:25px;

}

.footer-content h3{

    font-size:22px;

}

.footer-content h4{

    font-size:18px;

}

.footer-content p,

.footer-content a{

    font-size:15px;

}

.copyright{

    font-size:14px;

}

}


/* ===============================
   Small Mobile
================================= */

@media (max-width:400px){

.hero h1{

    font-size:30px;

}

.hero h2{

    font-size:18px;

}

.hero p{

    font-size:15px;

}

.btn{

    width:100%;

    text-align:center;

}

.hero-buttons{

    display:flex;

    flex-direction:column;

}

.download-section h2{

    font-size:26px;

}

.cta h2{

    font-size:26px;

}

.section-title{

    font-size:25px;

}

}


/* ===============================
   Large Desktop
================================= */

@media (min-width:1400px){

.container{

    max-width:1350px;

}

.hero h1{

    font-size:72px;

}

.hero h2{

    font-size:32px;

}

.hero-image img{

    max-height:700px;

}

.section-title{

    font-size:46px;

}

}