@import url(bootstrap.min.css);
@import url(fontawesome.all.min.css);
@import url(../slick/slick-theme.css);
@import url(../slick/slick.css);

body { font-family: "Poppins", sans-serif; color: #808080}

.navbar { height: 70px;}
.navbar-nav .nav-item .nav-link { color: #000; font-size: 15px; padding-left: 1.25rem; padding-right: 1.25rem;}
.navbar-nav .nav-item .nav-link.active { font-weight: 600;}
.navbar form .form-control { font-size: 13px; height: 50px;}
.navbar form .input-group .btn { height: 50px; margin-left: -50px;}
.dropdown-item.active,
.dropdown-item:active { background: #216aaf;}

.header-category { min-height: calc(100vh - 70px); background-size: cover; background-position: center; position: relative; }
.header-category-icon { min-height: 150px; margin-top: 2rem; position: relative; z-index: 1;}
.header-category h1 { font-size: 25px; font-weight: 600; position: relative; z-index: 1;}
.header-category:nth-child(1) h1 { color: #00aa31}
.header-category:nth-child(2) h1 { color: #ffc800}
.header-category:nth-child(3) h1 { color: #006db5}
.header-category:nth-child(4) h1 { color: #ff4a00}

.header-category:hover .header-category-icon { animation: updown 400ms ease-in-out 150ms;}
.header-category:nth-child(1):hover .header-category-icon { filter: brightness(0) saturate(100%) invert(32%) sepia(74%) saturate(4324%) hue-rotate(85deg) brightness(95%) contrast(97%);}
.header-category:nth-child(2):hover .header-category-icon { filter: brightness(0) saturate(100%) invert(82%) sepia(57%) saturate(4274%) hue-rotate(6deg) brightness(111%) contrast(104%);}
.header-category:nth-child(3):hover .header-category-icon { filter: brightness(0) saturate(100%) invert(23%) sepia(98%) saturate(1904%) hue-rotate(186deg) brightness(95%) contrast(101%);}
.header-category:nth-child(4):hover .header-category-icon { filter: brightness(0) saturate(100%) invert(36%) sepia(89%) saturate(3587%) hue-rotate(4deg) brightness(103%) contrast(110%);}

.page-titles { position: relative; font-size: 25px; font-weight: bold; color: #0063b0}
.page-titles:before { position: absolute; content:""; left: 0; top: 35px; width: 50px; height: 5px; background: #0063b0; border-radius: 6px;}

.page-titles.text-green:before { background: #00a82f!important}
.page-titles.text-yellow:before { background: #fdcb0b!important}

.border-titles { position: relative;}
.border-titles:after { position: absolute; content:""; width: 320px; height: 2px; top: 45px; left: 0; right: 0; margin: 0 auto; background: #ff4a00}

.breadcrumb-item { font-weight: 300;}
.breadcrumb-item a { color: #555555; text-decoration: none;}

#product-slick .slick-slide img,
#product-slick-2 .slick-slide img { text-align: center; margin: 0 auto;}
.product-block .card { border: 2px solid #fff}
.product-block:hover .card { border: 2px solid #216aaf;}
.product-block .btn { opacity: 0;}
.product-block:hover .btn { opacity: 1;}

body.kanatli .product-block:hover .card { border: 2px solid #11a743;}
body.kanatli .btn-primary { background: #11a743}
body.kanatli .content-bg { background-image: url(../images/content-bg-2.png)!important;}

body.ruminant .product-block:hover .card { border: 2px solid #fdd128}
body.ruminant .btn.bg-green { background: #fdd128!important; color: #555!important}
body.ruminant .product-block .btn { background-color: #fdd128; color: #555!important}
body.ruminant .content-bg { background-image: url(../images/content-bg-3.png)!important;}
body.ruminant .btn-primary { background: #fdd128!important}

body.pet .product-block:hover .card { border: 2px solid #ff4a00;}
body.pet .btn.bg-green { background: #ff4a00}
body.pet .btn-primary { background: #ff4a00}
body.pet .content-bg { background-image: url(../images/content-bg-4.png)!important;}

#pet-slick .slick-slide img { text-align: center; margin: 0 auto;}
.slick-prev:before { content: "\f060"}
.slick-next:before { content:"\f061"}
.slick-prev:before,
.slick-next:before{ font-family: "Font Awesome 5 Free"!important; display: inline-block; vertical-align: middle; font-weight: 900; color: #000!important }

.product-icon .slick-slide img { text-align: center; margin: 0 auto;}
.product-icon .card { width: 200px; height: 200px; padding-top: 20px;}
.product-icon .card span { width: 8rem; margin: 0 auto}

.product-icon .slick-slide[data-slick-index="0"] div:nth-child(1) .card{ background: #882e2f;}
.product-icon .slick-slide[data-slick-index="0"] div:nth-child(2) .card { background: #ed3d83;}

.product-icon .slick-slide[data-slick-index="1"] div:nth-child(1) .card{ background: #ffc70b;}
.product-icon .slick-slide[data-slick-index="1"] div:nth-child(2) .card { background: #9d9ea2;}

.product-icon .slick-slide[data-slick-index="2"] div:nth-child(1) .card{ background: #f0637e;}
.product-icon .slick-slide[data-slick-index="2"] div:nth-child(2) .card { background: #996437;}

.product-icon .slick-slide[data-slick-index="3"] div:nth-child(1) .card{ background: #657cbc;}
.product-icon .slick-slide[data-slick-index="3"] div:nth-child(2) .card { background: #00bad0}

.product-icon .slick-slide[data-slick-index="4"] div:nth-child(1) .card{ background: #c6a0ca;}
.product-icon .slick-slide[data-slick-index="4"] div:nth-child(2) .card { background: #f05c60}

.product-desc { font-size: 15px}
.product-block .card { border: 2px solid #fff }
.add-cart { background: #ff4a00; color:#fff; font-size: 19px; font-weight: 600;}
.add-cart:hover { background: #e74302; color: #fff}
.multi-price { background: #ffdfd2; border: 1px solid #ff4a00; color: #ff4a00}
.product-detail-price { color: #ff4a00; border-top: 1px solid #ff4a00; border-bottom: 1px solid #ff4a00;}

#carouselProductGallery .carousel-indicators { position: relative; bottom: 0; margin: 0 0 10px 0; }
#carouselProductGallery .carousel-indicators > button { width: inherit; height: inherit; text-indent: initial; opacity: 1; margin-bottom:67px; }
#carouselProductGallery .carousel-indicators > button.active { opacity: 1; }
#carouselProductGallery .carousel-inner .carousel-item { height: auto; min-height: auto;}
#carouselProductGallery .list-inline {width:115px; height: 520px; overflow-y: auto; overflow-x:auto;}
#carouselProductGallery .carousel-control-next-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff4a00'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");}
#carouselProductGallery .carousel-control-prev-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff4a00'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");}
#carouselProductGallery .carousel-control-next,
#carouselProductGallery .carousel-control-prev { opacity: 1;}

.contact-icon div { width: 65px; height: 65px; border-radius: 65px; border: 1px solid #ff4a00; margin: 0 auto;}
.contact-icon:hover div { background: #ff4a00;}
.contact-icon i { font-size: 30px; color: #ff4a00; padding-top: 15px;}
.contact-icon:hover i { color: #fff}
.contact-icon a { text-decoration: none; color: #555555}

.content-bg { background-image: url(../images/balik-bg.jpg); background-repeat: no-repeat; padding: 100px 0;}

.card-title { color: #555555}

.icon-hover .col-lg-4:hover img,
.icon-hover .col-lg-6:hover img,
.icon-hover .col-lg-12:hover img{ animation: updown 400ms ease-in-out 150ms;}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link { background: transparent; color: #555555; border-bottom: 1px solid #ff4a00;}
.nav-pills .nav-link { font-size: 20px; color: #555; font-weight: bold; border-bottom: 1px solid transparent; border-radius: 0;}

#quantity { background: #f6f6f6; color: #717171}
.offer-btn { border: 2px solid #ff4a00; color: #ff4a00}
.offer-btn:hover { background: #ff4a00; color: #fff}
.form-control { height: 45px;}
form .btn { height: 50px;}
::placeholder {color: #797979!important}

.text-dark { color: #555555!important;}
.text-green { color: #00a82f;}
.text-yellow { color: #fdcb0b;}
.bg-gray { background: #f3f3f3;}
.bg-green { background: #00a82f;}
.bg-orange { background: #ff4a00;}
.btn-primary { background: #216aaf;}
.btn.bg-green:hover { background: #00a82f;}
.btn.bg-orange:hover { background: #e74302;}

footer { background: #c9c9c9; color: #222222}
footer a { text-decoration: none; color: #222222}
footer i { color: #005fa9}

@keyframes updown {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

@media (max-width: 991px) {
  .navbar { height: auto;}
  .navbar .w-25 { width: 100%!important;}
  .nav-pills .nav-link { font-size: 15px;}
  #brand-slick .slick-slide img { display: block; text-align: center; margin: 0 auto;}
  .product-icon .card { width: 150px; height: 150px}
  .product-icon .slick-slide img { height: 50px;}
  .input-group.w-25 { width: 50%!important;}
  .multi-price { margin-right: 5px; font-size: 13.25px;}
  footer { font-size: 14px}
}