* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box !important;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: 0.5s;
    animation: animation ease 1s;

}

html {
    scroll-behavior: smooth;
}

.space {
    height: 15vh;

}

.main {
    width: 100%;
    height: 100vh;
    background-color: #362222;
    border-top: 0.3em solid white;
    border-right: 0.3em solid white;
    border-left: 0.3em solid white;
    border-radius: 0.3em;
}


.main .nav {
    width: 80%;
    background-color: transparent;
    backdrop-filter: brightness(70%);
    border-radius: 1em;
    color: white;
    justify-content: space-around;
}

.main .nav .image-brand {
    filter: brightness(0) invert(1);
}

.main .nav .right-text .Content-stop {
    color: rgb(160, 164, 164);
}

.main .nav a:hover {
    transform: scale(1.2);
    color: rgb(215, 216, 216);
}


.main .cover {
    height: 65vh;
    width: 75%;
    background-color: transparent;
    backdrop-filter: brightness(70%);
    border-radius: 1em;
    color: white;
}

.main .big-cover .cover .text-cover {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1em;
    animation: animation ease 1.5s;

}

.main .big-cover .cover .image-cover img {
    border-radius: 1em;
    transition: 0.3s;
    animation: animation ease 2s;

}

.main .big-cover .cover .image-cover img:hover {
    transform: scale(0.9);
}

.main .big-cover .cover .text-cover .button-cover .story-button {
    background-color: transparent;
    padding: 0.8em 1.8em;
    border-radius: 1.4em;
    font-weight: bold;
    transition: 0.3s;
}

.main .big-cover .cover .text-cover .button-cover .story-button:hover {
    background-color: #423F3F;
}

.main .big-cover .cover .text-cover .button-cover .menu-button {
    background-color: #876305;
    padding: 0.8em 1.8em;
    border-radius: 1.4em;
    font-weight: bold;
    transition: 0.3s;
}

.main .big-cover .cover .text-cover .button-cover .menu-button:hover {
    background-color: #423F3F;
}

.section-about {
    width: 100%;
    background-color: #423F3F;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 0.3em solid white;
    border-left: 0.3em solid white;
    padding: 1em;

}

.section-about .photo-about {
    width: 40%;
    padding: 1.5em;
}

.section-about .photo-about img {
    border-radius: 0.5em;
    transition: 0.3s;

}

