/*fixed base*/
#main_index{
    padding-bottom:0!important;
    overflow:hidden;
}

#main_index h1,
#main_index h2,
#main_index h5{
    cursor:default;
}

.m_default_languagebar .footer_langbar_item{
    color:#fff;
}

/*category / product / tag / gallery / news*/
.category_list_type4 .category_box .img_frame img{
    object-fit:contain;
}

.product_list_5 .product_box .img_frame img,
.product_list_horizontal .product_box .img_frame img{
    object-fit:contain;
    background-color:#fff;
}

.gallerycategory .img_frame img,
.ws_gallery-2 .img_frame img{
    object-fit:contain;
}

.latest_new_type4 .news_box .img_frame{
    box-shadow:0 0 2px rgba(0,0,0,0.3);
}

.latest_new_type4 .news_box .img_frame img{
    object-fit:contain;
}

@media screen and (max-width:767.5px){
    #main_tag .horizontal_detail_bottom{
        margin-top:1rem;
    }

    .product_list_horizontal .product_box .product_des .title{
        font-size:18px;
    }

    .product_list_horizontal .product_box .horizontal_detail_box .product_simple_description{
        font-size:12px;
    }

    .product_list_horizontal .product_box .horizontal_detail_bottom .button_section{
        justify-content:flex-start;
    }

    .product_list_horizontal .product_box .product_img{
        flex:0 0 40%;
    }

    .product_list_horizontal .product_box .product_des{
        flex:0 0 60%;
    }

    .product_list_horizontal .product_box .img_frame{
        padding-top:unset!important;
        height:auto;
        aspect-ratio:1;
        border-radius:5px;
    }

    .product_list_horizontal .product_box .whatsapp_wrapper a{
        color:#333;
        font-size:10px!important;
        font-weight:500;
    }
}

/*global / common*/
:root{
    --coffee:#4a210f;
    --coffee-dark:#2f1208;
    --cream:#fbe0bd;
    --cream-light:#fff9ef;
    --brown:#572813;
    --brown-soft:#8b4d2c;
    --line:#efd3ad;
}

#main_index{
    font-family:"DM Sans", sans-serif;
    color:var(--coffee);
}

.n_small,
.n_subtitle,
.n_content{
    font-family:"DM Sans", sans-serif;
}

.n_title{
    font-family:"Cookie", cursive;
    font-size:65px;
    line-height:0.9;
    font-weight:400;
    color:var(--brown);
    margin:0;
}

.n_content{
    font-size:14px;
    line-height:1.9;
    margin-bottom:20px;
}

.c_color1{
    color:#fff;
}

.c_color2{
    color:#000;
}

.c_color3{
    color:var(--brown);
}

.c_line{
    line-height:1.8;
}

.btnbox_left,
.btnbox_center,
.btnbox_right{
    display:flex;
    align-items:center;
    margin:25px 0 0;
}

.btnbox_left{
    justify-content:flex-start;
}

.btnbox_center{
    justify-content:center;
}

.btnbox_right{
    justify-content:flex-end;
}

.n_button{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 35px 10px 15px;
    border-radius: 7px;
    background: #f8d9ad;
    color: var(--coffee);
    font-family: "Signika", sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.25s all linear;
}

.n_button:hover{
    background:#fff;
    color:var(--coffee);
    text-decoration:none;
    transform:translateY(-2px);
}
.n_button span{
    position: relative;
}
.n_button span:before{
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    right: -22px;
    margin: auto 0;
    background-image:url("https://cdn1.npcdn.net/images/B_Button_Icon_jm5p6e_1782783506.png?md5id=935a0def48ff0d1979324d773278f945&type=4");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
}

/*navbar*/
.navbar_type8 .logo img{
    width: 15vw;
    padding: 5px;
}

.navbar_type8 .nav_tab .nav_item a{
    font-size: 1vw;
    font-weight: 600;
    padding: 15px 1.5vw;
    color: #000;
}

.navbar_type8 .nav_tab .dropdown .dropdown-menu .dropdown-item a,
.navbar_type8 .nav_tab .dropdown .dropdown-menu .dropdown-item a:hover{
    color:#fff!important;
    -webkit-text-stroke-width:0;
    -webkit-text-stroke-color:#000;
}

.navbar_mobile .btn-outline-light:hover,
.navbar_mobile .btn-outline-light:not(:disabled):not(.disabled):active{
    color:#000;
    background-color:transparent;
    border-color:#000;
}

