@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&family=Marcellus&display=swap");

:root {
  --primary-color: #131196;
  --secondary-color: #f95e01;
  --secondary-light: #fff4ed;
  --light: #f8f8ff;
  --body-color: #212121;
  --facebook: #4267b2;
  --twitter: #00acee;
  --linkedin: #0e76a8;
  --youtube: #ff0000;
  --whatsapp: #25d366;
  --instagram: #c92bb7;
  --serif: "Marcellus", serif;
}

body {
  color: var(--body-color);
  font: 400 1rem "Titillium Web", sans-serif;
  overflow-x: hidden;
}

.table td,
.table th {
  padding: 1.25rem 1rem 1rem;
}

p {
  line-height: 1.5;
}

.padding {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

ul {
  padding-left: 0;
  margin-bottom: 0;
}

i {
  color: var(--secondary-color);
}

a{
  color: var(--primary-color);
}
a,
a:hover {
  text-decoration: none;
}

img,
video,
iframe,
svg {
  width: 100%;
  display: block;
  height: auto;
}

svg:not(fill) {
  fill: currentColor;
}

.reflection {
  -webkit-box-reflect: below -76px linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}

.mw-auto{
  min-width: 1px !important;
}

.gap-row {
  row-gap: 30px;
}

.gap-form-row {
  row-gap: 10px;
}

.object-cover {
  object-fit: cover;
}
.object-contain {
  object-fit: contain;
}

.container-fluid {
  padding-left: 2rem;
  padding-right: 2rem;
}

.rounded {
  border-radius: 10px !important;
}

.filter-white {
  -ms-filter: brightness(70);
  filter: brightness(70);
}

.filter-dark {
  -ms-filter: grayscale(1) brightness(0.5);
  filter: grayscale(1) brightness(0.5);
}

/*header*/
.header {
  width: 100%;
  position: fixed;
  top: 0;
  background-color: #fff;
  z-index: 999;
  transition: all 300ms ease-in-out;
}

.header.fixed {
  box-shadow: 0 10px 20px rgb(0 0 0 / 10%);
}

.header.nav-up {
  top: -100px;
}

.topLinks,
.mainHeader {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
}

.topLinks {
  background-color: var(--primary-color);
  color: #fff;
  font-size: 13px;
}

.topLinks ul {
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.topLinks ul a {
  color: #fff;
  display: flex;
  align-items: center;
  font-weight: 600;
  padding: 8px 0;
  gap: 5px;
}

.topLinks ul a:hover {
  color: var(--secondary-color);
}
.topLinks ul a i {
  width: 20px;
}

.logo {
  width: 120px;
  position: relative;
  min-height: 1px;
  transition: all 300ms ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo img {
  padding: 5px;
  transition: all 300ms ease-in-out;
}

.header.fixed .logo {
  width: 70px;
}

.header.fixed .logo img{
  padding: 0 10px;
}

a.disabled{
  pointer-events: none;
}

.header .nav > ul {
  display: flex;
  align-items: center;
  position: relative;
  gap: 1.75rem;
}

.header .nav > ul > li {
  height: 100%;
}

.header .nav > ul > li > a {
  height: 100%;
  color: var(--body-color);
  font-size: 1.25rem;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0 10px;
  position: relative;
  font-weight: 700;
  transition: all 300ms ease-in-out;
  padding: 1.5rem 0;
  z-index: 1;
}

.header.fixed .nav > ul > li > a {
  padding: 1rem 0;
}

.header .nav > ul > li > a small {
  display: block;
}

.header .nav ul li a i {
  font-size: 75%;
}

.header .nav ul li:hover > a,
.header .nav ul li > a.active {
  color: var(--secondary-color);
}

.header .nav > ul > li > a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--secondary-color);
  transition: all 300ms ease-in-out;
  transform: scaleX(0);
  z-index: -1;
}

.header .nav ul li > a.active::before,
.header .nav ul li:hover > a::before {
  transform: scaleX(1);
}

.header .dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  width: 40rem;
  background-color: #fff;
  border-top: 2px solid var(--secondary-color);
  border-bottom: 4px solid var(--secondary-color);
  border-radius: 10px;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  translate: 0 20px;
  pointer-events: none;
  transition: all 300ms ease-in-out;
}

.header li:hover > .dropdown {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  pointer-events: all;
}

.navLink .inner {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--body-color);
  font-weight: 700;
}

.navLink .inner:hover {
  color: var(--primary-color);
}

.navLink .inner .img-fluid {
  flex: 0 0 50px;
  max-width: 50px;
  border-radius: 50%;
  padding: 8px;
  background-color: var(--secondary-light);
  transition: all 300ms ease-in-out;
}

.navLink .inner:hover .img-fluid {
  background: radial-gradient(
    circle at 70% 10%,
    var(--secondary-color),
    var(--primary-color)
  );
}

.header .dropdown.drop-sm {
  width: 220px;
  left: calc(50% - 110px);
  padding: 1rem;
}

.header .dropdown.drop-sm a {
  display: block;
  color: var(--body-color);
  font-weight: 600;
}

.header .dropdown.drop-sm a:hover {
  color: var(--secondary-color);
}

.header .dropdown.drop-sm li:not(:last-of-type) a {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgb(0 0 0 / 15%);
}

/* header-configure */
.header-configure > ul {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.header-configure ul li{
  position: relative;
}
.header-configure ul li a{
  color: var(--body-color);
  padding: 5px 0;
  position: relative;
}

.header-configure ul li a .badge{
  position: absolute;
  bottom: -10px;
  right: -5px;
  top: auto;
}

.header-configure ul .button i {
  width: 22px;
  display: block;
  padding: 0;
  border: 0;
  background-color: transparent;
}
.header-configure ul li:hover > .button i {
  color: var(--primary-color);
}

.login-btn.d-flex{
  align-items: center;
  gap: 5px;
  line-height: 1;
}

/* header-configure */

.header.fixed .menuBtn span::before {
  background: var(--primary-color);
}

.menuBtn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 300ms ease-in-out;
  position: relative;
  cursor: pointer;
}