.section-about .text-about {
    width: 60%;
    max-width: 28%;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.section-about .photo-about img:hover {
    transform: scale(0.9);
}

.section-about .text-about h1 {
    color: white;
    font-weight: bold;
    font-size: 3.5em;
}

.section-about .text-about p {
    color: white;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.section-about .text-about span {
    color: #876305;
}

.section-about .text-about a {
    background-color: transparent;
    padding: 0.8em 1.8em;
    border-radius: 1.8em;
    transition: 0.3s;
    border: 0.1em solid white;
    text-align: center;
    font-weight: bold;
}

.section-about .text-about a:hover {
    color: #876305;
    background-color: white;
}

.section-cheifs {
    width: 100%;
    background-color: #DDA15E;
    border-right: 0.3em solid white;
    border-left: 0.3em solid white;
    padding: 1em;
}

.section-cheifs .the-cheif {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-cheifs .text-photo {
    width: 80%;
    max-width: 50%;
    text-align: center;
    color: white;
}

.section-cheifs .image-cheif {
    width: 60%;
    display: flex;
    justify-content: center !important;
    align-items: center;
}

.section-cheifs .image-cheif img {
    border-radius: 0.8em;
    transition: 0.3s;
    filter: grayscale(0%);

}

.section-cheifs .image-cheif img:hover {
    transform: scale(0.9);
    filter: grayscale(100%);
}

.section-menu {
    width: 100%;
    height: 100vh;
    background-image: url(../media/happy-waitress-giving-coffee-customers-while-serving-them-coffee-shop.jpg);
    background-size: cover;
    background-position: center;
    color: white;
    border-right: 0.3em solid white;
    border-left: 0.3em solid white;
}

.section-menu .Breakfast-menu,
.coffee-menu {
    width: 40%;
    height: 90vh;
    background-color: transparent;
    backdrop-filter: brightness(50%);
    border-radius: 1.5em;
    padding: 2em;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.section-menu .Breakfast-menu .title-breakfast-menu,
.title-coffee-menu {
    text-align: center;
    font-weight: bold;
}

.section-menu .Breakfast-menu .title-breakfast-menu h6,
h1,
.title-coffee-menu h6,
.title-coffee-menu h1 {
    margin-bottom: 0em;
    font-weight: bold;
}

.section-menu .Breakfast-menu .the-menu .line,
.section-menu .coffee-menu .line {
    width: 100%;
    height: 0.1em;
    background-color: rgba(255, 255, 255, 0.35);
}

.section-menu .Breakfast-menu .the-menu p,
.section-menu .coffee-menu .the-menu p {
    color: rgba(255, 255, 255, 0.35);

}

.section-menu .Breakfast-menu .the-menu .section-title-price h4,
.section-menu .coffee-menu .section-title-price h4 {
    color: #98700b;
    font-family: sans-serif;
}

.section-menu .Breakfast-menu .the-menu .section-title-price h3 span,
.coffee-menu .section-title-price h3 span {
    font-size: 0.6em;
    text-align: center;
    background-color: #9b720b;
    padding: 0.2em;
    border-radius: 4em 0.4em 0.4em 4em;
}

.section-menu a {
    background-color: transparent;
    padding: 0.4em 1em;
    border-radius: 1.8em;
    transition: 0.3s;
    border: 0.1em solid white;
    text-align: center;
    font-weight: bold;
    width: 30%;

}

.section-menu a:hover {
    color: #876305;
    background-color: white;
}

.section-reviews {
    background-color: #362222;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    gap: 2em;
    border-right: 0.3em solid white;
    border-left: 0.3em solid white;
}

.section-reviews h1,
.section-reviews h6 {
    color: white;
    margin: 0em !important;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    font-family: sans-serif;
}

.section-reviews .review {
    width: 30%;
}

.Sixth-section {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 4em;
    background-color: #423F3F;
    border-right: 0.3em solid white;
    border-left: 0.3em solid white;
}

.Sixth-section .left {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.Sixth-section .left h2 {
    color: #DDA15E;
    letter-spacing: 0.1em;
    font-weight: bold;
}

.Sixth-section .left .social i {
    font-size: 2em;
    color: #362222;
    transition: 0.3s;

}

.Sixth-section .right {
    width: 40%;
}

.Sixth-section .left .social i:hover {
    color: #98700b;
    transform: scale(1.1);
}

.section-contact-us h1 {
    color: #DDA15E;
    font-weight: bold;
    font-family: sans-serif;
}

.section-contact-us a {
    background-color: #DDA15E;
    padding: 0.8em 1.8em;
    border-radius: 0.5em;
    transition: 0.3s;
    border: 0.1em solid #DDA15E;
    text-align: center;
    font-weight: bold;
    width: 40%;
}

.section-contact-us .inputs {
    flex-direction: column;
}

.section-contact-us {
    background-color: #362222;
    border-left: 0.3em solid white;
    border-right: 0.3em solid white;
    border-bottom: 0.3em solid white;

}

.section-contact-us a:hover {
    color: #876305;
    background-color: white;
}

.section-contact-us input {
    padding: 0.8em 1em;
    border-radius: 1em;
    border: 0.1em solid #DDA15E;
    font-weight: bold;
}

.section-contact-us .right {
    flex-direction: column;
    padding: 1em;
    font-weight: bold;
    font-family: sans-serif;
    color: #DDA15E;
    font-size: 1em;
}

.section-contact-us .right h2 {
    font-weight: bold;
    font-family: sans-serif;
    color: white;
    font-size: 1.5em;
}







@media (max-width: 599px) {
    .main .nav {
        width: 100%;
        padding: 0.3em !important;
        gap: 0.5em;
    }

    .main .nav .left-text {
        gap: 0.2em !important;
        align-items: center;
        justify-content: center;
    }

    .main .nav .left-text h3 {
        font-size: 1.3em;
        margin-bottom: 0em;
    }

    .main .nav .left-text .image-brand {
        width: 10%;
    }

    .main .nav .right-text {
        gap: 0.8em !important;
    }

    .main .nav .right-text a {
        font-size: 1em;
    }

    .main .cover {
        flex-direction: column;
        width: 90%;
        gap: 0.5em;
    }

    .main .big-cover .cover .image-cover {
        width: 80% !important;
    }

    .main .big-cover .cover .text-cover .button-cover .story-button,
    .menu-button {
        padding: 0.5em 1.8em;

    }

    .main .big-cover .cover .text-cover {
        gap: 0.5em;
    }

    .section-about {
        flex-direction: column;
        gap: 1em;
    }

    .section-about .photo-about {
        width: 80%;
    }

    .section-about .photo-about img {
        width: 100%;
    }

    .section-about .text-about {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .section-cheifs .the-cheif {
        width: 70%;
    }

    .section-cheifs .photos-cheifs {
        flex-direction: column;
        gap: 2em;
    }

    .section-cheifs .image-cheif {
        width: 100%;
    }

    .section-cheifs .text-photo {
        width: 100%;
        max-width: 100%;
    }

    .section-menu {
        flex-direction: column;
        height: auto;
        padding-top: 2em;

    }

    .section-menu .Breakfast-menu,
    .coffee-menu {
        width: 95%;
        height: auto;
    }

    .section-menu a {
        width: auto;
    }

    .reviews {
        flex-direction: column;
        gap: 2em;
    }

    .section-reviews .review {
        width: 80%;
    }

    .Sixth-section {
        flex-direction: column;
        gap: 3em;
    }

    .Sixth-section .right {
        width: 90%;
    }

    .Sixth-section .right iframe {
        width: 100%;
        height: 40vh;
    }

    .section-contact-us {
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }

    .section-contact-us .right {
        text-align: center;
    }

    .section-contact-us .inputs {
        justify-content: center;
        align-items: center;
    }

    .inputs .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1em;
    }

    .section-contact-us .inputs a {
        width: auto;
    }


}

@media (min-width: 600px) and (max-width: 1023px) {
    .main .nav {
        width: 100%;
        gap: 1.5em;

    }

    .main .nav .left-text {
        gap: 0.2em !important;
        align-items: center;
        justify-content: center;
    }

    .main .nav .left-text h3 {
        font-size: 1.3em;
        margin-bottom: 0em;
    }

    .main .nav .left-text .image-brand {
        width: 10%;
    }

    .main .nav .right-text {
        gap: 0.8em !important;
    }

    .main .nav .right-text a {
        font-size: 1em;
    }

    .main .cover {
        width: 95%;
        gap: 0.2em;
        justify-content: center !important;
        flex-direction: column;
        gap: 2em;
    }

    .main .big-cover .cover .image-cover {
        width: 60% !important;
    }

    .main .big-cover .cover .text-cover .button-cover .story-button,
    .menu-button {
        padding: 0.5em 1.8em;

    }

    .main .big-cover .cover .text-cover {
        gap: 0.5em;
    }

    .section-about {
        flex-direction: column;
        gap: 1em;
    }

    .section-about .photo-about {
        width: 80%;
    }

    .section-about .photo-about img {
        width: 100%;
    }

    .section-about .text-about {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .section-cheifs .the-cheif {
        width: 70%;
    }

    .section-cheifs .photos-cheifs {
        flex-direction: column;
        gap: 2em;
    }

    .section-cheifs .image-cheif {
        width: 100%;
    }

    .section-cheifs .text-photo {
        width: 100%;
        max-width: 100%;
    }

    .section-menu {
        flex-direction: column;
        height: auto;
        padding-top: 2em;

    }

    .section-menu .Breakfast-menu,
    .coffee-menu {
        width: 90%;
        height: auto;
    }

    .section-menu a {
        width: auto;
    }

    .reviews {
        flex-direction: column;
        gap: 2em;
    }

    .section-reviews .review {
        width: 90%;
    }

    .Sixth-section {
        flex-direction: column;
        gap: 3em;
    }

    .Sixth-section .right {
        width: 80%;
    }

    .Sixth-section {
        flex-direction: column;
        gap: 3em;
    }

    .Sixth-section .right {
        width: 80%;
    }

    .section-contact-us {
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }

    .section-contact-us .right {
        text-align: center;
    }

    .section-contact-us .inputs {
        justify-content: center;
        align-items: center;
    }

    .inputs .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1em;
    }

    .section-contact-us .inputs a {
        width: auto;
    }
}
@keyframes animation {
    0% {
        opacity: .3;
        margin-left: 4em;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;

    }
}