body {
                background-color: #eadabf;
                position: relative;
                overflow-y: scroll;
            }
            
            @font-face {
                font-family: worksans;
                src: url('../fonts/WorkSans-VariableFont_wght.ttf');
            }
            
            p,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                font-family: worksans, Verdana, Geneva, Tahoma, sans-serif;
            }
            
            section h1,
            section h4 {
                color: #211002;
            }
            
            .bright {
                color: #957759;
            }
            
            .navbar {
                background-color: #f5edce;
                width: 100%;
                display: flex;
                justify-content: space-between;
                padding: .5rem 2rem;
                box-shadow: 0 1px 10px 2px #957759;
                z-index: 10000;
            }
            
            .navbar-dark .navbar-nav .nav-link,
            .navbar-dark .navbar-brand {
                color: #957759;
                font-weight: bold;
                padding: 1.2rem;
                font-size: 1.2rem;
                transition: color cubic-bezier(0.55, 0.085, 0.68, 0.53) .5s;
            }
            
            .navbar-dark .navbar-nav .nav-link.active,
            .navbar-dark .navbar-nav .nav-link:focus,
            .navbar-dark .navbar-nav .nav-link:hover {
                color: #ffbe57!important;
            }
            
            .banner {
                background-image: url(../img/kisspng-coffee-ristretto-cappuccino-espresso-urbana-pouring-coffee-beans-5aa23599b5b084.4003976615205799937442.png);
                background-repeat: no-repeat;
                width: 100%;
                height: 100vh;
                min-height: 280px;
                background-position: left center;
                text-align: center;
                position: relative;
                display: block;
                background-size: 100%;
                overflow: hidden;
            }
            
            .banner::before {
                background-color: rgb(0 0 0 / 10%);
                content: '';
                display: block;
                height: 100%;
                position: absolute;
                width: 100%;
            }
            
            .row {
                margin-right: 0;
                margin-left: 0;
            }
            
            .explain .h4 {
                margin-left: 50%;
            }
            
            .explain .text {
                margin-top: 1.5rem;
            }
            
            .explain .text p {
                line-height: 30px;
            }
            
            .explain .btn {
                width: 50%;
                min-width: 50%;
                max-width: 250px;
                display: block;
                background: none;
                color: #211002;
                border: 3px solid #957759;
                position: relative;
                z-index: 1;
                -webkit-backface-visibility: hidden;
                -moz-osx-font-smoothing: grayscale;
            }
            
            .explain button:focus {
                border: none;
                outline: none;
            }
            
            .animated {
                overflow: hidden;
                width: 50%px;
                -webkit-transition: border-color 0.3s, color 0.3s;
                transition: border-color 0.3s, color 0.3s;
                -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
                transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
            }
            
            .animated::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 150%;
                height: 100%;
                background-color: #d5aa87;
                z-index: -1;
                -webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
                transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
                -webkit-transform-origin: 0% 100%;
                transform-origin: 0% 100%;
                -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, background-color 0.3s;
                transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
            }
            
            .animated:hover::before {
                opacity: 1;
                -webkit-transform: rotate3d(0, 0, 1, 0deg);
                transform: rotate3d(0, 0, 1, 0deg);
                -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
                transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
            }
            
            @media (max-width: 991px) {
                .banner::before {
                    background-color: rgb(0 0 0 / 50%);
                }
                .explain .text p,
                .explain .h4,
                .explain h1,
                .explain .btn {
                    color: #f5edce;
                }
            }
            /*------ service section---- */
            
            .services {
                padding-top: 50px;
            }
            
            .services p {
                line-height: 2rem;
            }
            
            .services img.img-fluid {
                height: 150px;
            }
            
            .gallery .first {
                margin-bottom: 0;
            }
            
            .gallery .column {
                margin-bottom: 5px;
                padding: 5px;
                overflow: hidden;
            }
            
            .gallery .column img {
                height: 300px;
                object-fit: cover;
                transition: all 1.4s ease-in-out;
            }
            
            .gallery .column:hover img {
                transform: scale(1.21);
            }
            /* modal gallery */
            
            .modal-content {
                background-color: transparent;
            }
            
            .modal-header {
                border: none;
            }
            
            .modal-header .close {
                color: #fff;
                font-size: 4.4rem;
                opacity: .8;
                position: absolute;
                top: -10px;
                right: -10%;
            }
            
            .modal-header .close:focus {
                border: none;
                outline: none;
            }
            
            .modal-content #pics .carousel-item img {
                height: 300px;
            }
            
            #gallery .carousel-control-next {
                right: -70px;
            }
            
            #gallery .carousel-control-prev {
                left: -70px;
            }
            
            .modal-backdrop.show {
                opacity: .97;
            }
            
            .menu p,
            .menu h6 {
                color: #957759;
            }
            
            .menu-detail {
                height: 160px;
            }
            
            .shop .carousel-inner .carousel-item.active,
            .shop .carousel-inner .carousel-item-next,
            .shop .carousel-inner .carousel-item-prev {
                display: flex;
            }
            
            .shop .carousel-inner .carousel-item-right.active,
            .shop .carousel-inner .carousel-item-next {
                transform: translateX(50%);
            }
            
            .shop .carousel-inner .carousel-item-left.active,
            .shop .carousel-inner .carousel-item-prev {
                transform: translateX(-50%);
            }
            
            @media (min-width: 768px) and (max-width: 992px) {
                .shop .carousel-inner .carousel-item-right.active,
                .shop .carousel-inner .carousel-item-next {
                    transform: translateX(33.33%);
                }
                .shop .carousel-inner .carousel-item-left.active,
                .shop .carousel-inner .carousel-item-prev {
                    transform: translateX(-33.33%);
                }
            }
            
            @media (min-width: 992px) and (max-width: 1200px) {
                .shop .carousel-inner .carousel-item-right.active,
                .shop .carousel-inner .carousel-item-next {
                    transform: translateX(25%);
                }
                .shop .carousel-inner .carousel-item-left.active,
                .shop .carousel-inner .carousel-item-prev {
                    transform: translateX(-25%);
                }
            }
            
            @media (min-width: 1200px) {
                /* .shop .carousel-inner.shop .carousel-item-right.active,
    .shop .carousel-inner .carousel-item-next {
        transform: translateX(16%);
    }

    .shop .carousel-inner .carousel-item-left.active, 
    .shop .carousel-inner .carousel-item-prev {
        transform: translateX(-16%);
    }  */
                .shop .carousel-item {
                    width: 100%;
                }
                .carousel-item-next:not(.carousel-item-left),
                .active.carousel-item-right {
                    -webkit-transform: translateX(25%);
                    transform: translateX(25%);
                    visibility: hidden;
                }
                .carousel-item-prev:not(.carousel-item-right),
                .active.carousel-item-left {
                    -webkit-transform: translateX(-25%);
                    transform: translateX(-25%);
                    visibility: hidden;
                }
            }
            
            .shop .carousel-inner .carousel-item-right,
            .shop .carousel-inner .carousel-item-left {
                transform: translateX(0);
            }
            
            .shop .product {
                position: relative;
                margin: 10px;
                box-shadow: 3px 4px 7px 0px #6c2c14;
            }
            
            .shop .product img {
                height: 250px;
            }
            
            .shop .product .detail {
                position: absolute;
                bottom: 0;
                right: 0;
                left: 0;
                padding-top: 5px;
                border-radius: 20px 20px 0 0;
                background-color: #d5aa87;
                height: 60px;
                overflow: hidden;
                transition: height ease-in .5s;
            }
            
            .shop .product .detail:hover {
                height: 105px;
            }
            
            .shop .product .detail h4 {
                padding: 15px 10px;
                color: #f5edce;
            }
            
            .shop .product .detail a,
            .shop .product .detail span {
                color: #f5edce;
            }
            
            .shop .product .detail a:hover {
                color: #ffbe57;
            }
            /* contact us */
            
            .row.contact-bg {
                background-image: url(../img/photo-1536227661368-deef57acf708.jpg);
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                position: relative;
            }
            
            .row.contact-bg::after {
                content: "";
                display: block;
                background-color: #000000b7;
                position: absolute;
                width: 100%;
                top: 0;
                bottom: 0;
                z-index: 50;
            }
            
            .row.contact-bg .index {
                z-index: 1000;
            }
            
            .contact-us form .form-control {
                background-color: transparent;
                border: none;
                border-bottom: 1px solid #7f7f7f;
                border-radius: 0;
            }
            
            .contact-us form .form-control:focus {
                box-shadow: none;
                color: #bda791;
            }
            
            .contact-us form textarea,
            .contact-us form input[type] {
                color: #bda791;
            }
            
            .contact-us form textarea::placeholder,
            .contact-us form input[type]::placeholder {
                color: #afafaf;
                font-weight: bold;
                font-size: .9rem;
            }
            
            .contact-us form .form-group {
                margin-bottom: 2.5rem;
            }
            
            .contact-us form label {
                color: #bda791;
                font-weight: bold;
            }
            
            .contact-us form .submit-btn {
                background-color: rgb(189 167 145);
                border-radius: 50px;
                transition: background-color ease-in .5s;
            }
            
            .contact-us form .submit-btn:hover {
                background-color: #eadabf;
            }
            /* our info */
            
            .contact-us .info {
                background-color: #f5edce;
                background-image: url(../img/58afe081829958a978a4a6c5.png);
                background-repeat: no-repeat;
                background-position: right bottom;
                background-size: 40%;
            }
            
            .contact-us .info ul li {
                background-color: transparent;
                border: none;
                font-size: 1.3rem;
                line-height: 2.5rem;
                padding: 10px;
                margin: 20px 5px;
            }
            /* footer */
            
            .social a {
                color: #211002;
                transition: all ease-in-out .5s;
            }
            
            .social a:hover {
                color: #bda791;
            }
            
            .social .fab {
                font-size: 1.7rem;
                margin: 0 10px;
            }