/* Css For Nexmart */

/************ TABLE OF CONTENTS ***************
1. Fonts
2. Reset
3. Global
4. Main Header/style-one/style-two
5. Main Slider/style-one/style-two
6. Intro Section
7. Welcome Section
9. Cta Section
8. Research Fields
10. Testimonial Section
11. Researches Section
12. Team Section
14. Video
15. Fact Counter
16. News Section
19. Clients Section
20. Main Footer
21. Footer Bottom
22. Research Style Two
23. Innovative Solution
24. Discover Section
25. Testimonial Section
26. Chooseus Section
27. News Style Two
28. Page Title
29. Research Page Section
30. Research Details
31. Professor Page Section
32. Professor Details
33. About Section
34. Error Section
35. Blog Page Section
36. Blog Details
37. Blog Sidebar
38. Contact Section
39. Google Map


**********************************************/



/*** 

====================================================================
  Reset
====================================================================

 ***/
* {
  margin:0px;
  padding:0px;
  border:none;
  outline:none;
}


/*** 

====================================================================
  Global Settings
====================================================================

 ***/


:root{
  --theme-color: #4f46e5;
  --theme-color-2: #10b981;
  --theme-color-3: #ef4444;
  --theme-color-4: #84cc16;
  --theme-color-5: #f59e0b;
  --theme-color-6: #06b6d4;
  --theme-color-7: #ec4899;
  --theme-color-8: #047857;
  --theme-color-9: #d97706;
  --theme-color-10: #e11d48;
  --secondary-color: #0f172a;
  --text-color: #334155;
  --title-color: #0f172a;
  --text-font: "Rethink Sans", "Roboto", sans-serif;
  --title-font: "Outfit", "Rethink Sans", sans-serif;
  --title-font-two: "Outfit", sans-serif;
  --title-font-three: "Outfit", sans-serif;
  --title-font-four: "Outfit", sans-serif;
  --title-font-five: "Outfit", sans-serif;
}





body {
  font-size:16px;
  color: var(--text-color);
  line-height:28px;
  font-weight:400;
  background:#f8fafc;
  font-family: var(--text-font);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center top;
  -webkit-font-smoothing: antialiased;
}

  @media (min-width:1200px) {
  .container {
    max-width: 1200px;
    padding: 0px 15px;
  }
}

.large-container{
  max-width: 1680px;
  padding: 0px 15px;
  margin: 0 auto;
}

.container-fluid{
  padding: 0px;
}

.auto-container{
  position:static;
  max-width:1320px;
  padding:0px 15px;
  margin:0 auto;
}

.small-container{
  max-width:680px;
  margin:0 auto;
}

.boxed_wrapper{
  position: relative;
  margin: 0 auto;
  overflow: hidden !important;
  width: 100%;
  min-width: 300px;
}


a{
  text-decoration:none;
  transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -webkit-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
}

a:hover{
  text-decoration:none;
  outline:none;
}

input,button,select,textarea{
  font-family: var(--text-font);
  font-weight: 400;
  font-size: 18px;
  background: transparent;
}

::-webkit-input-placeholder {
  color: inherit;
}

::-moz-input-placeholder {
  color: inherit;
}

::-ms-input-placeholder {
  color: inherit;
}

ul,li{
  list-style:none;
  padding:0px;
  margin:0px; 
}

input{
  transition: all 500ms ease;
}

/* KOK-0095 fix: removed blanket outline:none which killed keyboard focus visibility.
   `:focus-visible` keeps the indicator for keyboard users while mouse clicks are unaffected. */