.dark_nav{
    background-color:#fff!important;
}

@media screen and (max-width:1200.5px){
    .navbar_type8 .nav_tab .nav_item a{
        font-size:1.2vw;
        padding:15px 1.1vw;
    }
}

/*hp_banner*/
.index_wrapper_2{
    z-index: 1;
    position: relative;
}
.slider_banner .banner_content{
    overflow:hidden;
}
.hp_banner{
	position:relative;
	left:0%;
	top:50%;
	transform:translate(0,-50%);
    width:calc(100% - 0%);
}
.hp_banner .banner_beanppl,
.hp_banner .banner_bean,
.hp_banner .banner_slogan,
.hp_banner .banner_product{
    position: absolute;
    top:0;
}
.hp_banner .banner_beanppl{
    width: 11vw !important;
    left: 32vw;
    top: 2vw;
    animation: rotateBounce 8s ease-in-out infinite;
    transform-origin: center;
}
.hp_banner .banner_bean{
    width: 24vw !important;
    left: 9vw;
    top: 4vw;
    animation: floatupdown 10s ease-in-out infinite;
}
.hp_banner .banner_slogan{
    width: 33vw !important;
    left: 7vw;
    top: -18vw;
   animation: rotateBounce 8s ease-in-out infinite;
    transform-origin: center;
}
.hp_banner .banner_product{
    width: 47vw !important;
    right: 10vw;
    top: -14vw;
    animation: floatupdown 10s ease-in-out infinite;
}
.hp_banner_buttonbox{
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top:4%;
}
.hp_banner_button{
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    width: 135px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    background-color: #000;
    transition:0.25s all linear;
}
.hp_banner_button:hover{
    color:#fff;
    text-decoration: none;
    transform:scale(0.98);
}

@keyframes floatupdown {
    0%, 100% {
    transform: translateY(0);
    }
    50% {
    transform: translateY(-20px);
    }
}

@keyframes rotateBounce {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(-7.5deg); }
    50%  { transform: rotate(7.5deg); }
    75%  { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
@media screen and (max-width: 1200.5px){

}
@media screen and (max-width: 991.5px){

}
@media screen and (max-width: 767.5px){
    .index_wrapper_2 .item>img{
    	min-height:100vw!important;
    	object-fit:cover;
    }
    .hp_banner{
        left:0%;
        width:calc(100% - 0%);
    }
    .hp_banner .banner_slogan {
        width: 57vw !important;
        left: -1vw;
        top: -48vw;
    }
    .hp_banner .banner_bean {
        width: 47vw !important;
        left: 3vw;
        top: 9vw;
    }
    .hp_banner .banner_beanppl {
        width: 22vw !important;
        left: 48vw;
        top: -25vw;
    }
    .hp_banner .banner_product {
        width: 67vw !important;
        right: -2vw;
        top: -2vw;
    }
}

/* our story */
.hp_about{
    position: relative;
    padding: 152px 12% 150px;
    background-image:url("https://cdn1.npcdn.net/images/B_Background_ltd8qu_1782783506.png?md5id=935a0def48ff0d1979324d773278f945&new_width=1600&new_height=1600&type=4");
    background-position:center bottom;
    background-size: cover;
    background-repeat:no-repeat;
    margin-top:-140px;
}

.hp_about_row{
    position:relative;
    z-index:1;
}

.hp_about_titlebox{
    padding-top:28px;
}

.hp_about .n_title{
    color:#fff;
    text-align: center;
    font-size:62px;
}

.hp_about_textbox{
    padding:24px 7% 80px 4%;
}

.hp_about .n_content{
    font-size:14px;
    font-weight: 300;
    color:#fff;
}

.hp_about_cupbox{
    position: absolute;
    bottom: -16vw;
    right: 0;
    width: 20vw;
    height: 20vw;
}

.hp_about_cupbox img{
    width: 100%;
    object-fit: contain;
}
.hp_about_leaf{
    position: absolute;
    bottom: 10vw;
    right: -3vw;
    width: 10vw;
    height: 10vw;
animation: rotateBounce 8s ease-in-out infinite;
    transform-origin: center;
}
.hp_about_cupbox:hover{
    transform-origin:center;
    animation:j_shake 0.3s linear 0.1s 2;
}
@keyframes j_shake{
    25%{transform:rotate(2.5deg);}
    75%{transform:rotate(-2.5deg);}
}

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

    .hp_about_cupbox{
        width:31%;
    }
}

