/**************************************
                General
**************************************/
:root {
  --animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-duration: 1s;
}
*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html {
    font-size: 100%;
    box-sizing: inherit;
    scroll-behavior: smooth;
    height: -webkit-fill-available;
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: clip;
}

.lenis.lenis-smooth iframe {
    pointer-events: unset;
}

html::-webkit-scrollbar{
  width: 6px;
  background-color: #4A5F26;
}
html::-webkit-scrollbar-thumb{
  background: #eccca1;
  border-radius: 50rem;
}

a, button {
  cursor: pointer;
  border: none;
  outline: none;
  user-select: none;
  background: none;
  box-shadow: none;
  
}
ol,ul{
  padding: 0;
  margin: 0;
  list-style-type: none;
}

body{
  color: #000;
  font-family: "PPMori Regular";
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
  line-height: 155.556%;
}

a,a:hover,a:focus{
  color: currentColor;
  transition: all .4s;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -ms-transition: all .4s;
  -o-transition: all .4s;
  text-decoration: none;
}
h1,h2,h3,h4 {
  transition: all .4s;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -ms-transition: all .4s;
  -o-transition: all .4s; 
}
p{
  margin-bottom: 1rem;
}
main{
  overflow: clip;
}
img {
  max-width: 100%;
  height: auto;
  transition: all .5s;
}
.text-center{
  text-align: center;
}
.mb-10{
  margin-bottom: 10px;
}
.mb-20{
  margin-bottom: 20px;
}
.mb-30{
  margin-bottom: 30px;
}
.mb-40{
  margin-bottom: 40px;
}
.mb-50{
  margin-bottom: 40px;
}
.container-fluid{
  padding: 0 45px;
}

/* Popup */
.popup {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.64);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  z-index: 999999;
  opacity: 0;
  transform: translateY(10px);
  z-index: -1;
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
}

.popup.show {
  opacity: 1;
  transform: translateY(0px);
  z-index: 999999;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  -webkit-transition: opacity 0.5s ease, transform 0.5s ease;
  -moz-transition: opacity 0.5s ease, transform 0.5s ease;
  -ms-transition: opacity 0.5s ease, transform 0.5s ease;
  -o-transition: opacity 0.5s ease, transform 0.5s ease;
}

.popup .popup__content {
  width: 60%;
  padding: 0px;
  border-radius: 23px;
  color: black;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  overflow: clip;
  z-index: 99999;
  background: #FFF;
}
.popup .popup__content .close {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 45px;
  height: 45px;
  opacity: 1;
  color: #ffffff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  border-radius: 50% 10px 50% 50%;
  flex-direction: column;
  gap: 5px;
  background: #485F27;
  transition: all .5s;
  z-index: 9;
}

.popup .popup__content .close:hover {
  background-color: #5c9504;
}

.popup .popup__content .close:hover span {
  background-color: #FFF;
}

.popup .popup__content .close span {
  cursor: pointer;
  position: fixed;
  width: 20px;
  height: 3px;
  background: #FFF;
  transition: all .5s;
}

.popup .popup__content .close span:nth-child(1) {
  transform: rotate(45deg);
}

.popup .popup__content .close span:nth-child(2) {
  transform: rotate(135deg);
}
form .secondary-btn:hover{
  background: rgb(218, 193, 251);
}
.left {
  background: url(../img/visit-us-img.webp) no-repeat;
  background-size: 100%;
  background-position: center;
  display: flex;
  align-items: start;
  padding: 15px;
  img{
    width: 199px;
  }
}
.right {
  padding: 30px;
  text-align: left;
}
/**************************************
        Search Box
**************************************/
  .key { background: #f4f4f4; border: 1px solid #e2e2e2; border-radius: 4px; padding: 1px 6px; font-size: 11px; color: #888; font-family: inherit; }
 
  #searchBtn { display: flex; align-items: center; cursor: pointer; transition: all .5s;}
  #searchBtn:hover { color: #485f27;}
  #searchBtn:focus-visible, .nav-links a:focus-visible, #closeBtn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
 
  h1 { font-size: 26px; margin: 0 0 8px; }
  .subtitle { color: #666; margin: 0 0 36px; font-size: 15px; }
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
  .card { background: #fff; border: 1px solid #eaeaea; border-radius: 10px; padding: 18px; transition: transform 0.15s ease, box-shadow 0.15s ease; }
  .card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
  .card h3 { margin: 0 0 6px; font-size: 15px; }
  .card p { margin: 0; font-size: 13px; color: #777; line-height: 1.5; }
 
 #overlay { display: none; position: fixed; inset: 0; background: rgb(255 255 255 / 95%); z-index: 1000; flex-direction: column; } 
  #overlay.active { display: flex; animation: fadeIn 0.18s ease; }

  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
 
  .search-topbar { display: flex; justify-content: flex-end; padding: 0 28px; padding-top: 10px; flex-shrink: 0; }
  #closeBtn { display: flex; align-items: center; gap: 8px; background: transparent; border: none; cursor: pointer; color: #000; font-size: 13px; padding: 10px; border-radius: 50%; transition: all .5s; }
  #closeBtn:hover { background: #485f27; color: #fff; }
 
  .search-input-wrap { display: flex; align-items: center; gap: 14px; max-width: 700px; width: 100%; margin: 0 auto; padding: 8px 24px; border-bottom: 1px solid #4A5F26; flex-shrink: 0; }
  .search-input-wrap svg { color: #4A5F26; flex-shrink: 0; }
  #modalInput { flex: 1; border: none; outline: none; font-size: 20px; background: transparent; color: #1a1a1a; }
  #modalInput::placeholder { color: #ccc; }
 
  .search-results { max-width: 700px; width: 100%; margin: 0 auto; padding: 8px 16px 24px; overflow-y: auto; flex: 1; }
  .result-item { padding: 16px 8px; border-bottom: 1px solid #f2f2f2; border-radius: 8px; cursor: pointer; }
  .result-item h4 { margin: 0 0 4px; font-size: 17px; font-family: "PPMori SemiBold"; }
  .result-item p { margin: 0; font-size: 15px; color: #888; }
  .result-item.is-active, .result-item:hover { background: #4a5f2626; }
  .empty-state { padding: 80px 16px; text-align: center; color: #999; font-size: 15px; }
 
  .search-footer { display: flex; justify-content: center; gap: 24px; padding: 14px 16px; border-top: 1px solid #eee; font-size: 12px; color: #999; flex-shrink: 0; }
  .search-footer span { display: flex; align-items: center; gap: 6px; }
 
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }



/**************************************
                Helper Class
**************************************/
.sec-gap {
  padding: 80px 0;
}
.pb-80 {
  padding-bottom: 60px;
}
.mb-10 {
  margin-bottom: 10px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-30 {
  margin-bottom: 30px;
}
.mb-40 {
  margin-bottom: 40px;
}
.mb-50{
  margin-bottom: 50px;
}
.mb-60{
  margin-bottom: 60px;
}
.mb-70{
  margin-bottom: 70px;
}
.mb-80{
  margin-bottom: 80px;
}
p{
  color: #000;
  font-family: "PPMori Regular";
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
  line-height: 155.556%;
}
.dec{
  color: #000;
  font-family: "PPMori SemiBold";
  font-size: 21px;
  font-style: normal;
  font-weight: normal;
  line-height: 142.857%;
}
.title {
  color: #485F27;
  font-family: "PlayfairDisplay Bold";
  font-size: 53px;
  font-style: normal;
  font-weight: normal;
  line-height: 114.286%;
  margin-bottom: 20px;
  text-align: center;
  text-transform: uppercase;
}
.section-title {
  color: #2A441F;
  font-family: "PlayfairDisplay Bold";
  font-size: 52px;
  font-style: normal;
  font-weight: normal;
  line-height: 100%;
}
.sub-section-title{
  color: #D34E4E;
  font-family: "Satoshi Medium";
  font-size: 30px;
  font-style: normal;
  font-weight: normal;
  line-height: 123.333%;
  margin-bottom: 15px;
}
.card-title{
  color: #FFF;
  font-family: "Satoshi Bold";
  font-size: 26px;
  font-style: normal;
  font-weight: normal;
  line-height: 116.667%;
  margin-bottom: 10px;
}
.primary-btn {
    border-radius: 12px;
    background: #485F27;
    padding: 15px 41px;
    border: 2px solid #485F27;
    display: inline-block;
    color: #FFF;
    font-family: "PPMori SemiBold";
    font-size: 19px;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    transition: all .6s;
    -webkit-transition: all .6s;
    -moz-transition: all .6s;
    -ms-transition: all .6s;
    -o-transition: all .6s;
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.primary-btn:before,
.primary-btn:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  scale: 0 0;
  left: 0;
  background: #5c9504;
  z-index: -1;
  transition: all .7s;
  transform-origin: bottom;
  border-radius: 60px;
}
.primary-btn:before {
  opacity: .5;
}
.primary-btn:after {
  transition-delay: .3s;
}
.primary-btn:hover:before,
.primary-btn:hover:after {
  scale: 1.05 1.05;
  border-radius: 12px;
}
.primary-btn:hover {
  color: #ffffff;
  border-color: #5c9504;
}
.primary-btn:focus {
  color: #FFF;
}
.secondary-btn {
  background: #FAF7F3;
  color: #485F27;
  border-color: #485F27;
  img{
    transition: all .6s;
    filter: brightness(0) saturate(100%) invert(29%) sepia(53%) saturate(514%) hue-rotate(43deg) brightness(94%) contrast(83%);
  }
}
.secondary-btn:before,
.secondary-btn:after {
  background: #243014;
}
.secondary-btn:hover{
  border-color: #243014;
  color: #FFF;
  img{
    filter: brightness(1);
  }
}
.secondary-btn:focus {
  color: #FFF;
}
.form-control{
  border-radius: 10px;
  border: 1px solid #485F27;
  background: #FFF;
  color: #000;
  font-family: "PPMori Regular";
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
  line-height: 130%;
  padding: 13px 15px;
  width: 100%;
  &:focus,&:focus-visible{
    outline: 1px solid #5c9504;
    box-shadow: none;
  }
}
.form-control::placeholder{
  color: #8b8b8b;
}
.form-group{
  position: relative;
  textarea{
    font-family: "PPMori Regular";
  }
}
form .primary-btn{
  background: url(../img/btn-leaf.webp) no-repeat;
  background-size: 22%;
  background-position: 15px;
  background-color: #485F27;
  padding-left: 47px;
  cursor: pointer;
  &:hover{
    background-color: #5c9504;
  }
}
@media(prefers-reduced-motion: no-preference){
  @view-transition{
    navigation: auto;
  }
}
::view-transition-group(*){
  animation-duration: 2s;
}
.btn-group{
  display: flex;
  align-items: center;
  gap: 20px;
}
.fixed-btn {
  position: fixed;
  right: 10px;
  bottom: 5%;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 285px;
  z-index: 99;
}
.fixed-contact{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fixed-call {
  width: 49px;
  height: 49px;
  background-color: #636B2F;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0px 0px 20px 0px #0000003f;
  img{
      animation: ring 1s infinite ease-in-out;
  }
  &:hover{
    scale: 1.1;
  }
}
@keyframes ring {
  0% {
    transform: rotate(0) scale(1) skew(0deg);
  }

  10% {
    transform: rotate(-25deg) scale(1) skew(0deg);
  }

  20% {
    transform: rotate(25deg) scale(1) skew(0deg);
  }

  30% {
    transform: rotate(-25deg) scale(1) skew(0deg);
  }

  40% {
    transform: rotate(25deg) scale(1) skew(0deg);
  }

  50% {
    transform: rotate(0) scale(1) skew(0deg);
  }

  100% {
    transform: rotate(0) scale(1) skew(0deg);
  }
}
.wp{
    width: 50px;
    height: 50px;
    &:hover{
      scale: 1.1;
    }
}
/**************************************
         Animation
**************************************/
/* Keyframes */
@keyframes bounce {
  0%, 100% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-30px);
  }
}
@keyframes slideInUp {
  0% {
      opacity: 0;
      transform: translateY(25%);
  }

  100% {
      opacity: 1;
      transform: none;
  }
}
@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translateY(-25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(-25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.75);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes zoomReverseIn {
  0% {
    opacity: 0;
    transform: scale(1.25);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes flipInY {
  0% {
    opacity: 0;
    transform: perspective(90vw) rotateY(67.50deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}


[data-animation] {
  opacity: 0;
  animation-timing-function: var(--animation-timing-function);
  animation-fill-mode: both;
  animation-duration: var(--animation-duration);
  will-change: transform, opacity;
}

.animations-disabled,
.animations-disabled [data-animation] {
  animation: none !important;
  opacity: 1 !important;
}

.slideInUp {
  animation-name: slideInUp;
}
.slideInDown {
  animation-name: slideInDown;
}
.slideInLeft {
  animation-name: slideInLeft;
}
.slideInRight {
  animation-name: slideInRight;
}
.fadeIn {
  animation-name: fadeIn;
}
.zoomIn {
  animation-name: zoomIn;
}
.zoomReverseIn {
  animation-name: zoomReverseIn;
}
.flipInY {
  animation-name: flipInY;
}
.flipOutY {
  animation-name: flipInY;
  animation-direction: reverse;
}
.effectOver {
  transition: all 2s transform 3s;
  &:hover{
    img{
      transform: rotate(0) scale(1.2);
    animation-delay: .5s;
    }
  }
}
img{
  transition: all .5s;
}
.container {
  max-width: 1400px;
}
/*******************************
	Menu
*******************************/
.catalougue-bar{
  background: #4A5F26;
  text-align: center;
  padding: 8px;
  position: relative;
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 1;
  transform: translateY(0);
}
.catalougue-bar.hide {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}
.catalougue-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #4A5F26;
  font-family: "PPMori SemiBold";
  font-size: 20px;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  border-radius: 10px;
  background: #FFF;
  padding: 8px 16px;
  &:hover{
    background-color: #F2E4D4;
    color: #4A5F26;
  }
}
.cata-cross{
  position: absolute;
  right: 45px;
  top: 45%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffffff8c;
  cursor: pointer;
  transition: 0.6s;
  &::before, &::after{
    content: "";
    position: absolute;
    width: 2px;
    height: 20px;
    background: #FFF;
    rotate: 45deg;
    left: 45%;
    top: 17%;
    transition: 0.6s;
  }
  &::after{
    rotate: -45deg;
  }
  &:hover{
    background: #FFF;
    &::before, &::after{
      background: #4A5F26;
    }
  }
}
.contactbar{
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 20px;
  padding-block: 10px;
  a{
    display: flex;
    align-items: center;
    gap: 7px;
    color: #000;
    font-family: "PPMori SemiBold";
    font-size: 19px;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    &:hover{
      color: #485F27;
      img{
        filter: brightness(0) saturate(100%) invert(29%) sepia(53%) saturate(514%) hue-rotate(43deg) brightness(94%) contrast(83%);
      }
    }
  }
}
.header-area {
  position: fixed;
  z-index: 999;
  right: 0;
  left: 0;
  transition: 0.5s;
}
.flex-box {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 30px;
}
.logo{
  transition: 0.4s;
  position: absolute;
  left: 0;
  top: -40px;
}
.header-area.sticky {
  background-color: #F2E4D4;
  box-shadow: 0px 0px 20px 0px #000000d0;
  backdrop-filter: blur(20px);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  animation: slideDown 0.35s ease-out;
  padding-bottom: 10px;
  .logo{
    scale: 0.7;
    top: -60px;
    transform: translateX(-60px);
  }
}
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}


.main-menu {
  display: flex;
  align-items: center;
  gap: 40px;
}

header {
  position: relative;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;
  transition: ease-in-out .4s;
}
header .primary-btn{
  padding: 7px 20px;
}

.main-menu {
  margin-left: auto;
}

nav {
  position: relative;
  margin: 0 auto
}

#menu,
#menu .main-menu ul,
#menu .main-menu ul li,
#menu .main-menu ul li a,
#menu #head-mobile {
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

#menu {
  position: relative;
  display: flex;
  align-items: center;
}

#menu>.main-menu>ul>li {
  float: left;
  padding-inline: 10px;
}

#menu>.main-menu>ul>li>a {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all .4s;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -ms-transition: all .4s;
  -o-transition: all .4s;
  padding: 12px 4px;
  display: inline-block;
  font-family: "PPMori Regular";
  color: #000;
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  &::after{
    content: '';
    position: absolute;
    bottom: 7px;
    left: 5px;
    width: 80%;
    height: 1px;
    background: #977A40;
    scale: 0 0;
    transform-origin: left;
    transition: all .5s;
  }
}
#menu>.main-menu>ul>li:hover>a,
#menu .main-menu ul li.current-menu-item a {
  &::after{
    scale: 1 1;
  }
}
.has-sub{
  margin-right: 15px;
}
#menu>.main-menu>ul>li:hover,
#menu .main-menu ul li.current-menu-item:hover,
#menu .main-menu ul li.current-menu-item,
#menu .main-menu ul li.has-sub.current-menu-item:hover {
  background: #e9cba400 !important;
  -webkit-transition: background .3s ease;
  -ms-transition: background .3s ease;
  transition: background .3s ease
}

#menu>.main-menu>ul>li.has-sub>a::before {
  top: 20px;
  right: -8px;
  transition: all .4s;
  content: "";
  position: absolute;
  z-index: 11;
  display: block;
  width: 8px;
  height: 8px;
  border-top: 1px solid;
  border-left: 1px solid;
  transform: rotate(225deg);
}

#menu .main-menu ul ul {
    position: absolute;
    left: -9999px;
    box-shadow: 0px 12px 10px 0px #0000004f;
    width: auto;
}

#menu .main-menu ul ul li {
    height: 0;
    -webkit-transition: all .25s ease;
    -ms-transition: all .25s ease;
    background: rgb(255, 255, 255);
    transition: all .25s ease
}


#menu li:hover>ul {
    left: auto
}

#menu li:hover>ul>li {
    height: 38px;
    display: block;
    align-items: center;
}

#menu ul ul ul {
    margin-left: 100%;
    top: 0
}

#menu ul ul li a {
    padding: 10px 20px;
    width: auto;
    font-family: "Satoshi Medium";
    font-size: 18px;
    text-decoration: none;
    font-weight: normal;
    white-space: nowrap;
    display: block;
    color: #000;
    font-style: normal;
    line-height: normal;
}

#menu .main-menu ul ul li:last-child>a,
#menu .main-menu ul ul li.last-item>a {
    border-bottom: 0
}

