/* =====================================================
   RUBIXSKI DECOR COMPLETE WEBSITE CSS
   ===================================================== */


/* GOOGLE FONTS */

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


body{

    font-family:'Poppins',sans-serif;
    background:#faf7f2;
    color:#333;
}


h1,h2,h3,h4{

    font-family:'Playfair Display',serif;

}


a{

    text-decoration:none;
    color:inherit;

}


img{

    max-width:100%;
    display:block;

}


section{

    padding:80px 7%;

}


section h2{

    text-align:center;
    font-size:42px;
    margin-bottom:45px;
    color:#333;

}



/* =====================================================
   TOP BAR
   ===================================================== */


.topbar{

    background:#222;
    color:#fff;
    text-align:center;
    padding:12px;
    font-size:14px;

}





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


header{

    height:90px;
    background:#fff;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 7%;

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

}



.logo{

    font-family:'Playfair Display',serif;

    font-size:34px;

    font-weight:700;

    color:#a67c3c;

}




nav{

    display:flex;

    gap:35px;

}



nav a{

    font-size:15px;

    color:#333;

    transition:.3s;

}



nav a:hover{

    color:#a67c3c;

}




.header-icons{

    display:flex;

    gap:20px;

    font-size:20px;

}





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


.hero{


height:650px;


background:

linear-gradient(
rgba(0,0,0,.45),
rgba(0,0,0,.45)
),

url("../images/banner.jpg");


background-size:cover;

background-position:center;


display:flex;

align-items:center;


}



.hero-content{


margin-left:7%;

max-width:650px;

color:white;


}



.hero-content h1{


font-size:65px;

line-height:1.2;

margin-bottom:20px;


}



.hero-content p{


font-size:20px;

margin-bottom:35px;


}



.btn{


display:inline-block;

background:#a67c3c;

color:white;

padding:15px 35px;

transition:.3s;


}



.btn:hover{

background:#805d2c;

}






/* =====================================================
   CATEGORY
   ===================================================== */


.category-grid{


display:grid;

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

gap:30px;


}




.category-card{


background:#fff;

transition:.3s;

overflow:hidden;


}




.category-card:hover{


transform:translateY(-10px);


}




.category-card img{


height:300px;

width:100%;

object-fit:cover;


}



.category-card h3{


padding:20px;

text-align:center;

font-size:25px;


}








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


.collections{


background:#f5efe7;


}



.collection-grid{


display:grid;

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

gap:30px;


}



.collection-box{


height:430px;

position:relative;

overflow:hidden;


}



.collection-box img{


width:100%;

height:100%;

object-fit:cover;

transition:.5s;


}



.collection-box:hover img{


transform:scale(1.08);


}



.collection-box:after{


content:"";

position:absolute;

inset:0;

background:

linear-gradient(
transparent,
rgba(0,0,0,.7)
);


}



.collection-box h3{


position:absolute;

bottom:25px;

left:25px;

color:white;

z-index:2;

font-size:30px;


}









/* =====================================================
   PRODUCTS
   ===================================================== */


.product-grid{


display:grid;

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

gap:30px;


}




.product-card{


background:white;

text-align:center;

padding-bottom:25px;

transition:.3s;


}



.product-card:hover{


transform:translateY(-8px);

box-shadow:

0 10px 30px rgba(0,0,0,.12);


}




.product-image{


height:320px;

overflow:hidden;


}



.product-image img{


height:100%;

width:100%;

object-fit:cover;


transition:.4s;


}



.product-card:hover img{


transform:scale(1.05);


}




.product-card h3{


margin-top:20px;

font-size:22px;


}




.rating{


color:#c49a3a;

margin:10px;


}



.price{


font-size:22px;

font-weight:bold;

color:#a67c3c;


}



.product-card button{


background:#222;

color:white;

border:none;

padding:12px 30px;

margin-top:15px;

cursor:pointer;


}



.product-card button:hover{


background:#a67c3c;


}







/* =====================================================
   INSPIRATION
   ===================================================== */


.inspiration{


display:flex;

gap:60px;

align-items:center;

background:#fff;


}



.inspiration-image{


width:50%;


}



.inspiration-image img{


height:500px;

width:100%;

object-fit:cover;


}




.inspiration-content{


width:50%;


}



.inspiration-content h2{


text-align:left;


}







/* =====================================================
   FEATURES
   ===================================================== */


.features{


display:grid;

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

gap:30px;

background:#f5efe7;


}



.features div{


background:white;

padding:35px;

text-align:center;


}



.features h3{


color:#a67c3c;

margin-bottom:10px;


}







/* =====================================================
   NEWSLETTER
   ===================================================== */


.newsletter{


background:#222;

color:white;

text-align:center;


}



.newsletter h2{


color:white;


}



.newsletter input{


padding:15px;

width:350px;

border:none;


}



.newsletter button{


padding:15px 30px;

background:#a67c3c;

color:white;

border:none;


}








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


.site-footer{


background:#171717;

color:white;

padding:60px 7% 20px;


}




.footer-container{


display:grid;

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

gap:40px;


}



.footer-column h3{


color:#d0a85c;

margin-bottom:20px;


}



.footer-column p,
.footer-column a{


color:#ccc;

line-height:2;


}



.footer-column ul{


list-style:none;


}




.footer-bottom{


border-top:1px solid #444;

margin-top:40px;

padding-top:20px;

display:flex;

justify-content:space-between;


}






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


@media(max-width:992px){


nav{

display:none;

}


.category-grid,
.product-grid{


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


}



.collection-grid{


grid-template-columns:1fr;


}



.features{


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


}



.inspiration{


flex-direction:column;


}



.inspiration-image,
.inspiration-content{


width:100%;


}



.hero-content h1{


font-size:45px;


}



.footer-container{


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


}



}




@media(max-width:600px){


.logo{


font-size:25px;


}



.category-grid,
.product-grid,
.features,
.footer-container{


grid-template-columns:1fr;


}



.hero{


height:500px;


}



.hero-content h1{


font-size:35px;


}



section h2{


font-size:32px;


}



.footer-bottom{


flex-direction:column;

gap:15px;


}



}