.header.fixed .menuBtn {
  width: 40px;
  height: 40px;
}

.menuBtn div {
  position: relative;
  width: 50%;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  transition: all 300ms ease-in-out;
}

.menuBtn span {
  display: block;
  position: relative;
  width: 100%;
  height: 2px;
  margin: 3px 0;
  transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.menuBtn span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-color);
  transform-origin: center center;
  transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.menuBtn.closeMenuBtn span#menuLine1 {
  -webkit-transform: rotate(45deg) translate(4px, 3px);
  transform: rotate(45deg) translate(4px, 3px);
}

.menuBtn.closeMenuBtn span#menuLine2 {
  right: 100px;
}

.menuBtn.closeMenuBtn span#menuLine3 {
  -webkit-transform: rotate(-45deg) translate(4px, -4px);
  transform: rotate(-45deg) translate(4px, -4px);
}

.menuContainer {
  position: fixed;
  inset: 0;
  padding-top: 61px;
  z-index: 996;
  background-color: rgb(0 123 255 / 13%);
  backdrop-filter: blur(5px);
  display: none;
}

.menuContainer .inner {
  padding: 5px 15px;
  width: 100%;
  visibility: hidden;
  background: var(--primary-color);
  background: radial-gradient(
    circle at 50% -140%,
    var(--secondary-light),
    var(--primary-color)
  );
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 16%);
  transition: all 300ms ease-in-out;
}

.header.fixed + .menuContainer {
  padding-top: calc(1rem + 30px);
}

.menuContainer.active .inner {
  visibility: visible;
}

.menuContainer a {
  color: #fff;
  transition: all 300ms ease-in-out;
  border-radius: 40px;
}

.mainMenu li:not(:last-child) a {
  border-bottom: 1px solid rgb(255 255 255 / 15%);
}

.mainMenu a {
  padding: 10px;
  font-weight: 700;
  display: block;
  position: relative;
}

.mainMenu li.active > a,
.mainMenu li:hover > a {
  padding: 10px;
  background-color: #fff;
  color: var(--primary-color);
}

.mainMenu a i {
  font-size: 75%;
  position: absolute;
  right: 10px;
  top: 50%;
  line-height: 0;
  transition: all 300ms ease-in-out;
}

.mainMenu li.active > a i,
.mainMenu li:hover > a i {
  right: 10px;
}

.mainMenu li.active > a i {
  transform: rotate(540deg);
}

.menuDrop {
  padding: 5px 15px;
  margin-bottom: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  display: none;
}
.mainMenu ul ul li:last-child a {
  border-bottom: 0;
}
/*header*/

.banner {
  margin-top: 100px;
  height: calc(100vh - (100px + 114px));
  position: relative;
  background: var(--light);
  z-index: 1;
}

/* .banner::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 6vw;
    height: 6vw;
    border-top: 3vw solid var(--primary-color);
    border-right: 3vw solid var(--primary-color);
    border-bottom: 3vw solid transparent;
    border-left: 3vw solid transparent;
} */

.banner .carousel-item::before {
  content: "";
  /* position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgb(0 0 0 / 20%);
  background: linear-gradient(rgb(255 255 255 / 15%),rgb(0 0 0 / 70%));
  z-index: 1; */
}

.banner-img {
  width: 90%;
  margin: 0 auto;
  position: relative;
  padding-top: 1rem;
  isolation: isolate;
}

.banner-circle-bg {
  position: absolute;
  inset: 0;
  background-color: var(--primary-color);
  clip-path: circle(49% at 50% 70%);
  z-index: -1;
}

.banner-circle {
  width: calc(40px + (5px * var(--i)));
  height: calc(40px + (5px * var(--i)));
  background-color: var(--secondary-color);
  border-radius: 50%;
  position: absolute;
}

.banner-circle.circle_one {
  top: 30%;
  left: 12%;
}
.banner-circle.circle_two {
  bottom: 5%;
  right: 0%;
}

.banner-dots {
  width: 80px;
  position: absolute;
}

.banner-dots.dot_right {
  right: -8%;
  bottom: 25%;
}

.banner-dots.dot_left {
  left: -3%;
  bottom: 8%;
}

.banner-dots.dot_sm {
  width: 50px;
}

.bannerText {
  max-width: 500px;
  width: 90%;
  position: absolute;
  left: 5%;
  top: 55%;
  transform: translateY(-50%);
  z-index: 9;
  transition: all 0.3s linear;
  color: #fff;
}

.banner .carousel-item.active .bannerText {
  opacity: 1;
}

.bannerText .h1 {
  font-size: 2.75rem;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  padding: 1px 0;
}

.bannerBottom {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9;
}

.bannerControlsContainer {
  display: flex;
  align-items: center;
}

.carousel-indicators {
  align-items: center;
  justify-content: flex-start;
  margin-right: auto;
  margin-left: auto;
  right: auto;
  bottom: 1rem;
  left: 5%;
  z-index: 9;
}

.carousel-indicators li {
  height: 5px;
  border-radius: 10px;
  transition: all 300ms ease-in-out;
  border: 0;
}

.carousel-indicators li:hover,
.carousel-indicators .active {
  background-color: var(--secondary-color);
}

.bottomControl {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
}

.bottomControl .carousel-control-next,
.bottomControl .carousel-control-prev {
  position: static;
  top: auto;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  background-color: var(--secondary-color);
  margin: 0 5px;
  opacity: 1;
  z-index: 9;
}

.carousel-control-next .carousel-control-next-icon,
.carousel-control-prev .carousel-control-prev-icon {
  background-size: 60%;
}
.bottomControl .sm.carousel-control-next,
.bottomControl .sm.carousel-control-prev {
  width: 25px;
  height: 25px;
  margin: 0 2px;
  border-radius: 50%;
}

.carousel-control-next.sm .carousel-control-next-icon,
.carousel-control-prev.sm .carousel-control-prev-icon {
  background-size: 50%;
}

.bannerSocial {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 9;
}

.bannerSocial a {
  font-size: 13px;
  display: block;
  padding: 5px;
  margin: 5px 0;
  color: #fff;
}