#menu .main-menu ul ul li:hover a {
    color: #fff;
    background-color: #D34E4E;
}
#menu .main-menu ul ul li.has-sub ul li a{
    background-color: #fff;
    color: #000;
    &:hover{
        background-color: #D2B450;
        color: #fff;
    }

}
#menu .main-menu ul ul li.has-sub>a:after {
    position: absolute;
    top: 13px;
    right: 11px;
    width: 8px;
    height: 8px;
    display: block;
    content: '';
    border-bottom: 1px solid;
    border-right: 1px solid;
    transform: rotate(-45deg);
    transition: all .4s;
}


#menu .main-menu ul ul li.has-sub:hover,
#menu .main-menu ul li.has-sub ul li.has-sub ul li:hover {
    background: #ffffff
}

#menu ul ul ul li.active a {
    border-left: 1px solid #333
}

#menu>.main-menu>ul>li.has-sub>ul>li.active>a,
#menu .main-menu>ul ul>li.has-sub>ul>li.active>a {
    border-top: 1px solid #333
}

#menu .main-menu ul li.current-menu-item ul li a {
    color: #000;
}

#menu .main-menu ul li.current-menu-item ul li a:hover {
    color: #ffffff;
}
.search-btn {
    width: 58px;
    height: 58px;
    &:hover{
        img{
            transform: scale(1.1);
        }
    }
}
.search-container {
    position: relative;
    z-index: 8;
  }

  .search-btn.active {
      background: linear-gradient(45deg, #e74c3c, #c0392b);
      transform: rotate(180deg);
  }

  .search-box {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%) scaleX(0);
      transform-origin: right center;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border: 2px solid #485F27;
      border-radius: 12px;
      width: 400px;
      opacity: 0;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
      z-index: 999;
      display: flex;
      align-items: center;
  }

  .search-box.active {
      transform: translateY(-50%) scaleX(1);
      opacity: 1;
  }

  .search-input {
      width: 100%;
      border: none;
      outline: none;
      padding: 18px 48px 18px 16px;
      font-size: 1rem;
      background: transparent;
      color: #485F27;
      border-radius: 25px;
  }

  .search-input::placeholder {
      color: #7f8c8d;
  }

  .search-close-btn {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      color: #7f8c8d;
  }

  .search-close-btn:hover {
      background: rgba(72, 95, 39, 0.1);
      color: #485F27;
      transform: translateY(-50%) scale(1.1);
  }

  .search-close-btn svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
  }
  .s-mobile{
      display: none;
  }
@media screen and (max-width:992px) {
    header {
        position: relative;
        width: 100%;
    }

    #menu .main-menu ul li.current-menu-item ul li a {
        color: #ffffff;
    }

    nav {
        width: 100%
    }

    #menu {
        width: 100%
    }

    #menu ul {
        width: 100%;
        display: none;
        margin-top: 150px;
    }

    #menu .main-menu {
        width: 50%;
        position: fixed;
        height: 100dvh !important;
        background: #FFF;
        transform: translateX(100%);
        transition: all .4s;
        top: 0;
        right: 0;
        border-left: 2px solid #485F27;
    }

    #menu .main-menu.open {
        transform: translateX(0%);
              z-index: 9;
    }
    #menu > .main-menu > ul > li > a {
      &::after {
          width: 10%;
          bottom: 10px;
      }
    }
    #menu>.main-menu>ul>li.has-sub>a::before {
      display: none;
    }
    #menu .main-menu ul li {
        width: 100%;
    }
    #menu .main-menu ul ul {
      background: #dddddd20;
    }

    #menu .main-menu ul li:hover {
        background: #363636
    }

    #menu .main-menu ul ul li,
    #menu li:hover>ul>li {
        height: auto
    }
        #menu .submenu-button {
        position: absolute;
        z-index: 99;
        right: 5px;
        top: 5px;
        display: block;
        border-left: 0;
        height: 50px;
        width: 60px;
        cursor: pointer;
        background: #dddddd3d;
    }
        #menu .submenu-button:after {
        position: absolute;
        top: 17px;
        right: 24px;
        width: 10px;
        height: 10px;
        display: block;
        content: '';
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        transform: rotate(45deg);
        transition: all .4s;
    }

    #menu .main-menu ul li a,
    #menu .main-menu ul ul li a {
        width: 100%;
        border-bottom: 0;
        color: #ffffff;
    }

    #menu>.main-menu>ul>li {
        float: none
    }

    #menu ul ul li a {
        padding-left: 25px
    }

    #menu ul ul li {
        background: #1b268600 !important
    }


    #menu ul ul ul li a {
        padding-left: 35px
    }

    #menu ul ul li a {
        color: #ddd;
        background: none
    }

    #menu ul ul li:hover>a,
    #menu ul ul li.active>a {
        color: #fff
    }

    #menu .main-menu ul ul {
        box-shadow: none;
    }

    #menu .main-menu ul ul,
    #menu .main-menu ul ul ul {
        position: relative;
        left: 0;
        width: 100%;
        margin: 0;
        text-align: left;
        top: 0;
        transform: unset;
        height: auto;
    }

    #menu .main-menu ul ul.open {
        transform: unset;
    }

    #menu>ul>li.has-sub>a:after,
    #menu>ul>li.has-sub>a:before,
    #menu ul ul>li.has-sub>a:after,
    #menu ul ul>li.has-sub>a:before {
        display: none
    }

    #menu #head-mobile {
      display: block;
      padding: 23px;
      color: #ddd;
      font-size: 12px;
      font-weight: 700
    }

    .hamburger {
      width: 55px;
      height: 48px;
      position: absolute;
      right: 0;
      top: -8px;
      cursor: pointer;
      z-index: 12399994;
    }

    .hamburger:after {
        position: absolute;
        top: 24px;
        right: 10px;
        display: block;
        height: 14px;
        width: 35px;
        border-top: 2px solid #485F27;
        border-bottom: 2px solid #485F27;
        content: '';
    }

    .hamburger:before {
        -webkit-transition: all .3s ease;
        -ms-transition: all .3s ease;
        transition: all .3s ease;
        position: absolute;
        top: 12px;
        right: 10px;
        display: block;
        height: 2px;
        width: 35px;
        background: #485F27;
        content: '';
    }

    .hamburger.menu-opened:after {
        -webkit-transition: all .3s ease;
        -ms-transition: all .3s ease;
        transition: all .3s ease;
        top: 23px;
        border: 0;
        height: 2px;
        width: 35px;
        background: #485F27;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    .hamburger.menu-opened:before {
        top: 23px;
        background: #485F27;
        width: 35px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }

    /* #menu .submenu-button {
        position: absolute;
        z-index: 99;
        right: 10px;
        top: 0;
        display: block;
        border-left: 0;
        height: 60px;
        width: 70px;
        cursor: pointer;
        background: #ffffff1a;
    } */

    /* #menu .submenu-button.submenu-opened {
      background:#1b268600;
  } */

    #menu ul ul .submenu-button {
        height: 56px;
        width: 68px;
        background: rgb(255 255 255 / 3%);
    }

    /* #menu .submenu-button:after {
        position: absolute;
        top: 22px;
        right: 29px;
        width: 10px;
        height: 10px;
        display: block;
        content: '';
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        transform: rotate(45deg);
        transition: all .4s;
    } */

    #menu ul ul .submenu-button:after {
       top: 25px;
        right: 27px;
    }

    #menu ul ul .submenu-button.submenu-opened:after {
        top: 16px;
    }

    #menu .submenu-button.submenu-opened:after {
        transform: rotate(-135deg);
        top: 23px;
    }


    #menu ul ul .submenu-button:before {
        top: 12px;
        right: 16px
    }

    #menu .submenu-button.submenu-opened:before {
        display: none
    }

    #menu ul ul ul li.active a {
        border-left: none
    }

    #menu>ul>li.has-sub>ul>li.active>a,
    #menu>ul ul>li.has-sub>ul>li.active>a {
        border-top: none
    }
    #menu .main-menu ul ul li.has-sub>a:after{
        display: none;
    }
}

