@font-face {
    font-family: 'myIcons';
    src: url('../fonts/myIconsRegular.eot');
    src: url('../fonts/myIconsRegular.eot?#iefix') format('embedded-opentype'),
		url('../fonts/myIconsRegular.woff2') format('woff2'),
        url('../fonts/myIconsRegular.woff') format('woff'),
        url('../fonts/myIconsRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@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');

* { 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: #f0d164;
    --second-color: #b98d26;
    --white-color: #FFFFFF;
    --pearl-lusta-color: #EBDBC8;
    --black-color: #000000;
	--lightgray-color: #e6e6e6;
	--gray-color: #868686;
}
html,body {
	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;background: var(--black-color); }
section { padding: 50px 15%; }
img { width: 100%; }
p { font-size: 1.3rem; font-weight: 300; }
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);
    padding: 15px 15%;
    transition: .2s;
    border-bottom: 2px solid rgba(230,230,230,1.00);
}
.logo { display: flex; align-items: center; }
    .logo img { width: 60px; }
.navbar { display: flex; }
    .navbar a { font-size: 0.9rem; padding: 11px 20px; color: var(--black-color); font-weight: 600; text-transform: uppercase; }
        .navbar a:hover { color: var(--main-color); }
#menu-icon {
    font-size: 34px;
    cursor: pointer;
    z-index: 101;
    display: none;
}
.home {
    width: 100%;
    min-height: 100vh;
	height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../img/bg_home.jpg);
}
.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; color: var(--gray-color);text-align: justify;}
    .home-text span { font-size: 1rem; text-transform: uppercase; font-weight: 600; color: var(--second-color); }
    .home-text h1 { font-size: 10.2rem; color: var(--main-color); font-weight: bolder; }
    .home-text h2 { font-size: 2.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; margin-top: 2rem;}
    .heading span { font-size: 1rem; font-weight: 600; color: var(--second-color); }
    .heading h1 { font-size: 2rem; color: var(--main-color); }
.shop { border-top: 1px solid rgba(40,40,40,1.00);}
.shop-container { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 5rem;}
    .shop-container .box {
		flex: 1 1 10rem; 
		background: rgba(240, 209, 100, 1.0);
		background: linear-gradient(180deg, rgba(240, 209, 100, 1.0), rgba(185, 141, 39, 1.0));
		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(--white-color);
    font-size: 1.4rem;
    font-family: 'myIcons' !important;
    font-variant: normal;
    font-style: normal;
}
            .stars { margin: 1rem 0 .1rem; }
        .shop-container .box h2 { color: var(--white-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; }
.app {
    background-color: rgba(0,0,0,1.00); border-top: 1px solid rgba(40,40,40,1.00);
}
.delivery-img, .app-img { flex: 1 1 21rem; }
.app-img img{ border-radius: 1rem;}
.delivery-text, .app-text { flex: 1 1 21rem; padding-right: 5rem;}
    .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;color: var(--gray-color); }
.about { display: flex; flex-wrap: wrap; background: var(--pearl-lusta-color); gap: 1.5rem; }
.about-img { flex: 1 1 17rem; }
.about-img img{ border-radius: .5rem;}
.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;
	border-top: 1px solid rgba(40,40,40,1.00);
	background-color: rgba(0,0,0,1.00);
}
.social a { font-size: 24px; margin: 0.5rem; }
    .social a i { padding: 7px; color: var(--black-color); background: var(--second-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; color: var(--gray-color); font-weight: 300; font-size: 1rem;}
    .contact p a { color: var(--second-color); transition: .5s; font-weight: 300; }
        .contact p a:hover { color: var(--main-color); }

/* Media Queries */
@media(max-width: 1150px) {
    header { padding: 8px 7%; }
	section { padding: 50px 7%; }
	.home-img { padding-top: 5rem;padding-bottom: 0rem;}
	.home-text { padding-top: 0;}
	.home-text h1 { font-size: 3rem; }
    .home-text h2 { font-size: 1.5rem; }
	p {
    font-size: 1.0rem;
    padding-bottom: 1rem;
}
	.contact p { padding-bottom: 0rem;}
	.delivery-text, .app-text { padding-right: 0rem;}
}

@media(max-width: 991px){
    header { padding: 8px 4%; }
	.home-img { padding-top: 5rem;padding-bottom: 0rem;}
	.home-text { padding-top: 0;}
    section { padding: 50px 7%; }
	p {
    font-size: 1.0rem;
    padding-bottom: 1rem;
}
	.contact p { padding-bottom: 0rem;}
	.delivery-text, .app-text { padding-right: 0rem;}
}

@media(max-width: 768px) {
    header { padding: 4px 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(--lightgray-color);
            transition: .5s;
            text-align: left;
        }
            .navbar.active { top: 100%; }
            .navbar a { padding: 1.5rem; display: block; color: var(--black-color); }
	.home-img { padding-top: 5rem;padding-bottom: 0rem;}
	.home-text { padding-top: 0;}
    .home-text span { font-size: .9rem; }
    .home-text h1 { font-size: 2.4rem; }
    .home-text h2 { font-size: 1.2rem; }
	 p {
    font-size: 1.0rem;
    padding-bottom: 1rem;
}
	.contact p { padding-bottom: 0rem;}
	.delivery-text, .app-text { padding-right: 0rem;}
}

@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; }
}