.bannerSocial a:hover {
  color: var(--facebook);
}

.scrollDown {
  position: absolute;
  left: calc(50% - 15px);
  bottom: 20px;
  width: 30px;
  cursor: pointer;
  z-index: 9;
  animation: bounce 1s alternate infinite;
}

@keyframes bounce {
  100% {
    bottom: 10px;
  }
}

.cloud {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 39%;
  background: url(../images/cloud.png);
  animation: animateclouds 80s linear infinite;
  pointer-events: none;
  opacity: 0.7;
}

@keyframes animateclouds {
  0% {
    background-position: 0px;
  }

  100% {
    background-position: -3000px;
  }
}

.spiral-pattern {
  position: absolute;
  height: 100%;
  top: 0;
  background: url(../images/pattern2.png) -4.5vw top / 29vw no-repeat repeat fixed;
  width: 12vw;
  opacity: 0.2;
  animation: blink 5s alternate infinite;
  transition: all 300ms linear;
}
@keyframes blink {
  50% {
    filter: hue-rotate(37deg);
  }
}

.iconBox .inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1.5rem;
  /* border-radius: 10px;
  background-color: var(--secondary-light);
  color: var(--body-color); */
}

.iconBox .img-fluid {
  max-width: 50px;
  flex: 0 0 50px;
  border-radius: 50%;
  background-color: var(--primary-color);
  padding: 5px;
  margin-bottom: 0;
}

.iconBox .inner h5 {
  font-weight: 700;
}

.iconBox.sm .inner {
  padding: 0;
  font-weight: 600;
  font-size: 10px;
}

.iconBox.sm .img-fluid {
  max-width: 30px;
  flex: 0 0 30px;
}

/* Product */
.myCard .inner {
  height: 100%;
  position: relative;
  border-radius: 10px;
  background-color: var(--clr);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  color: var(--body-color);
  z-index: 1;
}
.myCard .inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(255 255 255 / 30%);
  clip-path: circle(60% at 90% -20%);
  transition: all 300ms ease-in-out;
  z-index: -1;
}
.myCard .inner:hover::before {
  clip-path: circle(90% at 90% 0%);
}

.myCard .inner .pet-img {
  max-width: 70%;
  flex: 0 0 70%;
}
.myCard .inner .pet-type h5 {
  font-weight: 700;
}

.productBox.swiper-slide{
  height: auto;
}

.productBox .inner {
  height: 100%;
  /* background: linear-gradient(to bottom right,var(--light),var(--secondary-light)); */
  background-color: #fff;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  padding: 1rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.productBox .inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--clr);
  clip-path: circle(70% at 90% -20%);
  transition: all 300ms ease-in-out;
  z-index: -1;
}

.discBadge{
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
}

.product-img {
  overflow: hidden;
  position: relative;
  isolation: isolate;
  height: 200px;
}

.product-img .badge {
  position: absolute;
}

.product-details {
  /* height: 100%; */
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.productBox-text p a {
  line-height: 1.2;
  color: var(--body-color);
}

.productBox-text p a:hover {
  color: var(--secondary-color);
}

.proBox-price{
  gap: 5px;
}

.productBox-buttons {
  gap: 10px;
  flex-wrap: wrap;
}

.readmore.productBox-buttons .button {
  display: flex;
  align-items: center;
  min-width: 30px;
}

.productBox-buttons .button i {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 30px;
  height: 30px;
}

.productDetails-gridWrapper{
  display: grid;
  gap: 30px;
  grid-auto-columns: 2fr 1fr;
}

.grid-item1{
  grid-column: 1;
  grid-row: 1 / 3;
}
.grid-item2{
  grid-column: 2;
}

.productDetails-gridWrapper .list-group-item{
  padding-left: 0;
  padding-right: 0;
}

.productDetails-gridWrapper .list-group-item:first-child{
  padding-top: 0;
}
.productDetails-gridWrapper .list-group-item:last-child{
  padding-bottom: 0;
}
/* Product */

/* services */
.gridBox1{grid-area: service1;}
.gridBox2{grid-area: service2;}
.gridBox3{grid-area: service3;}
.gridBox4{grid-area: service4;}
.gridBox5{grid-area: service5;}
.gridBox6{grid-area: service6;}
.gridBox7{grid-area: service7;}

.servicesGridContainer{
  display: grid;
  grid-template-areas: 'service1 service2'
                      'service1 service3'
                      'service4 service4'
                      'service5 service7'
                      'service6 service7';
  gap: 30px;
}

.serviceBox .inner {
  position: relative;
  color: #fff;
  overflow: hidden;
}

.serviceBox-sm .inner {
  height: 250px;
}
.serviceBox .inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, rgb(0 0 0 / 85%));
  border-radius: 10px;
}

.serviceTextBox {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem;
}
/* services */

/* Fixed on scroll down, static on scroll up */
.pageAside {
  position: relative;
}

.dock .aside-inner {
  position: fixed;
  width: 255px;
}

.stop .aside-inner {
  position: absolute;
  bottom: 0;
  top: auto !important;
  right: 15px;
  width: calc(100% - 30px);
}
/* Fixed on scroll down, static on scroll up */

/* Blogs page */
.category-panel section{
  padding: 1.5rem;
}
.category-panel .inner section:not(:last-of-type){
  margin-bottom: 1.5rem;
}

.category-panel .inner .category li:not(:last-of-type){
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgb(0 0 0 / 10%);
}
.category-panel .inner .category li a{
  color: var(--body-color);
}
.category-panel .inner .category li a:hover{
  color: var(--primary-color);
}
.category-panel .inner .category li a:hover .badge.bg-secondary{
  background-color: var(--primary-color) !important;
}

.side-recentBlogs .carousel-item a{
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--body-color);
  font-weight: 600;
  padding: 1rem;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid rgb(0 0 0 / 10%);
  line-height: 1.2;
  font-size: 14px;
}

.side-recentBlogs .carousel-item a:hover{
  color: var(--secondary-color);
}

.side-recentBlogs a img{
  border-radius: 10px;
  height: 80px;
  object-fit: cover;
}