@media screen and (max-width:767.5px){
    .hp_about{
        padding:110px 0% 125px;
    }

    .hp_about .n_title{
        font-size:54px;
    }
    .hp_about .n_content{
        text-align: center;
    }
    .hp_about .btnbox_left{
        justify-content: center;
    }

    .hp_about_textbox{
        padding:25px 0 25px;
    }

    .hp_about_beanbox{
        width:72%;
        margin-top:18px;
    }

    .hp_about_beanbox img{
        height:220px;
    }

    .hp_about_cupbox{
        right:4%;
        bottom:-35px;
        width:43%;
    }

    .hp_about_cupbox img{
        height:180px;
    }
    .hp_about_leaf{
        bottom: 40vw;
        right: -3vw;
        width: 20vw;
        height: 17vw;
    }
}

/* our product */
.index_wrapper_4{
    position:relative;
    padding:50px 9% 100px;
    overflow:hidden;
    background-image:url("https://cdn1.npcdn.net/images/C_Background_rfxvw3_1782783506.png?md5id=935a0def48ff0d1979324d773278f945&new_width=1600&new_height=1600&type=4");
    background-size:100%;
    background-position:bottom;
    background-repeat:no-repeat;
}

.hp_product .container-fluid{
    position:relative;
    z-index:1;
}

.hp_product_titlebox{
    text-align:center;
    margin-bottom:30px;
}

.hp_product_titlebox .n_title{
    font-size:58px;
}

.productSlider-1 .product_img .product_box .product_img_frame img{
    object-fit:contain!important;
}
.productSlider-1 .slick-track .slick-slide{
    box-shadow:none;
}
.productSlider-1 .product_img .product_box h6{
    text-align: center;
    margin-bottom:0;
}
.productSlider-1 .product_img .product_box a:hover{
    text-decoration: none; 
}
.productSlider-1 .product_img .product_box .content > p{
    text-align: center;
}
.productSlider-1 .product_img .product_box .content .align-top{

}
.productSlider-1 .product_img .product_box .content .align-top a,
.productSlider-1 .product_img .product_box .content .align-top p{

}

.productSlider-1 .product_img .slick-prev{
    left: -30px;
}
.productSlider-1 .product_img .slick-next{
    right: -30px;
}
.productSlider-1 .product_img .slick-prev::before{
    background-image:url("https://cdn1.npcdn.net/images/C_Arrow_1_8thyq5_1782783506.png?md5id=935a0def48ff0d1979324d773278f945&new_width=1600&new_height=1600&type=4");
    background-size:100%;
    background-position:center;
    background-repeat:no-repeat;
    text-shadow:unset;
    content:"";
    height:2vw;
    width:2vw;
} 
.productSlider-1 .product_img .slick-next::before{
    background-image:url("https://cdn1.npcdn.net/images/C_Arrow_2_t3w2ab_1782783506.png?md5id=935a0def48ff0d1979324d773278f945&new_width=1600&new_height=1600&type=4");
    background-size:100%;
    background-position:center;
    background-repeat:no-repeat;
    text-shadow:unset;
    content:"";
    height:2vw;
    width:2vw;
}

@media screen and (max-width: 767.5px){
    .productSlider-1 .product_img .slick-prev::before,
    .productSlider-1 .product_img .slick-next::before{
        background-size:80%;
    }
    .productSlider-1 .product_img .slick-prev{
        left: -11px;
    }
    .productSlider-1 .product_img .slick-next{
        right: -11px;
    }
}

@media screen and (max-width:767.5px){
    .index_wrapper_4{
        padding:45px 1rem 0px;
    }

    .hp_product_titlebox{
        margin-bottom:20px;
    }

    .hp_product_titlebox .n_title{
        font-size:52px;
    }

}

/* reason with us */
.hp_reason{
    position:relative;
    padding:90px 12% 105px;
    background-image:url("https://cdn1.npcdn.net/images/D_Background_fae6lu_1782783506.png?md5id=935a0def48ff0d1979324d773278f945&type=4");
    background-size: 100%;
    background-position: top;
    background-repeat:no-repeat;
    z-index: 1;
}

.hp_reason_titlebox{
    position:relative;
    text-align:center;
    margin-bottom:80px;
}

.hp_reason_titlebox .n_title{
    font-size:59px;
}

