/*350*/
@media (max-width: 1300px) {
    header nav .navbar-nav{
        background-color: black;
        text-align: center;
        padding: 10px;
        border-radius: 10px;
    }
    header button.navbar-toggler:focus{
    box-shadow: none;
}
    header nav.navbar .navbar-toggler{
        border: none;
        background-color: transparent;
        border: 1px solid #198754;
        width: 50px;
        height: 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding: 0;
        align-items: center;
        border-radius: 5px;
        transition-duration: .5s;
    }
    header button.navbar-toggler[aria-expanded="true"] {
    background-color: #fff;
}
    header nav .container button span{
        background-color: #198754;
        display: block;
        width: 50%;
        height: 2px;
    }
    header nav .container a.navbar-brand{
        width: 18%;
        }
    header nav .container a img{
        width: 100%;
        }
header #carouselExampleCaptions .carousel-inner .carousel-item.active .carousel-caption p{
    width: 100%;
}
#about .container .part2 .row .content .item {
    display: flex;
    justify-content: center;
}
#about .container .part2 .row .content .item .box {
min-width: 250px;
height: 450px;
    margin: auto;
}
#menu ul{
    width: max-content;
}
#menu .content{
    flex-wrap: wrap;
}
#menu .box{
    margin: auto;
    max-width: 280px;
}
#beans-coffee h2{
    font-size: 1.3rem;
}
#beans-coffee h3{
    font-size: 2rem;
}
 .modal .modal-content{
    width: 80%;    
}
#book h2{
    font-size: 2rem;
}
#book p.b{
    font-size: .7rem;
}
#book .content{
    flex-wrap: wrap;
}
#book .form{
    width: 100%;
    margin: auto;
}
#book .content1{
    width: 100%;
}
}

/*450*/
@media (min-width: 371px) and (max-width: 1300px) {
        header nav .container a.navbar-brand{
        width: 15%;
        }
        #about .container .part2 .row .content .item .box {
width: 250px;
height: 450px;
    margin: auto;
}
#services img{
    width: 75%;
    margin: auto;
    display: block;
}
#beans-coffee h2{
    font-size: 1.7rem;
}
#beans-coffee h3{
    font-size: 2.3rem;
}
#book h2{
    font-size: 2.5rem;
}
#book p.b{
    font-size: 1rem;
}
#book .form{
    width: 80%;
    margin: auto;
}
#book .box{
    margin-right: 50px;
    margin: auto;
}
}

/*650*/
@media (min-width: 577px) and (max-width: 1300px) {
    header nav .container a.navbar-brand{
        width: 14%;
        }
                #about .container .part2 .row .content .item .box {
min-width: 230px;
height: auto;
    margin: auto;
}
#beans-coffee h2{
    font-size: 2.5rem;
}
#beans-coffee h3{
    font-size: 2.5rem;
}
 .modal .modal-content{
    width: 70%;    
}
#book h2{
    font-size: 3rem;
}
#book .box{
    margin-right: 50px;
    margin: auto;
}
#book .form{
    max-width: 600px;
    margin: auto;
}

    }

/*850*/
@media (min-width: 769px) and (max-width: 1300px) {
        header nav .container a.navbar-brand{
        width: 10%;
        }
#services img{
    width: 50%;
    margin: auto;
    display: block;
}
#beans-coffee h2{
    font-size: 3rem;
}
#beans-coffee h3{
    font-size: 3.5rem;
}
 .modal .modal-content{
    width:60%;    
}

}

/*1050*/
@media (min-width: 992px) and (max-width: 1300px) {
header nav.navbar .navbar-toggler{
    display: none;
}
header nav .navbar-nav{
    background-color: transparent;
}
header nav .container a.navbar-brand{
    width: 7%;
    }
    header nav.navbar .navbar-toggler {
        display: none;
    }

    header nav .navbar-nav {
        background-color: transparent;
    }

    header nav .container a.navbar-brand {
        width: 7%;
    }
    #services img{
    width: initial;
    margin: auto;
    display: block;
}
#menu .table-responsive{
    width: max-content;
    margin: auto;
}
#beans-coffee h2{
    font-size: 3.5rem;
}
#book .box{
    margin-right: 50px;
    margin:0px ;
    margin: auto;
    margin-right: 30px;
}
}

/*large screens*/
@media (min-width: 992px) and (max-width: 1300px) {
    #about .container .part2 .row .content .item .box {
        width: 210px;
        min-width: 0;
        height: 350px;
        margin: auto;
    }

}
@media (min-width: 1181px) and (max-width: 1300px) {
}