.blog-content-body img{
  margin-bottom: 1rem;
  border-radius: 10px;
}
/* Blogs page */

/* policy */
.policy-slider .swiper-slide {
  width: max-content;
}
.policy-slider .swiper-slide img {
  width: auto;
  height: 41vw;
  filter: grayscale(0.5);
}
/* policy */

/* csr */
.csr-container {
  background-color: #123628;
  color: #fff;
}
/* csr */

.stats {
  display: flex;
  align-items: center;
  gap: 0 20px;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px dashed rgb(0 0 0 / 15%);
}

.stats li {
  flex: 1 0 0;
}

.stats li h2 {
  font-weight: 700;
}

.stats li i {
  font-size: 1.25rem;
}

/* Video and growth */
.modal-title {
  font-weight: 700;
  color: var(--primary-color);
}

.modal-content button.close {
  position: absolute;
  top: -20px;
  right: -10px;
  padding: 0 0 2px;
  margin: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  text-shadow: none;
  color: var(--body-color);
  background-color: var(--secondary-color);
  opacity: 1;
  text-align: center;
  border-radius: 50%;
}

.modal-content .modal-header {
  padding: 0;
  border: none;
}
.close:not(:disabled):not(.disabled):hover {
  opacity: 1;
  background-color: rgb(141, 0, 0);
  color: #fff;
}

.videoth {
  translate: 0 15%;
  position: relative;
  z-index: 1;
}

.videoth::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 50%);
}

.videoth img {
  height: 440px;
  object-fit: cover;
}

.videoBtn {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: #fff;
  transition: all 300ms ease-in-out;
  animation: breathe 800ms alternate infinite;
}

.videoBtn::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 30%);
  z-index: -1;
  transition: all 300ms ease-in-out;
  transition-delay: 100ms;
  animation: breathe 800ms alternate infinite;
}

@keyframes breathe {
  100% {
    scale: 1.2;
  }
}

.videoBtn:hover {
  scale: 1.2;
}

.videoBtn:hover::before {
  scale: 1.2;
  border-color: #fff;
}

.viewmore {
  width: 100%;
  margin-top: 1.25rem;
}

.viewmore .button {
  color: var(--body-color);
  font-size: .875rem;
  font-weight: 600;
}

.viewmore .button.circular i{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--secondary-light);
  transition: all 300ms ease-in-out;
}

.viewmore .button.circular i:hover{
  background-color: var(--secondary-color);
  color: #fff;
}

.newsBox section article h4 a:hover,
.viewmore .button:hover {
  color: var(--primary-color) !important;
}

.title {
  font-weight: 700;
  font-size: 1.5rem;
}

.headingContainer{
  margin-bottom: 30px;
}

.heading {
  display: table;
  position: relative;
  margin-bottom: 30px;
  z-index: 1;
  padding-bottom: 1rem;
}

.heading::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  background-color: var(--secondary-color);
}

.heading.mx-auto::before {
  left: 50%;
  transform: translateX(-50%);
}

.heading h2,
.heading h4,
.heading h5,
.heading h6 {
  display: block;
}

.heading .h1 {
  color: var(--primary-color);
  font-weight: 700;
}

.heading .h1 strong {
  font-weight: 800;
}

.heading h4 {
  font-weight: 700;
  color: var(--primary-color);
}

.heading h6 {
  font-weight: 400;
}

.separator {
  max-width: 400px;
  width: 90%;
  position: relative;
}

.separator::before {
  content: "";
  position: absolute;
  height: 3px;
  width: 40px;
  background-color: var(--primary-color);
  left: calc(50% - 20px);
  top: -2px;
}

.text-serif {
  font-family: var(--serif);
}

.text-primary {
  color: var(--primary-color) !important;
}
.text-secondary {
  color: var(--secondary-color) !important;
}

.bg-primary {
  background-color: var(--primary-color) !important;
  color: #fff;
}
.bg-secondary {
  background-color: var(--secondary-color) !important;
  color: #fff;
}

.bg-secondary-light {
  background-color: var(--secondary-light) !important;
}

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

.bg-image {
  background: center / cover no-repeat fixed;
}

.bg-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 70%);
  z-index: -1;
}

.scroller {
  overflow: auto;
}

.scroller::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.scroller::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--light);
  border-radius: 10px;
}

/* Handle */
.scroller::-webkit-scrollbar-thumb {
  background: var(--secondary-color);
  border-radius: 10px;
}

/* Handle on hover */
.scroller::-webkit-scrollbar-thumb:hover {
  background: #000;
}

.readmore {
  width: 100%;
  margin-top: 2rem;
}

.readmore.d-flex {
  gap: 10px;
}

.readmore .button {
  position: relative;
  z-index: 1;
  display: table;
  padding: 10px 20px;
  min-width: 130px;
  border-radius: 40px;
  color: #fff;
  background-color: var(--primary-color);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  transition: all ease-in-out 0.2s;
}

.readmore button {
  border: 0;
  background: none;
}

.readmore .button:hover {
  background-color: var(--secondary-color);
  box-shadow: 0 10px 30px rgb(0 0 0 / 15%);
}

.readmore .button:hover i {
  color: rgba(255, 255, 255, 0.5);
}

.readmore .button.sm {
  padding: 5px 8px;
}

.readmore .button.bg-white {
  color: var(--body-color);
}

.readmore .button.bg-white:hover {
  color: #fff;
  background-color: var(--secondary-color) !important;
}
.readmore .button.bg-white:hover i {
  color: #fff;
}

.readmore .button.bg-secondary:hover {
  color: #fff;
  background-color: var(--primary-color) !important;
}

.readmore .button.stroke {
  background-color: transparent;
  color: var(--body-color);
  border: 2px solid var(--secondary-color);
}
.readmore .button.stroke:hover {
  background-color: var(--secondary-color);
  color: #fff;
}

.controls {
  position: absolute;
  width: 110px;
  height: 40px;
  right: 10px;
  bottom: 10px;
  z-index: 9;
}