.hp_reason_character{
    position:absolute;
    left:13%;
    top:-27px;
    color:var(--coffee);
    font-size:62px;
    transform:rotate(-17deg);
}

.hp_reason_itembox{
    position:relative;
    height:100%;
    padding:65px 28px 28px;
    background:#fff;
    text-align:center;
    transition:0.25s all linear;
}

.hp_reason_icon{
    position:absolute;
    top: -40px;
    left: 50%;
    width: 80px;
    height: 80px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    transform:translateX(-50%);
    background:var(--coffee);
    color:#fff;
    font-size:23px;
}
.hp_reason_itembox:hover{
    transform:scale(0.98);
}
.hp_reason_icon img{
    width:100%;
    object-fit: contain;
}

.hp_reason_item .n_subtitle{
    position: relative;
    margin:0 0 24px;
    color:var(--coffee-dark);
    font-family:"Signika", sans-serif;
    font-size: 16px;
    font-weight: 600;
}
.hp_reason_item .n_subtitle:before{
    position: absolute;
    content: "";
    bottom: -0.5rem;
    left: 0;
    right: 0;
    width: 3rem;
    height: 2px;
    background-color: #401f0e;
    margin: 0 auto;
}

.hp_reason_item .n_content{
    margin:0;
    color:#5f4637;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.8;
}
.reason_beanppl {
    position: absolute;
    top: -5vw;
    left: 23vw;
    width: 17vw;
    animation: rotateBounce 8s ease-in-out infinite;
    transform-origin: center;
}
.reason_bean3{
    position: absolute;
    top: -1vw;
    left: 5vw;
    width: 11vw;
animation: rotateBounce 8s ease-in-out infinite;
    transform-origin: center;
}
.reason_bean1{
    position: absolute;
    top: 4vw;
    left: 18vw;
    width: 3vw;
animation: rotateBounce 2s ease-in-out infinite;
    transform-origin: center;
}
.reason_bean2{
    position: absolute;
    top: 5vw;
    right: 26vw;
    width: 4vw;
animation: rotateBounce 2s ease-in-out infinite;
    transform-origin: center;
}
.reason_bean4{
    position: absolute;
    top: 20vw;
    right: 2vw;
    width: 5vw;
animation: rotateBounce 2s ease-in-out infinite;
    transform-origin: center;
}
.reason_bean5{
    position: absolute;
    bottom: -2vw;
    left: 12vw;
    width: 7vw;
animation: rotateBounce 2s ease-in-out infinite;
    transform-origin: center;
}
.reason_bean6{
    position: absolute;
    bottom: -4vw;
    right: 3vw;
    width: 10vw;
animation: rotateBounce 2s ease-in-out infinite;
    transform-origin: center;
}

.hp_reason .col-12.col-md-6.col-xl-3:hover{
    transform-origin:center;
    animation:j_shake 0.3s linear 0.1s 2;
}

@media screen and (max-width:1200.5px){
    .hp_reason{
        padding-bottom:0;
        background-size: cover;
    }
    .hp_reason .col-12.col-md-6.col-xl-3{
        margin-bottom:7rem;
    }
    .hp_reason_itembox{
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    }
}
@media screen and (max-width:991.5px){
    .hp_reason{
        padding:85px 7% 95px;
    }

    .hp_reason_itembox{
        padding-right:18px;
        padding-left:18px;
    }
    
}

