/* CSS Reset */
body, html{
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
}

@font-face {
    font-family: 'lt-glockenspiel-black';
    src: url('fonts/lt-glockenspiel-black.woff2') format('woff2'),
         url('fonts/lt-glockenspiel-black.woff') format('woff'),
         url('fonts/lt-glockenspiel-black.ttf')  format('truetype');
  }

.shipping h1{
    text-align: center;
    font-size: 30pt;
    padding: 0;
    margin-bottom: 0;
}

.shipping h2{
    font-weight: 500;
    padding: 0;
    margin-top: .5em;
    text-align: center;
}

.shipping{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

nav ul{
    display: flex;
    list-style-type: none;
    gap: 4em;
    margin: 0;
    padding: 0;
    padding-left: 1em;
    padding-right: 1em;
    justify-content: space-between;
    align-items: center;
}

nav a{
    font-size: 20pt;
    text-decoration: none;
    color: black;
}

.footer-holder{
    display: flex;
    justify-content: space-between;
}

footer h1{
    margin: 0;
    padding: .5em;
    
}

footer h2{
    margin: 0;
    padding: .5em;
    font-size: 15pt;
}

footer h1, footer h2{
    margin-left: 1em;
}

footer ul{
    display: flex;
    gap: 1em;
    list-style-type: none;
    font-size: xx-large;
    justify-content: right;
    padding-right: 1em;
}


.home-front{
    display: flex;
    height: 70vh;
}

.matcha-holder{
    /* background-color: red; */
    background-image:url(images/mainBg.png) ;
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    width: 100%;
    padding-left: 45%;
    padding-top: 8em;
}

.matcha-holder h1{
    font-size: 50pt;
    font-family: 'lt-glockenspiel-black', sans-serif;
    color: green;
    margin: 0;
    padding: 0;
}

.matcha-holder h2{
    font-size: 16pt;
    font-weight: 400;
    margin: 0;
    padding: 0;
    margin: 0;
    margin-top: .5em;
    margin-bottom: 1.5em;
}

.matcha-holder a{
    background-color: green;
    margin-top: 300px;
    padding: .5em;
    border-radius: 5px;
    font-size: 16pt;
    text-decoration: none;
    color: white;

}

.home-image img{
     max-width: 100%;
     height: auto;
}

.product{
    display: flex;
    height: calc(fit-content + 3em);
    background-color: #f0f9f0;
    margin-top: 2em;
    align-items: center;
    justify-content: space-around;
    
}

.experience h1{
    font-size: 20pt;
    font-weight: 200;
    margin: 0;
    color: rgba(24, 65, 14, 1);
}
.experience h2{
    font-size: 80pt; font-family: 'lt-glockenspiel-black', sans-serif;
    color: green;
    margin: 0;
}


.individual-benefit{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
}

.individual-benefit p{
    text-align: center;
    font-size: x-large;
    color: green;
}

.product a{
    color: green;
    text-decoration: none;
}


ul img{
    height: 70px;
}


.benefits h1{
    text-align: center;
    font-size: 30pt;
}

.benefits-holder{
    display: flex;
    justify-content: space-around;
}

.individual-benefit{
    width: 15em;
    height: 15em;
}

.satisfaction{
    background-image: url(images/satifaction.png);
    background-position: right center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 20em;
    margin-top: 1em;

}

.satisfaction h1{
    /* margin: em; */
    padding: 1em;
    font-size: 25pt;
    color: green;
}

.satisfaction p{
    font-size: 15pt;
    max-width: 25em;
    padding-left: 3em;
    color: rgb(65, 131, 65);
}

.top{
    background-image: url(images/aboutUsHeading.jpg);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 70vh;
}

.top h1{
    color: white;
    font-size: 80pt;
    text-align: center;
    padding: 0;
    margin: 0;
    padding-top: 2em;
}

.top h2{
    color: white;
    font-size: 20pt;
    text-align: center;
    font-weight: 200;
    
}

.our-story h1{
    text-align: center;
    font-size: 30pt;
}

.two-block-holder{
    display: flex;
}

.info-holder{
    width: 50%;
}


.picture-holder{
    background-repeat: no-repeat;
    background-size: cover;
    width: 50%;
    height: 30em;
}

.pic1{
    background-image: url(images/founded.jpg);
    background-position: top center;
}

.pic2{
    background-image: url(images/sustainability.jpg);
    background-position: center center;
}

.info-holder h2{
    font-size: 20pt;
    text-align: center;
}

.info-holder h3, .info-holder p{
    padding-left: 4em;
    padding-right: 4em;
}


.navigation-items{
    display: inline;
}

.hamburger-menu{
    display: none;
    font-size: 30pt;
}
.hamburger-menu:hover{
    cursor: pointer;
}


.hamburger-menu-items{
    display: none;
}

.hamburger-menu-items ul{
    flex-direction: column;
}

.ham-items{
    display: none;
    text-align: center;
    align-items: center;
    flex-direction: column;
}


@media  (max-width: 900px) and (min-width:730px){
    .satisfaction p{
        max-width: 16em;
    }
 }

@media screen and (max-width: 830px) {
   .matcha-holder{
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
   }

   .matcha-holder{
    text-align: center;
    padding-bottom: 13em;
   }

   .two-block-holder{
    flex-direction: column;
   }
   .info-holder{
    width: 100%;
   }
   .picture-holder{
    width: 100%;
   }
   .second-block{
    flex-direction: column-reverse;
   }
}

@media screen and (max-width: 730px) {
    .benefits-holder{
        flex-direction: column;
        align-items: center;
        gap: 1em;
    }
    .product{
        flex-direction: column;
    }
    .satisfaction{
        background-image: url(images/satifaction_NEW.png);
        height: 40em;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .satisfaction h1{
        margin: 0;
        padding: 0;
        padding-top: 1em;
    }

}

@media screen and (max-width: 650px) {
    .footer-holder{
        flex-direction: column;
    }
    footer ul{
        justify-content: right;
        padding-right: 1em;
    }
}

@media screen and (max-width: 625px) {
    .navigation-items{
        display: none;
    }
    
    .hamburger-menu{
        display: inline;
    }
    .hamburger-menu-items{
        display: inline;
    }
    nav ul{
        gap: 2em;
        padding-bottom: 1em;
    }
    nav li{
        width: 65px;
        text-align: center;
    }

    .product h1, .product h2{
        text-align: center;
    }
}

@media screen and (max-width: 463px) {
    .satisfaction h1{
        text-align: center;
    }

    footer h2{
        font-size: 12pt;
    }
    
}

@media screen and (max-width: 450px) {
    .info-holder h3, .info-holder p{
        padding-left: 1em;
        padding-right: 1em;
    }
}

@media screen and (max-width: 400px) {
    .product h1{
        font-size: 15pt;
    }
    .product h2{
        font-size: 30pt;
    }
    .top h1{
        font-size: 40pt;
    }
    .top{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 50vh;
    }
}
@media screen and (max-width: 335px) {
    
    .top h2{
        font-size: 10pt;
    }
    
}