.controls a {
  position: static;
  display: table;
  width: 100%;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
  text-align: center;
  color: var(--primary-color);
  font-size: 13px;
  border-bottom: 1px solid rgb(0 0 0 / 20%);
  opacity: 1;
}

.controls a:last-child {
  border-bottom: none;
}

.controls a:focus,
.controls a:hover {
  color: var(--primary-color) !important;
  opacity: 1;
}

.multiply {
  mix-blend-mode: multiply;
}

/* key points */
.key-points .inner {
  padding: 0 25% 12.5vw 10%;
}
.benefits-list {
  width: 100%;
  max-width: 600px;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.75;
}
.heading-md + .benefits-list {
  margin-top: 23px;
}

.benefits-list li {
  position: relative;
  padding: 1em 0 1em 1.5em;
  border-bottom: 1px solid rgb(0 0 0 / 7%);
}

.bg-primary .benefits-list li {
  border-bottom: 1px solid rgb(255 255 255 / 15%);
}

.benefits-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.625em;
  display: block;
  width: 6px;
  height: 12px;
  background-image: url(../images/icons/bullet.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.bg-primary .benefits-list li::before {
  filter: brightness(50) grayscale(1);
}
.pet-products-cb
{
  display:none;
  margin: 0;
  position: absolute;
  top: -3px;
  left: 0;
  background: #ac4101;
  color: #fff;
  padding: 4px;
  border-radius: 6px;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 600;
  width: 123px;
  text-align: center;

}
.header li:hover > .pet-products-cb
{
  display: block;
}
@media (min-width: 768px) {
  .benefits-list li {
    padding: 1em 0 1em 1.5em;
  }
  .benefits-list li::before {
    top: 1.75em;
  }
}
/* key points */

/* blog */
.newsBox .inner {
  display: block;
  border-radius: 10px;
  height: 100%;
  padding: 1.5rem;
  background-color: #fff;
  box-shadow: 0 10px 30px rgb(0 0 0 / 15%);
  color: var(--body-color);
}

.newsBox .inner a {
  color: var(--body-color);
}

.newsBox .img-fluid {
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
}
.newsBox .img-fluid img {
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.newsBox section h5 {
  font-weight: 700;
  color: var(--secondary-color);
}

.newsBox section h5:hover {
  color: var(--primary-color);
}

.newsBox section p {
  margin-bottom: 0px;
  line-height: 1.3;
}
/* Research */

/* prints */
.newsBox.swiper-slide {
  padding: 0rem 0 2rem;
  height: auto;
}
/* prints */

/* testimonials */
.testimBox {
  height: auto;
}

.testimBox .inner {
  height: 100%;
  padding: 2rem;
  background: linear-gradient(to bottom right, var(--secondary-light), #fff);
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  border-radius: 10px;
}

.quotation-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  line-height: 0;
  width: 50px;
  height: 50px;
  margin-bottom: 1rem;
  padding: 1rem 0 0;
  border-radius: 50%;
  background: linear-gradient(to bottom right, var(--secondary-light), #fde8da);
  box-shadow: 3px 3px 3px #fffbfb, -3px -3px 3px #fde8da;
}

.testim-text {
  max-height: 110px;
  padding-right: 10px;
}

.testim-name {
  display: block;
  margin-top: 1.25rem;
  font-weight: 600;
  color: var(--secondary-color);
}
/* testimonials */

.bg-circle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 50%,
    var(--secondary-color),
    var(--primary-color)
  );
  opacity: 0.1;
  clip-path: circle(60% at 90% -20%);
  z-index: -1;
  pointer-events: none;
}

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

/* custom swiper controls */
.swiper-button-next,
.swiper-button-prev {
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border-radius: 50%;
  background: url(../images/arrow-right.svg) center / 16px no-repeat
    var(--body-color);
  transition: all 300ms ease-in-out;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: var(--secondary-color);
  box-shadow: 0 10px 30px rgb(0 0 0 / 15%);
}

.swiper-button-prev,
.swiper-rtl .swiper-button-prev {
  transform: rotate(-180deg);
}

.swiper-button-next:after,
.swiper-button-prev:after {
  display: none;
}

.bottom-control {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 10px;
  margin-top: 10px;
}

.bottom-control div[class^="swiper-button"] {
  position: static;
  margin-top: 0;
}

.swiper-pagination {
  bottom: 0 !important;
}

.swiper-pagination-bullet-active {
  background-color: var(--primary-color);
  width: 20px;
  border-radius: 10px;
}

.bar-controls {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.bar-controls .bar-arrows {
  position: relative;
  width: 100px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bar-controls .bar-arrows > div {
  position: static !important;
  margin-top: 0 !important;
  width: 40px;
  height: 40px;
  background-size: 22px;
}

.bar-controls .swiper-horizontal > .swiper-pagination-progressbar,
.bar-controls .swiper-pagination-progressbar.swiper-pagination-horizontal {
  position: static;
  width: calc(100% - 120px);
}

.bar-controls
  .swiper-pagination-progressbar
  .swiper-pagination-progressbar-fill {
  background: linear-gradient(
    45deg,
    var(--secondary-color),
    var(--primary-color),
    var(--secondary-color)
  );
}
/* custom swiper controls */

/*Footer*/
.available-teamBox .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  text-align: center;
}

.available-teamBox .inner i {
  max-width: 30px;
  flex: 0 0 30px;
}

.footer-area {
  position: relative;
  z-index: 1;
}

.footer-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/pets-lining.svg) center bottom / 80% no-repeat;
  opacity: 0.6;
  z-index: -1;
}

.footerBox .title {
  font-size: 1rem;
  color: var(--secondary-color);
  text-transform: uppercase;
}
.footerAbout .section .socials {
  margin-top: 30px;
  display: flex;
}
.footerAbout .section .socials li {
  margin-right: 10px;
}
.footerAbout .section .socials li a::before {
  display: none;
}
.footerAbout .section .socials li a {
  padding-left: 0;
}
.footerAbout .section p,
.newsletterBox p {
  font-weight: 600;
  line-height: 1.8;
  margin-bottom: 0;
  font-size: 13px;
}
.footerBox ul li {
  margin-bottom: 10px;
}
.footerBox ul li a {
  transition: all 300ms ease-in-out;
  padding-left: 20px;
  font-weight: 600;
  position: relative;
  color: var(--body-color);
}
.footerBox ul li a::before {
  content: "\f054";
  font: 900 10px/0 "Font Awesome 5 Free";
  position: absolute;
  color: var(--secondary-color);
  left: 0;
  top: 50%;
}