@media screen and (max-width:767.5px){
    .hp_reason{
        padding:75px 7% 0px;
        
    }
    .hp_reason:before{
        position: absolute;
        content:"";
        background:linear-gradient(to top,#fcd2a7, transparent);
        width:100%;
        height:50rem;
        bottom:0;
        left:0;
        z-index: -1;
    }

    .hp_reason_titlebox{
        margin-bottom:48px;
    }

    .hp_reason_titlebox .n_title{
        font-size:54px;
    }

    .hp_reason_character{
        left:2%;
        top:-19px;
        font-size:46px;
    }

    .hp_reason_itembox{
        margin-bottom:55px;
    }

    .hp_reason .col-12:last-child .hp_reason_itembox{
        margin-bottom:0;
    }
    .hp_reason .col-12.col-md-6.col-xl-3 {
        margin-bottom: 5rem;
    }
    .reason_beanppl{
        width:28vw;
    }
    .reason_bean2{
        width: 15vw;
    }
    .reason_bean1{
            top: 36vw;
    left: 18vw;
    width: 11vw;
    }
    .reason_bean5 {
    position: absolute;
    bottom: -9vw;
    left: 12vw;
    width: 18vw;
    }
}

/* trusted by */
.hp_trust{
    position:relative;
    padding:88px 9% 95px;
    background:#fff;
    text-align:center;
}

.hp_trust_titlebox{
    margin-bottom:42px;
}

.hp_trust_titlebox .n_title{
    font-size:58px;
}

/*.hp_trust_logobox{*/
/*    display:flex;*/
/*    justify-content:center;*/
/*    align-items:center;*/
/*    flex-wrap:wrap;*/
/*    gap:19px;*/
/*}*/

/*.hp_trust_logo{*/
/*    width:96px;*/
/*    height:72px;*/
/*    border:1px solid #cbb9a5;*/
/*    display:flex;*/
/*    justify-content:center;*/
/*    align-items:center;*/
/*    padding:8px;*/
/*    color:#3d2314;*/
/*    font-family:"Signika", sans-serif;*/
/*    font-size:11px;*/
/*    font-weight:700;*/
/*    line-height:1.15;*/
/*}*/

.hp_trust_logobox{
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    flex-wrap: wrap;
    gap:7.5px;

}
.hp_trust_logobox > div{
    flex:0 0 15%;
    box-shadow:0px 0px 2px rgba(0,0,0,0.1);
}
.hp_trust_logobox img{
    width:100%;
    object-fit: contain;
}
@media screen and (max-width:991.5px){
    .hp_trust_logobox > div{
        flex:0 0 30%;
    }    
}
@media screen and (max-width:767.5px){
    .hp_trust{
        padding:70px 0 45px;
    }

    .hp_trust_titlebox{
        margin-bottom:30px;
    }

    .hp_trust_titlebox .n_title{
        font-size:54px;
    }
    .hp_trust_logobox{
        gap:15px;
    }

    /*.hp_trust_logobox{*/
    /*    gap:10px;*/
    /*}*/

    /*.hp_trust_logo{*/
    /*    width:86px;*/
    /*    height:66px;*/
    /*}*/
    .hp_trust_logobox > div{
        flex:0 0 45%;
    }    
}

/* news & events */
.index_wrapper_7{
    position:relative;
    padding: 120px 12% 0px;
    background-image:url("https://cdn1.npcdn.net/images/F_Background_3_7zo4kx_1782800676.png?md5id=935a0def48ff0d1979324d773278f945&new_width=2880&new_height=1650&type=4");
    background-size:100%;
    background-position:top;
    background-repeat:no-repeat;    
}
.hp_news_titlebox{
    text-align:center;
    margin-bottom:38px;
}

.hp_news_titlebox .n_title{
    font-size:59px;
}

.hp_news_icon {
    position: absolute;
    top: -12vw;
    right: -10vw;
    width: 28vw;
}

#main_index .hp_latest_new_8 .container-fluid{
    padding:0;
}

#main_index .hp_latest_new_8 .latestnewsAjax{
    justify-content:center;
}

#main_index .hp_latest_new_8 .news_box{
    height:100%;
    padding:10px;
    background:#fff;
    box-shadow:0 5px 14px rgba(74,33,15,0.13);
}
#main_index .hp_latest_new_8 .news_box:hover{
        transform-origin:center;
    animation:j_shake 0.3s linear 0.1s 2;
}

#main_index .hp_latest_new_8 .news_box .img_frame{
    padding-top:66%;
}

#main_index .hp_latest_new_8 .news_box .img_frame img{
    object-fit:cover;
}

#main_index .hp_latest_new_8 .news_box .title{
    color:var(--coffee-dark);
    font-family:"Signika", sans-serif;
    font-size:18px;
    line-height:1.4;
}

#main_index .hp_latest_new_8 .news_box .content{
    display:none;
}

#main_index .hp_latest_new_8 .news_box .date{
    margin:12px 0 6px!important;
    color:#5a3826;
    font-size:12px;
}

#main_index .hp_latest_new_8 .news_box .read_more{
    color:var(--coffee-dark);
    font-family:"Signika", sans-serif;
    font-size:16px;
    text-decoration:underline;
}

#main_index .hp_latest_new_8 .toggle_point{
    display:none;
}
@media screen and (max-width:991.5px){
    .index_wrapper_7{
        background-size:cover;
    }
}
@media screen and (max-width:767.5px){
    .index_wrapper_7{
        padding:78px 7% 90px;
    }

    .hp_news_titlebox{
        margin-bottom:27px;
    }

    .hp_news_titlebox .n_title{
        font-size:54px;
    }

    #main_index .hp_latest_new_8 .news_box{
        padding:8px;
    }
    .hp_news_icon{
        position: absolute;
        top: -23vw;
        right: -4vw;
        width: 51vw;
    }
}