button:focus,
input:focus,
textarea:focus{
  transition: all 500ms ease;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible{
  outline: 2px solid var(--theme-color, #003EAC);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(0, 62, 172, 0.18);
}

p{
  position: relative;
  font-family: var(--text-font);
  color: var(--text-color);
  font-weight: 400;
  margin: 0px;
  transition: all 500ms ease;
}

h1,h2,h3,h4,h5,h6{
  position:relative;
  font-family: var(--title-font);
  font-weight: 700;
  color: var(--title-color);
  margin: 0px;
  transition: all 500ms ease;
}

.home_2 h1,
.home_2 h2,
.home_2 h3,
.home_2 h4,
.home_2 h5,
.home_2 h6,
.home_4 h1,
.home_4 h2,
.home_4 h3,
.home_4 h4,
.home_4 h5,
.home_4 h6{
  font-family: var(--title-font-two) !important;
}

.home_3 h1,
.home_3 h2,
.home_3 h3,
.home_3 h4,
.home_3 h5,
.home_3 h6,
.home_5 h1,
.home_5 h2,
.home_5 h3,
.home_5 h4,
.home_5 h5,
.home_5 h6,
.home_6 h1,
.home_6 h2,
.home_6 h3,
.home_6 h4,
.home_6 h5,
.home_6 h6{
  font-family: var(--title-font-three) !important;
  font-weight: 600;
}

.home_7 h1,
.home_7 h2,
.home_7 h3,
.home_7 h4,
.home_7 h5,
.home_7 h6{
  font-family: var(--title-font-four) !important;
}

.home_9 h1,
.home_9 h2,
.home_9 h3,
.home_9 h4,
.home_9 h5,
.home_9 h6{
  font-family: var(--title-font-five) !important;
}

/* Preloader */

.handle-preloader {
  align-items: center;
  -webkit-align-items: center;
  display: flex;
  display: -ms-flexbox;
  height: 100%;
  justify-content: center;
  -webkit-justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999999;
  background: var(--secondary-color);
}

.preloader-close{
  position: fixed;
  z-index: 99999999;
  font-size: 16px;
  background: #fff;
  color: red;
  width: 40px;
  height: 40px;
  line-height: 44px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  right: 30px;
  top: 30px;
  font-weight: 400;
}

.handle-preloader .animation-preloader {
  position: absolute;
  z-index: 100;
}

.handle-preloader .animation-preloader .spinner{
  animation: spinner 1s infinite linear;
  border-radius: 50%;
  height: 150px;
  margin: 0 auto 45px auto;
  width: 150px;
}

.handle-preloader .animation-preloader .txt-loading {
  text-align: center;
  user-select: none;
}

.handle-preloader .animation-preloader .txt-loading .letters-loading:before{
  animation: letters-loading 4s infinite;
  content: attr(data-text-preloader);
  left: 0;
  opacity: 0;
  top:0;
  position: absolute;
}

.handle-preloader .animation-preloader .txt-loading .letters-loading{
  font-family: var(--title-font);
  font-weight: 500;
  letter-spacing: 15px;
  display: inline-block;
  position: relative;
  font-size: 70px;
  line-height: 70px;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.30);
}

.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {animation-delay: 0.2s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {animation-delay: 0.4s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {animation-delay: 0.6s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {animation-delay: 0.8s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before { animation-delay: 1s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before { animation-delay: 1.2s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before { animation-delay: 1.4s;}
.handle-preloader .loader-section {
  background-color: #ffffff;
  height: 100%;
  position: fixed;
  top: 0;
  width: calc(50% + 1px);
}

.preloader .loaded .animation-preloader {
  opacity: 0;
  transition: 0.3s ease-out;
}

.handle-preloader .animation-preloader .txt-loading .letters-loading:before{
  color: #ffffff;
}

.handle-preloader .animation-preloader .spinner{
  border: 3px solid #ffffff;
  border-top-color: rgba(255, 255, 255, 0.5); 
}

/* Animación del preloader */
@keyframes spinner {
  to {
    transform: rotateZ(360deg);
  }
}
@keyframes letters-loading {
  0%,
  75%,
  100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }

  25%,
  50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

@media screen and (max-width: 767px) {
  .handle-preloader .animation-preloader .spinner {
    height: 8em;
    width: 8em;
  }
}
@media screen and (max-width: 500px) {
  .handle-preloader .animation-preloader .spinner {
    height: 7em;
    width: 7em;
  }
  .handle-preloader .animation-preloader .txt-loading .letters-loading {font-size: 40px; letter-spacing: 10px;}
}


.centred{
  text-align: center;
}

.pull-left{
  float: left;
}

.pull-right{
  float: right;
}


figure{
  margin: 0px;
}

img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  transition-delay: .1s;
  transition-timing-function: ease-in-out;
  transition-duration: .7s;
  transition-property: all;
}

.row{
  --bs-gutter-x: 30px;
}

/** button **/


.theme-btn{
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  font-size: 16px;
  line-height: 30px;
  font-weight: 500;
  font-family: var(--text-font);
  color: #fff !important;
  text-align: center;
  border-radius: 50px;
  padding: 10px 40px;
  z-index: 1;
  transition: all 500ms ease;
}

.theme-btn.btn-two{
  background: var(--secondary-color);
}

.theme-btn span{
  background: var(--secondary-color);
}

.theme-btn span {
  position: absolute;
  width: 25%;
  height: 100%;
  transform: translateY(150%);
  border-radius: 50%;
  left: calc((var(--n) - 1) * 25%);
  transition: 0.5s;
  transition-delay: calc((var(--n) - 1) * 0.1s);
  z-index: -1;
}

.theme-btn:hover span {
  transform: translateY(0) scale(2);
}

.theme-btn span:nth-child(1) {
  --n: 1;
}

.theme-btn span:nth-child(2) {
  --n: 2;
}

.theme-btn span:nth-child(3) {
  --n: 3;
}

.theme-btn span:nth-child(4) {
  --n: 4;
}


.parallax-bg{
  position: absolute;
  left: 0px;
  top: -30%;
  width: 100%;
  height: calc(100% + 30%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


/** styled-pagination */

.pagination{
  position: relative;
  display: block;
}

.pagination li{
  position: relative;
  display: inline-block;
  margin: 0px 4px;
}

.pagination li a{
  position: relative;
  display: inline-block;
  font-size: 18px;
  font-family: var(--title-font);
  color: var(--title-color);
  font-weight: 500;
  height: 50px;
  width: 50px;
  line-height: 50px;
  background: #ffffff;
  border: 1px solid #E7E9F0;
  text-align: center;
  border-radius: 50%;
  z-index: 1;
  transition: all 500ms ease;
}

.pagination li a:hover,
.pagination li a.current{
  color: #fff;
}

.sec-pad{
  padding: 142px 0px 150px 0px;
}

.pagination li a i{
  position: relative;
  top: 5px;
  font-size: 30px;
}

/* ----------------------------------------------------------------------------
   AX-127 / CT-109 / CT-110 — Keyboard focus visibility.
   The template relies on hover/mouse only, leaving keyboard users with no
   visible focus on the primary interactive controls. :focus-visible adds a
   ring ONLY for keyboard navigation, so the mouse appearance is unchanged.
   We never set outline:none without a replacement.
   --------------------------------------------------------------------------- */
.theme-btn:focus-visible,
.header-auth__btn:focus-visible,
.nice-select:focus-visible,
.main-header .menu-right-content .info-list li a:focus-visible,
.main-header .menu-right-content .info-list li button:focus-visible,
.pagination li a:focus-visible,
.shop-block-two .inner-box .image-box .option-list li a:focus-visible,
.shop-block-two .inner-box .image-box .option-list li button:focus-visible{
  outline: 2px solid var(--theme-color);
  outline-offset: 2px;
  /* keep the ring visible over dark/coloured backgrounds */
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85);
}

/* The pill/round controls read better with a flush rounded ring. */
.theme-btn:focus-visible,
.pagination li a:focus-visible{
  border-radius: inherit;
}

/* Round option icons & circular pagination — a contrasting outline alone is
   enough; the white halo above already lifts it off coloured card images. */
.shop-block-two .inner-box .image-box .option-list li a:focus-visible,
.shop-block-two .inner-box .image-box .option-list li button:focus-visible{
  outline-offset: 3px;
}

/* Some themes render the header info-list / cart icons on a coloured bar; a
   white halo would vanish there. Provide a dark halo fallback so the ring is
   always visible regardless of the surrounding bar colour. */
.main-header .menu-right-content .info-list li a:focus-visible,
.main-header .menu-right-content .info-list li button:focus-visible{
  outline-color: #fff;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.45);
}

/* ----------------------------------------------------------------------------
   CO-037 — Disabled state for .theme-btn (e.g. Out-of-Stock / Place Order
   while submitting). Reduced opacity + not-allowed cursor + no hover sweep.
   --------------------------------------------------------------------------- */
.theme-btn[disabled],
.theme-btn:disabled,
.theme-btn.disabled{
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none; /* also blocks the hover-sweep animation */
}
/* Belt-and-braces: if pointer-events is overridden elsewhere, still freeze the
   decorative sweep spans on a disabled button. */
.theme-btn[disabled]:hover span,
.theme-btn:disabled:hover span,
.theme-btn.disabled:hover span{
  transform: translateY(150%);
}

/* ----------------------------------------------------------------------------
   CT-111 — Struck-through old price contrast.
   shop-two.css uses #7C7C7C on the white card (~4.48:1, just under WCAG AA
   4.5:1). Darken slightly to clear AA while still reading as a muted old price.
   #6B6B6B on #fff ≈ 5.0:1.
   --------------------------------------------------------------------------- */
.shop-block-two .inner-box .lower-content h5 del{
  color: #6B6B6B;
}

.mr-0{
  margin: 0px !important;
}

/** scroll-to-top **/

.scroll-to-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  height: 50px;
  width: 50px;
  cursor: pointer;
  display: block;
  box-shadow: inset 0 0 0 2px rgba(0,46,65,0.2);
  border-radius: 50%;
  z-index: 90000;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(15px);
  -ms-transform: translateY(15px);
  transform: translateY(15px);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.scroll-to-top.scroll-top-active {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0)
}

.scroll-to-top::after {
  position: absolute;
  content: "\e907";
  font-family: 'icomoon';
  text-align: center;
  line-height: 50px;
  font-size: 14px;
  color: var(--theme-color);
  left: 0;
  top: 0;
  height: 50px;
  width: 50px;
  cursor: pointer;
  display: block;
  z-index: 2;
  transform: rotate(-90deg);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear
}

.scroll-to-top:hover::after {
  
}

.scroll-to-top:hover::before {
  opacity: 1
}

.scroll-to-top .scroll-top-inner path {
  stroke-width: 4;
  fill: transparent;
  box-sizing: border-box;
  stroke: var(--theme-color);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}



@-webkit-keyframes ripple {
  70% {
    -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes ripple {
  70% {
    -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}



.sec-title{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.sec-title h2{
  position: relative;
  display: block;
  font-size: 30px;
  line-height: 40px;
}

.sec-title.light h2{
  color: #fff;
}





/*** 

====================================================================
                        Home-Page-One
====================================================================

***/


/** main-header **/

.main-header{
  position:relative;
  left:0px;
  top:0px;
  right: 0px;
  z-index:999;
  width:100%;
  transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -webkit-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
}

.sticky-header{
  position:fixed;
  opacity:0;
  visibility:hidden;
  left:0px;
  top:0px;
  width:100%;
  z-index:0;
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -webkit-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
}

.fixed-header .sticky-header{
  z-index:999;
  opacity:1;
  visibility:visible;
  -ms-animation-name: fadeInDown;
  -moz-animation-name: fadeInDown;
  -op-animation-name: fadeInDown;
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -ms-animation-duration: 500ms;
  -moz-animation-duration: 500ms;
  -op-animation-duration: 500ms;
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
  -ms-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -op-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -ms-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -op-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}


/** language-switcher **/

.language-picker label{
  display: none;
}

.language-picker .nice-select{
  display: none;
}


.language-picker {
  position: relative;
  display: inline-block;
}

.language-picker__button .icon {
  display: none;
}

.language-picker__dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  width: 110px;
  background-color: #fff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.10);
  padding: 15px 15px;
  visibility: hidden;
  opacity: 0;
  z-index: 2;
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
  text-align: left;
  transition: visibility 0s .2s, opacity .2s, -webkit-transform .2s ease-out;
  transition: visibility 0s .2s, opacity .2s, transform .2s ease-out;
  transition: visibility 0s .2s, opacity .2s, transform .2s ease-out, -webkit-transform .2s ease-out
}

.language-picker__button[aria-expanded=true]+.language-picker__dropdown {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(4px);
  -ms-transform: translateY(4px);
  transform: translateY(4px);
  transition: opacity .2s, -webkit-transform .2s ease-out;
  transition: opacity .2s, transform .2s ease-out;
  transition: opacity .2s, transform .2s ease-out, -webkit-transform .2s ease-out
}

.language-picker__item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.language-picker__item:hover {

}

.language-picker__button{
  position: relative;
  border: none !important;
  padding: 0px;
  padding-right: 7px;
}

.language-picker__button:before{
  position: absolute;
  content: '\e900';
  font-family: 'icomoon';
  font-size: 6px;
  top: 7px;
  right: 0px;
  color: #fff;
}

.language-picker__flag {
  position: relative;
  font-size: 14px;
  line-height: 16px;
  font-family: var(--text-font);
  font-weight: 400;
  color: #222;
  padding-left: 33px;
  text-transform: uppercase;
}

.language-picker__list .language-picker__flag{
  padding: 4px 0px 4px 33px;
}

.language-picker__list

.language-picker__flag.language-picker__label:after {
  position: absolute;
  content: '';
  background-image: url(../images/icons/icon-1.png);
  width: 10px;
  height: 6px;
  top: 6px;
  right: 0px;
  background-repeat: no-repeat;
}

.language-picker__flag.language-picker__label{
  padding-left: 26px;
  padding-right: 0px;
  color: #fff;
  padding-right: 16px;
}

.language-picker__flag em{
  font-style: normal;
}

.language-picker__flag::before {
  position: absolute;
  content: '';
  height: 20px;
  width: 20px;
  top: 4px;
  left: 0px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.language-picker__flag.language-picker__label:before{
  top: -3px;
  left: 0px;
}

.language-picker__dropdown .language-picker__flag::before {
  margin-right: .5rem;
  margin-right: var(--space-xs);
  top: -1px;
}

.language-picker__flag--deutsch::before {
  background-image: url(../images/icons/flag-deutsch.png);
}

.language-picker__flag--english::before {
  background-image: url(../images/icons/flag-english.png);
}

.language-picker__flag--francais::before {
  background-image: url(../images/icons/flag-francais.png);
}

.language-picker__flag--italiano::before {
  background-image: url(../images/icons/flag-italiano.png);
}

.language-picker--hide-label .language-picker__button .icon {
  margin-left: 0
}

.language-picker--hide-label .language-picker__button em {
  display: none
}

.language-picker--hide-label .language-picker__button .language-picker__flag::before {
  margin-right: .25rem;
  margin-right: var(--space-xxxs)
}

.language-picker__flag.language-picker__label{
  padding-right: 7px;
}

.nice-select{
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 16px;
  color: #fff;
  font-family: var(--text-font);
  text-transform: uppercase;
  padding-right: 14px;
  background: transparent;
}

.nice-select:before{
  position: absolute;
  content: '\e900';
  font-family: 'icomoon';
  font-size: 6px;
  top: 0px;
  right: 0px;
  color: #fff;
  font-weight: 700;
}

.nice-select .list{
  min-width: 100px;
}

.nice-select .list li{
  color: var(--text-color);
}

.nice-select .list{
  max-height: 160px;
  overflow-x: hidden;
  overflow-y: auto;
}


.owl-dots-none .owl-dots,
.owl-nav-none .owl-nav{
  display: none !important;
}

.owl-nav button{
  background: transparent;
}

.float-bob-y {
  animation-name: float-bob-y;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: float-bob-y;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: float-bob-y;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob-y;
  -ms-animation-duration: 2s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob-y;
  -o-animation-duration: 2s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}

.float-bob-x{
  animation-name: float-bob-x;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: float-bob-x;
  -webkit-animation-duration: 15s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: float-bob-x;
  -moz-animation-duration: 15s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob-x;
  -ms-animation-duration: 15s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob-x;
  -o-animation-duration: 15s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}


/** rtl-switcher **/

.demo-rtl{
  position: fixed;
  top: 390px;
  left: 10px;
  z-index: 9999;
}

button.rtl{
  background: var(--theme-color);
  display: block;
  text-indent: inherit;
  font-size: 12px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-weight: 700;
  margin: 0px;
  color: #fff !important;
  border-radius: 50%;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
  transition: all 500ms ease;
}

.demo-ltr{
  position: fixed;
  top: 390px;
  left: auto;
  right: 10px;
  z-index: 9999;
}

button.ltr {
  background: var(--theme-color);
  display: block;
  text-indent: inherit;
  font-size: 12px;
  font-weight: 700;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin: 0px;
  color: #fff !important;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 1.0);
  transition: all 500ms ease;
}

.boxed_wrapper.ltr .demo-rtl{
  display: block;
}

.boxed_wrapper.ltr .demo-ltr{
  display: none;
}

.boxed_wrapper.rtl .demo-rtl{
  display: none;
}

.boxed_wrapper.rtl .demo-ltr{
  display: block;
}

/* ============================================================================
   Kokila a11y / defect fixes (ui-specialist) — appended overrides.
   These are accessibility & contrast fixes only; they must NOT change the
   intended look for sighted mouse users. See UI_UX_ISSUES.md.
   ============================================================================ */

.discount-product{
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  /* CT-015: a sale badge must NOT read as a green in-stock/success cue.
     Use the theme accent so it is clearly a promotion (and distinct from the
     red .hot-product badge). Works across every color.css theme variant. */
  background: var(--theme-color);
  border-radius: 50%;
  z-index: 1;
}

/* CT-014: the reusable product card uses bare .shop-block-two (not .shop-six),
   so a "-25%" label gets squeezed into the 50px circle. Render it as a roomy
   pill on these cards. Scoped to .shop-block-two so the .shop-six pill rule and
   any other .discount-product circle usages are untouched. */
.shop-block-two .discount-product{
  width: auto;
  height: 24px;
  line-height: 24px;
  padding: 0 12px;
  border-radius: 12px;
  white-space: nowrap;
}

.hot-product{
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  background: #FF0000;
  border-radius: 50%;
  z-index: 1;
}

.popular-product{
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  background: #FF6B00;
  border-radius: 50%;
  z-index: 1;
}

.product-stock,
.product-stock-out{
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 20px;
  color: #28C01B;
  font-weight: 500;
  padding-left: 27px;
}

.product-stock img,
.product-stock-out img{
  position: absolute;
  left: 0px;
  top: 0px;
}

.product-stock-out{
  color: #E92530;
}

.nav-style-one .owl-nav button{
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 48px;
  height: 48px;
  line-height: 48px;
  background: #F6F6F6;
  border: 2px solid #F6F6F6;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  z-index: 1;
  transition: all 500ms ease;
}

.nav-style-one .owl-nav .owl-prev{
  margin-right: 10px;
}

.nav-style-one .owl-nav button:hover{
  color: #fff;
  background: transparent !important;
}

.nav-style-one .owl-nav button:before{
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  background: var(--secondary-color);
  border-radius: 50%;
  transform-origin: top center;
  transform: scaleY(0);
  z-index: -1;
  transition: all 500ms ease;
}

.nav-style-one .owl-nav button:hover:before{
  transform: scaleY(1);
}

.sec-title a{
  position: relative;
  display: inline-block;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  border-bottom: 1px solid var(--title-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(to right, var(--theme-color), var(--theme-color) 50%, var(--title-color) 50%);
  background-size: 200% 100%;
  background-position: -100%;
  transition: all 0.3s ease-in-out;
}

.sec-title a:hover{
  background-position: 0%;
}

.progress-box .bar{
  position:relative;
  width:100%;
  height:8px;
  background: #E3E7EB;
  border-radius: 4px;
}
  
.progress-box .bar-inner{
  position:relative;
  display:block;
  width:0px;
  height:8px;
  border-radius: 4px;
  -webkit-transition:all 1500ms ease;
  -ms-transition:all 1500ms ease;
  -o-transition:all 1500ms ease;
  -moz-transition:all 1500ms ease;
  transition:all 1500ms ease; 
}

.rating{
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 17px;
}

.rating li{
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 14px;
  color: #F8CD2E;
  margin-right: 2px;
}

.rating li span{
  color: #7C7C7C;
  padding-left: 2px;
}

.list-style-one li{
  position: relative;
  display: block;
  font-size: 14px;
  line-height: 28px;
  color: var(--title-color);
  padding-left: 17px;
}

.list-style-one li:before{
  position: absolute;
  content: '';
  background: var(--title-color);
  width: 5px;
  height: 5px;
  left: 0px;
  top: 11px;
  border-radius: 50%;
}


.check-box input {
  display: none;
}

.check-box label {
  position: relative;
  font-size: 14px;
  line-height: 30px;
  color: var(--title-color);
  padding-left: 24px;
  display: inline-block;
  cursor: pointer;
  margin-bottom: 0px;
}

.check-box label:before{
  position: absolute;
  content: '';
  left: 0px;
  top: 7px;
  width: 15px;
  height: 15px;
  border-radius: 2px;
  border-style: solid;
  border-width: 1px;
  border-color: #DDDDDD;
  background: transparent;
}

.check-box label:after {
  position: absolute;
  content: '';
  left: 2px;
  top: 10px;
  width: 11px;
  height: 9px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../images/icons/icon-2.png);
  opacity: 0;
}

.check-box input:checked + label:after {
  opacity: 1;
}

.check-box input:checked + label:before{

}

.accordion-box .block .acc-content {
  position: relative;
  display: none;
}

.accordion-box .block .acc-content.current {
  display: block;
}


.wrapper.list .shop-grid-content{
  display: block;
}

.wrapper.grid .shop-grid-content{
  display: block;
}

.nice-select .option{
  padding-left: 15px;
  padding-right: 15px;
}

.tabs-box .tab{
  position:relative;
  display:none;
  transition: all 900ms ease;
  -moz-transition: all 900ms ease;
  -webkit-transition: all 900ms ease;
  -ms-transition: all 900ms ease;
  -o-transition: all 900ms ease;
}

.tabs-box .tab.active-tab{
  display:block;  
}

.tabs-box .tab{
  transform:scale(0.9,0.9) translateY(0px);
}

.tabs-box .tab.active-tab{
  transform:scale(1) translateY(0px);
}

.border-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 50%;
  -khtml-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.50);
  animation: squares 2.9s linear 0s infinite;
  -webkit-animation: squares 2.9s linear 0s infinite;
  -ms-animation: squares 2.9s linear 0s infinite;
  -o-animation: squares 2.9s linear 0s infinite;
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
  opacity: 0;
}

.border-animation.border-2 {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
}

.border-animation.border-3 {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}

.dots-style-one .owl-dots button span{
  display: none !important;
}

.dots-style-one .owl-dots button{
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--secondary-color);
  border-radius: 50%;
  opacity: 0.5;
  cursor: pointer;
  transition: all 500ms ease;
}

.dots-style-one .owl-dots button.active,
.dots-style-one .owl-dots button:hover{
  opacity: 1;
}

.dots-style-one .owl-dots button:before{
  position: absolute;
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  left: -5px;
  top: -5px;
  border: solid;
  border-width: 1px;
  transform: scale(0,0);
  transition: all 500ms ease;
}

.dots-style-one .owl-dots button.active:before,
.dots-style-one .owl-dots button:hover:before{
  transform: scale(1,1);
}

.category-page-section .owl-carousel .owl-stage-outer{
  overflow: visible;
}

.category-page-section .owl-carousel .owl-stage-outer .owl-item{
  opacity: 0;
  visibility: hidden;
}

.category-page-section .owl-carousel .owl-stage-outer .owl-item.active{
  opacity: 1;
  visibility: visible;
}



/** category-menu **/


.category-menu{
  position: fixed;
  left: 0;
  top: 0;
  width: 300px;
  padding-right:30px;
  max-width:100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 999999;
  display: none;
  transition: all 900ms ease;
}

.category-menu .navbar-collapse{
  display:block !important; 
}

.category-menu .upper-box{
  position:relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:50px 25px;
  text-align:left;  
  padding-bottom: 30px;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 25px;
}

body.category-visible{
  overflow: hidden;
  /* Prevent background page scroll on iOS when the off-canvas drawer is open */
  -webkit-overflow-scrolling: auto;
}

.category-visible .category-menu{
  /* GL-012: the base rule sets display:none, so opacity/visibility alone could
     never reveal the drawer. Promote display when the panel is opened (JS adds
     body.category-visible) so the off-canvas is actually usable. */
  display: block;
  opacity: 1;
  visibility: visible;
}

.category-menu .menu-backdrop{
  position: fixed;
  left: 0%;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 900ms ease;
  background-color: #000;
}

.category-visible .category-menu .menu-backdrop{
  opacity: 0.90;
  visibility: visible;
  right: 100%;
  -webkit-transition: all .8s ease-out 0s;
  -o-transition: all .8s ease-out 0s
}

.category-menu .outer-box{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  background: #fff;
  padding: 0px 0px;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  border-radius: 0px;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: all 900ms ease !important;
}

.category-visible .category-menu .outer-box{
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease;
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
}

.category-menu .close-btn{
  position: relative;
  display: inline-block;
  line-height: 30px;
  width: 24px;
  text-align: center;
  font-size: 14px;
  color: #111;
  cursor: pointer;
  z-index: 10;
}


.category-menu .navigation{
  position: relative;
  display: block;
  width: 100%;
  float: none;
}

.category-menu .category-list li{
  position: relative;
  display: block;
  cursor: pointer;
}

.category-menu .category-list li > a{
  position: relative;
  display: block;
  line-height: 24px;
  padding: 6px 25px;
  padding-right: 50px;
  font-size: 15px;
  font-weight: 500;
  color: var(--title-color);
  text-transform: capitalize;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease; 
}

.category-menu .category-list li > a:hover{
  color: var(--theme-color);
}

.category-menu .category-list li.category-dropdown .dropdown-btn{
  position:absolute;
  right:25px;
  top:3px;
  text-align:center;
  font-size:8px;
  line-height:32px;
  color:var(--title-color);
  cursor:pointer;
  border-radius:2px;
  opacity: 0.6;
  font-weight: 400;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease; 
  z-index:5;
}

.category-menu .category-list li.category-dropdown .dropdown-btn.open{
  transform: rotate(180deg);
}

.category-menu .category-list .category-dropdown ul{
  display: none;
}

.category-menu p{
  position: relative;
  display: block;
  padding: 0px 25px;
  opacity: 0.4;
  font-size: 14px;
  font-weight: 600;
}

.category-menu .category-box .category-list{
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}

.category-menu .category-list li > a span{
  position: absolute;
  top: 8px;
  right: 25px;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  padding: 0px 5px;
  border-radius: 2px;
  background: #CED4DA;
}



/** cart-box **/

.cart-menu {
  position: absolute;
  top: 44px;
  right: 0px;
  width: 315px;
  padding: 25px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.07);
  opacity: 0;
  visibility: hidden;
  background: #fff;
  z-index: 5;
  transform: scaleY(0);
  transform-origin: top center;
  transition: all 0.5s ease-in-out;
}

.cart-menu.cart-visible {
  opacity: 1;
  visibility: visible;
  display: block;
  transform: scaleY(1);
  transition: all 0.5s ease-in-out;
}

.cart-menu .close-icon {
  position: absolute;
  top: 0px;
  left: 3px;
}

.main-header .menu-right-content .info-list .cart-menu .close-icon a{
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 10px;
  border: solid;
  border-width: 1px;
  border-color: #111;
  text-align: center;
  border-radius: 50%;
  color: #111;
  opacity: 0.5;
  z-index: 1;
}

.main-header .menu-right-content .info-list .cart-menu .close-icon a:hover{
  opacity: 1;
  border-color: #FFAC00;
  color: #FFAC00;
}

.cart-menu .cart-products .product{
  position: relative;
  display: block;
  padding: 20px 20px 20px 73px;
  border-bottom: solid;
  border-width: 1px;
  border-color: #E8E8E8;
}

.cart-menu .cart-products .product .image-box{
  position: absolute;
  left: 0px;
  top: 23px;
  width: 60px;
  height: 60px;
  line-height: 56px;
  border: solid;
  border-width: 1px;
  border-color: #E5E5E5;
}

.cart-menu .cart-products .product .image-box img{
  width: 100%;
}

.cart-menu .cart-products .product h5{
  position: relative;
  display: block;
  font-size: 16px;
  line-height: 20px;
}

.cart-menu .cart-products .product h5 a{
  position: relative;
  display: inline-block;
  color: var(--title-color);
}

.cart-menu .cart-products .product h5 a:hover{

}

.cart-menu .cart-products .product span{
  position: relative;
  display: inline-block;
  font-size: 16px;
  line-height: 20px;
  font-family: var(--title-font);
  color: #E92530;
  font-weight: 700;
}

.cart-menu .cart-products .product span .quentity{
  color: var(--title-color);
}

.cart-menu .cart-products .product .remove-btn{
  position: absolute;
  top: 20px;
  right: 0px;
  font-size: 16px;
  color: var(--title-color);
  transition: all 500ms ease;
}

.cart-menu .cart-products .product .remove-btn:hover{
  color: #E92530;
}

.cart-menu .cart-total{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0px;
}

.cart-menu .cart-total span{
  position: relative;
  display: block;
  font-size: 18px;
  font-weight: 700;
}

.cart-menu .cart-total span.cart-total-price{
  color: #E92530;
}

.cart-menu .cart-action{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-header .menu-right-content .info-list .cart-menu .theme-btn{
  font-size: 16px;
  padding: 5px 29px;
}

.progress-box .bar{
  position:relative;
  width:100%;
  height:5px;
  background: #E3E7EB;
  border-radius: 4px;
}
  
.progress-box .bar-inner{
  position:relative;
  display:block;
  width:0px;
  height:5px;
  background: #27D82E;
  border-radius: 4px;
  -webkit-transition:all 1500ms ease;
  -ms-transition:all 1500ms ease;
  -o-transition:all 1500ms ease;
  -moz-transition:all 1500ms ease;
  transition:all 1500ms ease; 
}

.progress-box.low-stock .bar-inner{
  background: #E92530;
}

.progress-box p{
  font-size: 16px;
  line-height: 16px;
  color: #7C7C7C;
}

.progress-box p span{
  font-weight: 500;
  color: var(--title-color);
}

.shop-tab-btn{
  position: relative;
  display: flex;
  align-items: center;
}

.shop-tab-btn li{
  position: relative;
  display: inline-block;
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  cursor: pointer;
  margin-right: 40px;
  transition: all 500ms ease;
}

.shop-tab-btn li:last-child{
  margin: 0px !important;
}

.shop-tab-btn li.active-btn,
.shop-tab-btn li:hover{

}


.item-quantity-selector{
  position: relative;
  display: inline-block;
  width: 120px;
  height: 40px;
  float: left;
  padding: 0px 36px;
  margin-left: 0px;
  border: 1px solid #E7E9F0;
  border-radius: 50px;
  background: #fff;
  z-index: 1;
}

.bootstrap-touchspin .input-group-btn-vertical i{
  left: 12px;
}

.item-quantity-selector input.quantity-spinner {
  line-height: 48px;
  height: 38px;
  width: 40px !important;
  padding: 0px !important;
  box-shadow: none !important;
  border: none;
  text-align: center;
  font-size: 20px;
  font-family: var(--title-font-two);
  font-weight: 400;
  color: #111;
  background: transparent;
}

.bootstrap-touchspin .btn.bootstrap-touchspin-up{
  position: absolute;
  height: 40px;
  width: 40px;
  background: #B1B1B1;
  padding: 0px 0px;
  right: -45px;
  top: -1px;
  margin-top: 0px;
  border-radius: 0px 50px 50px 0px;
  border: none !important;
}

.bootstrap-touchspin .btn.bootstrap-touchspin-up:hover{

}

.bootstrap-touchspin .btn.bootstrap-touchspin-up:before {
  content: "\f067";
  font-size: 16px;
  font-style: normal;
  color: #111;
  font-family: 'Font Awesome 5 Pro';
  transition: all 500ms ease;
}

.bootstrap-touchspin .btn.bootstrap-touchspin-up:hover:before{
  color: #fff;
}

.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down{
  position: absolute;
  height: 40px;
  width: 40px;
  background: #B1B1B1;
  padding: 0px 0px;
  left: -37px;
  top: -1px;
  border-radius: 50px 0px 0px 50px;
  border: none !important;
  transition: all 500ms ease;
}

.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down:hover{

}

.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down:before {
  content: "\f068";
  font-size: 16px;
  font-style: normal;
  color: #111;
  font-family: 'Font Awesome 5 Pro';
  transition: all 500ms ease;
}

.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down:hover:before{
  color: #fff;
}

.bootstrap-touchspin .input-group-btn-vertical i{
  display: none;
}

.bootstrap-touchspin .btn:hover,
.bootstrap-touchspin .btn:focus{
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.home_2 .main-header .outer-box .category-box .list-inner .shop-block .link{
  color: #fff;
}

.home_2 .main-header .outer-box .category-box .list-inner .shop-block .link:hover{
  background: var(--secondary-color);
}


.shop-six .inner-container{
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  padding-left: 320px;
}

.shop-six.vegetables .inner-container{
  padding-right: 320px;
  padding-left: 0px;
}

.shop-six .advice-block-one{
  width: 320px;
}

.shop-six .shop-block-two{
  float: left;
  width: 20%;
}

.shop-six .discount-product,
.shop-six .hot-product{
  border-radius: 5px;
  height: 24px;
  line-height: 24px;
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
}

.shop-six .shop-block-two .inner-box:before{
  display: none;
}

.shop-six .shop-block-two .inner-box{
  border-right: 1px solid #E7E9F0;
  margin-bottom: 0px;
}

.shop-six .shop-block-two:last-child .inner-box{
  border-right: none;
}

.shop-six .content-box{
  border: 1px solid #E7E9F0;
}

.shop-six.meat-fish .content-box,
.shop-six.fruits .content-box{
  border-left: none;
  border-radius: 0px 10px 10px 0px;
}

.shop-six.vegetables .content-box{
  border-right: none;
  border-radius: 10px 0px 0px 10px;
}

.shop-six.vegetables .advice-block-one .inner-box{
  background: #E0F5DC;
}

.shop-six.fruits .advice-block-one .inner-box{
  background: #FFEED4;
}


.parallax-scene{
  position: absolute !important;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

.parallax-scene .pattern-layer{
  position: absolute !important;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.home_3 .sec-title h2{
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
}

.sec-title.centred{
  display: block !important;
}

.home_4 .sec-title a{
  background-image: linear-gradient(to right, var(--theme-color-4), var(--theme-color-4) 50%, var(--title-color) 50%);
}

.home_5 .sec-title a{
  background-image: linear-gradient(to right, var(--theme-color-5), var(--theme-color-5) 50%, var(--title-color) 50%);
}

.header-style-five .outer-box .category-box .category-list{
  border-radius: 10px !important;
}

.boxed_wrapper.home_5{
  background: #F7F7F7;
}

/** check-box **/

.color-list{
  position: relative;
  display: flex;
  align-items: center;
}

.color-list li{
  margin-right: 8px;
}

.color-list li:last-child{
  margin: 0px;
}

.color-list .check-box input {
  display: none;
}

.color-list .check-box label {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  padding: 0px;
}

.color-list .check-box label:before{
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
}

.color-list .check-box label:after {
  position: absolute;
  content: "\e928";
  font-family: 'icomoon';
  left: 0px;
  top: 0px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 8px;
  color: #fff;
  background-image: none;
  opacity: 0;
  transition: all 500ms ease;
}

.color-list .check-box input:checked + label:after {
  opacity: 1;
}

.color-list .check-box label.color-1:before{
  background: #F4EDC7;
}

.color-list .check-box label.color-2:before{
  background: #ADE9B7;
}

.color-list .check-box label.color-3:before{
  background: #DBDBDB;
}

.color-list .check-box label.color-4:before{
  background: #ADBEE9;
}

.color-list .check-box label.color-5:before{
  background: #E9ADE3;
}

.color-list .check-box label.color-6:before{
  background: #F4C7D7;
}

.color-list .check-box label.color-7:before{
  background: #CFB52A;
}

.color-list .check-box label.color-8:before{
  background: #BFC996;
}

.color-list .check-box label.color-9:before{
  background: #BDADE9;
}

.color-list .check-box label.color-10:before{
  background: #7E8B83;
}

.color-list .check-box label.color-11:before{
  background: #B9BAB8;
}

.color-list .check-box label.color-12:before{
  background: #ECECEC;
}

.color-list .check-box label.color-13:before{
  background: #523D3A;
}

.color-list .check-box label.color-14:before{
  background: #8EBAC1;
}

.home_6 .sec-title a{
  background-image: linear-gradient(to right, var(--theme-color-6), var(--theme-color-6) 50%, var(--title-color) 50%);
}

.home_7 .sec-title h2{
  font-size: 40px;
}

.home_7 .news-section .sec-title{
  display: block;
}

.home_7 .highlights-block-one .inner-box .icon-box{
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
}

.home_8 .sec-title a {
  background-image: linear-gradient(to right, var(--theme-color-8), var(--theme-color-8) 50%, var(--title-color) 50%);
}

.home_8 .main-footer{
  background: #153421;
}

.main-footer .pattern-layer{
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background-repeat: repeat-x;
  background-position: bottom center;
}

.home_9 .theme-btn{
  border-radius: 0px;
}

.home_9 h3{
  font-family: var(--title-font-three) !important;
}

.home_10 .sec-title a{
  background-image: linear-gradient(to right, var(--theme-color-10), var(--theme-color-10) 50%, var(--title-color) 50%);
}

.shop-two.pet-picks .shop-block-two .inner-box:before{
  border-radius: 5px;
}

.image-hov-one::before {
  background: rgba(255, 255, 255, 0.5);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}

.image-hov-one:hover::before {
  width: 100%;
  opacity: 0;
  -webkit-transition: all 400ms linear;
  transition: all 400ms linear;
}

.image-hov-two::before {
  background: rgba(255, 255, 255, 0.5);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1000%;
  height: 0%;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}

.image-hov-two:hover::before {
  height: 100%;
  opacity: 0;
  -webkit-transition: all 400ms linear;
  transition: all 400ms linear;
}


.shop-filter-content {
  display: none;
  height: 0px;
  opacity: 0;
  visibility: hidden;
  z-index: 5;
  transform: scaleY(0);
  transform-origin: top center;
  transition: all 0.5s ease-in-out;
}

.shop-filter-content.cart-visible {
  display: block;
  height: 100%;
  opacity: 1;
  visibility: visible;
  display: block;
  transform: scaleY(1);
  transition: all 0.5s ease-in-out;
}

.shop-filter-content .filter-close-icon {
  position: absolute;
  top: 5px;
  left: 8px;
}

.shop-filter-content .filter-close-icon a{
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 10px;
  border: solid;
  border-width: 1px;
  border-color: #111;
  text-align: center;
  border-radius: 50%;
  color: #111;
  opacity: 0.5;
  z-index: 1;
}

.shop-filter-content .filter-close-icon a:hover{
  opacity: 1;
  border-color: #FFAC00;
  color: #FFAC00;
}

.shop-page-section.shop-page-three .item-shorting{
  margin-bottom: 20px;
}