.footerAbout .section .socials li a i {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: #fff;
  transition: all 300ms ease-in-out;
}
.footerAbout .section .socials li a i.fa-facebook-f {
  background-color: var(--facebook);
}
.footerAbout .section .socials li a i.fa-twitter {
  background-color: var(--twitter);
}
.footerAbout .section .socials li a i.fa-instagram {
  background-color: var(--instagram);
}
.footerAbout .section .socials li a i.fa-whatsapp {
  background-color: var(--whatsapp);
}

.footerAbout .section .socials li a i:hover {
  background-color: var(--secondary-color);
}
.footerBox ul li a:hover {
  color: var(--secondary-color);
}
.newsletterBox small {
  display: block;
  margin-bottom: 20px;
}
.newsletterBox .form-group {
  margin-bottom: 0;
}
.newsletterBox input {
  border-radius: 3px;
  height: auto;
  font-size: 13px;
  font-weight: 500;
  background: url(../images/icons/email.svg) 96% center no-repeat #fff;
  background-size: 20px;
  outline: none;
}
.newsletterBox .readmore button {
  width: 100%;
  text-align: center;
  border-radius: 3px;
  margin-top: 10px;
}

.download-app {
  display: flex;
  gap: 10px;
  margin-top: 1rem;
}
.download-app a {
  width: 100px;
}

.footer-area .bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 5rem;
}
.footer-area .bottom ul {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.footer-area .bottom li img {
  width: 40px;
}
.footer-area .bottom p {
  display: flex;
  font-size: 12px;
  align-items: center;
  text-align: center;
  margin-bottom: 0;
  font-weight: 600;
  gap: 5px;
}
.footer-area .bottom p img {
  width: 14px;
}
.button-top {
  background: var(--secondary-color);
  position: fixed;
  cursor: pointer;
  right: 10px;
  bottom: 10px;
  font-size: 13px;
  opacity: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 5px;
  text-align: center;
  transition: all 300ms ease-in-out;
  z-index: 99;
}
.button-top i {
  color: #fff;
}
.button-top:hover {
  background: var(--body-color);
}
/*Footer*/

/* Inside page */
.pageHead {
  margin-top: 100px;
  background-color: var(--secondary-color);
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 1;
}
.pageHead::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/pets-lining.svg) center 0 / cover no-repeat;
  filter: invert(1);
  opacity: 0.3;
  z-index: -1;
}

.pageTitle .h1 {
  font-weight: 700;
}

.breadcrumb {
  background-color: transparent;
  flex-wrap: nowrap;
  margin-bottom: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  font-size: 12px;
  font-weight: 600;
}

.breadcrumb li a,
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--body-color);
}

.breadcrumb li a:hover {
  color: var(--secondary-color);
}

