@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}
html , body {
    line-height: 1.4;
    font-weight: 300;
    font-family:"Roboto", serif;
}
/* header section */
header {
    /* border:2px solid black; */
    width:100%;
    height:100px;
    box-shadow: 5px 5px 5px rgba(1, 1, 1, 0.05);
    position:sticky;
    top:0;
    z-index:5000;
    margin-bottom:32px;
    background-color:white;
}
.head {
    max-width:1200px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.menu1 {
    font-size:32px;
    align-self:center;
}

/* Main Section */
main {
    min-height:100vh;
}
.container {
    /* border:2px solid black; */
    max-width: 1200px;
    margin:0 auto;
}
.main1 {
    /* border:2px solid red; */
    max-width:100%;
    margin:0 auto;
    display:flex;
    gap:100px;
    align-items:center;
    margin-bottom:100px;
}
.content{
    display:flex;
    flex-direction:column;
    gap:20px;
}
.content h1 {
    font-size:70px;
    font-weight:normal;
    line-height:80px;
}
.content .tag {
    width:180px;
    background-color: #149f39;
    color:white;
    padding:5px;
    text-align: center;
}
.content .btn {
    width:110px;
    background-color: #ffc066;
    border-color:transparent;
    padding:10px;
    transition:all 0.2s ease-in-out;
}
.content .btn:hover {
    background-color: #eb9e32;
}
/* features - offers */
.offer {
    width:100%;
    margin-top:100px;
    margin-bottom:50px;
    /* border:2px solid red; */
    display:flex;
    justify-content:center;
    gap:20px;
}
.offer > div {
    display:flex;
    gap:20px;
    padding:20px;
    align-items:center;
    transition:all 0.2s ease-in-out;
}
.offer > div div h2 {
    font-size:18px;
}

.discount:hover ,.fresh:hover, .delivery:hover {
    transform: scale(1.04);
    box-shadow: 5px 5px 5px rgba(1, 1, 1, 0.05);
}
.divider {
    border: 1px solid #ccc;
    margin: 20px 0;
}
/* Menu Section */
.menu {
    width:100%;
    /* border:2px solid blue; */
    margin-top:50px;
    text-align:center;
}
.menu .tag  {
    background-color: #149f39;
    color:white;
    width:100px;
    height:30px;
    margin:0 auto;
    padding:3px;
    font-size:18px;
    text-align:center;
    margin-bottom:50px;
}
.menu h2 {
    font-size:25px;
    margin-bottom:50px;
}
/* grid - images */
.grid {
    /* min-height:900px; */
    /* max-width:1200px; */
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:repeat(3,1fr);
    grid-gap:10px;
    margin-bottom:40px;
    padding:10px;
}
.grid-items {
    border-radius:10px;
    /* max-height:100%;
    max-width:100%; */
    transition: 0.2s ease-in-out;
}
.grid-items img {
    border-radius:10px;
    height:100%;
    width:100%;
}
.grid .item1 {
    grid-column:1/span 2;
    grid-row:1/ span 2;
}
.grid .item2 {
    grid-row:1/span 2;
}
.grid .item7 {
    grid-row:2/ span 2;
}
.grid-items:hover {
    transform: scale(1.05);
}
/* Footer - section */
footer {
    background-color: #fff0db;
    min-height:210px;
    padding-top:30px;
}
.footer-items {
    max-width:1200px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    gap:20px;
}
.main-links h3, .support h3, .support-btn h3 {
    color:grey;
    margin-bottom:10px;
}
.main-links ul, .support ul, .support-btn ul {
    line-height:25px;
    list-style: none; /* Remove the dots of li items */  
} 
.support-btn input {
    width:250px;
    padding:5px;
    padding-left:30px;
    margin-bottom:10px;

}
.support-btn .icons {
    display:flex;
    gap:10px;
    font-size:30px;
}

.Owner {
    padding:10px;
    background-color:black;
    color:white;
    text-align: center;
} 

@media (max-width:885px) {
    .main1 {
        flex-wrap:wrap;
        justify-content: center;
    }
    .content{
        align-items:center;
    }
    .content h1 {
        font-size:50px;
    }
    .content p {
        max-width:700px;
        text-align: center;
    }
    .offer {
        flex-wrap:wrap;
    }
}

@media (max-width:750px) {
    .footer-items  {
        flex-direction:column;
        padding:30px;
    }
}

@media (max-width:640px) {
    .content h1 {
        font-size:40px;
    }
    .content p {
        max-width:500px;
        text-align: center;
    }
}
@media (max-width:530px) {
    .main-img img{
        max-width:400px;
    }
    .content h1 {
        font-size:40px;
    }
    .content p {
        max-width:500px;
        text-align: center;
    }
}

@media (max-width:465px) {
    .main-img img{
        max-width:350px;
    }
    .content h1 {
        font-size:30px;
    }
    .content p {
        max-width:400px;
    }
    .offer {
        max-width:400px;
        margin:0 auto;
    }
}
@media (max-width:380px) {
    .main-img img{
        max-width:300px;
    }
    .content h1 {
        font-size:25px;
    }
    .content p {
        max-width:350px;
    }
    .offer {
        max-width:350px;
        margin:0 auto;
    }
}