.footer_image{
    position: relative;
    width: 100vw;
    margin-bottom: -90px;
    background-color:#f8dfc2;
}
.footer_type8{
    background-color:#401f0e;
}
.footer_type8,
.footer_type8 a,
.footer_type8 i,
.footer_type8 p,
.footer_type8 h2{
    color:#fff;
}
.footer_subtitle{
    text-transform: uppercase;
    color:#fff;
}
.footer_type8 .copy_right,
.npfooter_languagebar .text-muted,
.platinum_website_visitor,
.npfooter_languagebar,
.copy_right small,
.footer_type8 .privacy_policy:hover,
.footer_type8 .mb-1{
    color:#fff!important;
}
.footer_type8 .social_media a .icon_s img{
    filter:brightness(0) invert(1)!important;
}
.footer_type8 .social_media a:hover .icon_s i {
    color: #fff;
}
.footer_langbar_item{
    color:#fff!important;
}

.footer_type8 .logo{
    min-height:100px;
}
.footer_type8 .logo img{
    max-height:100px;
}

/*mobile side-navbar*/
.side_menu .footer_langbar_item{
    color:#fff!important;
}

.coffee_smoke_scene{
    position:relative;
    width:100%;
    height:420px;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    background:#20130d;
}

/* Cup demo only */
.coffee_cup{
    position:relative;
    width:190px;
    height:135px;
    margin-bottom:70px;
    z-index:2;
}

.coffee_cup_body{
    width:170px;
    height:115px;
    margin:0 auto;
    border-radius:12px 12px 42px 42px;
    background:linear-gradient(135deg,#f3e6d3,#b88b62);
    box-shadow:
        inset -15px -12px 20px rgba(0,0,0,.12),
        0 20px 35px rgba(0,0,0,.3);
}

.coffee_cup_top{
    position:absolute;
    top:-22px;
    left:10px;
    width:170px;
    height:45px;
    border-radius:50%;
    background:#eee0cd;
    z-index:2;
}

.coffee_cup_top:after{
    content:"";
    position:absolute;
    top:8px;
    left:12px;
    width:146px;
    height:29px;
    border-radius:50%;
    background:radial-gradient(ellipse at center,#4b210f 0%,#291207 72%,#160904 100%);
    box-shadow:inset 0 3px 7px rgba(255,255,255,.12);
}

.coffee_cup_handle{
    position:absolute;
    right:-26px;
    top:24px;
    width:54px;
    height:62px;
    border:13px solid #c2966c;
    border-left:0;
    border-radius:0 35px 35px 0;
}

/* Smoke system */
.coffee_smoke{
    position: absolute;
    right: 0;
    bottom: -11vw;
    width: 12vw;
    height: 20vw;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 3;
}

.smoke_particle{
    position:absolute;
    bottom:0;
    left:50%;
    display:block;
    border-radius:50%;
    pointer-events:none;

    background:radial-gradient(
        circle,
        rgba(255,255,255,.42) 0%,
        rgba(255,255,255,.18) 32%,
        rgba(255,255,255,.05) 58%,
        rgba(255,255,255,0) 75%
    );

    filter:blur(20px);
    opacity:0;

    will-change:transform, opacity;
    animation:coffeeSmokeRise var(--duration) ease-out forwards;
}

@keyframes coffeeSmokeRise{
    0%{
        opacity:0;
        transform:
            translateX(-50%)
            translateY(0)
            scale(.35)
            rotate(0deg);
    }

    12%{
        opacity:var(--opacity);
    }

    55%{
        opacity:calc(var(--opacity) * .72);
    }

    100%{
        opacity:0;
        transform:
            translateX(calc(-50% + var(--drift)))
            translateY(calc(-1 * var(--rise)))
            scale(var(--scale))
            rotate(var(--rotate));
    }
}

@media screen and (max-width:767.5px){
    .footer_image{
        margin-bottom:0;
    }
    .coffee_smoke_scene{
        height:330px;
    }

    .coffee_smoke{
        bottom: -20vw;
        transform: translateX(-50%) scale(.8);
        width: 22vw;
        height: 35vw;
    }
}