.breadcrumb li.active {
  color: var(--secondary-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stepsBox .inner {
  flex-direction: column;
  text-align: center;
  background-color: var(--secondary-light);
  position: relative;
}
.stepsBox .inner .img-fluid {
  background-color: transparent;
  max-width: 70px;
  flex: 0 0 70px;
}

.number {
  position: absolute;
  right: -5px;
  top: -5px;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 0;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  background-color: var(--secondary-color);
  color: #fff;
}

/*--faqs-css--*/
.faqs-box .faqs_question {
  padding: 1rem 2.25rem 1rem 1.25rem;
  cursor: pointer;
  position: relative;
  border-radius: 10px;
  background-color: #fff;
  border-bottom: 1px solid rgb(0 0 0 / 0%);
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
  font-weight: 700;
  margin-bottom: 5px;
  transition: all 300ms ease-in-out;
}
.faqs-box .faqs_question:hover,
.faqs-box .faqs_question.active {
  background: var(--primary-color);
  color: #fff;
}
.faqs-box .faqs_question.active {
  margin-bottom: 0;
  border-radius: 10px 10px 0 0;
  border-bottom-color: rgb(255 255 255 / 15%);
}

.faqs-box .faqs_question i{
  position: absolute;
  right: 1rem;
  top: 1.25rem;
  transition: all 300ms ease-in-out;
}
.faqs-box .faqs_question:hover i,
.faqs-box .faqs_question.active i{
  transform: rotate(180deg);
}

.faqs-box .faqs_answer {
  display: block;
  border-radius: 0 0 10px 10px;
  background: var(--primary-color);
  box-shadow: 0 10px 2rem rgb(0 0 0 / 15%);
  color: #fff;
  margin-bottom: 1rem;
}
.faqs-box .faqs_answer .inside {
  padding: 1rem 1.25rem;
}
.faqs-box .faqs_answer p:last-child{
  margin-bottom: 0;
}

.faqs-box > h4 {
  letter-spacing: 1px;
  margin: 30px 0 10px;
  padding-left: 10px;
  border-left: 5px solid #212121;
}
/*--faqs--*/

/* sorting panel */
.sorting-panel .inner, .productsViewStyle{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.productsViewStyle button{
	outline:none;
	background-color: transparent;
	padding:0;
  width: 33px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
	border:1px solid rgb(0 0 0 / 0%);
}

.productsViewStyle button.currentView{
  background-color: var(--secondary-color);
}
.productsViewStyle button.currentView i{
  color: #fff;
}
/* sorting panel */

/* filter panel */
.fitler-panel .inner{
  padding: 1rem;
}

.filterBox:not(:last-of-type){
  margin-bottom: 1rem;
}

.filterBox .filter-title{
  font-size: 14px;
  color: var(--primary-color);
}

.filterBox li:not(:last-child){
  margin-bottom: 5px;
}

.filterBox .custom-control-label{
  padding: 5px 10px 5px 2rem;
}

.filterBox .custom-control-label::before, .filterBox .custom-control-label::after{
  top: 50%;
  transform: translateY(-50%);
}
/* filter panel */

/* --Product page-- */
.product-imgBox{
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 10%);
}

#product-img{
  height: 450px;
  object-fit: contain;
}

.product-imgBox-thumb-slider{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.product-imgBox-thumb-slider .thumb-slide{
  width: 90px;
  height: 90px;
  position: relative;
  padding: 5px;
  background-color: #ffffff;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.product-imgBox-thumb-slider .thumb-slide img{
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}

.productDetails .headingContainer{
  border-bottom: 1px solid var(--secondary-color);
}

.productDetails .headingContainer .heading::before{
  display: none;
}

.price-strip{
  margin-bottom: 1.5rem;
}
.price-strip .d-flex{
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 10px;
}

.badge-success{
  background-color: #9effc1;
  color: var(--success);
}
.price-strip .badge-success{
  font-size: 100%;
}

.product-offers-accord .card{
  border-radius: 10px;
  border-color: rgb(0 0 0 / 10%);
  font-size: 14px;
}

.product-offers-accord .card-header{
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: transparent;
  gap: 10px;
}

.product-offers-accord .card-header .btn{
  border-radius: 50%;
  background-color: var(--light);
  padding: .25rem .5rem;
  transition: all 300ms ease-in-out;
}

.product-offers-accord .card-header .btn.collapsed{
  transform: rotate(180deg);
}

.product-offers-accord .card-header .btn:hover{
  background-color: var(--secondary-light);
}

.product-offers-accord .card-header .card-offerText{
  display: flex;
  align-items: center;
  gap: 5px;
}

.product-offers-accord .card-header .card-offerText i{
  max-width: 20px;
}

.product-offers-accord .card-body p:last-of-type{
  margin-bottom: 0;
}

.productDetails-Policy{
  margin: .75rem 0;
  padding: 5px;
  border-radius: 1000px;
}

.colorBtn{
  border: 1px solid rgb(0 0 0 / 15%);
  font-weight: 600;
}

.colorBtn:hover,
.colorBtn:focus{
  border-color: var(--body-color);
}
.colorBtn:focus{
  box-shadow: none;
}

.colorBtnBox{
  display: inline-block;
}

.colorBtnBox input[type=radio]{
  pointer-events: none;
}

.colorBtnBox input[type=radio]:checked + .colorBtn{
  border-color: var(--primary-color);
  background-color: rgb(240 249 255);
}

.colorBtn[data-stock="out"]{
  position: relative;
  opacity: .75;
}

.colorBtn[data-stock="out"]::before{
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid var(--danger);
  transform: rotate(-7.5deg);
}

.colorBtn[data-stock="out"]:hover{
  border-color: var(--danger);
}

.product-quantity{
	width: fit-content;
  display: flex;
	border:1px solid var(--secondary-color);
	position: relative;
  border-radius: 50px;
  overflow: hidden;
}

.product-quantity *{padding:5px 5px; outline:none;}
.product-quantity button{cursor:pointer; border: none; background:#fff; font-weight: 700; padding-top: 0; width:40px; text-align:center;}
.product-quantity button:active{background:var(--primary-color); color:#fff;}
.product-quantity input{color:var(--body-color); width: 70px; border:solid var(--secondary-color); border-width: 0 1px; font-weight: 700; text-align: center; height: auto;}

.product-quantity.sm button{
  width: 30px;
}
.product-quantity.sm input{
  width: 50px;
  padding: 1px;
}

/* account page */
.accountBox .inner{
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px 1rem;
  border-radius: 10px;
  padding: 1.5rem;
  color: var(--body-color);
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
  background-color: #fff;
  transition: all 300ms ease-in-out;
}
.accountBox .inner:hover{
  background-color: var(--secondary-light);
  box-shadow: none;
}
.accountBox .inner .img-fluid{
  max-width: 50px;
}
.accountBox a.inner h6{
  color: var(--primary-color);
  transition: all 300ms ease-in-out;
}
.accountBox a.inner:hover h6{
  color: var(--secondary-color);
}
.accountBox .inner p a{
  color: var(--secondary-color);
}
.accountBox .inner p a:hover{
  color: var(--primary-color);
}
/* account page */
.popover{
  min-width: 160px;
}
/* Order */
.ordersHead{
  margin-bottom: 1rem;
  border-bottom: 1px solid rgb(0 0 0 / 15%);
}
.ordersHead a{
  padding: 8px;
  color: var(--body-color);
  display: block;
  border-bottom: 3px solid transparent;
}
.ordersHead a:hover,
.ordersHead a:focus{
  color: var(--primary-color);
}

.ordersHead a.active{
  color: var(--secondary-color);
  font-weight: 600;
  border-bottom-color: var(--secondary-color);
}

.card{
  border-radius: 10px;
}
.card-header{
  background-color: var(--secondary-light);
}

.card-header:first-child {
  border-radius: calc(10px - 1px) calc(10px - 1px) 0 0;
}

.card-header a{
  line-height: 1;
  color: var(--secondary-color);
  font-weight: 600 !important;
}
.card-header a:hover{
  color: var(--primary-color);
}
.card-header small{
  margin-bottom: 3px;
  font-weight: 500;
}
.card-header .small{
  font-weight: 600;
}
.card-header i{
  font-size: 10px;
}
.orderDate{
  display: flex;
  gap: 10px 3rem;
}

.order-header-column{
  line-height: 1;
}

.orderNumber .d-flex{
  gap: 10px;
}
.orderNumber .d-flex a:first-of-type{
  padding-right: 10px;
  border-right: 1px solid rgb(0 0 0 / 25%);
}

.orderedProduct{
  display: flex;
  gap: 1rem;
}

.orderedProduct .img-fluid{
  max-width: 70px;
}

.orderedProductDetail p a{
  color: var(--primary-color);
  font-weight: 600;
}

.orderedProductDetail p a:hover{
  text-decoration: underline;
}

.orderedBoxButton:not(:last-of-type){
  margin-bottom: 1rem;
}

.orderedBoxButton.d-flex{
  gap: 10px;
}

.orderedBoxButton .button{
  border-radius: 40px;
  padding: 5px 1rem;
  color: #fff;
  background-color: var(--secondary-color);
  font-size: 12px;
  font-weight: 600;
  transition: all 300ms ease-in-out;
}

.orderedBoxButton .button.stroke{
  background-color: transparent;
  border: 1px solid rgb(0 0 0 / 20%);
  color: var(--body-color);
}

.orderedBoxButton .button:hover{
  background-color: var(--primary-color);
  color: #fff;
}
/* Order */
/* Order details */
.paymentMethodBox p img{
  width: 30px;
  display: inline;
  vertical-align: middle;
}

.orderSummaryBox ul li{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  line-height: 1.5;
}
/* Order details */

.list-inline-item{
  line-height: 1;
  font-weight: 600;
  font-size: 0.875rem;
}
.list-inline-item:not(:last-child){
  padding-right: 0.75rem;
  border-right: 1px solid rgb(0 0 0 / 15%);
}

.card-body .list-inline-item{
  font-size: 0.75rem;
}

/* Addresses */
.newAddressCard .addNewAddress{
  color: #565656;
  border: 2px dashed #ccc;
  padding: 1rem 0;
}
.newAddressCard .addNewAddress .card-body{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem 10px;
}
.newAddressCard .addNewAddress:hover{
  color: var(--body-color);
}
.newAddressCard .addNewAddress span{
  font-size: 3.5rem;
  line-height: 0;
  font-weight: 600;
  color: #ccc;
}

.addressCard .badge{
  position: absolute;
  right: 10px;
  top: 10px;
  font-weight: 500;
}

.addressCard .card-body{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  row-gap: 2rem;
}
/* Addresses */

/* Cart page */
.yourCartCount {
  font-weight: 600;
}

.cartBox-price{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

.cartBox-price .product-quantity *{
  padding: 2px 5px;
}
.cartBox-price .product-quantity input{
  width: 50px;
}

.cart-basket {
	font-size: 14px;
}

.cart-basket .cartprice i {
	font-size: 90%;
	margin-right: 3px;
}

.cart-basket .cartprice p {
	padding-bottom: 8px;
    margin-bottom: 8px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: space-between;
}

.cart-basket .cartprice h6 {
	margin-top: 10px;
	color: #111;
    display: flex;
    justify-content: space-between;
}
/* Cart page */

/* terms */
.termsBody:not(:last-of-type){
  margin-bottom: 2rem;
}
/* terms */
/* Inside page */

.form-group {
  margin-bottom: 1rem;
}

label {
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.form-control {
  border-radius: 3px;
  height: auto;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  padding: 12px 10px;
  border: none;
  color: var(--body-color);
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  transition: all 300ms ease;
}

.form-control.form-control-sm {
  padding: 5px 10px;
}

.form-control:focus {
  box-shadow: none;
  border-bottom-color: var(--secondary-color);
}
textarea.form-control {
  resize: none;
}

.form-control[readonly] {
  background: none;
}

.custom-control-inline {
  margin-right: 0;
  padding-left: 0;
  width: 100%;
  display: block;
}

.custom-control-label {
  display: block;
  position: relative;
  padding: 13px 10px 13px 2rem;
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  border-radius: 3px;
}
.custom-control-label::before,
.custom-control-label::after {
  top: 15px;
  left: 10px;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #ff863e;
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgb(249 94 1 / 25%);
}

/* Contact */
.contactBox .inner {
  background-color: var(--secondary-light);
  height: 100%;
  padding: 2.5rem;
  border-radius: 5px;
}

@media only screen and (min-width: 1920px) {
  .contactBox .inner {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

@media only screen and (max-width: 360px) {
  .contactBox .inner {
    padding: 20px 10px;
  }
}

.contactBox h4 {
  margin-bottom: 1rem;
  font-weight: 700;
  color: var(--secondary-color);
}

.contactBox ul li {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.contactBox ul li:last-child {
  margin-bottom: 0;
}

.contactBox ul li i {
  color: var(--secondary-color);
  line-height: 1.5;
}

.contactBox ul li a {
  color: var(--body-color);
}

.contactBox ul li a:hover {
  text-decoration: underline;
}
/* Contact us */

/* customize modal */
.modal-backdrop.show {
  opacity: 1;
  background: rgb(0 0 0 / 90%);
  background: linear-gradient(
    -42deg,
    rgb(153 19 19 / 90%),
    rgb(35 66 96 / 95%)
  );
  backdrop-filter: blur(5px);
}
/* customize modal */

/*transformation Animation*/
.leftTranslate {
  -webkit-transform: translate(-200px, 0);
  transform: translate(-200px, 0);
  opacity: 0;
  -webkit-transition: all 1000ms;
  transition: all 1000ms;
}

.rightTranslate {
  -webkit-transform: translate(200px, 0);
  transform: translate(200px, 0);
  opacity: 0;
  -webkit-transition: all 1000ms;
  transition: all 1000ms;
}

.topTranslate {
  -webkit-transform: translate(0, -200px);
  transform: translate(0, -200px);
  opacity: 0;
  -webkit-transition: all 1000ms;
  transition: all 1000ms;
}

.bottomTranslate {
  -webkit-transform: translate(0, 200px);
  transform: translate(0, 200px);
  opacity: 0;
  -webkit-transition: all 1000ms;
  transition: all 1000ms;
}

.doneTranslate {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  opacity: 1;
}

.fadeOut {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: all 1000ms ease-in-out;
  transition: all 1000ms ease-in-out;
}

.fadeIn {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  -webkit-transition: all 1000ms;
  transition: all 1000ms;
}

.zoomOut {
  transform: scale(0);
  transition: all 0.8s ease-in-out;
}

.zoomIn {
  transform: scale(1);
}
/*transformation Animation*/

.list {
  padding-left: 20px;
}

.list li {
  margin-bottom: 10px;
}
.list li::marker {
  color: var(--secondary-color);
}
ol.list li::marker {
  font-weight: 700;
}