/* variables */
:root {
  --bg-body: #f6f7fb;
  --primary: #0284c7;
  --primary-alt: #0369a1;
  --text: #212529;
  --bg-panel: #eef2f7;
  --text-panel: #344456;

  /* HEADER */
  --bg-header-top: #fff;
  --text-header-top: #000;

  --bg-header-nav: #fff;
  --text-header-nav: #000;

  /* FOOTER */
  --text-footer-top: #fff;
  --bg-footer-top: #01858d;

  --bg-footer-bottom: #026d73;
  --text-footer-bottom: #fff;

  /* MOBILE MENU */
  --mobile-menu-item: #1a2239;

  /* NAVBAR */
  --menu-item: #fff;
  --menu-item-hover: #0284c7;
  --menu-item-text-hover: #0369a1;
  --menu-item-line: #0284c7;
  --transition-timing: 0.2s ease;

  /* APP COLORS */
  --poultry: #fd6f6e; /* #b4e9e9; /*tyor*/
  --poultry-text: #950b0b; /* #10acc7; /*tyor*/

  --pet: #c4b5fd; /*dam*/
  --pet-text: #5b21b6; /*dam*/

  --horse: #ca8a04;
  --horse-text: #713f12;

  --fishery: #bae6fd;
  --fishery-text: #0369a1;

  --livestock: #86efac;
  --livestock-text: #15803d;

  --bee: #fdb713;
  --bee-text: #532d07;

  --bs-body-line-height: 1.8rem;
}

.text-amber{
color:#cfa633;
}

.bg-amber{
background-color:#cfa633;
}


.btn-service:hover{
transition: all 0.2s ease-in-out 0.1s;
background-color:#d3e0e1;
}

.promotion-bar{
background-color:#026d73;
 background-image:url(../images/template/bg-back.jpg);
background-size:cover;
background-position-x: center;
}

.bg-curve{
 background-image:url(../images/template/bg-curve.png);
background-size:cover;
background-position-x: center;
}

.boxline{
border: 1px solid #477c81 !important;
  width: 80%;
  display: inline-block;
}

.media {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
}


.media-body {
  -ms-flex: 1;
  flex: 1;
}


.fill-up{
  position: relative;
  top: 0;
  transition: top ease 0.5s;
}

.fill-up:hover,
.fill-up:focus {
top:-10px;
}

.header-arazName{  
  transform: scale(0.8);
  animation: scale 1s forwards cubic-bezier(0.5, 1, 0.89, 1);
}
@keyframes scale {
  100% {
    transform: scale(1);
  }
}

@keyframes scale {
  100% {
    transform: scale(1);
  }
}



.grow img{
transition: 1s ease;
}

.grow img:hover{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
transition: .6s ease;
}



.logo-circle{
width:400px;
}

.rotate {
  animation: rotation 40s infinite linear;
}

.rotate-fast {
  animation: rotation 20s infinite linear;
}


@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}




.btn-play{
  width: 60px;
  height: 60px;
  text-align: center;
  background: #fff;
  border-radius: 50%;
  animation: shadow-pulse 1s infinite;
  display: inline-block;
  padding: 14px;
}

@keyframes shadow-pulse {
  0% {
    box-shadow:0 0 0 0px rgba(207, 166, 51,.8)
  }
  100% {
    box-shadow:0 0 0 35px rgba(207, 166, 51,0)
  }
}

.iconbox img {
  width: 50px !important;
}




/* HEADING */
.heading {
  text-align: center;
  position: relative;
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.heading h4 {
  color: #cfa633;
  font-weight: bold;
}

.heading::before {
  content: "";
  position: absolute;
  display: block;
  width: 200px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 100px);
}

.heading::after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 3px;
  background: #cfa633;
  bottom: 0;
  left: calc(50% - 30px);
}


/* DEFAULT */
.static-height {
  height: 6rem !important;
  overflow: hidden;
}

/* BASE */
.layout-body {
  background-color: var(--bg-body);
}

.layout-body-alt {
  background-color: #dee2e7;
}

.text {
  color: var(--text);
}

.text-header {
  color: var(--primary);
}

