/*
====================================
 Peace And Paper
 Creative Studio Theme
====================================
*/


@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap');



*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}



html{
    scroll-behavior:smooth;
}



body{

    background:#ffffff;

    color:#555;

    font-family:'Montserrat',Arial,sans-serif;

    font-size:15px;

    line-height:1.8;

}



img{

    max-width:100%;

    display:block;

}



a{

    text-decoration:none;

    color:inherit;

}



.container{

    width:1180px;

    max-width:90%;

    margin:auto;

}






/* =================================
HEADER
================================= */


.header{

    background:#fff;

    border-bottom:1px solid #eee;

    position:relative;

}



.header-inner{

    height:110px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}





.logo a{

    display:block;

}



.logo h1{

    font-family:'Cormorant Garamond',serif;

    font-size:58px;

    font-weight:400;

    line-height:45px;

    color:#2f2f2f;

    letter-spacing:-2px;

}



.logo h1 span{

    color:#c69b58;

    font-style:italic;

}



.logo p{

    margin-top:10px;

    font-size:11px;

    letter-spacing:5px;

    text-transform:uppercase;

    color:#999;

}






/* MENU */

.navigation{

    display:flex;

    gap:35px;

}



.navigation a{

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#555;

    transition:.3s;

}



.navigation a:hover{

    color:#c69b58;

}







/* =================================
HERO
================================= */


.hero{

    width:100%;

    height:650px;

    position:relative;

    overflow:hidden;

}



.hero img{

    width:100%;

    height:100%;

    object-fit:cover;

}



.hero:after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.25);

}



.hero-overlay{

    position:absolute;

    z-index:2;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:800px;

    max-width:90%;

    text-align:center;

    color:#fff;

}



.hero-overlay h2{

    font-family:'Cormorant Garamond',serif;

    font-size:80px;

    line-height:1;

    font-weight:400;

    margin-bottom:25px;

}



.hero-overlay p{

    font-size:18px;

    letter-spacing:1px;

    margin-bottom:40px;

}



.hero-overlay a{

    display:inline-block;

    padding:15px 40px;

    border:1px solid #fff;

    color:#fff;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:3px;

    transition:.3s;

}



.hero-overlay a:hover{

    background:#fff;

    color:#333;

}







/* =================================
ABOUT
================================= */


.about{

    display:flex;

    align-items:center;

    gap:80px;

    padding:130px 0;

}



.about-image{

    width:50%;

}



.about-image img{

    width:100%;

}



.about-content{

    width:50%;

}



.about-content h2{

    font-family:'Cormorant Garamond',serif;

    font-size:60px;

    font-weight:400;

    line-height:1.1;

    color:#333;

    margin-bottom:30px;

}



.about-content p{

    margin-bottom:20px;

}



.button{

    display:inline-block;

    margin-top:20px;

    padding:14px 38px;

    background:#c69b58;

    color:#fff;

    text-transform:uppercase;

    font-size:12px;

    letter-spacing:2px;

}






/* =================================
SECTION TITLE
================================= */


.section-title{

    text-align:center;

    margin-bottom:60px;

}



.section-title h2{

    font-family:'Cormorant Garamond',serif;

    font-size:60px;

    font-weight:400;

    color:#333;

}



.section-title p{

    color:#888;

    margin-top:15px;

}







/* =================================
COLLECTION
================================= */


.collection{

    background:#faf7f2;

    padding:120px 0;

}



.collection-grid{

    display:grid;

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

    gap:35px;

}



.collection-card{

    background:#fff;

    transition:.3s;

}



.collection-card:hover{

    transform:translateY(-8px);

}



.collection-card img{

    width:100%;

    height:350px;

    object-fit:cover;

}



.card-content{

    padding:30px;

    text-align:center;

}



.card-content h3{

    font-family:'Cormorant Garamond',serif;

    font-size:34px;

    font-weight:400;

    color:#333;

    margin-bottom:10px;

}







/* =================================
JOURNAL
================================= */


.journal{

    padding:120px 0;

}



.journal-post{

    max-width:850px;

    margin:0 auto 60px;

}



.journal-post h3{

    font-family:'Cormorant Garamond',serif;

    font-size:42px;

    font-weight:400;

    color:#333;

    margin-bottom:20px;

}



.journal-post p{

    margin-bottom:20px;

    text-align:justify;

}







/* =================================
REVIEWS
================================= */


.reviews{

    background:#faf7f2;

    padding:100px 0;

}



.review-grid{

    display:grid;

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

    gap:30px;

}



.review-card{

    background:#fff;

    padding:35px;

    text-align:center;

}



.stars{

    color:#c69b58;

    letter-spacing:4px;

    margin-bottom:20px;

}



.review-card p{

    font-style:italic;

    margin-bottom:20px;

}







/* =================================
FAQ
================================= */


.faq{

    padding:120px 0;

}



.faq-item{

    max-width:850px;

    margin:0 auto 35px;

    padding-bottom:25px;

    border-bottom:1px solid #eee;

}



.faq-item h3{

    font-family:'Cormorant Garamond',serif;

    font-size:32px;

    color:#333;

    margin-bottom:10px;

}







/* =================================
FOOTER
================================= */


.footer{

    background:#2d2d2d;

    color:#fff;

    text-align:center;

    padding:70px 0;

}



.footer-logo h2{

    font-family:'Cormorant Garamond',serif;

    font-size:50px;

    font-weight:400;

}



.footer-logo p{

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:12px;

    color:#ccc;

}



.footer-menu{

    margin:35px 0;

}



.footer-menu a{

    margin:0 15px;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:2px;

}



.copyright{

    font-size:12px;

    color:#aaa;

}







/* =================================
RESPONSIVE
================================= */


@media(max-width:900px){



.header-inner{

    height:auto;

    padding:35px 0;

    display:block;

    text-align:center;

}



.navigation{

    margin-top:30px;

    justify-content:center;

    flex-wrap:wrap;

}



.logo h1{

    font-size:45px;

}



.hero{

    height:450px;

}



.hero-overlay h2{

    font-size:48px;

}



.about{

    display:block;

}



.about-image,
.about-content{

    width:100%;

}



.about-content{

    margin-top:40px;

}



.collection-grid,
.review-grid{

    grid-template-columns:1fr;

}



.section-title h2{

    font-size:45px;

}



}