/* =====================================
RESPONSIVE CSS
The Graduate Talk
===================================== */

/* ==========================
1200px
========================== */

@media (max-width:1200px){

.container{
width:94%;
}

.hero-grid,
.mission-grid,
.book-grid{

grid-template-columns:1fr;

gap:60px;

}

.hero-image,
.book-cover{

text-align:center;

}

.book-cover img{

max-width:420px;

margin:auto;

}

.footer-grid{

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

}

}


/* ==========================
992px
========================== */

@media (max-width:992px){

h1{

font-size:3rem;

}

h2{

font-size:2.3rem;

}

.hero{

padding-top:150px;

}

.hero-buttons{

flex-wrap:wrap;

gap:20px;

}

.hero-stats{

justify-content:center;

}

.book-features{

grid-template-columns:1fr;

}

.navbar{

position:fixed;

top:90px;

left:-100%;

width:100%;

background:#fff;

padding:40px;

transition:.4s;

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.navbar.active{

left:0;

}

.navbar ul{

flex-direction:column;

gap:30px;

}

.menu-btn{

display:block;

}

.header .btn-outline{

display:none;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.social-icons{

justify-content:center;

}

}


/* ==========================
768px
========================== */

@media (max-width:768px){

.section{

padding:80px 0;

}

h1{

font-size:2.4rem;

}

h2{

font-size:2rem;

}

.hero-grid{

text-align:center;

}

.hero p{

margin:auto auto 30px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

gap:25px;

flex-wrap:wrap;

}

.mission-grid{

gap:40px;

}

.book-grid{

gap:40px;

}

.newsletter form{

flex-direction:column;

align-items:center;

}

.newsletter input{

width:100%;

}

.book-buttons{

justify-content:center;

}

}


/* ==========================
576px
========================== */

@media (max-width:576px){

.header .container{

height:80px;

}

.logo{

font-size:1.5rem;

}

.hero{

padding-top:130px;

}

h1{

font-size:2rem;

}

h2{

font-size:1.7rem;

}

.btn{

width:100%;

}

.hero-buttons{

flex-direction:column;

}

.btn-secondary{

margin-left:0;

}

.section-heading{

margin-bottom:50px;

}

.topic-card,
.resource-card,
.mission-card{

padding:30px;

}

.book-cover img{

max-width:280px;

}

.hero-stats{

flex-direction:column;

}

.floating-card{

display:none;

}

}


/* ==========================
400px
========================== */

@media (max-width:400px){

.container{

width:92%;

}

h1{

font-size:1.8rem;

}

.hero-tag,
.section-tag{

font-size:.8rem;

}

.newsletter{

padding:70px 0;

}

}