body{ font-family: 'Poppins', sans-serif;}

:root{ --gold-color: #FEC00B; --green-color:#659D2D}

.p-color{color: #525252;}

.btn-primary{ 
    background-image: linear-gradient(to right, #87B25A,#6CA237 50%);
    border:none !important;
    box-shadow:  3px 3px 6px rgba(0,0,0,.15) ,
    -3px -3px 6px rgba(0,0,0,.15) !important;
}

.gold-c{color: var(--gold-color);}

.ff-school{font-family: 'Schoolbell', cursive;}

.show-on-mobile{display:none ;}
/*header*/
.nav-item .nav-link.active{color:#1F1F1F !important}
/*end header*/
/*pop in*/
/* Start pop-in section */
.sign-in-close{  
    font-family: cursive;
    font-size: 17px;
    height: 26px;
    width: 26px;
    border-radius: 50%;
    background-color: red;
    cursor: pointer;
}

.sign-in-form{
    transform: scale(0);
    transition: 0.5 all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5 all;
    -ms-transition: 0.5 all;
    -o-transition: 0.5 all;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    background: #000000c3;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
}

.show-signin{
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}
/* End pop-in section */
/*end pop in*/
/* hero */ 
.hero-content h1{ font-size: 70px;}

.hero-content input{box-shadow:  3px 3px 6px rgba(0,0,0,.15) ,
    -3px -3px 6px rgba(0,0,0,.15) !important;}

.hero-content input::placeholder{  color:rgba(128, 128, 128, 0.66)}

.hero-btn:hover,.hero-btn:active{background-image: linear-gradient(to left, #87B25A,#6CA237 50%)}
/* end */
/* welcome */
.welcome-content p {font-size: 19px;}

.welcome-content button{margin-top: 130px;}
/* end */
/*why us*/
.why-us .blur-leaf{right:10%; top:-9%;}
.why-us-p{font-size: 20px; text-align-last: justify;}

.why-us-content .box, .about-us .about-us-img{background-color: #F8FBF5}

.why-us-content .box.active{border-bottom:4px green solid ;box-shadow: 0 .325rem .45rem rgba(0,0,0,.1)!important;background-color: white}

/*end why us*/
/*menu */ 
.menu-btns{border-left: 4px solid #b2b2b2b0; }

.menu-btns .btn{border:none; color: #b2b2b2d1 !important;}

.menu-btns .btn.active{color:var(--gold-color) !important;position: relative;}

.menu .menu-btns button.active::before{
    content: '';
    position: absolute;
    background-color: var(--gold-color);
    left: -4px;
    top:0;
    width:3.7px;
    height: 100%;
}

.owl-carousel img{display:inline-block !important; width: auto !important; }
.menu .owl-carousel .box{height: 310px;
    box-shadow:  0 5px 12px #d9d9d9,
                 0px -5px 12px #d9d9d9;}

.menu .owl-carousel .box .imgs-con > img:last-child{height: 169px;}

.menu .box:hover .imgs-con{position: relative;}

.menu .box:hover .imgs-con::after{content: ''; width: 100%; position: absolute;top: 0; left: 0; height: 100%; background-color: white; opacity: 0.5;}
.menu .active-img{ transition:all 0.5s ease ; -webkit-transition:all 0.5s ease ; -moz-transition:all 0.5s ease ; -ms-transition:all 0.5s ease ; -o-transition:all 0.5s ease ; }

.menu .box .active-img:first-child{top:-100% ;left:55%;}

.menu .box .active-img:nth-child(2){top:120%;left:40%; }

.menu .box:hover .active-img:first-child,
.menu .box:hover .active-img:nth-child(2){ z-index:10; top: 50%;}

.menu .box .active-img:first-child:hover,
.menu .box .active-img:nth-child(2):hover{ background-color: var(--gold-color) !important;}

.price{color: var(--green-color);}

.price span{color: #b2b2b2d1 }

.menu .owl-carousel  .owl-nav{position: absolute; right:30px; display: block;}

.menu .owl-carousel  .owl-nav .owl-prev,.menu .owl-carousel  .owl-nav .owl-next{
    padding: 7px !important;
    box-shadow:  0 1px 5px #d9d9d9,
    0px -1px 5px #d9d9d9;
    border-radius:30px 0 0 30px;
    -webkit-border-radius:30px 0 0 30px;
    -moz-border-radius:30px 0 0 30px;
    -ms-border-radius:30px 0 0 30px;
    -o-border-radius:30px 0 0 30px;
}

.menu .owl-carousel  .owl-nav .owl-next{
    border-radius:0px 30px 30px 0px;
    -webkit-border-radius:0px 30px 30px 0px;
    -moz-border-radius:0px 30px 30px 0px;
    -ms-border-radius:0px 30px 30px 0px;
    -o-border-radius:0px 30px 30px 0px;
}

.menu .owl-carousel  .owl-nav button{ transition:all 0.3s  ; -webkit-transition:all 0.3s  ; -moz-transition:all 0.3s  ; -ms-transition:all 0.3s  ; -o-transition:all 0.3s  ; }

.menu .owl-carousel  .owl-nav button:hover,.menu .owl-carousel  .owl-nav button:active{background-color: var(--gold-color);}

.owl-carousel .owl-dots{
    position: absolute;
    top:0;
    left:-20%
}

.owl-carousel button.owl-dot{padding: 15px !important;}
/*end*/
/*about us*/
.about-us > img{left:-60px; top:-80px}
/* end about us*/
/* comments */
.comments > img{right:10px; top:150px}

.comments .comment p:first-child { 
    position: relative;
    width: 92%;
    box-shadow:  0 5px 10px #d9d9d9,
    0px -5px 10px #d9d9d9;
}
.comments .comment p:first-child::after{
    position: absolute;
    bottom: -25px;
    left:30px;
    content: '';
    border: solid;
    border-color: rgb(255, 255, 255) transparent transparent;
    border-width:15px 10px ;
    width: 0;
    height: 0;
}
.comments .comment .user-info img{width: 60px; height: 60px;}
/* end comments*/
/*new */
.new :not(.btn-check)+.btn:active,.new :not(.btn-check)+.btn:hover {
    color: var(--green-color);
    border-color:transparent!important
}
/*end new*/
/* start Subscriptipon*/
.Subscription {margin-bottom: 120px;}
.Subscription  > img:first-child {left: 197px;top: 35px;}

.Subscription  > img:nth-child(2){right: 100px; top: 130px;}

.Subscription form{width: 45%; }

.Subscription form input[type="email"]::placeholder{color: #B2B2B2; font-weight: bold; text-indent: 20px;}

.Subscription form button{right: 3px; color: white; background-color: var(--green-color); width: 40px; height: 40px;}

.Subscription :not(.btn-check)+.btn:active,.Subscription :not(.btn-check)+.btn:hover {
    color: var(--green-color);
    background-color: white;
    border-color: var(--green-color)}
/*end Subscriptipon*/
/*footer */
footer {background-color: #F8FBF5; padding-top:100px; padding-bottom: 10px;}

footer p{font-size: 14px;}

footer .social-icons a{background-color: var(--green-color); padding: 3px 10px ;}

footer .social-icons .icon { color:white; transition: all 0.3s  ; -webkit-transition: all 0.3s  ; -moz-transition: all 0.3s  ; -ms-transition: all 0.3s  ; -o-transition: all 0.3s  ; }

footer .social-icons a:hover,footer .social-icons a:active{ background-color: var(--gold-color);}

footer .social-icons a:hover .icon,footer .social-icons a:active .icon{ color: var(--green-color) ;}

footer ul li  a:hover{color: #B2B2B2;}
/*end footer*/

/*media */
@media (max-width:394px) {
    .sign-in-form{height: 100% !important; z-index: 20 !important ; padding-top: 15px; position: fixed !important;}
    .sign-in-flex{align-items: start !important;}
    .show-on-disktop{display: none;}
    .show-on-mobile{display: block}
    /*hero*/
    .welcome-content h2,.hero-content h1{font-size: 30px !important;}
    .welcome-content p ,.hero-content p{font-size: 15px !important;}
    /*wnd hero*/
    /*start welcome*/
    .welcome-content button{margin-top: 10px;}
     /*end welcome*/
     /*start why us*/
    .why-us h3{font-size: 18px !important;}
    .why-us-p {  font-size: 16px;}
    /*end why us*/
    /*start menu*/
    .menu-btns{border-bottom: 4px solid #b2b2b2b0;border-left: none; }

    .menu-btns .btn{ font-size: 11px !important;}

    .menu .menu-btns button.active::before{ top:100%; height:3.8px;width: 115%; }

    .owl-carousel .owl-dots{  position: absolute; top:-10%; left: 3%; }

    .owl-carousel button.owl-dot{padding:0px 0px 5px  !important;margin: 0px 5px !important;}

    .owl-carousel button.owl-dot.drinks{margin: 0 !important;margin-left:5px !important;}

    /*end menu*/
    /*about us*/
    .about-us p{font-size: 13px !important;}
    /*end about*/
    /*start comment*/
    .comments .comment p:first-child{font-size: 13px;}
    /*end comments*/
    /*start subscription*/
    .Subscription h2{font-size: 20px !important;}

    .Subscription form{width: 100%; }
    /*end subscription*/
    /* footer*/
    footer .col-md-4 h3{font-size: 16px !important;}
    footer .col-md-4 ul li  a{font-size: 12px !important;}
    /*end footer*/
}