.text-shadow {
  text-shadow: 0px 0px 2px var(--primary);
}

.text-link {
  color: var(--primary);
  transition: all 0.2s ease-in-out 0.1s;
  padding: 5px;
  border-radius: 5px;
  display: inline-block;
}

.text-link:hover {
  background-color: #00000006;
  color: var(--primary-alt);
}

.text-link:hover > i {
  transition: all 0.2s ease-in-out 0.1s;
  padding-right: 14px !important;
}

.spacer {
  height: 180px;
}
@media only screen and (max-width: 600px) {
  .spacer {
    height: 260px !important;
  }
}

/* EXTRA CARD */
.card-extra {
  box-shadow: 0 3px 5px 0 #2432421a;
  border-radius: 1rem;
  border: 4px solid #fff;
  margin-bottom: 1.5rem;
  transition: 0.7s;
}

.card-extra:hover {
  box-shadow: 0 30px 50px 0 #2432422a !important;
}

.card-extra:hover .card-img-info {
  bottom: 0;
}

.card-selector:hover {
  border-color: #cfa633;
}

.card-extra img {
  border-top-left-radius: 0.8rem !important;
  border-top-right-radius: 0.8rem !important;
}

.card-extra-no img {
  border-top-left-radius: unset !important;
  border-top-right-radius: unset !important;
}

.card-img-extra {
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important;
  border-color: #fff;
  border-style: solid;
}

.card-img-info {
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  background-color: #ffffffcc;
  font-size: 0.8rem;
  font-weight: bold;
  display: flex;
  padding: 5px;
  color: var(--primary);
  transition: 0.4s;
}

.card-footer-extra {
  padding: 0.5rem;
  font-size: 0.8rem;
  color: var(--primary);
  font-weight: bold;
  border-top: var(--bs-border-width) var(--bs-border-style)
    var(--bs-border-color) !important;
  background-color: #f8f9fa;
  border-bottom-left-radius: 0.7rem !important;
  border-bottom-right-radius: 0.7rem !important;
}

/* PANEL BOX */
.panel-box {
  border-radius: 30px;
  background-color: var(--bg-panel);
  padding: 30px;
  text-align: justify;
  color: var(--text-panel);
}

@media only screen and (max-width: 600px) {
  .panel-box {
    padding: 10px !important;
  }
}


/* APP SPECIFIC COLOR*/
.bg-poultry {
  background-color: var(--poultry);
}
.text-poultry {
  color: var(--poultry-text) !important;
}

.bg-livestock {
  background-color: var(--livestock);
}
.text-livestock {
  color: var(--livestock-text) !important;
}

.bg-horse {
  background-color: var(--horse);
}
.text-horse {
  color: var(--horse-text) !important;
}

.bg-fishery {
  background-color: var(--fishery);
}
.text-fishery {
  color: var(--fishery-text) !important;
}

.bg-pet {
  background-color: var(--pet);
}
.text-pet {
  color: var(--pet-text) !important;
}

.bg-bee {
  background-color: var(--bee);
}
.text-bee {
  color: var(--bee-text) !important;
}

/* HEADER */
.header-top {
  background-color: var(--bg-header-top);
  color: var(--text-header-top);
}
.header-nav {
  background-color: var(--bg-header-nav);
  color: var(--text-header-nav);
}

.search-bar {
  border: 1px solid #ffffff55;
  border-radius: 5px;
}

.search-bar input {
  background-color: var(--bg-header-nav);
}

.search-bar button {
  background-color: var(--bg-header-nav);
}

/* MOBILE MENU */
.offcanvas-body a {
  color: var(--mobile-menu-item);
  display: block;
  margin: 1.5rem;
}

/* NAVBAR */
.mehraz-menu {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: right;

  padding: 12px 0 12px 0;
  list-style: none;

  margin-bottom: 0;
}

.mehraz-menu .menu-item {
  position: relative;
  margin-left: 20px;
}

.position-unset {
  position: unset !important;
}

.mehraz-menu .menu-item > .menu-title {
  position: relative;
  color: var(--menu-item);
  padding: 12px 0;
  transition: var(--transition-timing);
}

