@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500&family=Poppins:wght@600&family=Raleway:wght@600&family=Roboto+Slab:wght@600&display=swap');
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* Navbar Start */
.navbar {
    background-color: #57210a;
    position : fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
}

.logo-coffee {
    width: 60px;
    height: 60px;
}

.brand {
    font-size: x-large;
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-weight: 600;
    color:#1a0d08;
}

.menu {
    font-weight: 700;
    font-size:24px;
    font-family: 'Raleway', sans-serif;
}

.navbar .navigasi ul li {
    margin-top:4px ;
}

.navbar .navigasi ul li a::after {
    content: '';
    display: block;
    padding-bottom: 0.2rem;
    border-bottom: 0.2rem solid #875012;
    transform: scaleX(0);
    transition: 0.2s linear;
}

.navbar .navigasi ul li a:hover::after {
    transform: scaleX(0.3);
}

.navigation-bar {
    color: white;
}

.navigation-bar:hover {
    color: #875012;
    transition: .3s;
}

.search {
    background-color: blue;
    color: white;
}

.search:hover {
    background-color: rgb(1, 1, 288);
    color: white;
    border: none;
}

.search:hover {
    border: none;
}
/* Navbar End */

/* main-content landing page start */
.main-content {
    min-height: 100vh;
    background:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(../img/Best\ Coffee\ in\ Atlanta\ \(Atlanta\ City\ Guide\).jpg);
    background-size: cover;
    background-position: center;
}

.text-main-content {
    margin-top: 40px;
}

.text-main-content h1 {
    font-weight:bold ;
    font-size: 3.1rem;
}

.text-main-content h1 span {
    color:#682d08;
    font-style: italic;
}

.text-main-content p {
    font-weight:bold;
    font-size: 1.5rem;
}

.order {
    position: relative;
    background-color: blue;
}

.order:hover {
    background-color: rgb(1, 1, 208);
}

.modal-content {
    background-color: #250202;
    color: white;
}

.tutup {
    background-color: red;
    color: white;
}

.reason {
    height: 60vh;
    background-color: #57210a;;
}

.deskription {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(../img/background\ 5.jpg);
    background-size: cover;
    background-position: center;
}

.deskription h1{
    font-size: 2rem;
}

.card-body {
    background-color:#421707;
    color: white;
}

.products {
    height: 105vh;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(../img/bgbrownlastjpg.jpg);
    background-size: cover;
    background-position: center;
}

.picture {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(../img/background2.jpg);
    background-size: cover;
    background-position: top;

}

.customer {
    background:linear-gradient(rgba(252, 220, 220, 0.14),rgba(252, 220, 220, 0.14)), url(../img/background4.jpg);
    background-size: cover;
    background-position: center;
}

.contact {
    background-color: #706860;
}

.sosmed {
    color: #57210a;
    font-weight: bolder;
}

.reviewCustomer {
    height: 680px;
    background:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(../img/bgdark2.jpeg);
    background-size: cover;
    background-position:bottom;
    display: flex;
    align-items: center;
}

.reviewCustomer h2 {
    color: white;
    text-align: center;
}

.rowCustomer {
    height: 500px;
}

.map {
    width:100%;
    height: 100%;
}

.mapp {
    background-color: red;
    margin: 0;
    padding: 0;
   
}

.dataCustomer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url(img/bgdark3.jpeg);
    background-size: cover;
    background-position:center;
}

.tes .row form .input-group {
    display: flex;
    align-items: center;
    background-color: black;
    border: 1px solid white;
    padding-left: 2rem;
    height:60px;
    margin-bottom: 2rem;
}

.dataCustomer .input-group input {
    background: none;
    border: none;
    padding-left: 20px;
    width: 570px;
    height: 60px;
    border: none;
    list-style-type: none;
}

.dataCustomer .input-group input:hover {
    border: 1px solid brown;
}

@media only screen and (max-width:992px) {

nav .navigasi ul li a::after {
    transform-origin:0 0 ;
}    


.text-main-content h1 {
    font-size: 1.8rem;
}

.order {
    padding: 4px 10px;
    top:12px;
}

.text-main-content {
    margin-top: 4rem;
}
}