body{font-family: "Poppins", sans-serif;}
h1,h2,h3,h4{font-weight: 600}
a, a:hover{text-decoration: none !important;}
h3{font-size: 1.5rem}
.logo{max-height: 55px}
.banner-bg{ background-image: linear-gradient(125deg, #D03797, #46389B, #46389B); min-height: 100vh; padding-top: 110px}
.menu-top{position: fixed; top:0; left:0; z-index: 200}
.scroll-menu{background: #46389B; border-radius: 25px}
.inner-banner-bg{ background-image: linear-gradient(125deg, #D03797, #46389B, #46389B); color:#fff; padding-top: 110px}
.navbar-nav .nav-link{color: #fff; font-weight: 500; border-radius:6px;}
.navbar-nav .nav-link:hover{color: #252525; background-color: #ffc107; border-radius:15px; animation: mymove 1s;}
@keyframes mymove {
  0% {background-color: transparent; border-radius:6px;}
  100% {background-color: #ffc107; border-radius:18px;}
}
.shop-btn {background-color: #ffc107; animation: shop 1s infinite;}
@keyframes shop {
  0% {background-color: #ffc107; }
  50% {background-color: #c5ee49; }
  100% {background-color: #ffc107; }
}
.ovr-hide{overflow: hidden;}
.btn-warning:hover{background-color:#c5ee49; border-color:#deff79; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175)}
.navbar-nav .active{color: #ffcc33 !important; font-weight: 500}
.navbar-nav .nav-item{margin-right: 1rem}
.navbar-nav .nav-item:last-child{margin-right: 0rem}
.navbar-nav .active .nav-link{border-bottom: 3px solid #ffc107;}
.dropdown-menu a{font-size: 14px; color: #fff; padding-top: 8px; padding-bottom: 8px; font-weight: 500}
.dropdown-menu a span{font-size: 19px !important}
#banner .carousel-control-prev{ background: #D03797; width: 40px; height: 40px; border-radius: 50%;
 right: 0; left: auto; top: 50%; opacity: 1 !important; padding: 0 !important}
#banner .carousel-control-next{ background: #D03797; width: 40px; height: 40px; border-radius: 50%;
 right: 0; left: auto; top: 41%; opacity: 1 !important; padding: 0 !important}
#banner .carousel-control-next:hover, #banner .carousel-control-prev:hover{background: #ff6c9f;}
.prod-arrow .news-arrow{background-color: #ffc107}
.prod-arrow .news-arrow:hover{background-color: #c5ee49 !important; color: #4e1d12 !important}
.sm-hide .news-arrow:hover{color: #fff !important}

.big-head{font-size: 5.5rem; line-height: 5rem; font-weight: 400 !important; letter-spacing: -4px;}
.big-head2{font-size: 4rem; line-height: 4rem; font-weight: 400 !important; letter-spacing: -4px}
.logo-shade{background-image: url('../img/logo-shade.png'); background-position: 0% 100%; background-repeat: no-repeat;}
.logo-shade-sm{background-image: url('../img/logo-shade2.png'); background-size: contain; background-position: 0% 100%; background-repeat: no-repeat;}
.three-line {text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.news-bg{ background-image: linear-gradient(-125deg, #1c923d, #046b21, #046b21);}
.news-item{overflow: hidden;}
.date{float: left; background: #46389B; width:75px; height:75px; padding-top:10px; text-align: center; line-height: .75rem; 
	border-radius: 50%; margin-right: 20px; border:3px solid #ffc71f;}
.date h5{font-size: 28px}
.news-arrow{font-size: 40px !important; cursor: pointer;}
.prod-bg{ background-image: linear-gradient(0deg, #713f1a, #ef8124, #ffdd83, #ffdd83); color: #4e1d12}
.prod{overflow: hidden;}

.prod-item{background-image:linear-gradient(-140deg, #e3dcff, #fcdeff, #fff, #fff);}
#prod .carousel button{position: absolute; bottom: -20px; left: 25%; z-index: 100; text-align:center; font-weight: 500}
.text-brown{color: #4e1d12 !important}
.feature-bg{ background-image: linear-gradient(125deg, #d84192, #7c3778, #7c3778); color: #fff}
.feature-img{max-height: 90px;}
.features .border{border-color: #fb5eb2 !important; background: rgba(0,0,0,0.25);}
.features .border:hover, .qoute .border:hover{box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175)}
.footer-bg{  background-color:#eee8dc; background-image: url('../img/footer-bg.jpg'); 
background-position: bottom right; background-repeat: no-repeat; font-size: 14px}
.social a{width:45px; height:45px; line-height:45px; border-radius:50%; background: #46389B; color:#fff !important;
     font-size:20px; text-align:center; display:inline-block;}
.social a:hover{color:#fff !important; background: #7c3778;}
.overflow-h{overflow: hidden;}

#menuTop {min-height: 90vh; border-bottom-left-radius: 15%; border-bottom-right-radius: 15%}

#menuTop .social a{width:45px; height:45px; line-height:45px; border-radius:50%; background: #D03797; color:#fff !important;
     font-size:20px; text-align:center; display:inline-block;}
#menuTop .social a:hover{color:#fff !important; background: #7c3778;}
#menuTop .logo-shade-sm{background-position: center top;}
#menuTop a{font-size: 15px;}
#menuTop .d-block:hover{color: #ffc74f !important}
#menuTop a span{font-size: 20px !important}

.choose.in-view{animation: slideInUp 1s ease;}

.nav-pills .nav-link {background: #ffc107; color: #252525; margin-right: 4px; border-radius: 25px;}
.nav-pills .active {background: #D03797 !important}
.btn-cart{background: #ffec89; font-size: 20px; line-height: 40px}
.btn-cart:hover{background: #ffc107}
section{overflow: hidden;}
.menu-top{overflow: visible;}
.menu-top .dropdown-menu{background: #5846c5; min-width: 270px}

.add-qty {padding: 1.6rem; border-top-left-radius: 50%; border-bottom-left-radius: 50%; 
	background: #fff; color: #252525; font-size: 30px !important; cursor: pointer;
-webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  }
.min-qty {padding: 1.6rem; border-top-right-radius: 50%; border-bottom-right-radius: 50%; 
	background: #fff; color: #252525; font-size: 30px !important; cursor: pointer;
-webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.cart-bg{background-image:linear-gradient(90deg, #fff, #ededed, #ededed); }
.price{background-color: #ffec89; font-size: 18px}
.qty{font-size: 24px; font-weight: 500}

#myCart .modal-dialog {max-width:400px; }
#myCart .modal-header h4{line-height: 1.4rem}
#myCart .modal-header small{font-size: 14px}

#myCart .nav-pills .nav-link {background: #46389B !important; color: #fff !important;}
#myCart .nav-pills .nav-link.active {background: #D03797 !important; color: #fff !important;}

.cart-p-unit{right:5px; top:5px; z-index: 99999}
.cart-count{position: absolute; right: 0; top:-5px; background:#D03797; font-size: 12px; padding: 0 4px; color: #fff; border-radius: 8px }

.bg-pink{background: #D03797;}

.btn-primary{background: #46389B;}

.product-list h5{font-size: 1.1rem}

.shop-ico{position: absolute; right: 1rem; top:1rem; border-radius: 50%; background: #fff; color: #252525; padding: 10px; z-index: 99999999}
.shop-ico:hover{background-color:#c5ee49;}
.bg-light-green{background-color:#c5ee49;}

.shop-item{background-size: 100%; background-position: center; background-repeat: no-repeat; overflow: hidden;}
.shop-item:hover{background-size: 110%; animation: mymove .5s ease;}
@keyframes mymove {
  0% {background-size: 100%;}
  100% {background-size: 110%;}
}

.shop-item:not(hover){background-size: 100%; animation: mymove2 .5s ease;}
@keyframes mymove2 {
  0% {background-size: 110%;}
  100% {background-size: 100%;}
}

.product-list a:hover .prod-name{text-decoration: underline !important;}


@media (min-width: 1400px) and (max-width: 1600px) {
	.lg-hide{display: none;}
	.prod{width: 100%; height:296px; position: relative; }
	.prod img {transition: transform .2s; }
	.prod:hover img{transform: scale(1.2)}
	#prod .btn-warning{position: absolute; bottom: -22px; left: 26%}
}

@media (min-width: 1400px) and (max-width: 1600px) and (orientation: landscape) {
	.lg-hide{display: none;}
	.prod{width: 100%; height:240px; position: relative; }
	.product-list .prod{height:220px;}
	.prod img {transition: transform .2s; position: absolute; left: 0; top: -25px  }
	.prod:hover img{transform: scale(1.2)}
	#prod .btn-warning{position: absolute; bottom: -22px; left: 26%}
}

@media (min-width: 1600px) and (max-width: 1900px) {
	.lg-hide{display: none;}
	.prod{width: 100%; height:290px; position: relative; }
	.prod img {transition: transform .2s; position: absolute; left: 0; top: -35px }
	.prod:hover img{transform: scale(1.2)}
	#prod .btn-warning{position: absolute; bottom: -22px; left: 26%}
}
@media (min-width: 1900px) and (max-width: 2000px) {
	.lg-hide{display: none;}
	.prod{width: 100%; height:300px; position: relative; }
	.prod img {transition: transform .2s; position: absolute; left: 0; top: -65px }
	.prod:hover img{transform: scale(1.2)}
	#prod .btn-warning{position: absolute; bottom: -22px; left: 26%}
}
@media (min-width: 2000px) and (max-width: 2400px) {
	.lg-hide{display: none;}
	.prod{width: 100%; height:300px; position: relative; }
	.prod img {transition: transform .2s; position: absolute; left: 0; top: -95px }
	.prod:hover img{transform: scale(1.2)}
	#prod .btn-warning{position: absolute; bottom: -22px; left: 26%}
}
@media (min-width:2400px) and (max-width: 4000px) {
	.lg-hide{display: none;}
	.prod{width: 100%; height:320px; position: relative; }
	.prod img {transition: transform .2s; position: absolute; left: 0; top: -115px }
	.prod:hover img{transform: scale(1.2)}
	#prod .btn-warning{position: absolute; bottom: -22px; left: 26%}
}
@media (min-width:4000px) and (max-width: 9000px) {
	.lg-hide{display: none;}
	.prod{width: 100%; height:950px; position: relative; text-align: center; }
	.prod img {transition: transform .2s; position: absolute; left: 0; top: -115px; width: 100% }
	.prod:hover img{transform: scale(1.2)}
	#prod .btn-warning{position: absolute; bottom: -22px; left: 26%}
}

@media (min-width: 1200px) and (max-width: 1380px) {

	.banner-bg{min-height: 50vh; padding-top: 110px}
}
@media only screen and (max-width: 1200px) and (orientation: landscape) {
	.lg-hide{display: none;}
	.rounded-4{border-radius: 1rem !important}
	#prod .btn-warning, #prod-sm .btn-warning{height: 42px; line-height: 30px; font-size: 18px; position: absolute; bottom: -22px; left: 26%}
	#prod-sm h5{font-size: 28px;}
	.banner-bg{min-height: 50vh}
	.big-head{font-size: 4rem; line-height: 3.2rem; font-weight: 400 !important; letter-spacing: -2px}
	.big-head2{font-size: 3rem; line-height: 2.5rem; font-weight: 500 !important; letter-spacing: -2px}
}

@media only screen and (max-width: 1200px) and (orientation: portrait) {
	.sm-hide{display: none;}
	.rounded-4{border-radius: 1rem !important}
	#prod .btn-warning, #prod-sm .btn-warning{height: 42px; line-height: 30px; font-size: 18px; position: absolute; bottom: -22px; left: 26%}
	#prod-sm h5{font-size: 28px;}
	.banner-bg{min-height: 50vh}
	.big-head{font-size: 4rem; line-height: 3.2rem; font-weight: 400 !important; letter-spacing: -2px}
	.big-head2{font-size: 3rem; line-height: 2.5rem; font-weight: 500 !important; letter-spacing: -2px}
}

@media only screen and (max-width: 1050px) and (orientation: portrait) {
	.sm-hide{display: none;}
	.craze-news{min-width:85% }
	.rounded-4{border-radius: 1rem !important}
	#prod .btn-warning, #prod-sm .btn-warning{height: 42px; line-height: 30px; font-size: 18px; position: absolute; bottom: -22px; left: 26%}
	#prod-sm h5{font-size: 28px;}
	.banner-bg{min-height: 50vh}
	.big-head{font-size: 4rem; line-height: 3.2rem; font-weight: 400 !important; letter-spacing: -2px}
	.big-head2{font-size: 3rem; line-height: 2.5rem; font-weight: 500 !important; letter-spacing: -2px}
}

@media only screen and (max-width: 720px) {
	.footer-bg{background-size: 80%;}
}
@media only screen and (max-width: 600px) {

	.sm-hide{display: none;}
  	#banner .carousel-control-prev{ background: #D03797; width: 40px; height: 40px; border-radius: 50%; right: -15px; left: auto; top: 50%; opacity: 1 !important; padding: 0 !important}
	#banner .carousel-control-next{ background: #D03797; width: 40px; height: 40px; border-radius: 50%; right: -15px; left: auto; top: 36%; opacity: 1 !important; padding: 0 !important}
	.big-head{font-size: 3.5rem; line-height: 3rem; font-weight: 400 !important; letter-spacing: -2px}
	.big-head2{font-size: 2.5rem; line-height: 2.5rem; font-weight: 500 !important; letter-spacing: -2px}
	.prod-bg {background-image: linear-gradient(45deg, #ef8124, #ef8124, #ffdd83, #ffdd83);}
	h3{font-size: 1.2rem}
	.footer-bg{background-size: 100%; background-position: 20%, right !important;}
	.banner-bg{padding-top: 80px}
	.cart-banner{padding-top: 35px !important}
	#menuTop{min-height:100vh; max-height: 100vh; overflow: auto; padding-right: 15px; border-radius: 0 !important}
	#menuTop a{font-size: 14px;}
	#menuTop a span{font-size: 20px !important}
	.add-qty {padding: 1.1rem; }
	.min-qty {padding: 1.1rem; }
	#prod-sm h5{font-size: 1.2rem}
	::-webkit-scrollbar { width: 4px; height: 4px; border-radius: 12px !important}
	::-webkit-scrollbar-track {background: #03621e;}
	::-webkit-scrollbar-thumb {background: #21ac47; border-radius: 12px !important}
}