.mehraz-menu .menu-item > .menu-title:hover {
  color: var(--menu-item-hover);
}

.mehraz-menu .menu-item > .menu-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--menu-item-line);
  transform: scaleX(0);
  transform-origin: right;
  transition: var(--transition-timing);
}

.mehraz-menu .menu-item > .menu-title:hover::after {
  transform: scaleX(1);
}

.dropdown-panel {
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: 20px;
  gap: 20px;
  border: 1px solid #ededed;
  box-shadow: 0 3px 5px #0000001a;
  border-radius: 10px;
  transform: translateY(50px);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-timing);
  z-index: 5;
}

.mehraz-menu .menu-item:hover > .dropdown-panel {
  transform: translateY(-2px);
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.dropdown-panel ul {
  list-style: none;
  padding: 0;
}

.dropdown-panel ul .menu-title a {
  padding-bottom: 8px;
  border-bottom: 1px solid #ededed;

  width: 100%;
  display: inline-block;
  font-weight: bold;
}

.dropdown-panel ul li a {
  font-size: 0.85rem;
  color: gray;
  transition: var(--transition-timing);

  display: inline-block;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 0;
  border-radius: 3px;
  text-align: right;
}

.dropdown-panel ul li a:hover {
  color: var(--menu-item-text-hover);
  background-color: #f9f9f9;
}

.dropdown-panel ul li img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  margin-bottom: 10px;
}

.dropdown-list {
  position: absolute;
  top: 100%;
  right: -30px;
  width: 200px;
  background: #fff;
  padding: 20px 0;
  border-radius: 10px;
  border: 1px solid #ededed;
  box-shadow: 0 3px 5px #0000001a;
  transform: translateY(50px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--transition-timing);
  z-index: 5;
  list-style: none;
}

.mehraz-menu .menu-item:hover > .dropdown-list {
  transform: translateY(10px);
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.dropdown-list .dropdown-item a {
  color: gray;
  font-size: 0.85rem;
  padding: 6px 20px;
  margin-bottom: 5px;
  transition: var(--transition-timing);
  display: block;
}

.dropdown-list .dropdown-item a:hover {
  color: var(--menu-item-text-hover);
}

/* PROMOTION */
.swiper-button-next,
.swiper-button-prev {
  background: rgba(0, 0, 0, 0.3);
  padding: 3px;
  border-radius: 50%;
  width: 45px !important;
}
.swiper-button-next:after,
.swiper-button-prev:after {
  color: #000;
  font-size: 1.2rem !important;
  font-weight: bold;
}

/* TAB BOX*/
.promotion-tabbox {
  height: 100px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
  border-radius: 0.4rem;
  padding: 10px;
  font-size: 1.2rem;
  font-weight: bold;
  border: 4px solid #00000009;
}

/* LEVEL 2 */
.cat-level2-box {
  padding: 5px;
  border-radius: 10px;
  border: 2px solid transparent;
  transition: background-color 0.2s ease-in-out;
}
.cat-level2-box i {
  font-size: 2rem !important;
}
.cat-level2-box h6 {
  margin-top: 10px;
  font-weight: 700;
}

.cat-level2-box a {
  color: #7a90aa;
  margin-top: 0.6rem;
  display: block;
}

.cat-level2-box:hover {
  background-color: #eef2f7;
  border: 2px solid #e5eef9;
}

/* MARQUEE */
.marquee {
  overflow: hidden;
  width: 100%;
}

.marquee .swiper-wrapper {
  transition-timing-function: linear !important;
  position: relative;
}

.marquee .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* price fluctuation*/
.price-fluctuation {
  overflow-x: hidden;
}
.price-fluctuation .card {
  width: 200px;
}

/* SUCCESS STORY */
.our-customers .swiper-slide {
  width: 450px;
}

.our-customers .swiper-slide img {
  max-width: 120px;
}

/* FOOTER */
.footer-top {
  background-color: var(--bg-footer-top);
  color: var(--text-footer-top);
}

.footer-bottom {
  background-color: var(--bg-footer-bottom);
  color: var(--text-footer-bottom);
}