/* ==========================================
   BlessingShares
   RESPONSIVE.CSS
   Mobile • Tablet • Desktop
========================================== */

/* ==========================
LARGE TABLETS
========================== */

@media (max-width:900px){

.hero{

    padding:120px 25px 70px;

}

.hero-container{

    flex-direction:column;

    text-align:center;

    gap:50px;

}

.hero-content{

    order:2;

}

.hero-image{

    order:1;

}

.hero h1{

    font-size:48px;

}

.hero h2{

    font-size:30px;

}

.hero p{

    margin:auto auto 35px;

}

.hero-buttons{

    justify-content:center;

}

.hero-image img{

    max-width:420px;

}

} 

.about-preview{

    gap:50px;

}

.book-page{

    gap:50px;

}



/* ==========================
TABLETS
========================== */

@media (max-width:992px){

h1{

    font-size:52px;

}

h2{

    font-size:38px;

}

.hero{

    min-height:90vh;

}

.hero-buttons{

    flex-wrap:wrap;

}

.about-preview{

    grid-template-columns:1fr;

    text-align:center;

}

.about-image{

    max-width:500px;

    margin:auto;

}

.author-section{

    grid-template-columns:1fr;

}

.book-page{

    grid-template-columns:1fr;

    text-align:center;

}

.book-cover{

    max-width:400px;

    margin:auto;

}

.contact-wrapper{

    grid-template-columns:1fr;

}

.footer-links{

    gap:20px;

}

}

/* ==========================
MOBILE MENU
========================== */

@media (max-width:850px){

.menu-btn{

    display:block;

    color:var(--primary);

    z-index:1001;

}

.nav-links{

    position:fixed;

    top:90px;

    right:-100%;

    width:280px;

    height:calc(100vh - 90px);

    background:white;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    gap:35px;

    padding-top:60px;

    transition:.35s;

    box-shadow:-5px 0 25px rgba(0,0,0,.08);

}

.nav-links.active{

    right:0;

}

.nav-links a{

    font-size:18px;

}

}

/* ==========================
SMALL TABLETS
========================== */

@media (max-width:768px){

section{

    padding:80px 5%;

}

 .newsletter{
        padding:50px 6%;
    }

.newsletter p {
        font-size: 17px;
    }

    .newsletter-form {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .newsletter-form input {
        width: 100%;
        max-width: 320px;
        padding: 10px 12px;
    }
    
.newsletter-form button {
        width: 200px;
        padding: 12px;
    } 

  

.hero{

    padding:150px 5%;

}

.hero h1{

    font-size:48px;

}

.hero h2{

    font-size:28px;

}

.hero p{

    font-size:17px;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.primary-btn,

.secondary-btn{

    width:240px;

}

.book-grid{

    grid-template-columns:1fr;

}

.books-grid{

    grid-template-columns:1fr;

}

.shop-grid{

    grid-template-columns:1fr;

}

.blog-grid{

    grid-template-columns:1fr;

}



.newsletter-form input{

    width: 100%;

    max-width: 240px;

    padding: 10px 14px; 

    max-height: 40px;

}

.newsletter-form button{

    border-radius:50px;

    width: 180px;

     margin: 5px auto 0; 

    max-width: 220px;

    margin-top: 15px;

    display: block;


}

.social-icons{

    flex-wrap:wrap;

}

}

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

@media (max-width:576px){

.logo img{

    width:80px;

}

.navbar{

    height:80px;

}

.nav-links{

    top:80px;

    height:calc(100vh - 80px);

}

.hero{

    min-height:85vh;

}

.hero h1{

    font-size:40px;

}

.hero h2{

    font-size:24px;

}

.section-title h2{

    font-size:34px;

}

.section-title p{

    margin-bottom:30px;

}

.shop-grid{
    justify-items:center;
}

.about-text{

        text-align: center;

    }

    .about-text ul{

        list-style-position: inside;

        padding-left: 0;

        display: inline-block;

        text-align: left;

        margin-bottom: 50px;

    }

.about-text h2{

    font-size:34px;

}

.section-title {

    justify-items:center;

}


.newsletter h2{

    font-size:34px;

}

.book-card img{

    height:400px;

}

.book-item img{

    height:390px;

}

.blog-card img{

    height:220px;

}

.contact-form{

    padding:25px;

}

.info-box{

    padding:22px;

}



.footer-links{

    flex-direction:column;

    gap:15px;

}

.footer-logo img{

    width:150px;

}

footer{

    padding:70px 5% 40px;

}

}

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

@media (max-width:430px){

section{

    padding:70px 20px;

}

.hero{

    padding:130px 20px;

}

.hero h1{

    font-size:34px;

}

.hero h2{

    font-size:22px;

}

.hero p{

    font-size:16px;

}

.primary-btn,

.secondary-btn{

    width:100%;

}

.book-card{

    border-radius:16px;

}

.book-item{

    border-radius:16px;

}

.blog-card{

    border-radius:16px;

}

.book-card img{

    height:350px;

}

.book-item img{

    height:350px;

}

.book-info{

    padding:22px;

}

.blog-content{

    padding:22px;

}

.contact-form{

    padding:20px;

}

.newsletter input{

    padding:16px;

}

.newsletter button{

    padding:16px;

}

}

/* ==========================
LANDSCAPE PHONES
========================== */

@media (max-height:500px){

.hero{

    min-height:650px;

}

.nav-links{

    overflow-y:auto;

}

}

/* ==========================
LARGE DESKTOPS
========================== */

@media (min-width:1500px){

.hero-content{

    max-width:950px;

}

.hero h1{

    font-size:84px;

}

.hero h2{

    font-size:46px;

}

section{

    padding:120px 10%;

}

}

/* ==========================
PHONES (≤ 480px)
========================== */

@media (max-width: 480px) {

    .newsletter {
        padding: 40px 20px;
    }

    .newsletter h2 {
        font-size: 30px;
    }

    .newsletter p {
        font-size: 16px;
        margin-bottom: 25px;
    }

    .newsletter-form input,
    .newsletter-form button {
        padding: 10px;
        max-width: 100%;
    }

    .newsletter-form button {
        width: 100%;
        border-radius: 40px;
    }
} 

/* ==========================
PRINT
========================== */

@media print{

header,

footer,

.menu-btn,

.newsletter,

.social-icons,

.primary-btn,

.secondary-btn{

    display:none !important;

}

body{

    background:white;

    color:black;

}

section{

    padding:20px;

}

}