@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Turret+Road:wght@200;300;400;500;700;800&display=swap');

* { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; box-sizing: border-box; scroll-padding-top: 4rem; scroll-behavior: smooth; list-style: none; text-decoration: none; }
:root {
    --main-color: #BC9667;
    --main-color-hover: #8A6F4D;
    --second-color: #EDEAE3;
    --text-color: #1B1B1B;
    --bg-color: #FFFFFF;
    --bg-color-alt: #F1F1F1;

    --box-shadow: 2px 2px 10px 4px rgb(14 55 54 / 15%);
}
section { padding: 50px 100px; }
img { width: 100%; }
body { color: var(--text-color); }
.heading { text-align: center; }
    .heading h2 { font-size: 1.8rem; text-transform: uppercase; }

/*Header*/

header { 
    position: fixed; 
    width: 100%; 
    top: 0; 
    right: 0; 
    z-index: 1000; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 10px 100px; 
    transition: .5s linear; 
}
    header.shadow { background: var(--text-color); box-shadow: var(--box-shadow); }
.logo img { width: 60px; }
.navbar { display: flex; }
    .navbar a { padding: 8px 17px; color: var(--bg-color); font-size: 1rem; text-transform: uppercase; font-weight: 500; }
        .navbar a:hover { background: var(--main-color); border-radius: .2rem; transition: .2s all linear; }
.header-icon { font-size: 22px; cursor: pointer; z-index: 10000; display: flex; column-gap: .8rem; }
    .header-icon .bx { color: var(--bg-color); }
        .header-icon .bx:hover { color: var(--main-color); }
#menu-icon { color: var(--bg-color); font-size: 24px; z-index: 100001; cursor: pointer; display: none; }
.search-box { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); background: var(--bg-color); width: 100%; }
    .search-box.active { top: 110%; box-shadow: var(--box-shadow); transition: .4s; }
    .search-box input { padding: 20px; border: none; outline: none; width: 100%; font-size: 1rem; color: var(--main-color); }
        .search-box input::placeholder { font-size: 1rem; font-weight: 500; }

/*Home*/

.home {
    width: 100%;
    min-height: 100vh;
    background: url('https://i.postimg.cc/0NgSfBYM/bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, auto));
    align-items: center;
    gap: 1.5rem;
}
.home-text h1 { font-size: 3.4rem; color: var(--main-color); text-transform: uppercase; letter-spacing: 1px; }
.home-text p { font-size: .938rem; color: var(--bg-color); margin: 0.5rem 0 1.4rem; }
.btn { padding: 10px 40px; border-radius: .3rem; background: var(--main-color); color: var(--bg-color); font-weight: 500; transition: .4s; }
    .btn:hover { background: var(--main-color-hover); }

/*About*/

.about { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, auto)); align-items: center; gap: 1.5rem; }
.about-img img { border-radius: .5rem; }
.about-text h2 { font-size: 1.8rem; text-transform: uppercase; }
.about-text p { font-size: .938rem; margin: 0.5rem 0 1.1rem; }

/*Products*/

.products-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, auto)); gap: 1.5rem; margin-top: 2rem; }
    .products-container .box { position: relative; padding: 10px; display: flex; flex-direction: column; justify-content: center; border-radius: .5rem; box-shadow: var(--box-shadow); }
        .products-container .box h3 { font-size: 1rem; font-weight: 600; text-transform: uppercase; margin: 0.5rem 0 0.5rem; }
        .products-container .box .content { display: flex; align-items: center; justify-content: space-around; }
            .products-container .box .content span { padding: 0 1rem; color: var(--bg-color); background: var(--main-color); border-radius: 4px; font-weight: 500; }
            .products-container .box .content a { padding: 0 1rem; color: var(--text-color); border: 2px solid var(--main-color); border-radius: 4px; text-transform: uppercase; }
                .products-container .box .content a:hover { background: var(--main-color); color: var(--bg-color); transition: .4s all linear; }
    .products-container img { width: 100%; height: 250px; object-fit: contain; object-position: center; padding: 20px; background: var(--bg-color-alt); border-radius: .5rem; }

/*Customers*/

.customers-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, auto)); gap: 1.5rem; margin-top: 2rem; }
    .customers-container .box { padding: 20px; box-shadow: var(--box-shadow); border-radius: .5rem; text-align: center; }
        .customers-container .box p { font-size: .938rem; }
        .customers-container .box h2 { font-size: 1.2rem; font-weight: 600; margin: 0.5rem 0 0.5rem; }
        .customers-container .box img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; }
        .customers-container .box:hover { background: var(--second-color); transition: .4s all linear; }
.stars .bx { color: var(--main-color); }

/*Footer*/

.footer { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, auto)); gap: 1.5rem; }
.footer-box h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 10px; }
.footer-box p { font-size: .938rem; margin-bottom: 10px; }
.social { display: flex; align-items: center; column-gap: .5rem; }
    .social a .bx { font-size: 24px; color: var(--text-color); padding: 10px; background: var(--second-color); border-radius: .2rem; }
        .social a .bx:hover { background: var(--main-color); color: var(--bg-color); transition: .4s all linear; }
.footer-box li a { color: var(--text-color); }
    .footer-box li a:hover { color: var(--main-color); }
.contact { display: flex; flex-direction: column; row-gap: .5rem; }
    .contact span { display: flex; align-items: center; }
    .contact i { font-size: 20px; margin-right: 1rem; }

.copyright { padding: 20px; text-align: center; background: var(--second-color); }
    .copyright a { font-family: 'Turret Road', sans-serif; color: var(--text-color); transition: .4s all linear; font-weight: 600; }
        .copyright a:hover { color: var(--main-color); }

/*Media Queries*/

@media(max-width: 1058px) {
    header { padding: 16px 60px; }
    section { padding: 50px 60px; }
    .home-text h1 { font-size: 2.4rem; }
}

@media(max-width: 991px) {
    header { padding: 16px 4%; }
    section { padding: 50px 4%; }
    .home-text h1 { font-size: 2rem; }
}

@media(max-width: 768px) {
    header { padding: 12px 4%; }
    #menu-icon { display: initial; }
    .navbar { 
        position: absolute; 
        top: -570px; 
        left: 0; 
        right: 0; 
        display: flex; 
        flex-direction: column; 
        background: var(--second-color); 
        row-gap: 1.4rem; 
        padding: 20px; 
        transition: .4s; 
        text-align: center; 
    }
        .navbar a { color: var(--text-color); }
            .navbar a:hover { color: var(--bg-color); }
        .navbar.active { top: 100%; }
    .about { align-items: center; } 
}

@media(max-width: 568px) {
    .footer { place-items: center; text-align: center; }
    .social { justify-content: center; }
    .contact { align-items: center; justify-content: center; }
}

@media(max-width: 360px) {
    header { padding: 11px 4%; }
    .logo img { width: 45px; }
    .home-text { padding-top: 15px; }
        .home-text h1 { font-size: 1.4rem; }
        .home-text p { font-size: .8rem; font-weight: 300; }

    .about-img { order: 2; }
    .about-text { text-align: center; }
        .about-text h2 { font-size: 1.2rem; }
    .heading h2 { font-size: 1.2rem; }
}