/*************************************
                Home Page
**************************************/
.hero-img-mobile{
  display: none;
}
.hero{
  position: relative;
  .container{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
  }
}
.text-head-leaf{
  margin-bottom: -20px;
}
.banner-vector{
  position: absolute;
  bottom: -35px;
  left: 0;
}
.banner-leaf{
  position: absolute;
  left: 0;
  bottom: 10px;

}
.img-cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-bottom: -10px;
}
.hero-content{
  width: 50%;
  padding-top: 125px;
  h1{
    color: #2A441F;
    font-family: "PlayfairDisplay Bold";
    font-size: 72px;
    font-style: normal;
    font-weight: normal;
    line-height: 110%;
    span{
      display: block;
      font-family: "PlayfairDisplay Regular";
      font-size: 57px;
      line-height: 103.509%;
    }
  }
  p{
    font-family: "PPMori SemiBold";
    font-size: 21px;
  }
}
.hero-quality-box{
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all .6s ease;
  p{
    font-size: 17px;
    margin-bottom: 0;
    color: #2A441F;
    font-family: "PPMori SemiBold";
    line-height: 129.412%;
    transition: all .6s ease;
  }
  &:hover{
    scale: 1.1;
    p{
      color: #5c9504;
    }
    img{
      filter: brightness(0) saturate(100%) invert(43%) sepia(39%) saturate(3227%) hue-rotate(56deg) brightness(97%) contrast(97%);
      transform: rotateY(180deg);
    }
  }
}
.up-down{
  animation: moveUpDown 7s ease-in-out infinite;
}
.up-down2{
  animation: moveUpDown 5s ease-in-out infinite;
}
@keyframes moveUpDown {
  0%, 100% {
      transform: translateY(0); /* Start and end at the original position */
  }
  50% {
      transform: translateY(-10px); /* Move up by 20px */
  }
}
/************************************
  Clients
************************************/
.clients{
  .section-title{
    color: #212121;
    font-family: "PPMori SemiBold";
    font-size: 20px;
    line-height: 130%;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    span{
      display: block;
      width: 19px;
      height: 1px;
      background: #485F27;
    }
  }
}
.clients-slider-item{
  display: flex;
  align-items: center;
  justify-content: center;
}
.slick-arrow{
  width: 18px;
  height: 18px;
  top: 50%;
  &::before{
    content: '';
    position: absolute;
    background: url(../img/slider-arrow.webp) no-repeat center center;
    background-size: 100%;
    opacity: 1;
    inset: 0;
    margin-left: 3px;
    transition: 0.5s;
  }
  &:hover,
  &:focus{
    &::before{
      filter: brightness(0) saturate(100%) invert(29%) sepia(53%) saturate(514%) hue-rotate(43deg) brightness(94%) contrast(83%);
    }
  }
}
.slick-prev{
  left: -40px;
  &::before{
    transform: rotate(180deg);
    margin-left: 0;
    margin-right: 3px;
  }
}
.slick-next{
  right: -40px;
}
/************************************
   About
************************************/
.about{
  background: url(../img/about-bg.webp) no-repeat;
  background-size: 100%;
  background-position: bottom;
  position: relative;
  overflow: hidden;
}
.about-img{
  position: relative;
}
.base1{
  position: absolute;
  bottom: 0;
  left: -120px;
}
.base2{
  position: absolute;
  top: -190px;
  left: -170px;
  z-index: -2;
}
.base-img{
  clip-path: polygon(100% 35.4%, 99.9% 38.9%, 99.7% 42.4%, 99.3% 45.8%, 98.8% 49.2%, 98.2% 52.5%, 97.4% 55.7%, 96.6% 58.9%, 95.5% 62%, 94.4% 65%, 93.2% 67.9%, 91.8% 70.7%, 90.3% 73.4%, 88.8% 76.1%, 87.1% 78.6%, 85.3% 81%, 83.5% 83.2%, 81.5% 85.4%, 79.5% 87.4%, 77.4% 89.3%, 75.2% 91%, 73% 92.6%, 70.6% 94.1%, 68.3% 95.4%, 65.8% 96.6%, 63.3% 97.5%, 60.7% 98.4%, 58.1% 99%, 55.4% 99.5%, 52.7% 99.8%, 50% 99.8%, 47.3% 99.8%, 44.5% 99.5%, 41.9% 99%, 39.3% 98.4%, 36.7% 97.5%, 34.2% 96.6%, 31.7% 95.4%, 29.3% 94.1%, 27% 92.6%, 24.8% 91%, 22.6% 89.3%, 20.5% 87.4%, 18.4% 85.4%, 16.5% 83.2%, 14.6% 81%, 12.9% 78.6%, 11.2% 76.1%, 9.6% 73.4%, 8.2% 70.7%, 6.8% 67.9%, 5.6% 65%, 4.4% 62%, 3.4% 58.9%, 2.5% 55.7%, 1.8% 52.5%, 1.2% 49.2%, 0.7% 45.8%, 0.3% 42.4%, 0.1% 38.9%, 0% 35.4%, 0.1% 31.9%, 0.3% 28.7%, 0.7% 25.7%, 1.2% 22.9%, 1.9% 20.4%, 2.7% 18%, 3.6% 15.8%, 4.7% 13.8%, 5.9% 12%, 7.2% 10.4%, 8.6% 8.9%, 10.1% 7.5%, 11.8% 6.3%, 13.5% 5.3%, 15.3% 4.3%, 17.3% 3.5%, 19.3% 2.8%, 21.4% 2.2%, 23.6% 1.7%, 25.8% 1.3%, 28.1% 0.9%, 30.5% 0.6%, 32.9% 0.4%, 35.4% 0.3%, 38% 0.1%, 40.6% 0.1%, 43.2% 0%, 45.9% 0%, 48.6% 0%, 51.4% 0%, 54.1% 0%, 56.8% 0%, 59.5% 0%, 62.1% 0.1%, 64.6% 0.1%, 67.1% 0.3%, 69.5% 0.4%, 71.8% 0.6%, 74.1% 0.9%, 76.3% 1.3%, 78.4% 1.7%, 80.4% 2.2%, 82.4% 2.8%, 84.3% 3.5%, 86% 4.3%, 87.7% 5.3%, 89.3% 6.3%, 90.8% 7.5%, 92.2% 8.9%, 93.5% 10.4%, 94.7% 12%, 95.8% 13.8%, 96.7% 15.8%, 97.6% 18%, 98.3% 20.4%, 98.9% 22.9%, 99.4% 25.7%, 99.7% 28.7%, 99.9% 31.9%);
}
.since{
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 52px;
  color: #000;
  font-family: "PPMori Regular";
  font-size: 35px;
  font-style: normal;
  font-weight: normal;
  line-height: 77.143%;
  background: linear-gradient(90deg, rgba(217, 217, 217, 0.00) 0%, #FFF6E3 50.27%, rgba(250, 242, 225, 0.00) 100%);
}
/************************************
    Counter
************************************/
.counter-item{
  text-align: center;
  h4{
    color: #000;
    font-family: "PPMori SemiBold";
    font-size: 52px;
    font-style: normal;
    font-weight: normal;
    line-height: 100%;
    margin-bottom: 10px;
  }
  .plus{
    color: #485F27;
  }
  p{
    color: #000;
    font-family: "PPMori SemiBold";
    font-size: 21px;
    line-height: 123.81%;
  }
  &:hover{
    h4, p{
      color: #485F27;
    }
  }
}
/************************************
     Proud
 ************************************/
.proud{
  background: url(../img/member-bg.webp) no-repeat;
  background-size: 100%;
  background-position: center;
  padding: 55px 0;
  .section-title{
    color: #FFF;
    line-height: 115%;
  }
}
.proud-box{
  display: flex;
  align-items: center;
  justify-content: space-around;
  a{
    width: 266px;
    height: 167px;
    background: #FFF;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    &:hover{
      box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.5);
      scale: 0.99;
    }
  }
}
/************************************
    Popular
************************************/
.popular-box{
  border-radius: 29px;
  overflow: hidden;
  position: relative;
  height: 413px;
  p{
    color: #FFF;
    font-family: "PPMori SemiBold";
    font-size: 18px;
  }
  h3{
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    bottom: 50px;
    z-index: 1;
    padding-inline: 10px;
  }
  &::after{
    position: absolute;
    content: " ";
    width: 100%;
    height: 100%;
    inset: 0;
    border-radius: 0 0 29px 29px;
    background: linear-gradient(0deg, rgb(0 0 0 / 53%) 0%, rgba(0, 0, 0, 0) 100%);
  }
  &:hover{
    h3{
      opacity: 0;
    }
    .popular-box-content{
      opacity: 1;
      transform: translateY(0px);
      &::after{
        background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
        scale: 1 1;
      }
    }
  }
}
.popular-title{
  color: #FFF;
  font-family: "PPMori SemiBold";
  font-size: 26px;
  font-style: normal;
  font-weight: normal;
  line-height: 107.692%;
  margin-bottom: 5px;
}
.popular-box-content{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 20px 10px;
  opacity: 0;
  z-index: 2;
  transition: 0.6s;
  transform: translateY(30px);
  z-index: 1;
  .btn-group{
    flex-direction: column;
    gap: 10px;
    .primary-btn{
      width: 100%;
      gap: 5px;
      padding-block: 12px;
      background: #7C853E;
      border-color: #7C853E;
      &:hover{
        border-color: #5c9504;
      }
    }
    .secondary-btn{
      border-color: #FFF;
      background: #FFF;
      color: #7C853E;
      &:hover{
        border-color: #243014;
        color: #FFF;
      }
    }
  }
  &::after{
    position: absolute;
    content: " ";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 140%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 70%) 0%, rgba(0, 0, 0, 70%) 0%, rgba(0, 0, 0, 0) 100%);
    scale: 1 0;
    transform-origin: bottom;
    transition: 0.6s;
    z-index: -1;
  }
}
.popular-btn{
  border-color: #4A5F26;
  background: #4A5F26;
  &:hover{
    border-color: #5c9504;
  }
}
/************************************
      Why Choose
************************************/
.why-choose{
  position: relative;
  padding-bottom: 140px;
}
.why-choose-img{
  position: absolute;
  bottom: 30%;
  left: 35%;
}
.choose-vector{
  position: absolute;
  right: -15px;
  bottom: 0;
  width: 260px;
}
.why-choose-card:hover{
  img{
    transform: rotateY(180deg);
    filter: brightness(0) saturate(100%) invert(33%) sepia(16%) saturate(1383%) hue-rotate(43deg) brightness(95%) contrast(91%);
  }
  .dec{
    color: #485F27;
  }
}
/************************************
    Process
************************************/
.process{
  background: url(../img/our-process-bg-2.webp) no-repeat;
  background-size: cover;
  counter-reset: section;
  position: relative;
  .section-title, p{
    color: #FFF;
  }
  .primary-btn{
    background: #7C853E;
    border-color: #7C853E;
    &:hover{
      border-color: #5c9504;
    }
  }
  .row{
    position: relative;
    z-index: 1;
    &::after{
      position: absolute;
      content: " ";
      width: 110%;
      height: 1px;
      border: 1px dashed #ffffff53;
      top: 33%;
      left: 50%;
      transform: translateX(-50%);
      z-index: -1;
    }
  }
}
.our-process-leaf{
  position: absolute;
  top: -85px;
  left: 20%;
}
.process-icon{
  position: relative;
  margin: 0 auto;
  margin-bottom: 20px;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 7px 20px rgba(0,0,0,.07);
  transition: all .6s ease;
  /* &::before{
    content: "";
    position: absolute;
    inset: -15px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    filter: blur(20px);
    z-index: -1;
  } */
}
.process-box{
  text-align: center;
  h3{
    color: #FFF;
    font-family: "PPMori SemiBold";
    font-size: 21px;
    font-style: normal;
    font-weight: normal;
    line-height: 123.81% ;
    margin-bottom: 10px;
    position: relative;
    &::before{
      counter-increment: section;
      content: counter(section);
      margin-right: 10px;
      font-size: 30px;
    }
  }
  p{
    line-height: 138%;
  }
  &:hover{
    .process-icon{
      background: #7C853E;
      border-color: #D4C6AF;
    }
  }
}
/************************************
    Sustain
************************************/
.sustain{
  position: relative;
  padding-top: 140px;
  padding-bottom: 40px;
}
.sustainable-leaf, .sustainable-leaf2{
  position: absolute;
  top: 0px;
  left: 45%;
}
.sustainable-leaf2{
  top: 30%;
  left: 100px;
}
.section-content{
  ul{
    li{
      color: #000;
      font-family: "PPMori SemiBold";
      font-size: 18px;
      font-style: normal;
      font-weight: normal;
      line-height: 211.111%;
      position: relative;
      padding-left: 20px;;
      &::before{
        position: absolute;
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        Background: #485F27;
        outline: 2px solid #485f2734;
        left: 0;
        top: 13px;
      }
    }
  }
}
.sustain-img{
  .base1{
    border-radius: 50%;
    border: 14px solid #ffffff31;
    bottom: -10px;
    left: -60px;
  }
  .base2{
    width: 540px;
    left: unset;
    right: -215px;
    top: unset;
    bottom: 15px;
  }
}
/************************************
    Testimonial
************************************/
.testimonial{
  background: url(../img/testi-bg.webp) no-repeat;
  background-size: 100%;
  background-position: bottom;
  position: relative;
  .banner-leaf {
    position: absolute;
    left: 0;
    bottom: unset;
    top: -50px;
  }
}
.testi-box{
  position: relative;
  border-radius: 43px;
  background: #FFF;
  box-shadow: 0 14px 34px 0 rgba(0, 0, 0, 0.12);
  padding: 20px;
  p{
    color: #737373;
  }
  .star{
    color: #485F27;
    margin-bottom: 10px;
    font-size: 30px;
  }
}
.coma{
  position: absolute;
  right: 37px;
  bottom: 30px;
}
.profile{
  display: flex;
  align-items: center;
  gap: 15px;
  img{
    width: 56.393px;
    height: 56.393px;
    object-fit: cover;
    border-radius: 50%;
  }
  p{
    margin-bottom: 0;
  }
}
.testi-slider{
  .slick-slide {
    margin: 45px 20px;
  }
}
.slick-dots{
  bottom: -15px;
  li{
    width: auto;
    margin: 0 5px;
    transition: 0.5s;
    button{
      background: #B4B4B4;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      transition: all .5s;
      &::before{
        display: none;
      }
    }
    &.slick-active{
      button{
        background: #000;
      }
    }
  }
}
/************************************
    Awards
************************************/
.awards{
  position: relative;
  background: url(../img/awards-bg-vector.webp) no-repeat;
  background-size: 100%;
  background-position: bottom;
  padding-top: 180px;
  padding-bottom: 100px;
  .sustainable-leaf{
    top: 30px;
    left: 48%;
  }
  .sustainable-leaf2{
    position: absolute;
    rotate: -90deg;
    top: 20%;
    left: 8%;
  }
}
.awards-slider-box{
  position: relative;
  .slider-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .slider-track {
    width: 100%;
    height: 405px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .slide {
    position: absolute;
    border-radius: 29px;
    height: 365px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
  }
  .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .slide.active {
    z-index: 10;
    transform: translateX(0) rotate(0deg) scale(1.05);
  }
  .slide.prev {
    z-index: 5;
    transform: translateX(-175px) rotate(-11deg) scale(0.88);
  }
  .slide.next {
    z-index: 5;
    transform: translateX(175px) rotate(11deg) scale(0.88);
  }
  .slide.hidden {
    z-index: 1;
    transform: translateX(0) scale(0.7);
    opacity: 0;
    pointer-events: none;
  }
  .dots {
    display: flex;
    gap: 8px;
    margin-top: 28px;
    z-index: 20;
  }
  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D7D7D7;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
  }
  .dot.active {
    background: #000;
  }
}
.awards-leaf{
  position: absolute;
  top: -150px;
  left: 30%;
  width: 400px;
}
/************************************
    Responsbility
************************************/
.responsbility{
  padding-left: 40px;
  padding-right: 15%;
  padding-top: 0;
  position: relative;
  .row{
    position: relative;
    z-index: 1;
    &::after{
      position: absolute;
      content: "";
      width: 110%;
      height: 94%;
      top: 48px;
      left: 25px;
      background: #FFFAF3;
      border-radius: 54px;
      z-index: -1;
    }
  }
  .sustainable-leaf{
    top: 30%;
    left: unset;
    right: 0;
    z-index: 2;
  }
}
.res-img{
  border-radius: 54px;
  overflow: hidden;
}
/************************************
    Feature Blogs
************************************/
.feature-blog{
  position: relative;
  .sustainable-leaf2 {
    top: 40%;
    left: 160px;
  }
  .sustainable-leaf3 {
    position: absolute;
    top: 55%;
    right: 90px;
  }
  .choose-vector{
    right: unset;
    left: -20px;
    bottom: -70px;
  }
}
.featured-blog-right-leaf{
  position: absolute;
  right: 0;
  top: -190px;
  z-index: 2;
}
.feature-box{
  border-radius: 47px;
  overflow: hidden;
  position: relative;
  &::after{
    position: absolute;
    content: "";
    inset: 0;
    border-radius: 47px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 40%, rgba(102, 102, 102, 0.00) 70%);
  }
  p{
    color: #FFF;
  }
  .primary-btn{
    background: #7C853E;
    border-color: #7C853E;
    padding: 8px 18px;
    &:hover{
      border-color: #5c9504;
    }
  }
}
.feature-content{
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 20px 30px;
  z-index: 1;
}
.tag-date{
  display: flex;
  align-items: center;
  gap: 13px;
  p{
    margin-bottom: 0;
    font-family: "PPMori SemiBold";
    font-size: 19px;
    color: #FFF;
  }
}
.badge{
  color: #FFF;
  font-family: "PPMori SemiBold";
  font-size: 19px;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  border-radius: 12px;
  border: 1px solid #7C853E;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(5px);
  padding: 6px 14px;
}
.feature-blog-title{
  color: #FFF;
  font-family: "PPMori SemiBold";
  font-size: 28px;
  font-style: normal;
  font-weight: normal;
  line-height: 107.143%;
  &:hover{
    color: #5c9504;
  }
}
.hei-100{
  height: 566px;
}
.feature-box-oth{
  height: 258px;
  .feature-content{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.view-blog{
  color: #485F27;
  font-family: "PPMori SemiBold";
  font-size: 19px;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  text-decoration-line: underline;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: 0.5s;
  &:hover{
    color: #5c9504;
    img{
      filter: brightness(0) saturate(100%) invert(40%) sepia(70%) saturate(4032%) hue-rotate(60deg) brightness(107%) contrast(97%);
    }
  }
}
.slick-slide{
  margin: 0 20px;
}
.slick-list{
  margin: 0 -20px;
}
/************************************
    Feed
************************************/
.feed{
  position: relative;
  background: url(../img/feed-bg.webp) no-repeat;
  background-size: cover;
  .sustainable-leaf{
    top: -30px;
    left: 25%;
  }
  .sustainable-leaf3 {
    position: absolute;
    top: 10%;
    right: 170px;
  }
}
/************************************
     Faq
************************************/
.faq{
  position: relative;
  background: url(../img/faq-vector-bottom.webp) no-repeat;
  background-size: 100%;
  background-position: bottom;
  .featured-blog-right-leaf {
    position: absolute;
    right: 0;
    top: unset;
    bottom: 0;
    z-index: 2;
    width: 260px;
  }
}
.faq-vector-left-leaf {
  position: absolute;
  left: 0;
  bottom: -80px;
  width: 220px;
}
.accordion__item {
  margin: 15px auto;
  transition: .5s;
  position: relative;
  border-radius: 22px;
  border: 1px solid #977A40;
  background: #F9F9F9;
}
.accordion__item:hover {
  transform: translateY(-5px)
}
.accordion__item .accordion__title {
  position: relative;
  display: block;
  padding: 20px 60px 20px 20px;
  color: #141414;
  font-family: "PPMori SemiBold";
  font-size: 19px;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  transition: 0.5s;
  cursor: pointer;
}
.accordion__title::after {
  content: ' ';
  position: absolute;
  width: 12px;
  height: 12px;
  right: 25px;
  top: 23px;
  border-right: 1px solid #977133;
  border-bottom: 1px solid #977133;
  line-height: normal;
  transform: rotate(-45deg);
  transition: all .5s;
}
.accordion__item.accordion-active .accordion__title::after{
  transform: rotate(45deg);
}
.accordion__item.accordion-active{
  .accordion__title{
    color: #977A40;
    padding-bottom: 10px;
  }
}
.accordion__item .accordion__content {
  padding: 20px;
  padding-top: 0;
  color: #000;
  font-family: "PPMori Regular";
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
  line-height: 150%;
  margin-bottom: 0;
  font-weight: normal;
  display: none;
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
/************************************
   Visit Us
************************************/
.visit-us{
  background: url(../img/visit-us-bg.webp) no-repeat;
  background-size: 100%;
  background-position: bottom;
  position: relative;
  .sustainable-leaf2{
    top: 70%;
    left: 20%;
  }
  .sustainable-leaf3{
    position: absolute;
    top: 40%;
    right: 20%;
  }
}
.social-media{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  a{
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D0CFCD;
    &:hover{
      scale: 1.05;
      box-shadow: 0 0 10px rgb(0 0 0 / 30%);
    }
  }
  .insta{
    background: linear-gradient(262deg, #B6409C 5.06%, #8115A1 48.85%, #E64680 94.94%);
  }
  .yt{
    background: #FF0808;
  }
  .fb{
    background: #3B5998;
  }
}
.visit-img{
  transform: translateX(55px);
}
/*******************************
  Footer
********************************/
footer{
  background: url(../img/footer-bg.webp) no-repeat;
  background-size: cover;
  background-position: bottom;
  padding-block: 50px;
  position: relative;
	overflow:hidden;
  .sustainable-leaf2{
    top: 60%;
  }
  .row{
    .col-lg-4, .col-lg-2, .col-lg-3{
      position: relative;
      &::after{
        content: '';
        position: absolute;
        width: 1px;
        height: 379px;
        background: linear-gradient(180deg, #8B652A 0%, rgba(102, 102, 102, 0.00) 100%);
        right: 60px;
        top: 0;
      }
    }
    .col-lg-3:last-child{
      &::after{
        display: none;
      }
    }
  }
}
.footer-p{
  width: 85%;
}
.footer-vector-right{
  position: absolute;
  right: 0;
  bottom: 0;
}
.footer-logo {
  margin-bottom: 20px;
}
.social-links{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  a{
    width: 44px;
    height: 44px;
    background: #485F27;
    border-radius: 50%;
    border: 1px solid #D0CFCD;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    img{
      transition: 0.1s;
    }
    &:hover{
      transform: translateY(-5px);
      background: #5c9504;
    }
  }
}
.mb-0{
  margin-bottom: 0;
}
footer p,
footer p a{
  color: #242424;
  font-family: "PPMori Regular";
  font-size: 17px;
  font-style: normal;
  font-weight: normal;
  line-height: 152.941%;
}
footer ul li a{
  color: #000;
  font-family: "PPMori Regular";
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  line-height: 240.5%;
}
.footer-title{
  color: #141414;
  font-family: "PPMori SemiBold";
  font-size: 22px;
  font-style: normal;
  font-weight: normal;
  line-height: normal;
  margin-bottom: 25px;
  position: relative;
  &::after{
    content: '';
    position: absolute;
    width: 35px;
    height: 1px;
    border-radius: 150px;
    background: #485F27;
    bottom: -8px;
    left: 0;
  }
}
.footer-sub-titile{
  color: #000;
  font-family: "PPMori SemiBold";
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
  line-height: 166.667%;
  position: relative;
  &::after{
    position: absolute;
    content: '';
    top: -10px;
    left: 0;
    width: 350px;
    height: 1px;
    background: linear-gradient(90deg, #8B652A 0%, rgba(102, 102, 102, 0.00) 100%);
  }
}
.line{
  &::after{
    display: none;
  }
}
footer ul li a{
  display: block;
}
footer a:hover{
  color: #5c9504;
  transform: translateX(5px);
}
.copyright{
  border-radius: 22px;
  background: #485F27;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.copyright p{
  color: #FFF;
  font-family: "PPMori SemiBold";
  font-size: 16px;
  margin: 0;
  a{
    color: #FF923F;
  }
}
/*****************************************************
                  Inner Page
*******************************************************/
.inner-banner{
  background: #F3EEE4;
  padding-top: 240px;
  padding-bottom: 100px;
  .container{
    position: relative;
    z-index: 1;
    gap: 30px;
  }
  .hero-content {
    width: 41%;
    padding-top: 0;
}
.inner-banner-img{
  position:relative;
  width: 70%;
  margin-right: -150px;
  .img{
    border-radius: 47px;
  }
}
.banner-vector {
    position: absolute;
    bottom: -50px;
    left: 0;
}
.banner-leaf {
    z-index: 1;
}
.img-logo,
.img-vector{
  position: absolute;
}
.img-logo {
    z-index: -1;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
}
.img-vector {
    right: -130px;
    z-index: -1;
    bottom: 76px;
}
img.img-leaf {
    position: absolute;
    left: -100px;
    bottom: 45px;
}
}
.contact-list{
  position: relative;
  padding-left: 71px;
  margin-bottom: 30px;
  span {
    width: 51px;
    height: 48px;
    border-radius: 7px;
    background: #485F27;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
}
h3{
  color: #000;
  font-family: 'PPMori SemiBold';
  font-size: 17px;
  font-style: normal;
  font-weight: 600;
  line-height: 176.471%;
  margin-bottom: 10px;
}
p a:hover{
  color: #5c9504;
}
}
.conatct-information{
  padding-bottom: 0;
  position: relative;
  .banner-leaf{
    bottom: 0;
    top: unset;
  }
}
.contact-form{
  border-radius: 47px;
border: 1px solid rgba(0, 0, 0, 0.23);
background: #FFF;
padding: 40px 50px;
.form-group{
  margin-bottom: 20px;
  position: relative;
}
.form-icon{
  position: absolute;
  top: 22px;
  right: 20px;
}
.form-control{
  border-radius: 14px;
  border: 1px solid rgba(74, 95, 38, 0.41);
  background: #F9F9F9;
  color: #000;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 155.556%;
    padding: 18px 22px;
}
}
.banner-leaf.right-leaf {
    right: -86px;
    left: auto;
    bottom: 160px;
}
.contact-vector{
  img{
      margin-bottom: -10px;
  }
}
.contact-map{
  iframe{
    width: 100%;
    height: 500px;
    border-radius: 0;
    border: 0;
  }
}
/* About Page */
.about-us{
  .since {
    display: none;
  }
  .base1{
    z-index: -1;
  }
}
.comm-title{
  color: #000;
  font-family: "PPMori SemiBold";
  font-size: 26px;
  font-style: normal;
  font-weight: normal;
  line-height: 115.385%;
}
.base3{
  position: absolute;
  width: 300px;
  height: 300px;
  right: -15px;
  bottom: -10px;
  border-radius: 50%;
}
.miss-viss{
  position: relative;
  padding-top: 140px;
  padding-bottom: 60px;
  .our-process-leaf {
    left: unset;
    right: 20%;
  }
  .featured-blog-right-leaf {
    width: 200px;
    right: unset;
    top: unset;
    bottom: -60px;
    left: 0;
    transform: rotateY(180deg) !important;
    z-index: 2;
  }
}
.miss-box{
  transform: translateX(15px);
  border-radius: 50%;
  position: relative;
  &::after{
    content: '';
    position: absolute;
    width: 90%;
    height: 95%;
    top: 0;
    right: 0;
    border-radius: 50%;
    background: #FFFAF3;
    z-index: -1;
  }
  .awards-leaf{
    z-index: -1;
    top: -30px;
    left: 45%;
  }
  .sustainable-leaf{
    top: -30px;
    left: 65%;
    width: 150px;
  }
  .our-process-leaf {
    top: unset;
    bottom: -30px;
    left: 14%;
    z-index: 1;
  }
  .sustainable-leaf2{
    top: unset;
    bottom: 5%;
    left: 20px;
  }
}
.mix-vis-content{
  position: absolute;
  inset: 0;
  text-align: center;
  padding: 50px 60px 160px 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  img{
    margin-bottom: 20px;
  }
  .section-title{
    font-size: 48px;
  }
}
.viss-box{
  transform: translateX(-15px);
  &::after{
    right: unset;
    left: 0;
  }
  .mix-vis-content{
    padding: 50px 130px 160px 50px;
  }
}
.viss-bg{
  transform: rotateY(180deg);
}
.matters{
  background: #485F27;
  position: relative;
  .section-title, p{
    color: #FFF;
  }
}
.matters-img{
  position: absolute;
  right: 0;
  width: 47%;
  top: 0;
  height: 100%;
  object-fit: cover;
}
.mat-box{
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 27px;
  h3{
    color: #FFF;
    font-family: "PPMori SemiBold";
    font-size: 26px;
    font-style: normal;
    font-weight: normal;
    line-height: 107.692%;
    margin-bottom: 10px;
  }
}
.matters-content{
  padding-right: 10px;
}
.square{
  width: 142px;
  height: 120px;
  border-radius: 29px;
  background: #596E35;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-family: "PPMori Regular";
  font-size: 45px;
  font-style: normal;
  font-weight: normal;
  line-height: 62.222%;
}
.excel{
  padding-top: 140px;
  padding-bottom: 60px;
  .our-process-leaf {
    left: unset;
    right: 10%;
  }
  .about-img{
    .base-img{
      clip-path: polygon(95.2% 50%, 93.4% 53.5%, 91.7% 56.8%, 90.1% 60%, 88.6% 63%, 87.1% 65.9%, 85.7% 68.7%, 84.3% 71.4%, 83% 73.9%, 81.8% 76.3%, 80.5% 78.6%, 79.3% 80.8%, 78% 82.8%, 76.8% 84.7%, 75.6% 86.5%, 74.3% 88.2%, 73.1% 89.8%, 71.8% 91.2%, 70.4% 92.5%, 69% 93.8%, 67.5% 94.9%, 66% 95.9%, 64.4% 96.7%, 62.7% 97.5%, 60.9% 98.2%, 59% 98.7%, 57% 99.2%, 54.8% 99.6%, 52.6% 99.8%, 50.2% 100%, 47.6% 100%, 45% 99.9%, 42.4% 99.7%, 39.9% 99.3%, 37.4% 98.8%, 35% 98.2%, 32.6% 97.5%, 30.2% 96.6%, 28% 95.5%, 25.7% 94.4%, 23.6% 93.2%, 21.5% 91.8%, 19.5% 90.4%, 17.6% 88.8%, 15.7% 87.1%, 13.9% 85.4%, 12.3% 83.5%, 10.7% 81.6%, 9.2% 79.5%, 7.8% 77.4%, 6.5% 75.2%, 5.3% 73%, 4.2% 70.7%, 3.3% 68.3%, 2.4% 65.8%, 1.7% 63.3%, 1.1% 60.7%, 0.6% 58.1%, 0.3% 55.4%, 0.1% 52.7%, 0% 50%, 0.1% 47.3%, 0.3% 44.6%, 0.6% 41.9%, 1.1% 39.3%, 1.7% 36.7%, 2.4% 34.2%, 3.3% 31.7%, 4.2% 29.3%, 5.3% 27%, 6.5% 24.8%, 7.8% 22.6%, 9.2% 20.5%, 10.7% 18.4%, 12.3% 16.5%, 13.9% 14.6%, 15.7% 12.9%, 17.6% 11.2%, 19.5% 9.6%, 21.5% 8.2%, 23.6% 6.8%, 25.7% 5.6%, 28% 4.5%, 30.2% 3.4%, 32.6% 2.5%, 35% 1.8%, 37.4% 1.2%, 39.9% 0.7%, 42.4% 0.3%, 45% 0.1%, 47.6% 0%, 50.3% 0%, 53% 0.2%, 55.8% 0.4%, 58.7% 0.8%, 61.6% 1.3%, 64.5% 1.8%, 67.3% 2.5%, 70.2% 3.3%, 73% 4.1%, 75.8% 5.1%, 78.5% 6.2%, 81.1% 7.5%, 83.6% 8.8%, 86% 10.2%, 88.2% 11.8%, 90.4% 13.5%, 92.3% 15.3%, 94.1% 17.2%, 95.6% 19.2%, 97% 21.4%, 98.1% 23.7%, 99% 26.1%, 99.6% 28.6%, 99.9% 31.3%, 100% 34.1%, 99.7% 37%, 99.1% 40%, 98.2% 43.2%, 96.9% 46.5%);
    }
    .base1{
      bottom: 0;
      left: unset;
      right: -15px;
      z-index: -1;
    }
  }
}
.commitment{
  background: #FFFAF3;
  padding-bottom: 80px;
  .about-img{
    z-index: 1;
  }
  .base-img{
    clip-path: none;
    border-radius: 50%;
  }
  .base1 {
    border-radius: 50%;
    border: none;
    bottom: -100px;
    left: unset;
    right: -60px;
  }
  .base2 {
    width: 340px;
    left: unset;
    right: -60px;
    top: -40px;
    z-index: -1;
  }
  .choose-vector{
    right: unset;
    left: -15px;
    bottom: 0;
    width: 260px;
  }
  .awards-bg-vector{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  .our-process-leaf{
    top: unset;
    bottom: -140px;
    left: 0;
    width: 170px;
  }
  .sustainable-leaf{
    top: unset;
    bottom: -115px;
    left: 130px;
    width: 120px;
  }
}
.founder{
  position: relative;
}
.founder-box{
  border-radius: 54px;
  background: #FAF8F3;
  padding: 20px;
}
.founder-img{
  border-radius: 54px;
  overflow: hidden;
}
.founder-content{
  padding-left: 70px;
  position: relative;
  .awards-leaf {
    top: -132px;
    left: unset;
    right: 10px;
    width: 170px;
  }
}
.line-bar{
  width: 124px;
  height: 1px;
  background: #959191;
  margin-bottom: 50px;
  margin-top: 80px;
}
.signature-title{
  color: #000;
  font-family: "One Signature";
  font-size: 63px;
  font-style: normal;
  font-weight: 400;
  line-height: 44.444%;
}
.signature-position{
  color: #000;
  font-family: "PPMori SemiBold";
  font-size: 22px;
  font-style: normal;
  font-weight: normal;
  line-height: 136.364%;
}
.founder-vector{
  position: absolute;
  bottom: -50px;
  right: -50px;
  transform: rotateY(180deg);
  width: 300px;
}
.global{
  position: relative;
  padding-bottom: 0;
}
.global-map{
  position: absolute;
  left: 0;
  top: 25%;
  object-fit: contain;
}
.country-list{
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin-bottom: 20px;
  li{
    width: 47%;
    border-radius: 22px;
    border: 1px solid #977A40;
    background: #F9F9F9;
    color: #000;
    font-family: "PPMori SemiBold";
    font-size: 22px;
    font-style: normal;
    font-weight: normal;
    line-height: 136.364%;
    padding: 26px 30px;
    padding-left: 56px;
    position: relative;
    transition: all 0.3s ease-in-out;
    &::before{
      content: "";
      position: absolute;
      width: 18px;
      height: 36px;
      background: url(../img/pin-point.webp) no-repeat;
      background-size: 100%;
      left: 28px;
      top: 50%;
      transform: translateY(-50%);
    }
    &:hover{
      background: #efefef;
    }
  }
}
.journey-history{
  .container-fluid{
    padding: 0 100px;
    position: relative;
    overflow: hidden;
    height: 672px;
  }
  .img-cover{
    border-radius: 54px;
  }
  .container{
    height: 100%;
  }
}
.journey-history .img-cover {
  position: absolute;
  display: block;
  inset: 0;
  width: 90%;
  opacity: 0;
  left: 50%;
  transform: translateX(-50%);
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.journey-history .img-cover.active {
  opacity: 1;
  visibility: visible;
}

.journey-overlay,
.journey-history .container {
  position: relative;
  z-index: 2;
}

.history-box {
  cursor: pointer;
}
.journey-box{
  position: relative;
  border-radius: 54px;
  overflow: hidden;
}
.journey-box{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-block: 50px;
  .row{
    width: 100%;
    position: relative;
    &::before{
      content: "";
      position: absolute;
      width: 92%;
      height: 1px;
      border: 1px dashed #FFF;
      left: 40px;
      top: 61px;
    }
  }
  .section-title{
    color: #FFF;
  }
}
.arrow-box{
  position: absolute;
  right: 0;
  top: 30px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  display: none;
}
.history-box{
  cursor: pointer;
  z-index: 2;
  position: relative;
  h3{
    color: #FFF;
    font-family: "PPMori Regular";
    font-size: 38px;
    font-style: normal;
    font-weight: normal;
    line-height: 73.684%;
    margin-bottom: 10px;
  }
  .dec{
    color: #FFF;
  }
  &.active, &:hover{
    .history-circle{
      background: #485F27;
    }
  }
}
.history-circle{
  display: block;
  width: 28px;
  height: 28px;
  background: #D9D9D9;
  border-radius: 50%;
  margin-bottom: 30px;
  transition: all 0.3s ease-in-out;
}
.journey-overlay{
  position: absolute;
  width: 90%;
  height: 100%;
  border-radius: 54px;
  background: linear-gradient(177deg, rgb(0 0 0 / 43%) 72.96%, #000 107.63%);
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
/* Blog Details */
.blog-details-banner{
  .hero-content{
    width: 70%;
    text-align: center;
    margin-inline: auto;
  }
  .text-head-leaf{
    transform: translateX(400px);
  }
}
.blog-details-img{
  border-radius: 47px;
  overflow: hidden;
}
.blog-details{
  h2, h3, h4{
    color: #2A441F;
    font-family: "PlayfairDisplay Bold";
    font-size: 42px;
    font-style: normal;
    font-weight: normal;
    line-height: 123.81%;
    text-transform: capitalize;
  }
  h3{
    font-size: 33px;
  }
  h4{
    font-size: 27px;
  }
  ol{
    list-style: decimal;
    padding-left: 20px;
    li{
      color: #000;
      font-family: "PPMori Regular";
      font-size: 18px;
      font-style: normal;
      font-weight: normal;
      line-height: 211.111%;
      position: relative;
      padding-left: 20px;
      span{
        display: block;
        color: #2A441F;
        font-family: "PlayfairDisplay Bold";
        font-size: 27px;
        font-style: normal;
        font-weight: normal;
        line-height: 192.593%;
        text-transform: capitalize;
      }
      &::marker{
        font-size: 20px;
        color: #485F27;
      }
    }
  }
}
.pegination{
  display: flex;
  align-items: center;
  justify-content: space-between;
  a{
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 20px;
    padding: 20px;
    border-radius: 30px;
    background: #F3F3F3;
    transition: all 0.3s ease-in-out;
    text-align: right;
    h4{
      color: #000;
      font-family: "PPMori SemiBold";
      font-size: 18px;
      font-style: normal;
      font-weight: normal;
      line-height: 166.667%;
      text-transform: capitalize;
      margin-bottom: 10px;
      transition: all 0.3s ease-in-out;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
    span{
      display: inline-block;
      border-radius: 10px;
      background: #485F27;
      color: #FFF;
      padding: 5px 15px;
      transition: all 0.3s ease-in-out;
    }
    img{
      width: 155px;
      height: 105px;
      object-fit: cover;
      border-radius: 12px;
    }
    &:hover{
      background: #485F27;
      h4{
        color: #FFF;
      }
      span{
        background: #FFF;
        color: #485F27;
      }
    }
  }
  a.pegi-nxt{
    justify-content: start;
    text-align: left;
  }
}
.blog-recent{
  a{
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid #D8D8D8;
    padding-block: 20px;
    img{
      width: 114px;
      height: 114px;
      border-radius: 50%;
      object-fit: cover;
    }
    h4{
      font-size: 20px;
      margin-bottom: 15px;
    }
    p{
      font-size: 15px;
      color: #878787;
      margin-bottom: 0;
    }
    &:hover{
      background: #f1f1f1;
      box-shadow: -15px 0px 0px #f1f1f1, 15px 0px 0px #f1f1f1;
      border-color: #FFF;
    }
  }
  a:last-child{
    border-bottom: none;
  }
}
.category{
  border-radius: 45px;
  background: #F3EEE4;
  padding: 20px;
  a{
    color: #000;
    font-family: "PPMori SemiBold";
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    line-height: 211.111%;
    text-transform: capitalize;
    border-radius: 50px;
    background: #FFF;
    display: block;
    padding: 15px 25px;
    margin-bottom: 15px;
    position: relative;
    &::after{
      position: absolute;
      content: "";
      width: 16px;
      height: 10px;
      background: url(../img/slider-arrow.webp) no-repeat;
      background-size: 100%;
      background-position: center;
      top: 50%;
      transform: translateY(-50%);
      right: 25px;
      filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(4142%) hue-rotate(281deg) brightness(106%) contrast(97%);
    }
    &:hover{
      background: #485F27;
      color: #FFF;
      &::after{
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7427%) hue-rotate(23deg) brightness(118%) contrast(118%);
      }
    }
  }
}
/* Product Details */
.product-details-area{
  background: #F9F7F1;
}
.product-details-header{
  position: relative;
  border: 1px solid #CBCBCB;
  background: #F3EEE4;
  .logo{
    position: relative;
    left: unset;
    top: unset;
    margin-top: -45px;
  }
  #menu{
    align-items: start;
  }
}
.product-details-header.sticky{
  .logo{
    position: absolute;
    scale: 0.7;
    top: -20px;
    transform: translateX(-60px);
  }
}
.product-details-image{
  display: flex;
  align-items: center;
  gap: 6px;
}
.image-tab{
  display: block;
  width: 113px;
  height: 130.15px;
  object-fit: cover;
  border-radius: 17px;
  overflow: hidden;
  margin-bottom: 7px;
  position: relative;
  &::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    top: 0;
    left: 0;
    border-radius: 17px;
    transition: all 0.3s ease-in-out;
  }
}
.image-tab.active,
.image-tab:hover{
  &::after{
    background: rgba(0, 0, 0, 0.28);
  }
}
.image-tabs{
  .image-tab:last-child{
    margin-bottom: 0;
  }
}
.shown-image{
  border-radius: 37px;
  overflow: hidden;
  width: 100%;
  height: 553px;
}
.product-details-content{
  h1{
    color: #151515;
    font-family: "PPMori SemiBold";
    font-size: 46px;
    font-style: normal;
    font-weight: normal;
    line-height: 147.826%;
  }
  p{
    font-size: 21px;
  }
  .primary-btn{
    width: 50%;
    gap: 8px;
    img{
      margin-bottom: 4px;
    }
  }
  .secondary-btn{
    &:hover{
      img{
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7427%) hue-rotate(23deg) brightness(118%) contrast(118%);
      }
    }
  }
}
.product-details-info{
  p{
    font-size: 18px;
    span{
      font-family: "PPMori SemiBold";
    }
  }
}
.product-enquiry{
  position: relative;
  background: #F9F7F1;
  z-index: 1;
  .container{
    border-top: 1px solid #95AA75;
  }
  .contact-form {
    position: relative;
    border-radius: 22px;
    background: #F9F7F1;
    padding: 30px;
    .btn-group{
      justify-content: center;
    }
    .form-control{
      background: #F9F7F1;
    }
    .footer-vector-right {
      right: unset;
      left: -180px;
      bottom: 70px;
      z-index: -1;
    }
    form .primary-btn {
      background: none;
      background-size: 22%;
      background-position: 15px;
      background-color: #485F27;
      padding-left: 41px;
      cursor: pointer;
    }
    .why-choose-img {
      bottom: unset;
      left: unset;
      right: -90px;
      top: -50px;
    }
  }
}
.product-enquiry-img{
  position: absolute;
  background: url(../img/inner-banner-logo.webp) no-repeat;
  background-size: contain;
  background-position: center;
}
.related-product{
  position: relative;
  background: #F2EDE4;
  .featured-blog-right-leaf {
    right: 0;
    top: unset;
    bottom: -60px;
    z-index: 1;
    width: 204px;
  }
}
.related-product-box{
  display: block;
  border-radius: 32px;
  overflow: hidden;
  position: relative;
  height: 424px;
  h3{
    color: #485F27;
    text-align: center;
    font-family: "PPMori SemiBold";
    font-size: 24px;
    font-style: normal;
    font-weight: normal;
    line-height: 108.333%;
    border-radius: 32px;
    background: #F8F8F8;
    padding: 25px 40px;
    display: inline-block;
    width: 90%;
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s ease-in-out;
  }
  &:hover{
    .img-cover{
      transform: scale(1.1);
    }
    h3{
      background: #485F27;
      color: #FFF;
      bottom: 0;
      padding: 15px 40px;
    }
  }
}
.related-product-slider{
  .slick-arrow{
    width: 50px;
    height: 50px;
    background: #D9D9D9;
    border-radius: 50%;
    z-index: 1;
    &::before {
      background-size: 60%;
    }
    &:hover, &:focus{
      background: #485F27;
      &::before{
       filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(0%) hue-rotate(75deg) brightness(111%) contrast(100%);
      }
    }
  }
  .slick-prev {
    left: -30px;
  }
  .slick-next {
    right: -30px;
  }
}
/* Product Listing */
.product-listing-banner{
  padding: 0;
  .container{
    position: absolute;
  }
  .hero-content{
    width: 75%;
    padding-top: 150px;
  }
  .product-banner-img{
    margin-top: -60px;
  }
  .banner-vector {
    z-index: 1;
    filter: brightness(0) saturate(100%) invert(92%) sepia(11%) saturate(504%) hue-rotate(336deg) brightness(98%) contrast(95%);
    bottom: -45px;
  }
  .text-head-leaf {
    transform: unset;
  }
}
.section-goes{
  position: relative;
  background: #F8F4EE;
  margin-top: -8px;
}
.awards-bg-vector{
  position: absolute;
  left: 0;
  bottom: 0;
}
.more-content {
  display: none;
}
.product-listing{
  .container-fluid{
    padding: 0 50px;
  }
  p{
    color: #151515;
    margin-bottom: 6px;
  }
  .product-details-info {
    p {
      font-size: 16px;
    }
  }
  .btn-group{
    flex-direction: column;
    gap: 10px;
  }
  .primary-btn{
    width: 100%;
    gap: 7px;
    padding-block: 11px;
  }
  .secondary-btn {
    padding-block: 6px;
    background: #FFF;
  }
}
.product-listing-img{
  width: 100%;
  height: 447px;
  background: #F8F4EE;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  overflow: hidden;
  position: relative;
  img{
    width: 100%;
    height: 100%;
/*     object-fit: contain; */
	object-fit: cover;
  }
}
.sale{
  position: absolute;
  top: 20px;
  right: 20px;
  color: #000;
  font-family: "PPMori Regular";
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  line-height: 156.25%;
  text-transform: uppercase;
  background: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 53px;
  height: 53px;
  border-radius: 50%;
}
.product-title{
  color: #151515;
  font-family: "PPMori SemiBold";
  font-size: 22px;
  font-style: normal;
  font-weight: normal;
  line-height: 100%;
  margin-bottom: 5px;
}
.product-listing-card{
  transition: all 0.3s ease-in-out;
  &:hover{
    transform: translateY(-10px);
    .product-listing-img{
      img{
        scale: 1.05;
      }
    }
    .product-title{
      color: #485F27;
    }
  }
}
/* Product Category */
.product-category-banner{
  .hero-content {
    width: 55%;
  }
  .banner-vector{
    z-index: 1;
    filter: unset;
    bottom: -45px;
  }
}
.cotton-canvas{
  padding-top: 10px;
  padding-bottom: 30px;
  .container-fluid{
    padding: 0 70px;
  }
  .feature-blog-title {
    font-size: 41px;
    line-height: 114.634%;
  }
  .feature-box {
    height: 482px;
    &::after{
      border-radius: 50px;
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.41) 50%, rgba(62, 62, 62, 0.00) 80.05%);
    }
    .primary-btn{
      background: #485F27;
      border-color: #485F27;
      &:hover{
        border-color: #5c9504;
      }
    }
  }
}
.feature-width{
  width: 60%;
}
.canvas-tote{
  .container-fluid{
    padding: 0 70px;
    position: relative;
  }
  .img-cover{
    border-radius: 50px;
  }
}
.canvas-tote-content{
  width: 40%;
  position: absolute;
  inset: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.product-goes{
  position: relative;
  .container-fluid{
    padding: 0 170px;
  }
  .base2{
    top: -60px;
    left: unset;
    right: -150px;
    width: 468px;
  }
}
.product-goes{
  .product-listing-card{
    position: relative;
    border-radius: 49px;
    overflow: hidden;
    height: 542px;
  }
}
.product-listing-content{
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  text-align: center;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.00) 100%);
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 10px;
  .primary-btn{
    border: 1px solid #977A40;
    background: #FAF7F3;
    color: #977A40;
    img{
      filter: brightness(0) saturate(100%) invert(48%) sepia(38%) saturate(545%) hue-rotate(2deg) brightness(93%) contrast(90%);
    }
    &:hover{
      color: #FFF;
      img{
        filter: brightness(0) saturate(100%) invert(99%) sepia(2%) saturate(847%) hue-rotate(33deg) brightness(122%) contrast(99%);
      }
    }
  }
  .primary-btn:before, .primary-btn:after {
    background: #977A40;
  }
}
.product-goes-title{
  color: #FFF;
  text-align: center;
  font-family: "PPMori Regular";
  font-size: 34px;
  font-style: normal;
  font-weight: normal;
  line-height: 152.941%;
}
.beach-bags{
  position: relative;
  .container-fluid{
    padding: 0 70px;
    position: relative;
  }
  .img-cover{
    border-radius: 50px;
  }
  .banner-leaf{
    bottom: unset;
    top: 50px;
    z-index: 1;
  }
}
.beach-bag-content{
  width: 40%;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 10%;
}
.eco-friendly{
  position: relative;
  .slick-arrow {
    width: 30px;
    height: 30px;
  }
  .slick-slide {
    margin: 0 0;
  }
  .slick-list{
    padding: 0 -15px;
  }
  .why-choose-img {
    bottom: unset;
    top: 30%;
    left: 30%;
    rotate: -100deg;
  }
  .eco-friendly-leaf{
    left: unset;
    top: 40%;
    right: 10%;
    rotate: 0deg;
  }
}
.category-items {
  position: relative;
  width: 360px;
  height: 360px;
  padding: 14px;
  box-sizing: border-box;
  clip-path: polygon(
    36.5% 10.5%, 37.3% 9.9%, 38.2% 9.3%, 39.0% 8.8%, 39.9% 8.3%, 40.7% 7.9%, 41.6% 7.5%, 42.5% 7.2%, 43.4% 6.9%, 44.3% 6.6%, 45.3% 6.4%, 46.2% 6.2%, 47.2% 6.0%, 48.1% 5.9%, 49.0% 5.9%, 50.0% 5.8%, 51.0% 5.9%, 51.9% 5.9%, 52.8% 6.0%, 53.8% 6.2%, 54.7% 6.4%, 55.7% 6.6%, 56.6% 6.9%, 57.5% 7.2%, 58.4% 7.5%, 59.3% 7.9%, 60.1% 8.3%, 61.0% 8.8%, 61.8% 9.3%, 62.7% 9.9%, 63.5% 10.5%,
    73.2% 18.0%, 83.5% 25.0%, 84.3% 25.6%, 85.1% 26.2%, 85.8% 26.8%, 86.6% 27.5%, 87.2% 28.2%, 87.9% 28.9%, 88.5% 29.7%, 89.0% 30.4%, 89.6% 31.2%, 90.1% 32.0%, 90.5% 32.9%, 91.0% 33.7%, 91.4% 34.6%, 91.7% 35.4%, 92.0% 36.3%, 92.3% 37.2%, 92.5% 38.2%, 92.7% 39.1%, 92.9% 40.0%, 93.0% 41.0%, 93.1% 41.9%, 93.1% 42.9%, 93.1% 43.8%, 93.0% 44.8%, 92.9% 45.7%, 92.8% 46.7%, 92.6% 47.6%, 92.4% 48.6%, 92.1% 49.5%, 91.8% 50.5%,
    87.6% 62.2%, 84.1% 74.1%, 83.8% 75.1%, 83.5% 76.0%, 83.1% 76.9%, 82.7% 77.8%, 82.2% 78.7%, 81.7% 79.5%, 81.2% 80.3%, 80.7% 81.1%, 80.1% 81.8%, 79.5% 82.6%, 78.8% 83.3%, 78.1% 83.9%, 77.4% 84.6%, 76.7% 85.2%, 76.0% 85.7%, 75.2% 86.3%, 74.4% 86.8%, 73.5% 87.3%, 72.7% 87.7%, 71.8% 88.1%, 71.0% 88.5%, 70.1% 88.8%, 69.1% 89.1%, 68.2% 89.3%, 67.3% 89.5%, 66.3% 89.7%, 65.3% 89.8%, 64.4% 89.9%, 63.4% 89.9%, 62.4% 89.9%,
    50.0% 89.5%, 37.6% 89.9%, 36.6% 89.9%, 35.6% 89.9%, 34.7% 89.8%, 33.7% 89.7%, 32.7% 89.5%, 31.8% 89.3%, 30.9% 89.1%, 29.9% 88.8%, 29.0% 88.5%, 28.2% 88.1%, 27.3% 87.7%, 26.5% 87.3%, 25.6% 86.8%, 24.8% 86.3%, 24.0% 85.7%, 23.3% 85.2%, 22.6% 84.6%, 21.9% 83.9%, 21.2% 83.3%, 20.5% 82.6%, 19.9% 81.8%, 19.3% 81.1%, 18.8% 80.3%, 18.3% 79.5%, 17.8% 78.7%, 17.3% 77.8%, 16.9% 76.9%, 16.5% 76.0%, 16.2% 75.1%, 15.9% 74.1%,
    12.4% 62.2%, 8.2% 50.5%, 7.9% 49.5%, 7.6% 48.6%, 7.4% 47.6%, 7.2% 46.7%, 7.1% 45.7%, 7.0% 44.8%, 6.9% 43.8%, 6.9% 42.9%, 6.9% 41.9%, 7.0% 41.0%, 7.1% 40.0%, 7.3% 39.1%, 7.5% 38.2%, 7.7% 37.2%, 8.0% 36.3%, 8.3% 35.4%, 8.6% 34.6%, 9.0% 33.7%, 9.5% 32.9%, 9.9% 32.0%, 10.4% 31.2%, 11.0% 30.4%, 11.5% 29.7%, 12.1% 28.9%, 12.8% 28.2%, 13.4% 27.5%, 14.2% 26.8%, 14.9% 26.2%, 15.7% 25.6%, 16.5% 25.0%, 26.8% 18.0%
  );
  backdrop-filter: blur(5px);
  &::after{
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #0000001f;
    backdrop-filter: blur(2px);
  }
}

.category-items{
 .img, 
  span {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    clip-path: polygon(
      36.5% 10.5%, 37.3% 9.9%, 38.2% 9.3%, 39.0% 8.8%, 39.9% 8.3%, 40.7% 7.9%, 41.6% 7.5%, 42.5% 7.2%, 43.4% 6.9%, 44.3% 6.6%, 45.3% 6.4%, 46.2% 6.2%, 47.2% 6.0%, 48.1% 5.9%, 49.0% 5.9%, 50.0% 5.8%, 51.0% 5.9%, 51.9% 5.9%, 52.8% 6.0%, 53.8% 6.2%, 54.7% 6.4%, 55.7% 6.6%, 56.6% 6.9%, 57.5% 7.2%, 58.4% 7.5%, 59.3% 7.9%, 60.1% 8.3%, 61.0% 8.8%, 61.8% 9.3%, 62.7% 9.9%, 63.5% 10.5%,
      73.2% 18.0%, 83.5% 25.0%, 84.3% 25.6%, 85.1% 26.2%, 85.8% 26.8%, 86.6% 27.5%, 87.2% 28.2%, 87.9% 28.9%, 88.5% 29.7%, 89.0% 30.4%, 89.6% 31.2%, 90.1% 32.0%, 90.5% 32.9%, 91.0% 33.7%, 91.4% 34.6%, 91.7% 35.4%, 92.0% 36.3%, 92.3% 37.2%, 92.5% 38.2%, 92.7% 39.1%, 92.9% 40.0%, 93.0% 41.0%, 93.1% 41.9%, 93.1% 42.9%, 93.1% 43.8%, 93.0% 44.8%, 92.9% 45.7%, 92.8% 46.7%, 92.6% 47.6%, 92.4% 48.6%, 92.1% 49.5%, 91.8% 50.5%,
      87.6% 62.2%, 84.1% 74.1%, 83.8% 75.1%, 83.5% 76.0%, 83.1% 76.9%, 82.7% 77.8%, 82.2% 78.7%, 81.7% 79.5%, 81.2% 80.3%, 80.7% 81.1%, 80.1% 81.8%, 79.5% 82.6%, 78.8% 83.3%, 78.1% 83.9%, 77.4% 84.6%, 76.7% 85.2%, 76.0% 85.7%, 75.2% 86.3%, 74.4% 86.8%, 73.5% 87.3%, 72.7% 87.7%, 71.8% 88.1%, 71.0% 88.5%, 70.1% 88.8%, 69.1% 89.1%, 68.2% 89.3%, 67.3% 89.5%, 66.3% 89.7%, 65.3% 89.8%, 64.4% 89.9%, 63.4% 89.9%, 62.4% 89.9%,
      50.0% 89.5%, 37.6% 89.9%, 36.6% 89.9%, 35.6% 89.9%, 34.7% 89.8%, 33.7% 89.7%, 32.7% 89.5%, 31.8% 89.3%, 30.9% 89.1%, 29.9% 88.8%, 29.0% 88.5%, 28.2% 88.1%, 27.3% 87.7%, 26.5% 87.3%, 25.6% 86.8%, 24.8% 86.3%, 24.0% 85.7%, 23.3% 85.2%, 22.6% 84.6%, 21.9% 83.9%, 21.2% 83.3%, 20.5% 82.6%, 19.9% 81.8%, 19.3% 81.1%, 18.8% 80.3%, 18.3% 79.5%, 17.8% 78.7%, 17.3% 77.8%, 16.9% 76.9%, 16.5% 76.0%, 16.2% 75.1%, 15.9% 74.1%,
      12.4% 62.2%, 8.2% 50.5%, 7.9% 49.5%, 7.6% 48.6%, 7.4% 47.6%, 7.2% 46.7%, 7.1% 45.7%, 7.0% 44.8%, 6.9% 43.8%, 6.9% 42.9%, 6.9% 41.9%, 7.0% 41.0%, 7.1% 40.0%, 7.3% 39.1%, 7.5% 38.2%, 7.7% 37.2%, 8.0% 36.3%, 8.3% 35.4%, 8.6% 34.6%, 9.0% 33.7%, 9.5% 32.9%, 9.9% 32.0%, 10.4% 31.2%, 11.0% 30.4%, 11.5% 29.7%, 12.1% 28.9%, 12.8% 28.2%, 13.4% 27.5%, 14.2% 26.8%, 14.9% 26.2%, 15.7% 25.6%, 16.5% 25.0%, 26.8% 18.0%);
    }
    span{
      padding: 2px;
      background-color: #fff;
      margin-left: -2px;
      margin-top: -3px;
      position: relative;
      .primary-btn{
        width: 70%;
        font-size: 16px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, 15%);
        padding: 9px 11px;
        opacity: 0;
      }
      &::after{
        position: absolute;
        content: ' ';
        inset: 0;
        background: #0000003f;
        opacity: 0;
        transition: all 0.3s ease-in-out;
      }
    }
  }
  .category-title{
    color: #242424;
    font-family: "PPMori SemiBold";
    font-size: 24px;
    font-style: normal;
    font-weight: normal;
    line-height: 100.667%;
    padding-inline: 10px;
  }
  .eco-box:hover{
    .category-items{
      span{
        .primary-btn{
          opacity: 1;
          transform: translate(-50%, -50%);
        }
        &::after{
          opacity: 1;
        }
      }
    }
    .category-title{
      color: #485F27;
    }
  }
  .wine-bottle-bags{
    position: relative;
    padding-top: 60px;
    .featured-blog-right-leaf{
      top: -70px;
      z-index: -1;
    }
    .feature-box {
      height: 925px;
    }
  }





.sw-list-item {
    border-radius: 47px;
    border: 1px solid rgba(0, 0, 0, 0.23);
    background: #F9F9F9;
    padding: 24px;
    .img{
      border-radius: 47px;
        width: 100%;
        margin-bottom: 10px;
        aspect-ratio: 1 / .76;
        object-fit: cover;
    }
    h3{
        color: #2A441F;
        font-family: 'PlayfairDisplay Bold';
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 162.5%;
        margin-bottom: 12px;
    }
}
.border-radius{
    border-radius: 47px;
}
.social-work-content{
    background: #FFFAF3;
    position: relative;
    z-index: 1;
    .contact-vector{
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: -1;
    }
    .about-img{
    .base1 {
        z-index: 0;
        left: -12px;
    }
    .base2 {
    top: -26px;
    left: auto;
    z-index: -2;
    right: -74px;
}
    }
}
.gallery-item{
    border-radius: 47px;
    overflow: hidden;
    height: 326px;
    transition: all 0.3s ease-in-out;
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    &:hover{
        img{
            transform: scale(1.1);
        }
    }
}
.related-work-item{

    img{
        border-radius: 30px;
        margin-bottom: 20px;
        height: 270px;
        object-fit: cover;
		width:100%;
		object-position:top center;
    }
    h3{
        color: #2A441F;
        font-family: "PPMori SemiBold";
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: 141.667%;
    }
    &:hover{
        img{
            transform: scale(1.021);
        }
        h3{
            color: #5c9504;
        }
    }
}
.related-work-slider{
    .slick-slide {
    margin: 0 14px;
}
.slick-arrow{
    width: 44px;
    height: 44px;
    background: #FFF;
    stroke-width: 1px;
    border:1px solid rgba(0, 0, 0, 0.27);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    top: 40%;
    transition: all 0.5s ease-in-out;
    z-index: 1;
    &::before{
        background-size: 18px;
    }
    &:hover{
        background: #2a441f4b;
        stroke: #FFF;
    }
}
.slick-next {
    right: -65px;
}
.slick-prev {
    left: -65px;
}
}
.social-work-related {
    padding-top: 0;
}
.blog-meta{
    font-family: 'PPMori SemiBold';
    font-size: 19px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: #000;
    margin-bottom: 6px;
    .tag {
    border-radius: 12px;
    border: 1px solid #7C853E;
    background: #485F27;
    backdrop-filter: blur(5px);
    color: #FFF;
    
    padding: 6px 14px;
    display: inline-block;
    margin-right: 14px;
}
}

/* awards */
.awards-img-box{
    border-radius: 47px;
    overflow: hidden;
    height:496px;
    position: relative;
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .overlay-text{
      opacity: 0;
        position: absolute;
        inset: 0;
        z-index: 1;
        padding: 6%;
        transition: all .5s;
        text-align: center;
        background: linear-gradient(0deg, #000 0%, rgba(102, 102, 102, 0.00) 61.82%);
        display: flex;
        align-items: end;
        justify-content: center;
        p{
            color: #FFF;
            text-align: center;
            font-family: 'PPMori SemiBold';
            font-size: 26px;
            font-style: normal;
            font-weight: normal;
            line-height: 138.462%;
            transition: all .5s;
        }
    }
    &:hover{
        .overlay-text{
            opacity: 1;
            transform: translateY(10px);
        }
    }
}
/*******************************
  Responsive
********************************/
@media (max-width: 1920px) { 
}
@media (max-width: 1600px), (max-width: 1536px){
  .clients {
    padding-top: 20px;
  }
  .logo {
    width: 269px;
  }
  .container{
    width: 1320px;
  }
  .banner-leaf {
    width: 124px;
  }
  .popular-title{
    font-size: 24px;
  }
  .container-fluid {
    padding: 0 25px;
  }
  .popular-box {
    height: 335px;
  }
  .popular-box-content {
    .btn-group {
      .primary-btn {
        font-size: 17px;
      }
    }
  }
  .sustain-img {
    .base2 {
      width: 400px;
      right: -140px;
    }
  }
  .sustainable-leaf2 {
    left: 50px;
  }
  .awards {
    .sustainable-leaf2 {
      left: 3%;
    }
  }
  .responsbility {
    padding-right: 11%;
    .row {
      &::after {
        width: 106%;
      }
    }
  }
  .feature-box-oth {
    height: 245px;
  }
  .featured-blog-right-leaf {
    width: 238px;
  }
  .feature-blog {
    .sustainable-leaf2 {
      left: 40px;
    }
    .sustainable-leaf3 {
      right: 30px;
    }
  }
  .hei-100 {
    height: 542px;
  }
  .footer-vector-right {
    width: 148px;
  }
  footer {
    .sustainable-leaf2 {
      left: 30px;
    }
  }
  .visit-img {
    transform: translateX(45px);
  }
  .proud {
    padding: 25px 0;
  }
  .inner-banner {
    .inner-banner-img {
      width: 60%;
    }
    .img-vector {
      right: -100px;
      bottom: 128px;
      width: 334px;
    }
  }
  .mix-vis-content {
    img {
      margin-bottom: 10px;
      width: 75px;
    }
  }
  .square{
    height: 110px;
    font-size: 35px;
  }
  .commitment {
    .choose-vector {
      bottom: -60px;
      width: 220px;
    }
  }
  .country-list {
    li {
      font-size: 20px;
    }
  }
  .global-map {
    top: 35%;
    width: 55%;
  }
  .social-work-content {
    & .about-img {
        .base2 {
            width: 150px;
        }
    }
  }
  .awards-img-box {
    height: 420px;
  }
  .product-listing-banner{
    padding: 0;
    .hero-img-desk{
      height: 730px;
    }
    .banner-vector {
      bottom: -25px;
    }
  }
  .product-listing-img{
    height: 347px;
  }
  .product-enquiry {
    .contact-form {
      .footer-vector-right {
        width: auto;
        right: unset;
        left: -110px;
      }
    }
  }
  .related-product-box {
    height: 392px;
  }
  .product-category-banner {
    .banner-vector {
      bottom: -35px;
    }
  }
  .category-items {
    width: 350px;
    height: 350px;
  }
  .cotton-canvas {
    .container-fluid {
      padding: 0 50px;
    }
  }
  .canvas-tote {
    .container-fluid {
      padding: 0 50px;
    }
  }
  .product-goes-title {
    font-size: 30px;
  }
  .product-goes {
    .container-fluid {
      padding: 0 120px;
    }
  }
  .product-goes {
    .product-listing-card {
      height: 430px;
    }
  }
  .beach-bags {
    .container-fluid {
      padding: 0 50px;
    }
  }
  .cotton-canvas {
    .feature-blog-title {
      font-size: 31px;
    }
  }
  .wine-bottle-bags {
    .feature-box {
      height: 720px;
    }
  }
}
@media (max-width: 1536px){
  .popup .popup__content{
    width: 70%;
}
  .base2 {
    width: 324px;
    top: -100px;
    left: -100px;
  }
  .base1 {
    left: -30px;
    width: 205px;
  }
  .popular-box-content {
    & .btn-group {
      .primary-btn {
        font-size: 16px;
      }
    }
  }
  .dec {
    font-size: 19px;
  }
  .choose-vector{
    width: 220px;
  }
  .process {
    .row {
      &::after {
        width: 100%;
      }
    }
  }
  .sustain-img {
    .base2 {
      right: -105px;
    }
  }
  .sustain-img {
    .base1 {
      width: auto;
    }
  }
  .sustainable-leaf2 {
    left: 20px;
  }
  .footer-vector-right {
    width: 120px;
  }
}
@media (max-width: 1440px), (max-width: 1366px){
  #modalInput {
    font-size: 16px;
  }
  .title {
    font-size: 36px;
  }
  .form-control {
    font-size: 15px;
  }
  form .primary-btn {
    padding: 12px 31px;
    padding-left: 40px;
  }
  p{
    font-size: 15px;
  }
  .container{
    width: 1200px;
  }
  .container-fluid {
    padding: 0 15px;
  }
  header .primary-btn {
    padding: 4px 16px;
  }
  .catalougue-bar {
    padding: 5px;
  }
  .catalougue-btn {
    font-size: 14px;
    padding: 5px 12px;
  }
  .contactbar {
    gap: 12px;
    padding-block: 5px;
    a {
      font-size: 15px;
      gap: 5px;
      img{
        width: 11%;
      }
    }
  }
  .cata-cross {
    width: 25px;
    height: 25px;
    right: 20px;
    &::before, &::after {
      height: 15px;
      left: 46%;
    }
  }
  #menu>.main-menu>ul>li {
    padding-inline: 5px;
  }
  #menu>.main-menu>ul>li>a {
    font-size: 15px;
  }
  .logo {
    width: 219px;
    top: -30px;
  }
  .header-area.sticky {
    .logo {
      top: -45px;
      transform: translateX(-48px);
    }
  }
  .search-btn {
    width: 38px;
    height: 38px;
    img{
      width: 20px;
    }
  }
  .primary-btn{
    font-size: 15px;
    padding: 9px 21px;
    img{
      width: 25px;
    }
  }
  .hero-content {
    padding-top: 60px;
    h1 {
      font-size: 62px;
      span{
        font-size: 47px;
      }
    }
    p {
      font-size: 17px;
    }
  }
  .hero-quality-box {
    p {
      font-size: 14px;
    }
    img{
      width: 30%;
    }
  }
  .mb-60 {
    margin-bottom: 40px;
  }
  .banner-leaf {
    width: 95px;
  }
  .sec-gap {
    padding: 60px 0;
  }
  .mb-40 {
    margin-bottom: 30px;
  }
  .banner-vector {
    bottom: -20px;
  }
  .section-title {
    font-size: 40px;
  }
  .mb-30 {
    margin-bottom: 20px;
  }
  .base2 {
    top: -100px;
    left: -80px;
    width: 364px;
  }
  .base1 {
    left: -50px;
    width: 205px;
  }
  .counter-item {
    h4 {
      font-size: 42px;
    }
    p {
      font-size: 17px;
    }
  }
  .proud-box {
    a {
      width: 235px;
      height: 135px;
      img{
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
  .popular-title {
    font-size: 20px;
  }
  .popular-box {
    height: 295px;
    p {
      font-size: 14px;
    }
  }
  .popular-box-content {
    .btn-group {
      .primary-btn {
        font-size: 15px;
        padding-block: 10px;
        img{
          width: 16px;
        }
      }
    }
  }
  .dec {
    font-size: 17px;
  }
  .choose-vector {
    width: 140px;
  }
  .why-choose-img {
    width: 67px;
  }
  .our-process-leaf {
    top: -50px;
    width: 170px;
  }
  .process-icon{
    width: 74px;
    height: 74px;
    padding: 15px;
  }
  .process-box {
    h3 {
      font-size: 17px;
        &::before {
        font-size: 24px;
      }
    }
  }
  .process {
    .row {
      &::after {
        width: 103%;
      }
    }
  }
  .sustainable-leaf{
    width: 136px;
  }
  .sustainable-leaf2 {
    left: 10px;
    width: 67px;
  }
  .section-content {
    ul {
      li {
        font-size: 15px;
        padding-left: 15px;
        &::before {
          width: 6px;
          height: 6px;
          top: 10px;
        }
      }
    }
  }
  .sustain {
    padding-top: 90px;
    padding-bottom: 40px;
  }
  .testi-box {
    .star {
      font-size: 24px;
    }
  }
  .profile {
    img {
      width: 46.393px;
      height: 46.393px;
    }
  }
  .coma {
    right: 27px;
    bottom: 20px;
  }
  .slick-dots {
    li {
      button {
        width: 6px;
        height: 6px;
      }
    }
  }
  .awards-slider-box {
    .slider-track{
      height: 340px;
    }
    .slide {
      height: 315px;
    }
  }
  .responsbility {
    padding-left: 20px;
    padding-right: 7%;
  }
  .responsbility {
    padding-top: 0;
    .sustainable-leaf {
      top: 30%;
      right: -8px;
      width: 106px;
    }
    .row {
      &::after {
          width: 101%;
      }
    }
  }
  .badge {
    font-size: 14px;
  }
  .tag-date {
    p {
      font-size: 15px;
    }
  }
  .feature-blog-title {
    font-size: 22px;
  }
  .feature-box-oth {
    height: 220px;
  }
  .hei-100 {
    height: 492px;
  }
  .faq {
    .featured-blog-right-leaf {
      width: 200px;
    }
  }
  .faq-vector-left-leaf {
    width: 170px;
  }
  .accordion__item .accordion__title {
    font-size: 16px;
  }
  .accordion__item .accordion__content {
    font-size: 15px;
  }
  footer ul li a{
    font-size: 14px;
  }
  footer p, footer p a {
    font-size: 14px;
  }
  .footer-title {
    font-size: 18px;
  }
  .footer-sub-titile {
    font-size: 16px;
  }
  .copyright{
    padding: 15px;
  }
  .copyright p {
    font-size: 14px;
  }
  footer {
    .sustainable-leaf2 {
      left: 10px;
    }
  }
  .footer-vector-right {
    width: 85px;
  }
  .feature-blog {
    .sustainable-leaf2 {
      left: 20px;
    }
    .sustainable-leaf3 {
      right: 0px;
    }
  }
  .view-blog {
    font-size: 15px;
  }
  .clients {
    padding-top: 10px;
  }
  .sustain-img{
    padding: 20px;
    .base2 {
      right: -80px;
    }
    .base1 {
      width: 300px;
    }
  }
  .feature-blog {
    .choose-vector {
      bottom: -50px;
    }
  }
  .visit-img {
    transform: translateX(40px);
  }
  .proud {
    padding: 30px 0;
  }
  footer {
    .row {
      .col-lg-4, & .col-lg-2, & .col-lg-3 {
        &::after {
          right: 40px;
        }
      }
    }
  }
  .since{
    font-size: 25px;
  }
  .inner-banner {
    padding-top: 170px;
    padding-bottom: 60px;
    .inner-banner-img {
        width: 58%;
    }
    .img-vector {
      right: -90px;
      bottom: 160px;
      width: 234px;
      }
    .img-logo {
      top: -70px;
      width: 381px;
    }
  }
  .comm-title {
    font-size: 22px;
  }
  .base3 {
    width: 200px;
    height: 200px;
  }
  .mix-vis-content {
    & .section-title {
      font-size: 38px;
    }
  }
  .miss-viss{
    .featured-blog-right-leaf {
      width: 170px;
    }
  }
  .miss-box {
    .awards-leaf {
      top: -60px;
      left: 50%;
      width: 339px;
    }
    .sustainable-leaf {
      top: -18px;
      left: 63%;
      width: 120px;
    }
  }
  .mat-box {
    h3 {
      font-size: 22px;
    }
  }
  .square {
    width: 130px;
    height: 90px;
    font-size: 30px;
    border-radius: 23px;
  }
  .history-box {
    h3 {
      font-size: 28px;
    }
  }
  .history-circle {
    width: 22px;
    height: 22px;
  }
  .journey-box {
    padding-block: 20px;
    & .row {
      &::before {
        width: 90%;
        left: 40px;
        top: 58px;
      }
    }
  }
  .arrow-box {
    right: 30px;
    top: 34px;
    width: 48px;
    height: 48px;
  }
  .journey-history {
    .container-fluid {
      padding: 0 50px;
      height: 480px;
    }
  }
  .commitment {
    .base1 {
      width: 250px;
      border-radius: 50%;
      border: none;
      bottom: -30px;
      right: -30px;
    }
    .our-process-leaf {
      width: 140px;
      bottom: -65px;
    }
    .sustainable-leaf {
      width: 90px;
      bottom: -43px;
      left: 110px;
    }
  }
  .signature-title {
    font-size: 53px;
  }
  .signature-position {
    font-size: 18px;
  }
  .founder-content {
    .awards-leaf {
      top: -110px;
      right: 10px;
      width: 130px;
    }
  }
  .founder-vector {
    width: 250px;
  }
  .country-list {
    li {
      font-size: 18px;
      padding: 20px 20px;
      padding-left: 50px;
        &::before {
          width: 14px;
          height: 30px;
        }
    }
  }
  .global-map {
    top: 27%;
  }
  .commitment {
    .choose-vector {
      width: 180px;
    }
  }
  .contact-form {
    padding: 30px 40px;
    .form-control {
      font-size: 16px;
    }
  }
  .contact-list {
    h3 {
      line-height: 100.471%;
    }
  }
  .conatct-information {
    padding-bottom: 0;
  }
  .contact-map {
    iframe {
      height: 400px;
    }
  }
  .inner-banner {
    img.img-leaf {
      bottom: 0px;
    }
  }
  .related-work-item {
    h3 {
      font-size: 18px;
    }
  }
  .sw-list-item {
    h3 {
      font-size: 26px;
    }
  }
  .blog-meta {
    font-size: 16px;
  }
  .blog-details-banner {
    .text-head-leaf {
      transform: translateX(320px);
    }
  }
  .blog-details {
    h2{
      font-size: 36px;
    }
    h3 {
      font-size: 28px;
    }
    h4 {
      font-size: 24px;
    }
    ol {
      li {
        font-size: 16px;
        line-height: 150.111%;
        span {
          font-size: 20px;
        }
        &::marker {
          font-size: 18px;
        }
      }
    }
  }
  .pegination {
    & a {
      padding: 12px;
      & img {
        width: 133px;
        height: 85px;
      }
      h4{
        font-size: 16px;
      }
      span{
        font-size: 16px;
        padding: 2px 10px;
      }
    }
  }
  .blog-recent {
    & a {
      img {
        width: 94px;
        height: 94px;
      }
      h4 {
        font-size: 16px;
        margin-bottom: 10px;
      }
      p {
        font-size: 14px;
      }
    }
  }
  .category {
    a {
      padding: 12px 25px;
    }
  }
  .awards-img-box {
    height: 400px;
  }
  .awards-img-box {
    & .overlay-text {
        p {
            font-size: 20px;
        }
    }
  }
  .product-listing-banner {
    padding: 0;
    .hero-img-desk {
      height: 620px;
    }
    .hero-content {
      width: 75%;
      padding-top: 100px;
    }
    .banner-vector {
      bottom: -20px;
    }
    .text-head-leaf {
      transform: unset;
    }
  }
  .product-listing-img {
    height: 315px;
  }
  .sale{
    font-size: 14px;
  }
  .product-title {
    font-size: 19px;
  }
  .product-listing {
    .primary-btn {
      padding-block: 7px;
      img{
        width: 18px;
      }
    }
    .secondary-btn{
      padding-block: 3px;
      img{
        width: 25px;
      }
    }
    .product-details-info {
      p {
        font-size: 14px;
      }
    }
  }
  .product-listing {
    .container-fluid {
      padding: 0 25px;
    }
  }
  .product-details-content {
    & h1 {
      font-size: 36px;
    }
    p {
      font-size: 17px;
    }
  }
  .product-details-content {
    & .primary-btn {
      img {
        width: 18px;
      }
    }
  }
  .related-product-box {
    h3 {
      font-size: 20px;
      padding: 20px 30px;
    }
  }
  .related-product {
    .featured-blog-right-leaf {
      width: 85px;
    }
  }
  .related-product-box {
    height: 350px;
  }
  .product-category-banner{
    .hero-content {
      width: 55%;
    }
    .banner-vector {
      bottom: -30px;
    }
  }
  .category-items {
    width: 315px;
    height: 315px;
  }
  .category-title {
    font-size: 20px;
  }
  .cotton-canvas {
    .container-fluid {
      padding: 0px 30px;
    }
    .feature-box {
      height: 330px;
    }
    .feature-blog-title {
      font-size: 24px;
    }
  }
  .canvas-tote {
    .container-fluid {
        padding: 0 30px;
    }
  }
  .product-goes {
    .container-fluid {
        padding: 0 60px;
    }
  }
  .product-goes {
    .product-listing-card {
      height: 410px;
    }
  }
  .product-goes-title {
    font-size: 26px;
  }
  .product-goes {
    .base2 {
      width: 368px;
    }
  }
  .wine-bottle-bags {    
    .feature-box {
    height: 660px;
    }
  }
    .product-enquiry {
      & .contact-form {
        .footer-vector-right {
            left: -85px;
        }
      }
    }
}
@media (max-width: 1199.98px){
  .container{
    width: 992px;
  }
}
@media (max-width: 991.98px){
  .left {
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
  }
  .hero{
    height: 105dvh;
    background: #F6EEE5;
  }
  .hero-img-desk{
    display: none;
  }
  .hero-img-mobile{
    display: block;
    position: relative;
    margin-inline: auto
  }
  .hero-content {
    padding-top: 0;
    width: 100%;
    text-align: center;
    .btn-group{
      justify-content: center;
    }
    .mb-60{
      margin-bottom: 10px;
    }
  }
  .banner-leaf {
    bottom: -50px;
  }
  .clients-slider{
    padding-inline: 20px;
  }
  .hero-quality-box {
    p {
      font-size: 16px;
      text-align: left;
    }
    img {
      width: 25%;
    }
  }
  .sec-gap {
    padding: 40px 0;
  }
  .container {
    width: 722px;
  }
  #menu{
    justify-content: end;
    padding-right: 60px;
  }
  .main-menu{
    align-items: start;
  }
  #menu>.main-menu>ul>li>a {
    font-size: 16px;
    color: #485F27;
    padding: 12px 20px;
  }
  #menu > .main-menu > ul > li > a {
    z-index: 1;
    &::after {
      width: 100%;
      height: 100%;
      bottom: 0;
      left: 0;
      background: #485f271a;
      z-index: -1;
    }
  }
  #menu>.main-menu>ul>li {
    padding: 5px 10px;
  }
  .search-box {
    width: 250px;
  }
  .search-input {
    padding: 13px 40px 13px 13px;
  }
  .logo {
    width: 190px;
  }
  .header-area.sticky {
    .logo {
      top: -40px;
      transform: translateX(-44px);
    }
  }
  .slick-prev {
    left: -20px;
  }
  .slick-next {
    right: -20px;
  }
  .about-img{
    padding: 40px;
  }
  .base2 {
    left: -25px;
  }
  .base1 {
    left: 20px;
  }
  .proud-box {
    a {
      width: 215px;
      height: 120px;
    }
  }
  .popular-box {
    height: 280px;
    h3 {
      bottom: 20px;
    }
  }
  .why-choose {
    padding-bottom: 70px;
  }
  .why-choose-img {
    bottom: 60%;
    left: 45%;
  }
  .our-process-leaf {
    top: -30px;
    width: 130px;
    left: 10%;
  }
  .process{
    background-position: bottom center;
    .row {
      &::after {
        display: none;
      }
    }
  }
  .choose-vector {
    width: 110px;
    z-index: 2;
  }
  .mb-50 {
    margin-bottom: 30px;
  }
  .sustain{
    .container{
      .row{
        .col:last-child{
          order: -1;
        }
      }
    }
  }
  .sustainable-leaf2 {
    left: unset;
    right: 7%;
    top: 55%;
  }
  .sustainable-leaf {
    left: 5%;
  }
  .sustain-img {
    .base1 {
      width: 270px;
      bottom: 0;
      left: -20px;
      border-width: 12px;
    }
    .base2 {
      right: -30px;
      bottom: 30%;
    }
  }
  .awards-leaf {
    top: -120px;
  }
  .awards {
    padding-top: 120px;
    padding-bottom: 40px;
    .sustainable-leaf2 {
      top: 43%;
    }
    .sustainable-leaf {
      top: 15px;
      left: 70%;
    }
  }
  .responsbility.sec-gap{
    padding: 40px 25px;
    padding-top: 12px;
  }
  .hei-100 {
    height: 655px;
  }
  .feature-box-oth {
    height: 227px;
  }
  .featured-blog-right-leaf {
    width: 150px;
    top: -120px;
  }
  .responsbility {
    .row {
      &::after {
        width: 101%;
        left: -3px;
        top: 10px;
        height: 103%;
      }
    }
  }
  .feed {
    .sustainable-leaf {
      top: -51px;
      left: 19%;
    }
    .sustainable-leaf3 {
      top: 6%;
      right: 60px;
    }
  }
  .faq {
    .featured-blog-right-leaf {
      width: 160px;
      z-index: -1;
    }
  }
  .visit-img{
    transform: translateX(35px);
  }
  .mb-80 {
    margin-bottom: 50px;
  }
  .footer-first{
    text-align: center;
  }
  .footer-logo {
    margin-bottom: 20px;
    width: 180px;
    margin-inline: auto;
  }
  .social-links {
    justify-content: center;
  }
  footer {
    .sustainable-leaf2 {
      top: 31%;
    }
  }
  .footer-vector-right {
    right: -30px;
    bottom: 185px;
  }
  .responsbility {
    .sustainable-leaf {
      top: -5%;
    }
  }
  .proud{
    background: radial-gradient(circle at center,#00000000 0%, #00000032 100%), url(../img/member-bg.webp) no-repeat;
    background-size: cover;
  }
  .footer-first{
    &::after {
      display: none;
    }
  }
  .footer-sub-titile {
    &::after {
      width: 300px;
    }
  }
  .footer-p {
    width: 100%;
  }
  .flex-box {
    gap: 20px;
  }
  .inner-banner{
    height: auto;
    padding-top: 140px;
    .container{
      flex-direction: column;
    }
    .hero-content {
      width: 90%;
      padding-top: 0;
    }
    .inner-banner-img {
      width: 90%;
      margin-right: 0;
    }
    .banner-vector {
      bottom: -20px;
    }
  }
  .base3 {
    right: 20px;
    bottom: 30px;
  }
  .miss-viss {
    padding-top: 80px;
    padding-bottom: 100px;
  }
  .miss-box {
    transform: translateX(0);
    .sustainable-leaf {
      left: 57%;
    }
  }
  .miss-viss {
    .our-process-leaf {
      right: 65%;
      top: -45px;
    }
  }
  .matters-img {
    position: relative;
    right: unset;
    width: 100%;
    top: unset;
    height: 100%;
    object-fit: cover;
   padding-inline: 50px;
    margin-bottom: 20px;
  }
  .square {
    width: 110px;
    height: 80px;
    font-size: 30px;
    border-radius: 17px;
  }
  .mat-box {
    gap: 20px;
    margin-bottom: 20px;
  }
  .excel {
    padding-top: 70px;
    padding-bottom: 60px;
  }
  .journey-box {
    padding-inline: 20px;
    .row {
      &::before {
        display: none;
      }
    }
  }
  .journey-history {
    .container-fluid {
      padding: 0 20px;
      height: 480px;
    }
  }
  .journey-history .img-cover{
    width: 94%;
    border-radius: 34px;
  }
  .journey-overlay {
    width: 94%;
    border-radius: 34px;
  }
  .commitment {
    .base1 {
      left: unset;
      bottom: 0;
      right: 0;
    }
    .our-process-leaf {
      width: 130px;
      bottom: 10px;
      left: -35px;
    }
    .sustainable-leaf {
      width: 90px;
      bottom: 30px;
      left: 65px;
    }
    .choose-vector {
      width: 180px;
      left: unset;
      right: -15px;
      bottom: -30px;
    }
  }
  .founder-content {
    padding-left: 15px;
  }
  .global-map{
    position: relative;
    top: unset;
    left: unset;
    width: 100%;
  }
  .contact-list {
    padding-left: 61px;
    span {
      width: 41px;
      height: 38px;
    }
  }
  .sw-list-item {
    h3 {
      font-size: 26px;
    }
  }
  .social-work-content{
    .row{
      .col:last-child{
        order: -1;
      }
    }
  }
  .related-work-slider {
    .slick-prev {
      left: -26px;
    }
    .slick-next {
      right: -26px;
    }
  }
  .blog-details-banner {
    & .text-head-leaf {
      transform: translateX(280px);
    }
  }
  .awards-img-box {
    height: 250px;
  }
  .product-listing-banner {
    padding: 0;
    height: 610px;
    .container {
      flex-direction: row;
    }
    .hero-content {
      width: 90%;
      padding-top: 130px;
    }
    .text-head-leaf {
      transform: unset;
    }
    .banner-vector {
      bottom: -15px;
    }
    .product-banner-img {
      margin-top: -30px;
    }
  }
  .product-enquiry-img {
    position: relative;
  }
  .product-details-header {
    .container-fluid{
      padding: 10px 15px;
    }
    #menu {
      justify-content: space-between;
    }
  }
  .product-details-header.sticky {
    .container-fluid {
      padding: 0px 15px;
    }
    #menu{
      justify-content: end;
    }
    .logo {
      top: 0;
      transform: translateX(-44px);
      left: 0;
    }
  }
  .related-product-box{
    height: 440px;
  }
  .product-category-banner {
    height: 400px;
    .hero-content{
      width: 90%;
      padding-top: 100px;
    }
  }
  .category-items {
    width: 100%;
    height: 369px;
  }
  .cotton-canvas {
        .container-fluid {
            padding: 0px 24px;
        }
    }
  .cotton-canvas {
    .feature-box {
        height: 375px;
    }
  }
  .canvas-tote {
    .container-fluid {
      padding: 0 20px;
    }
  }
  .canvas-tote {
    .img-cover {
      border-radius: 50px;
      height: 500px;
    }
  }
  .canvas-tote-content {
    width: 70%;
  }
  .product-goes {
    .container-fluid {
        padding: 0 40px;
    }
  }
  .product-goes-title {
    font-size: 22px;
  }
  .beach-bags {
    .container-fluid {
     padding: 0 20px;
    }
    .banner-leaf {
      top: 0px;
    }
    .img-cover {
      border-radius: 20px;
      height: 370px;
    }
  }
  .wine-bottle-bags {
    .feature-box {
      height: 660px;
    }
  }
  .product-goes {
    .product-listing-card {
      border-radius: 29px;
    }
    .base2 {
      display: none;
    }
  }
  .awards-img-box {
    border-radius: 27px;
  }
}
@media (max-width: 575.98px){
  #searchBtn{
    svg{
      width: 20px;
      height: 20px;
    }
  }
  #modalInput {
    font-size: 16px;
  }
  .result-item h4 {
    font-size: 15px;
    margin-bottom: 0;
  }
  .search-input-wrap {
    max-width: 90%;
    padding: 8px 10px;
  }
  .result-item {
    padding: 8px 8px;
  }
  #closeBtn {
    padding: 4px;
  }
  .search-topbar {
    padding: 0 15px;
    padding-top: 10px;
  }
  .popup .popup__content {
    width: 95%;
    border-radius: 13px;
  }
  .left{
    padding: 5px;
    img {
      width: 139px;
    }
  }
  .right {
    padding: 15px;
  }
  .title {
    font-size: 26px;
  }
  .form-control {
    font-size: 14px;
  }
  .sec-gap {
    padding: 20px 0;
  }
  p{
    font-size: 14px;
  }
  .dec {
    font-size: 14px;
  }
  .contactbar {
    display: none;
  }
  .catalougue-btn {
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 5px;
    img{
      width: 13px;
    }
  }
  .logo{
    width: 115px;
    top: 0;
  }
  .hero{
    height: 832px;
  }
  .hero-content {
    h1 {
      font-size: 36px;
      span {
        font-size: 28px;
      }
    }
    p {
      font-size: 14px;
    }
  }
  .hero-quality-box {
    img {
      width: 20%;
    }
  }
  .banner-leaf {
    bottom: -15px;
  }
  .btn-group {
    gap: 10px;
  }
  .hero-img-mobile{
    width: 250px;
  }
  .primary-btn {
    font-size: 14px;
    padding: 6px 13px;
    border-radius: 10px;
    img {
      width: 22px;
    }
  }
  .container-fluid {
    padding: 0 10px;
  }
  .hamburger {
    right: -8px;
    top: -2px;
  }
  #menu{
    padding-right: 45px;
    padding-block: 5px;
  }
  .header-area.sticky {
    padding-bottom: 0;
    .logo{
      top: -4px;
      transform: translateX(-22px);
    }
  }
  header .primary-btn {
    padding: 3px 9px;
  }
  .flex-box {
    gap: 10px;
  }
  #menu .main-menu {
    width: 70%;
  }
  #menu>.main-menu>ul>li>a {
    font-size: 14px;
  }
  #menu ul {
    margin-top: 80px;
  }
  .container{
    width: 100%;
  }
  .clients-slider {
    padding-inline: 25px;
  }
  .clients {
    padding-bottom: 20px;
    .section-title {
      font-size: 16px;
    }
  }
  .slick-prev {
    left: 0;
  }
  .slick-next {
    right: 0;
  }
  .about-img {
    padding: 10px;
  }
  .base2 {
    left: -10px;
  }
  .base1 {
    width: 115px;
    left: -10px;
    bottom: 15px;
  }
  .section-title {
    font-size: 26px;
  }
  .mb-30 {
    margin-bottom: 10px;
  }
  .counter-item {
    h4 {
      font-size: 32px;
    }
    p {
      font-size: 14px;
    }
  }
  .proud-box {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    a {
      width: 154px;
      height: 90px;
      border-radius: 15px;
    }
  }
  .popular-box {
    border-radius: 15px;
    height: 195px;
    &::after {
      border-radius: 0 0 15px 15px;
    }
    p {
      font-size: 14px;
      line-height: 110%;
    }
  }
  .popular-title {
    font-size: 15px;
  }
  .popular-box-content {
    padding: 10px 8px;
    .btn-group {
      gap: 5px;
      .primary-btn {
        font-size: 12px;
        padding: 6px 7px;
        padding-block: 7px;
        img {
          width: 13px;
        }
      }
    }
  }
  .mb-20 {
    margin-bottom: 10px;
  }
  .why-choose-card{
    img{
      width: 40px;
    }
  }
  .choose-vector{
    width: 80px;
  }
  .why-choose-img{
    bottom: 60%;
    left: 75%;
    width: 53px;
  }
  .why-choose {
    padding-bottom: 60px;
  }
  .our-process-leaf {
    width: 90px;
    left: 0%;
  }
  .process-icon {
    width: 64px;
    height: 64px;
    padding: 13px;
  }
  .process-box {
    h3 {
      margin-bottom: 5px;
      &::before {
        font-size: 20px;
      }
    }
  }
  .mb-50 {
    margin-bottom: 10px;
  }
  .sustain-img {
    .base2 {
      right: 0px;
      bottom: 30%;
      width: 240px;
    }
    .base1 {
      width: 180px;
      bottom: 0;
      left: -10px;
      border-width: 10px;
    }
  }
  .sustainable-leaf {
    width: 100px;
  }
  .sustainable-leaf2 {
    right: 3%;
    top: 37%;
  }
  .banner-leaf {
    width: 70px;
  }
  .testi-slider {
    padding-inline: 20px;
    .slick-slide {
      margin: 35px 7px;
    }
  }
  .testi-box {
    border-radius: 23px;
    padding: 10px;
    .star {
      font-size: 20px;
    }
  }
  .slick-dots {
    left: 0;
  }
  .awards {
    padding-top: 50px;
    .sustainable-leaf{
      width: 75px;
      top: -7px;
    }
  }
  .awards-slider-box {
    .slider-track {
      height: 200px;
    }
    .slide {
      height: 205px;
      border-radius: 19px;
    }
    .slide.prev {
      transform: translateX(-90px) rotate(-11deg) scale(0.88);
    }
    .slide.next {
      transform: translateX(90px) rotate(11deg) scale(0.88);
    }
  }
  .awards-leaf {
    width: 180px;
    top: -80px;
  }
  .awards {
    .sustainable-leaf2 {
      top: 38%;
      width: 50px;
    }
  }
  .res-img {
    border-radius: 14px;
  }
  .responsbility {
    .row {
      &::after {
        top: 0;
        border-radius: 14px;
      }
    }
  }
  .featured-blog-right-leaf {
    width: 105px;
    top: -105px;
  }
  .feature-box {
    border-radius: 17px;
  }
  .feature-content {
    padding: 10px 10px;
  }
  .feature-blog-title {
    font-size: 20px;
  }
  .feature-box-oth{
    height: 325px;
    .feature-content {
      display: block;
    }
  }
  .feature-box {
    &::after {
      border-radius: 17px;
      background: linear-gradient(0deg, rgb(0 0 0 / 62%) 40%, rgba(102, 102, 102, 0.00) 70%);
    }
  }
  .hei-100 {
    height: 325px;
  }
  .tag-date {
    p {
      font-size: 14px;
    }
  }
  .view-blog {
    font-size: 14px;
  }
  .feature-blog {
    .choose-vector {
      bottom: -15px;
    }
  }
  .feed {
    .sustainable-leaf {
      display: none;
    }
    .sustainable-leaf3 {
      top: 2%;
      right: 0px;
      width: 67px;
    }
  }
  .accordion__item .accordion__title {
    padding: 15px 40px 15px 15px;
  }
  .accordion__title::after {
    width: 8px;
    height: 8px;
    right: 15px;
    top: 20px;
  }
  .accordion__item .accordion__content {
    font-size: 14px;
  }
  .accordion__item {
    border-radius: 14px;
    margin: 10px auto;
  }
  .faq-vector-left-leaf {
    width: 120px;
  }
  .faq {
    .featured-blog-right-leaf {
      width: 130px;
    }
  }
  .social-media {
    a {
      width: 42px;
      height: 42px;
      padding: 10px;
    }
  }
  .visit-img {
    transform: translateX(16px);
  }
  .visit-us {
    .sustainable-leaf3 {
      width: 67px;
      right: 3%;
    }
    .sustainable-leaf2 {
      top: 70%;
      left: 0%;
    }
  }
  .mb-80 {
    margin-bottom: 30px;
  }
  .footer-logo {
    width: 140px;
    margin-bottom: 10px;
  }
  footer {
    padding-block: 30px;
    text-align: center;
  }
  .social-links {
    margin-bottom: 10px;
    a {
      width: 38px;
      height: 38px;
      padding: 10px;
    }
  }
  .footer-title {
    font-size: 17px;
    margin-bottom: 15px;
    &::after {
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .copyright {
    padding: 15px;
    display: block;
    border-radius: 15px;
  }
  .fixed-btn {
    right: 0;
  }
  .fixed-call {
    width: 43px;
    height: 43px;
  }
  .wp {
    width: 44px;
    height: 44px;
  }
  .footer-vector-right {
    width: 90px;
    bottom: 140px;
  }
  .footer-sub-titile {
    font-size: 15px;
  }
  .responsbility.sec-gap {
    padding: 40px 16px;
    padding-top: 15px;
  }
  .search-box {
    width: 270px;
    right: 50%;
    top: 65px;
    transform-origin: top center;
    transform: translate(50%, -50%) scaleX(0);
  }
  .search-box.active {
    transform: translate(50%, -50%) scaleX(1);
}
  .footer-sub-titile {
    &::after {
      background: radial-gradient(circle, #8B652A 0%, rgba(139, 101, 42, 0.6) 40%, rgba(102, 102, 102, 0.00) 100%);
      left: 50%;
      transform: translateX(-50%);
    }
  }
  footer {
    .row {
      .col-lg-4, & .col-lg-2, & .col-lg-3 {
        &::after {
          background: radial-gradient(circle, #8B652A 0%, rgba(139, 101, 42, 0.6) 40%, rgba(102, 102, 102, 0.00) 100%);
          width: 300px;
          height: 1px;
          left: 50%;
          transform: translateX(-50%);
          top: -15px;
        }
      }
      .col-lg-3:last-child{
        &::after{
          display: block;
        }
      }
    }
  }
  .since {
    font-size: 18px;
    padding: 8px 30px;
  }
  .inner-banner {
    height: auto;
    padding-top: 100px;
    padding-bottom: 30px;
    .inner-banner-img {
      .img {
        border-radius: 27px;
      }
    }
    .container {
      gap: 15px;
    }
    .img-vector {
      right: -40px;
      bottom: 60px;
      width: 134px;
    }
    .img-logo {
      top: -31px;
      width: 225px;
    }
    .banner-vector {
      bottom: -8px;
    }
  }
  .about-us{
    .base2{
      width: 202px;
      top: -55px;
      left: -10px;
    }
  }
  .base3 {
    width: 130px;
    height: 130px;
    right: 0;
    bottom: 0;
  }
  .comm-title {
    font-size: 15px;
  }
  .miss-bg{
    display: none;
  }
  .miss-viss {
    .featured-blog-right-leaf {
      width: 120px;
    }
    .our-process-leaf {
      top: -30px;
    }
  }
  .mix-vis-content {
    position: relative;
    background: #FFFAF3;
    border-radius: 17px;
    padding: 15px;
    border: 1px solid #606060;
    & .section-title {
      font-size: 24px;
    }
    img {
      margin-bottom: 10px;
      width: 45px;
    }
  }
  .miss-box {
    width: 100%;
    border-radius: 17px;
    &::after {
      display: none;
    }
    .awards-leaf {
      width: 170px;
      z-index: -1;
      top: -70px;
    }
  }
  .viss-box {
    .mix-vis-content {
      padding: 15px;
    }
  }
  .matters-img {
    padding-inline: 15px;
    margin-bottom: 10px;
  }
  .mat-box {
    display: block;
    h3 {
      font-size: 16px;
      margin-bottom: 7px;
    }
  }
  .square {
    width: 80px;
    height: 60px;
    font-size: 20px;
    border-radius: 10px;
    margin-bottom: 10px;
  }
  .excel{
    .why-choose-img {
      left: 10%;
    }
  }
  .journey-history {
    .container-fluid {
      padding: 0 10px;
      height: 480px;
    }
  }
  .history-circle {
    width: 13px;
    height: 13px;
    margin-bottom: 10px;
  }
  .history-box {
    h3 {
      font-size: 22px;
    }
  }
  .journey-box{
    padding: 10px 5px;
    border-radius: 0;
  }
  .journey-history .img-cover {
    border-radius: 14px;
  }
  .journey-overlay {
    border-radius: 14px;
  }
  .commitment {
    padding-top: 50px;
    .base1 {
      width: 130px;
      left: unset;
      bottom: 0;
      right: 0;
    }
    .our-process-leaf {
      width: 80px;
      bottom: -15px;
      left: -20px;
    }
    .sustainable-leaf {
      width: 50px;
      bottom: 0;
      left: 40px;
    }
    .sustainable-leaf2 {
      display: none;
    }
  }
  .commitment {
    .choose-vector {
      width: 120px;
      left: unset;
      right: -5px;
      bottom: 0;
    }
  }
  .founder-box {
    border-radius: 14px;
    padding: 10px;
  }
  .founder-img {
    border-radius: 14px;
  }
  .founder-content {
    padding-left: 0;
  }
  .signature-title {
    font-size: 33px;
  }
  .signature-position {
    font-size: 14px;
  }
  .line-bar {
    width: 64px;
    margin-bottom: 20px;
    margin-top: 30px;
  }
  .founder-vector {
    width: 130px;
  }
  .country-list {
    gap: 10px;
    li {
      font-size: 14px;
      padding: 13px 13px;
      padding-left: 30px;
      border-radius: 11px;
      &::before {
        width: 9px;
        height: 19px;
        left: 15px;
      }
    }
  }
  .contact-list {
    padding-left: 51px;
    span {
      width: 41px;
      height: 38px;
      padding: 12px;
    }
    h3{
      font-size: 15px;
      margin-bottom: 7px;
    }
  }
  .contact-form {
    border-radius: 17px;
    padding: 15px 15px;
    .form-group {
      margin-bottom: 10px;
    }
    .form-control {
      border-radius: 10px;
      font-size: 14px;
      padding: 11px 11px;
    }
    .form-icon {
      top: 12px;
      right: 12px;
    }
  }
  .contact-vector{
    margin-top: 70px;
  }
  .contact-map {
    iframe {
      height: 300px;
    }
  }
  .sw-list-item {
    border-radius: 17px;
    padding: 10px;
    .img {
      border-radius: 17px;
    }
    h3 {
      font-size: 18px;
      margin-bottom: 5px;
    }
  }
  .mb-60{
    margin-bottom: 30px;
  }
  .border-radius {
    border-radius: 17px;
  }
  .social-work-content {
    & .about-img {
      .base2 {
        width: 75px;
        top: 0;
        right: -15px;
      }
    }
  }
  .gallery-item {
    border-radius: 17px;
    height: 250px;
  }
  .related-work-slider {
    padding-inline: 10px;
    .slick-arrow {
      width: 30px;
      height: 30px;
    }
    .slick-next {
      right: -8px;
    }
    .slick-prev {
      left: -8px;
    }
  }
  .related-work-item {
    img {
      border-radius: 10px;
      margin-bottom: 10px;
      height: 230px;
    }
    h3 {
      font-size: 16px;
    }
  }
  .blog-meta {
    font-size: 14px;
  }
  .blog-meta {
    .tag {
      border-radius: 7px;
      padding: 4px 10px;
      margin-right: 7px;
    }
  }
  .blog-details-banner {
    .text-head-leaf {
      text-align: center;
      transform: unset;
      margin-bottom: -15px;
    }
    .banner-leaf {
      bottom: -65px;
    }
  }
  .blog-details-img {
    border-radius: 17px;
  }
  .blog-details{
    h2 {
      font-size: 24px;
    }
    h3 {
      font-size: 20px;
    }
    h4 {
      font-size: 17px;
    }
    ol {
      li {
        padding-left: 0;
        font-size: 14px;
        margin-bottom: 10px;
        span{
          font-size: 16px;
          line-height: 117.593%;
          margin-bottom: 5px;
        }
        &::marker {
          font-size: 16px;
        }
      }
    }
  }
  .pegination {
    flex-direction: column;
    a {
      border-radius: 10px;
      margin-bottom: 10px;
      img {
        width: 103px;
        height: 65px;
      }
      span{
        font-size: 14px;
        padding: 2px 8px;
      }
      h4 {
        font-size: 14px;
      }
    }
  }
  .blog-recent {
    a {
      gap: 10px;
      padding-block: 10px;
      img {
        width: 74px;
        height: 74px;
      }
      h4{
        font-size: 14px;
      }
    }
  }
  .category{
    border-radius: 15px;
    padding: 15px;
    a {
      font-size: 15px;
      padding: 10px 20px;
      margin-bottom: 10px;
    }
  }
  .awards-img-box{
    border-radius: 17px;
    height: auto;
  }
  .awards-img-box {
    & .overlay-text {
      p {
        font-size: 16px;
      }
    }
  }
  .product-listing-banner {
    padding: 0;
    height: 500px;
    .hero-content {
      width: 100%;
      padding-top: 80px;
    }
    .product-banner-img {
      margin-top: 0;
    }
  }
  .product-title {
    font-size: 15px;
  }
  .product-listing-img{
    border-radius: 12px;
  }
  .product-listing {
    .container-fluid {
      padding: 0 10px;
    }
  }
  .product-listing-img {
    height: 185px;
  }
  .sale {
    font-size: 12px;
    width: 40px;
    height: 40px;
    top: 5px;
    right: 5px;
  }
  .product-details-header {
    .container-fluid {
      padding: 0px 15px;
    }
    .logo {
      margin-top: 0;
    }
  }
  .image-tab {
    width: 66px;
    height: 80.15px;
    border-radius: 10px;
  }
  .shown-image {
    border-radius: 10px;
    height: 340px;
  }
  .product-details-content {
    & h1 {
      font-size: 26px;
    }
    p {
      font-size: 14px;
    }
    .btn-group {
      flex-direction: column;
    }
    .primary-btn{
      width: 100%;
    }
  }
  .product-enquiry {
    .container.sec-gap {
      padding: 20px 15px;
    }
    .contact-form{
      position: relative;
      border-radius: 12px;
      padding: 13px;
      form .primary-btn {
        padding: 9px 21px;
        padding-left: 21px;
        cursor: pointer;
      }
    }
  }
  .related-product-slider {
    padding-inline: 25px;
    .slick-arrow {
      width: 35px;
      height: 35px;
    }
    .slick-prev {
      left: -10px;
    }
    .slick-next {
      right: -10px;
    }
  }
  .related-product-box {
    height: 360px;
    border-radius: 12px;
    h3 {
      font-size: 16px;
      padding: 20px 20px;
    }
    &:hover{
      h3 {
        padding: 14px 30px;
      }
    }
  }
  .related-product {
    .featured-blog-right-leaf {
      width: 85px;
      display: none;
    }
  }
   .product-category-banner {
    height: 300px;
   }
    .category-items {
      width: 100%;
      height: 173px;
      padding: 8px;
      span {
        margin-left: 0px;
        margin-top: 0px;
      }
    }
  .eco-friendly {
    .slick-slide {
      margin: 0 -5px;
    }
  }
  .eco-friendly-slider{
    padding-inline: 25px;
  }
  .eco-friendly {
    .slick-arrow {
        width: 20px;
        height: 20px;
        top: 40%;
    }
        .slick-next {
        right: -7px;
    }
        .slick-prev {
        left: -7px;
    }
        .why-choose-img {
        bottom: unset;
        top: 36%;
        left: 75%;
        rotate: -100deg;
    }
    .eco-friendly-leaf {
        top: 34%;
        left: 2%;
    }
    .banner-leaf {
      display: none;
    }
  }
  .category-title {
        font-size: 15px;
    }
        .cotton-canvas {
        .container-fluid {
            padding: 0px 10px;
        }
        .feature-width {
    width: 100%;
}
        .feature-box {
            height: 275px;
        }
    }
        .cotton-canvas {
        .feature-blog-title {
            font-size: 18px;
        }
    }
    .canvas-tote {
        .container-fluid {
            padding: 0 10px;
        }
    }
        .canvas-tote {
        .img-cover {
            border-radius: 20px;
            height: 270px;
        }
    }
        .product-goes {
        .container-fluid {
            padding: 0 25px;
        }
                .product-listing-card {
                  border-radius: 15px;
            height: 315px;
                .mb-40 {
        margin-bottom: 0px;
    }
        }
    }
        .product-goes-title {
        font-size: 17px;
    }
  .beach-bag-content {
    width: 80%;
  }
      .beach-bags {
        .img-cover {
            border-radius: 20px;
            height: 240px;
        }
                .banner-leaf {
            top: -60px;
        }
    }
        .wine-bottle-bags {
        .feature-box {
            height: 660px;
        }
    }
    .wine-bottle-bags {
        .feature-box {
            height: 370px;
        }
    }
    .cotton-canvas {
    & .feature-box {
        &::after {
            border-radius: 10px;
        }
    }
}
}



/* ================================
   WP PageNavi – Minimal Style
================================ */

.wp-pagenavi {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-family: inherit;
}

/* Common button style */
.wp-pagenavi a,
.wp-pagenavi span {
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    border: 1px solid #ddd;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    background: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Hover */
.wp-pagenavi a:hover {
    background: #485F27;   /* primary red */
    color: #fff;
    border-color: #485F27;
}

/* Current page */
.wp-pagenavi span.current {
    background: #485F27;
    color: #fff;
    border-color: #485F27;
    cursor: default;
}

/* Disabled prev/next */
.wp-pagenavi span.extend {
    color: #999;
    border-color: #eee;
}

/* Prev & Next buttons */
.wp-pagenavi a.previouspostslink,
.wp-pagenavi a.nextpostslink {
    padding: 0 18px;
    font-weight: 600;
}

/* Remove unwanted text */
.wp-pagenavi .pages {
    display: none;
}



.repocean-slider-main-v2 .SliderContentParent .left{
    background-image: none !important;
}



.view-more-btn{
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto !important;
    min-width: 170px;
    height: 54px;
    padding: 0px 33px;
    margin: 30px 30px;
}

.text-center .view-more-btn{
    display: inline-flex !important;
}

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