@import url('css2.css');

* { margin: 0; padding: 0; box-sizing: border-box; scroll-padding-top: 2rem; text-decoration: none; list-style: none; scroll-behavior: smooth; font-family: 'Poppins', sans-serif; }
    *::selection { color: var(--white-color); background: var(--main-color); }
:root {
    --main-color: #A07E36;
    --second-color: #1E3932;
    --white-color: #FFFFFF;
    --pearl-lusta-color: #EBDBC8;
    --black-color: #000000;
}
section { padding: 50px 10%; }
img { width: 100%; }
header { position: fixed; width: 100%; top: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; background: var(--white-color); 
        box-shadow: 0 4px 41px rgb(14 55 14 / 14%); padding: 15px 10%; transition: .2s; }
.logo { display: flex; align-items: center; }
    .logo img { width: 40px; }
.navbar { display: flex; }
    .navbar a { font-size: 1rem; padding: 11px 20px; color: var(--second-color); font-weight: 600; text-transform: uppercase; }
        .navbar a:hover { color: var(--main-color); }
#menu-icon { font-size: 24px; cursor: pointer; z-index: 101; display: none; }
.home { width: 100%; height: 100vh; display: flex; flex-wrap: wrap; align-items: center; background: var(--pearl-lusta-color); gap: 1rem; }
.home-img { flex: 1 1 17rem; }
    .home-img img { animation: animate 3s linear infinite; }
        @keyframes animate {
            0% { transform: translate(-11px, 0); }
            50% { transform: translate(0, -11px); }
            100% { transform: translate(-11px, 0); }
        }
.home-text { flex: 1 1 17rem; }
    .home-text span { font-size: 1rem; text-transform: uppercase; font-weight: 600; color: var(--second-color); }
    .home-text h1 { font-size: 3.2rem; color: var(--main-color); font-weight: bolder; }
    .home-text h2 { font-size: 1.8rem; font-weight: 600; color: var(--second-color); text-transform: uppercase; margin: 0.5rem 0 1.4rem; }
.btn { padding: 7px 16px; border: 2px solid var(--second-color); border-radius: 40px; color: var(--second-color); font-weight: 500; transition: .5s; }
    .btn:hover { color: var(--white-color); background: var(--second-color); }
.heading { text-align: center; text-transform: uppercase; }
    .heading span { font-size: 1rem; font-weight: 600; color: var(--second-color); }
    .heading h1 { font-size: 2rem; color: var(--main-color); }
.shop-container { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 5rem; }
    .shop-container .box { flex: 1 1 10rem; background: var(--main-color); padding: 20px; display: flex; text-align: center; flex-direction: column; align-items: center; margin-top: 3rem;     border-radius: .5rem; }
        .shop-container .box .box-img { width: 150px; height: 150px; margin-top: -100px; }
            .shop-container .box .box-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
        .shop-container .box .stars i { color: var(--pearl-lusta-color); }
            .stars { margin: 1rem 0 .1rem; }
        .shop-container .box h2 { color: var(--pearl-lusta-color); font-size: 1.2rem; }
        .shop-container .box span { color: var(--pearl-lusta-color); font-size: 1.4rem; font-weight: 500; margin: 0.2rem 0 0.5rem; }
.box .btn { border: 2px solid var(--pearl-lusta-color); color: var(--pearl-lusta-color); }
    .box .btn:hover { background: var(--pearl-lusta-color); color: var(--second-color); }
.container { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; }
.delivery-img, .app-img { flex: 1 1 21rem; }
.delivery-text, .app-text { flex: 1 1 21rem; }
    .delivery-text h2, .app-text h2 { font-size: 1.2rem; color: var(--second-color); }
    .delivery-text p, .app-text p { margin: 0.5rem 0 1rem; text-align: justify; }
.about { display: flex; flex-wrap: wrap; background: var(--pearl-lusta-color); gap: 1.5rem; }
.about-img { flex: 1 1 17rem; }
.about-text { flex: 1 1 17rem; }
    .about-text h2 { font-size: 1.2rem; color: var(--second-color); }
    .about-text p { margin: 0.5rem 0 1rem; text-align: justify; }
.contact { display: flex; flex-direction: column; align-items: center; }
.social a { font-size: 24px; margin: 0.5rem; }
    .social a i { padding: 7px; color: var(--white-color); background: var(--black-color); border-radius: 50%; transition: .5s; }
        .social a i:hover { background: var(--main-color); }
.links { margin: 1rem 0 1rem; }
    .links a { font-size: 1rem; font-weight: 500; color: var(--second-color); padding: 1rem; transition: .5s; }
        .links a:hover { color: var(--main-color); }
.contact p { text-align: center; }
    .contact p a { color: var(--second-color); font-family: 'Turret Road', sans-serif; transition: .5s; font-weight: 600; }
        .contact p a:hover { color: var(--main-color); }

/* Media Queries */
@media(max-width: 1150px) {
    header { padding: 18px 7%; }
    section { padding: 50px 7%; }
    .home-text h1 { font-size: 3rem; }
    .home-text h2 { font-size: 1.5rem; }
}

@media(max-width: 991px){
    header { padding: 18px 4%; }
    section { padding: 50px 4%; }
}

@media(max-width: 768px) {
    header { padding: 11px 4%; }
    #menu-icon { display: initial; }
        header .navbar {
            position: absolute;
            top: -500px;
            left: 0;
            right: 0;
            display: flex;
            flex-direction: column;
            background: var(--white-color);
            box-shadow: 0 4px 4px rgb(14 55 14 / 14%);
            border-top: 2px solid var(--main-color);
            transition: .5s;
            text-align: left;
        }
            .navbar.active { top: 100%; }
            .navbar a { padding: 1.5rem; display: block; color: var(--second-color); }
    .home-text span { font-size: .9rem; }
    .home-text h1 { font-size: 2.4rem; }
    .home-text h2 { font-size: 1.2rem; }
}

@media(max-width: 568px) {
    .home-text { padding-top: inherit; }
    .shop-container .box { margin-top: 6rem; }
    .heading h1 { font-size: 1.5rem; }
    .heading span { font-size: .9rem; }
    .about { flex-direction: column-reverse; }
    .links { display: flex; flex-direction: column; }
}