@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Marcellus&display=swap");

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

*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



:root {
  --deep-green: #1e4b3c;
  --deep-green-dark: #1e4b3c;
  --deep-green-soft: #1e4b3c;
  --cream: #faf6ec;
  --cream-soft: #f1ead9;
  --gold: #9affb5;
  --gold-soft: #9affb5;
  --ink: #26261f;
  --ink-soft: #5a5c53;
  --sage: #e7ede6;
  --shadow: 0 20px 45px -20px rgba(18, 48, 40, .35);
  --dark: #1e4b3c;
  --forest: #1e4b3c;
  --forest-deep: #1e4b3c;
  --forest-soft: #2e6350;
  --dark-hover: #1e4b3c;

  --dark-green: #1e4b3c;

  --green: #1e4b3c;

  --gold: #1e4b3c;

  --gold-light: #1e4b3c;

  --cream: #f9f5ee;

  --cream-dark: #ede8df;

  --text-light: #f5f0e8;

  --bg-light: #f0f0f0;

  --text-muted: rgba(245, 240, 232, 0.65);

  --border-light: rgba(201, 168, 76, 0.25);

  --forest: #1e4b3c;

  --forest-deep: #1e4b3c;

  --terracotta: #3c5b43;

  --terracotta-soft: #3c5b43;

  --gold: #3c5b43;

  --cream: #f7f3ea;

  --cream-deep: #efe8d8;

  --ink: #2b2b26;

  --white: #ffffff;

  --pts-green-dark: #1e4b3c;

  --pts-green-darker: #1e4b3c;

  --pts-text-dark: #1e4b3c;

  --pts-text-body: #6b7570;

  --pts-border: #e6e8e6;

  --pts-bg-soft: #f4f5f3;

  --pts-yellow: #f5a623;

  --pts-price-old: #9aa19c;

  --pts-white: #ffffff;

  --pts-shadow: rgba(31, 42, 36, 0.08);

  --pts-shadow-hover: rgba(31, 42, 36, 0.16);

  --ph-ink: #1e4b3c;

  --ph-forest: #1e4b3c;

  --ph-forest-deep: #1e4b3c;

  --ph-parchment: #f3ead4;

  --ph-parchment-soft: #ece0c4;

  --ph-terracotta: #9affb5;

  --ph-sage: #9affb5;

  --ph-line: rgba(28, 36, 23, 0.18);

  --ap-bg-a: #fffaf2;

  --ap-bg-b: #fdf3e6;

  --ap-pink: #1e4b3c;

  --ap-orange: #1c815c;

  --ap-gold: #b9862f;

  --ap-gold-deep: #7a5a1e;

  --ap-ink: #3c2a1e;

  --ap-muted: #96795a;

  --ap-card: #ffffff;

  --myaxyl-green: #1e4b3c;

  --myaxyl-green-deep: #1e4b3c;

  --myaxyl-cream: #f9f3ee;

  --myaxyl-pill: #fff6d4;

  --myaxyl-tagline: #4d7165;

  --myaxyl-ink: #20241f;

  --myaxyl-body: #54534c;

  --myaxyl-border: #e4dfd5;

  --myaxyl-strike: #a5a096;

  --myaxyl-gold: #c99a3e;

  --faq-bg: #f7f4ec;

  --faq-card-bg: #ffffff;

  --faq-eyebrow: #b17c6d;

  --faq-heading: #1f3d2f;

  --faq-question: #1f3d2f;

  --faq-question-open: #0f271b;

  --faq-icon: #17301f;

  --faq-divider: #eae6da;

  --faq-answer-text: #5c6a61;

  --faq-shadow: rgba(31, 61, 47, 0.08);

  --faq-shadow-hover: rgba(31, 61, 47, 0.14);

}

body,
html {

  overflow-x: hidden !important;

}

body {

  font-family: "Figtree", sans-serif !important;

  background: radial-gradient(ellipse at 50% 38%,

      #fffdf9 0%,

      var(--ap-bg-a) 45%,

      var(--ap-bg-b) 100%);

}



@font-face {

  font-family: "Amstir-Regular";

  src: url("../fonts/Amstir-Regular.ttf") format("truetype");

  font-weight: 400;

  font-style: normal;

  font-display: swap;

}

@font-face {

  font-family: "Avenir-Black";

  src: url("../fonts/Avenir-Black.ttf") format("truetype");

  font-weight: 400;

  font-style: normal;

  font-display: swap;

}





a {

  text-decoration: none;

}

/* ===========================Preheader============================= */

.preheader {

  padding: 8px;

  background: #1d7b59;

}

.preheader p {

  margin: 0;

  color: #fff;

  text-align: center;

  font-size: 15px;

}

.preheader-con {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.pre-email {

  display: flex;

}

.pre-close {

  color: #fff;

  margin-right: 18px;

  align-items: center;

  display: flex;

}

.pre-close i {

  padding-right: 8px;

}

.pre-close p {

  margin: 0;

  font-size: 15px;

}

.pre-icon ul {

  float: right;

  margin: 0;

}

.pre-icon ul li {

  float: left;

  list-style: none;

}

.pre-icon ul li i {

  color: #fff;

}

.pre-icon i {

  margin-left: 10px;

}

/* ANNOUNCEMENT BAR */

.announce-bar {

  background: var(--dark);

  color: var(--text-muted);

  font-size: 12px;

  letter-spacing: 0.04em;

  overflow: hidden;

  height: 32px;

  display: flex;

  align-items: center;

}



.announce-track {

  display: flex;

  gap: 60px;

  animation: marquee 30s linear infinite;

  white-space: nowrap;

}



.announce-track span {

  display: flex;

  align-items: center;

  gap: 8px;

}



.announce-track span::before {

  content: "";

  display: inline-block;

  width: 5px;

  height: 5px;

  background: var(--gold);

  border-radius: 50%;

  flex-shrink: 0;

}



@keyframes marquee {

  from {

    transform: translateX(0);

  }



  to {

    transform: translateX(-50%);

  }

}



/* ========================MAIN HEADER============================== */

.header {

  background: var(--bg-light);

  border-bottom: 1px solid var(--cream-dark);

  position: sticky;

  top: 0;

  z-index: 1000;

}



.header-inner {

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  padding: 5px 0;

  margin: 0 auto;

}



/* SEARCH */

.search-wrap {

  display: flex;

  align-items: center;

  gap: 10px;

  background: #ffffff;

  border: 1px solid var(--green);

  border-radius: 999px;

  padding: 9px 16px;

  max-width: 320px;

  cursor: text;

  transition:

    border-color 0.2s,

    box-shadow 0.2s;

}



.search-wrap:focus-within {

  border-color: var(--gold);

  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.12);

}



.search-wrap svg {

  color: #888;

  flex-shrink: 0;

}



.search-wrap input {

  border: none;

  background: transparent;

  outline: none;

  font-family: "DM Sans", sans-serif;

  font-size: 15px;

  color: #333;

  width: 100%;

}



.search-wrap input::placeholder {

  color: #aaa;

}



/* LOGO */

.logo img {

  width: 160px;

}



.logo-leaf {

  font-size: 20px;

  line-height: 1;

}



.logo-text {

  font-family: "Marcellus", serif;

  font-size: 22px;

  font-weight: 600;

  color: var(--dark);

  letter-spacing: 0.02em;

  line-height: 1;

}



.logo-sub {

  font-family: "Marcellus", serif;

  font-size: 11px;

  font-weight: 400;

  letter-spacing: 0.18em;

  color: #888;

  text-transform: uppercase;

}



/* RIGHT ACTIONS */

.header-actions {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 24px;

}



.nav-links {

  display: flex;

  align-items: center;

  gap: 20px;

  list-style: none;

  margin: 0;

}



.nav-links a {

  text-decoration: none;

  font-size: 18px;

  color: var(--dark-green);

  letter-spacing: 0.02em;

  transition: color 0.2s;

}



.nav-links a:hover {

  color: var(--dark);

}



.nav-divider {

  color: var(--dark-green);

  font-size: 18px;

}



.icon-btn {

  background: none;

  border: none;

  cursor: pointer;

  padding: 6px;

  color: var(--dark);

  display: flex;

  align-items: center;

  position: relative;

  transition: color 0.2s;

}



.icon-btn:hover {

  color: var(--gold);

}

.wishlist-badge {

  position: absolute;

  top: -6px;

  right: -6px;



  width: 18px;

  height: 18px;



  background: #e53935;

  color: #fff;



  border-radius: 50%;



  display: flex;

  align-items: center;

  justify-content: center;



  font-size: 10px;

  font-weight: 600;



  line-height: 1;

}



.icon-btn {

  width: 30px;

  height: 30px;

  border: none;

  background: #fff;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: 0.3s;

}



.icon-btn:hover {

  background: #1d4d3a;

  color: #fff;

}



.icon-btn svg {

  transition: 0.3s;

}



.icon-btn:hover svg {

  transform: scale(1.1);

}

.cart-badge {

  position: absolute;

  top: 0;

  right: 0;

  background: var(--dark);

  color: var(--gold-light);

  font-size: 9px;

  font-weight: 500;

  width: 16px;

  height: 16px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 2px solid #fff;

}



/* NAV BAR */

.navbar {

  background: var(--bg-light);

  position: relative;

  z-index: 999;

}



.navbar-inner {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0;

  max-width: 1400px;

  margin: 0 auto;

  padding: 0 32px;

}



.nav-item {

  position: static;

}



.nav-item>a,

.nav-item>button {

  display: flex;

  align-items: center;

  gap: 3px;

  text-decoration: none;

  font-family: "Figtree";

  font-size: 18px;

  font-weight: 400;

  color: var(--dark-green);

  letter-spacing: 0.04em;

  padding: 5px 40px;

  border: none;

  background: none;

  cursor: pointer;

  transition:

    color 0.2s,

    background 0.2s;

  white-space: nowrap;

}



.nav-item>a:hover,

.nav-item>button:hover,

.nav-item.active>a,

.nav-item.active>button {

  color: var(--text-light);

  background: var(--dark-hover);

}



.nav-item>button svg {

  transition: transform 0.25s;

}



.nav-item.active>button svg {

  transform: rotate(180deg);

}



.caret {

  width: 12px;

  height: 12px;

}



/* MEGA MENU */

.mega-menu {

  position: absolute;

  left: 0;

  right: 0;

  top: 100%;

  background: #fff;

  border-top: 2px solid var(--gold);

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);

  display: none;

  z-index: 998;

}



.mega-menu.open {

  display: block;

  animation: menuSlide 0.22s ease;

}



@keyframes menuSlide {

  from {

    opacity: 0;

    transform: translateY(-8px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.mega-inner {

  max-width: 1400px;

  margin: 0 auto;

  display: grid;

  padding: 36px 48px;

  gap: 32px;

}



.mega-inner.cols-4 {

  grid-template-columns: repeat(4, 1fr);

}



.mega-inner.cols-3 {

  grid-template-columns: repeat(3, 1fr) 280px;

}



.mega-col {}



.mega-col-title {

  font-family: "Marcellus", serif;

  font-size: 16px;

  color: var(--gold);

  padding-bottom: 12px;

  border-bottom: 1px solid var(--cream-dark);

  margin-bottom: 15px;

}



.mega-links {

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 2px;

  padding: 0;

}



.mega-links a {

  display: flex;

  align-items: center;

  gap: 8px;

  text-decoration: none;

  font-size: 16px;

  color: #444;

  padding: 6px 8px;

  border-radius: 6px;

  transition:

    background 0.15s,

    color 0.15s;

  letter-spacing: 0.01em;

}



.mega-links a:hover {

  background: var(--cream);

  color: var(--dark);

}



.mega-links a .link-dot {

  width: 4px;

  height: 4px;

  border-radius: 50%;

  background: var(--gold-light);

  flex-shrink: 0;

  opacity: 0;

  transition: opacity 0.15s;

}



.mega-links a:hover .link-dot {

  opacity: 1;

}



/* Featured panel */

.mega-featured {

  background: var(--dark);

  border-radius: 12px;

  padding: 24px;

  display: flex;

  flex-direction: column;

  gap: 16px;

}



.mega-featured-label {

  font-size: 10px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--gold);

  font-weight: 500;

}



.mega-featured-title {

  font-family: "Marcellus", serif;

  font-size: 22px;

  font-weight: 600;

  line-height: 1.3;

  color: var(--text-light);

}



.mega-featured-desc {

  font-size: 16px;

  line-height: 1.65;

  color: var(--text-muted);

}



.mega-featured-cta {

  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  background: var(--gold) !important;

  color: #fff !important;

  font-size: 12px !important;

  font-weight: 500 !important;

  padding: 9px 18px !important;

  border-radius: 999px !important;

  text-decoration: none !important;

  letter-spacing: 0.03em !important;

  transition: background 0.2s !important;

  align-self: flex-start !important;

  margin-top: 4px !important;

}



.mega-featured-cta:hover {

  background: var(--gold-light);

}



#hamburger {

  display: none;

}

/* ======================================Jyoti Menu============================== */

/*====================================================

  PART 1 : MOBILE SLIDE NAVBAR

=====================================================*/



@media only screen and (max-width: 991px) {

  body.menu-open {

    overflow: hidden;

  }



  /* Header */

  .header-inner {

    grid-template-columns: auto 1fr auto;

    padding: 15px 20px;

  }



  .search-wrap {

    display: none;

  }



  .logo {

    text-align: left;

    margin-left: 15px;

  }



  .logo img {

    width: 130px;

  }



  .nav-links {

    display: none;

  }



  .icon-btn {

    padding: 4px;

  }



  /*==========================

      NAVBAR

    ==========================*/



  .navbar {

    position: fixed;



    top: 0;



    left: -340px;



    width: 320px;



    height: 100vh;



    background: #fff;



    overflow-y: auto;



    z-index: 999999;



    transition: 0.35s ease;



    box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);

  }



  .navbar.mobile-open {

    left: 0;

  }



  .navbar-inner {

    display: block;



    padding: 70px 0 20px;

  }



  .nav-item {

    width: 100%;



    border-bottom: 1px solid #ececec;

  }



  .nav-item>a,

  .nav-item>button {

    width: 100%;



    padding: 18px 25px;



    display: flex;



    justify-content: space-between;



    align-items: center;



    color: #17392d;



    background: #fff;



    font-size: 16px;

  }



  .nav-item>a:hover,

  .nav-item>button:hover {

    background: #fff;



    color: #17392d;

  }



  /* Overlay */



  body.menu-open::before {

    content: "";



    position: fixed;



    left: 0;



    top: 0;



    right: 0;



    bottom: 0;



    background: rgba(0, 0, 0, 0.45);



    z-index: 999998;

  }

}



/*====================================================

  PART 2 : MOBILE ACCORDION MENU

=====================================================*/



@media only screen and (max-width: 991px) {

  /* Mega Menu */

  .mega-menu {

    position: static !important;



    display: none;



    width: 100%;



    background: #f8f8f8;



    border: none;



    box-shadow: none;



    animation: none;



    opacity: 1;



    visibility: visible;



    transform: none;

  }

  .navbar-inner {

    display: block;

    padding: 20px 0;

    margin: 0;

    width: 100%;

  }



  .mega-menu.open {

    display: block;

  }



  /* Grid Remove */



  .mega-inner {

    display: block;



    padding: 0;



    max-width: 100%;

  }



  .mega-inner.cols-3,

  .mega-inner.cols-4 {

    display: block;



    grid-template-columns: unset;

  }



  /* Column */



  .mega-col {

    width: 100%;



    padding: 18px 25px;



    border-bottom: 1px solid #ececec;

  }



  .mega-col:last-child {

    border-bottom: none;

  }



  /* Title */



  .mega-col-title {

    font-size: 12px;



    font-weight: 600;



    text-transform: uppercase;



    letter-spacing: 0.12em;



    margin-bottom: 12px;



    padding-bottom: 10px;

  }



  /* Links */



  .mega-links {

    display: block;



    margin: 0;



    padding: 0;

  }



  .mega-links li {

    list-style: none;

  }



  .mega-links a {

    display: flex;



    align-items: center;



    padding: 11px 0;



    color: #555;



    font-size: 15px;



    border-bottom: 1px solid #efefef;



    text-decoration: none;

  }



  .mega-links li:last-child a {

    border-bottom: none;

  }



  .mega-links a:hover {

    background: none;



    color: #17392d;

  }



  .link-dot {

    display: none;

  }



  /* Featured Card */



  .mega-featured {

    margin-top: 10px;



    border-radius: 8px;

  }



  .mega-featured-title {

    font-size: 20px;

  }



  .mega-featured-desc {

    font-size: 15px;



    line-height: 1.6;

  }



  .mega-featured-cta {

    font-size: 15px;

  }



  /* Caret */



  .nav-item.active .caret {

    transform: rotate(180deg);

  }

}

/*=========================================

      UNIQUE ABOUT DROPDOWN

==========================================*/



.about-dropdown {

  position: relative;

  display: flex;

  align-items: center;

  height: 100%;

}



.about-dropdown-btn {

  display: flex;

  align-items: center;

  gap: 3px;

  text-decoration: none;

  font-family: "Figtree";

  color: var(--dark-green);

  letter-spacing: 0.04em;

  padding: 5px 20px;

  border: none;

  background: none;

  cursor: pointer;

  transition:

    color 0.2s,

    background 0.2s;

  white-space: nowrap;

}



.about-dropdown-btn:hover {
  color: var(--text-light);
  background: var(--dark-hover);

}



.about-dropdown-btn svg {

  width: 15px;

  height: 15px;

  transition: 0.35s ease;

}



/* Dropdown */



.about-dropdown-menu {

  position: absolute;



  top: 100%;

  left: 0;



  width: 260px;



  background: #ffffff;



  border-radius: 8px;



  box-shadow:

    0 8px 15px rgba(0, 0, 0, 0.08),

    0 18px 40px rgba(0, 0, 0, 0.12);



  padding: 10px 0;



  z-index: 99999999;



  opacity: 0;

  visibility: hidden;



  transform: translateY(15px);



  transition:

    opacity 0.35s ease,

    transform 0.35s ease,

    visibility 0.35s ease;

}



/* Hover */



.about-dropdown:hover .about-dropdown-menu {

  opacity: 1;



  visibility: visible;



  transform: translateY(0);

}



/* Links */



.about-dropdown-menu a {

  display: block;



  text-decoration: none;



  color: #444;



  font-size: 15px;



  font-weight: 500;



  padding: 15px 22px;



  transition: 0.3s;

}



.about-dropdown-menu a:hover {

  background: #f6f6f6;



  color: #9a6d2d;



  padding-left: 30px;

}



/* Desktop only */



@media (min-width: 992px) {

  .about-dropdown:hover .about-dropdown-menu {

    display: block;

  }

}



/* Mobile */



@media (max-width: 991px) {

  .about-dropdown {

    width: 100%;

    display: block;

  }



  .about-dropdown-btn {

    width: 100%;

    justify-content: space-between;

    padding: 15px 25px 15px 25px;

    border-bottom: 1px solid #eee;

  }

  .about-dropdown.active .about-dropdown-btn svg {

    transform: rotate(180deg);

  }

  .about-dropdown-menu {

    position: static;



    width: 100%;



    opacity: 1;



    visibility: visible;



    transform: none;



    display: none;



    box-shadow: none;



    border-radius: 0;



    background: #fafafa;



    padding: 0;

  }



  .about-dropdown.active .about-dropdown-menu {

    display: block;

  }



  .about-dropdown-menu a {

    padding: 12px 30px;

  }

}

/* ==========================

   MOBILE HEADER

========================== */



@media (max-width: 991px) {

  .hamburger {

    display: flex !important;

    flex-direction: column;

    gap: 5px;

    cursor: pointer;

    background: none;

    border: none;

    padding: 0;

    margin-right: 0;

    z-index: 999999;

  }



  .hamburger span {

    width: 24px;

    height: 2px;

    background: #17392d;

    display: block;

    transition: 0.3s;

  }



  .header-actions {

    gap: 12px;

  }



  .nav-links {

    display: none !important;

  }

}

@media (max-width: 991px) {

  .nav-item .mega-menu {

    display: none;

  }



  .nav-item.active>.mega-menu {

    display: block;

  }

}

/*=========================================

    MOBILE HEADER & DRAWER

==========================================*/



@media (max-width: 991px) {

  body.menu-open {

    overflow: hidden;

  }



  /* Header */



  .header-inner {

    display: grid;

    grid-template-columns: 45px 1fr auto;

    align-items: center;

    padding: 15px 20px;

  }



  .search-wrap {

    display: none;

  }



  .logo {

    text-align: center;

    margin: 0;

  }



  .logo img {

    width: 140px;

  }



  /* Right */



  .nav-links {

    display: none;

  }



  .header-actions {

    gap: 12px;

  }



  .icon-btn {

    padding: 5px;

  }



  /* Hamburger */



  .hamburger {

    display: flex !important;

    flex-direction: column;

    justify-content: center;

    gap: 5px;

    width: 12px;

    height: 36px;

    padding: 0;

    border: none;

    background: none;

    cursor: pointer;

  }



  .hamburger span {

    width: 24px;

    height: 2px;

    background: #17392d;

    border-radius: 5px;

    transition: 0.35s;

  }



  .hamburger.open span:nth-child(1) {

    transform: translateY(7px) rotate(45deg);

  }



  .hamburger.open span:nth-child(2) {

    opacity: 0;

  }



  .hamburger.open span:nth-child(3) {

    transform: translateY(-7px) rotate(-45deg);

  }

}

@media (max-width: 991px) {

  #navbar {

    width: 320px !important;

    height: 100vh !important;



    display: block !important;

    margin: 0 !important;

    padding: 0 !important;

    transform: none !important;

  }



  #navbar .navbar-inner {

    display: block !important;

    margin: 0 !important;

    padding: 20px 0 !important;

  }

}

/*======================================== bannre-slider-css ======================================*/



.parapara-banner-wrapper {

  width: 100%;

  overflow: hidden;

}



/* SLIDER */

.parapara-banner {

  width: 100%;

}



.parapara-banner-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}


.slick-dots li button:before {

  display: none !important;

}

/* ARROWS */

.parapara-banner-wrapper .slick-prev,

.parapara-banner-wrapper .slick-next {

  z-index: 10;

}



.parapara-banner-wrapper .slick-prev {

  left: 15px;

}



.parapara-banner-wrapper .slick-next {

  right: 15px;

}



/* DOTS */

.parapara-banner-wrapper .slick-dots li button:before {

  font-size: 10px;

}

/* CUSTOM ARROWS */

.parapara-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 50px;

  height: 50px;

  background: #fff;

  color: #000;

  display: flex !important;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  z-index: 20;

  font-size: 18px;

  transition: 0.3s;

  border: unset;

  border-radius: 50%;
  display: none !important;

}



.parapara-arrow:hover {

  background: #1a3a2a;

  color: #fff;

}



/* LEFT */

.parapara-prev {

  right: 100px;

  top: unset;

  bottom: 80px;

}



/* RIGHT */

.parapara-next {

  right: 40px;

  top: unset;

  bottom: 80px;

}



/* HIDE DEFAULT SLICK ARROWS */

.slick-prev:before,

.slick-next:before {

  display: none;

}



/* Shop-by-Concern-css */

.Shop-by-Concern {

  padding: 10px 0;

}



/* SECTION */

.parapara-category-section {}



/* LIST */

.parapara-category-list {

  display: grid;

  grid-template-columns: repeat(7, 1fr);

  gap: 25px 10px;

  list-style: none;

  text-align: center;

}

.parapara-category-list li {

  list-style: none;

  text-align: center;

  padding: 20px 15px;

  border-radius: 12px;

  background: #ffffff;

  cursor: pointer;

  transition: all 0.35s ease;

}



.parapara-category-list li:hover {

  transform: translateY(-8px);

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);

  background: #1d4d3a;

}



.parapara-category-icon {

  width: 70px;

  height: 70px;

  margin: 0 auto 15px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #f5f5f5;

  transition: all 0.35s ease;

}



.parapara-category-icon img {

  width: 40px;

  transition: all 0.35s ease;

}



.parapara-category-list li:hover .parapara-category-icon {

  background: #fff;

}





.parapara-category-list li p {

  margin: 0;

  font-size: 15px;

  font-weight: 600;

  color: #333;

  transition: color 0.35s ease;

  font-family: "Figtree";

}



.parapara-category-list li:hover p {

  color: #fff !important;

}

/*.parapara-category-list li:hover .parapara-category-icon {*/

/*  animation: iconBounce 0.6s ease;*/

/*}*/



@keyframes iconBounce {

  0% {

    transform: translateY(0);

  }



  40% {

    transform: translateY(-10px);

  }



  70% {

    transform: translateY(4px);

  }



  100% {

    transform: translateY(0);

  }

}

/* ITEM */

.parapara-category-list li {

  cursor: pointer;

}



/* ICON CIRCLE */

.parapara-category-icon {

  width: 90px;

  height: 90px;

  margin: 0 auto 10px;

  border-radius: 50%;

  background: #f8f8f8;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.3s;

}



/* IMAGE */

.parapara-category-icon img {

  width: 50px;

  height: 50px;

  object-fit: contain;

}

/* HOVER */

.parapara-category-list li:hover .parapara-category-icon {

  /* background: #1a3a2a; */

}



.parapara-category-list li:hover p {

  color: #1a3a2a;

  font-weight: 500;

}

.cmn-heading {

  text-align: center;

}

.cmn-heading h2 {

  font-size: 32px;

  margin-bottom: 20px;

  font-family: "Marcellus", serif;

  color: var(--green);

}

.cmn-heading img {

  width: 50px;

}



/* products-slider-css */

.pts-viewport {

  overflow: hidden;

}



.pts-cards-row {

  display: flex;

  gap: 20px;

  transition: 0.4s ease;

  will-change: transform;

}



.pts-card {

  flex: 0 0 calc(25% - 15px);

}



@media (max-width: 991px) {

  .pts-card {

    flex: 0 0 calc(33.33% - 15px);

  }

}



@media (max-width: 767px) {

  .pts-card {

    flex: 0 0 calc(50% - 10px);

  }

}



@media (max-width: 575px) {

  .pts-card {

    flex: 0 0 100%;

  }

}

.pts-qty-box {

  display: none;

  align-items: center;

  border: 1px solid #ddd;

  border-radius: 6px;

  overflow: hidden;

  height: 40px;

}



.pts-qty-box button {

  width: 38px;

  height: 40px;

  border: none;

  background: #f5f5f5;

  cursor: pointer;

  font-size: 20px;

}



.pts-qty {

  width: 40px;

  text-align: center;

  font-weight: 600;

}



.pts-add-btn.hide {

  display: none;

}



.pts-qty-box.show {

  display: flex;

}



/* ================================cart product======================= */

/*=========================

    CART WRAPPER

==========================*/



.pts-cart-wrapper {

  position: relative;

}



.pts-mini-cart.active {

  display: block;

  animation: ptsCartOpen 0.25s ease;

}



@keyframes ptsCartOpen {

  from {

    opacity: 0;

    transform: translateY(15px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/*=========================

      TOP ARROW

==========================*/



.pts-cart-arrow {

  position: absolute;



  top: -10px;

  right: 30px;



  width: 20px;

  height: 20px;



  background: #fff;



  transform: rotate(45deg);



  box-shadow: -3px -3px 8px rgba(0, 0, 0, 0.04);

}



/*=========================

      HEADER

==========================*/



.pts-mini-header {

  display: flex;



  justify-content: space-between;



  align-items: center;



  padding: 18px 22px;



  border-bottom: 1px solid #ececec;



  position: relative;



  z-index: 2;



  background: #fff;

}



.pts-success-msg {

  display: flex;



  align-items: center;



  gap: 12px;

}



.pts-success-icon {

  width: 36px;

  height: 36px;



  border-radius: 50%;



  background: #2d6a4f;



  color: #fff;



  display: flex;



  justify-content: center;



  align-items: center;



  font-size: 18px;



  font-weight: bold;

}



.pts-success-text {

  font-size: 16px;



  color: #333;



  font-weight: 500;

}



.pts-cart-close {

  width: 34px;

  height: 34px;



  border: none;



  background: #edf6ef;



  border-radius: 50%;



  cursor: pointer;



  font-size: 22px;



  color: #2d6a4f;



  transition: 0.3s;

}



.pts-cart-close:hover {

  background: #2d6a4f;



  color: #fff;

}



/*=========================

      BODY

==========================*/



.pts-cart-body {

  max-height: 380px;



  overflow-y: auto;



  padding: 10px 20px;

}



.pts-cart-body::-webkit-scrollbar {

  width: 6px;

}



.pts-cart-body::-webkit-scrollbar-thumb {

  background: #c8c8c8;



  border-radius: 20px;

}



/*=========================

      ITEM

==========================*/



.pts-cart-item {

  display: flex;



  align-items: center;



  gap: 15px;



  padding: 15px 0;



  border-bottom: 1px solid #f2f2f2;

}



.pts-cart-item:last-child {

  border-bottom: none;

}



/*=========================

      IMAGE

==========================*/



.pts-cart-img {

  width: 75px;



  height: 75px;



  border-radius: 10px;



  overflow: hidden;



  background: #f8f8f8;



  flex-shrink: 0;

}



.pts-cart-img img {

  width: 100%;



  height: 100%;



  object-fit: cover;

}



/*=========================

      CONTENT

==========================*/



.pts-cart-info {

  flex: 1;

}



.pts-cart-info h4 {

  font-size: 15px;



  margin: 0 0 6px;



  color: #222;



  font-weight: 600;



  line-height: 22px;

}



.pts-cart-info p {

  margin: 0;



  color: #888;



  font-size: 15px;

}



.pts-cart-info h5 {

  margin-top: 10px;



  font-size: 17px;



  color: #1d4d3a;

}



/*=========================

      QUANTITY

==========================*/



.pts-cart-qty {

  display: flex;



  align-items: center;



  border: 1px solid #ddd;



  border-radius: 30px;



  overflow: hidden;

}



.pts-cart-qty button {

  width: 34px;



  height: 34px;



  border: none;



  background: #fff;



  cursor: pointer;



  font-size: 20px;



  color: #1d4d3a;



  transition: 0.3s;

}



.pts-cart-qty button:hover {

  background: #1d4d3a;



  color: #fff;

}



.pts-cart-number {

  width: 38px;



  text-align: center;



  font-size: 15px;



  font-weight: 600;

}



/*=========================

      FOOTER

==========================*/



.pts-mini-footer {

  padding: 18px 22px;



  border-top: 1px solid #eee;



  background: #fff;

}



.pts-cart-total {

  display: flex;



  justify-content: space-between;



  align-items: center;



  margin-bottom: 15px;



  font-size: 18px;



  font-weight: 600;

}



.pts-total-price {

  color: #1d4d3a;

}



.pts-view-cart {

  display: block;



  width: 100%;



  padding: 15px;



  background: #1d4d3a;



  color: #fff;



  text-align: center;



  text-decoration: none;



  border-radius: 8px;



  font-size: 16px;



  font-weight: 600;



  transition: 0.3s;

}



.pts-view-cart:hover {

  background: #14392b;

}



/*=========================

    PRODUCT CARD QTY

==========================*/



.pts-qty-box {

  display: none;



  align-items: center;



  border: 1px solid #ddd;



  border-radius: 30px;



  overflow: hidden;



  height: 38px;

}



.pts-qty-box button {

  width: 34px;



  height: 38px;



  border: none;



  background: #fff;



  cursor: pointer;



  font-size: 18px;



  color: #1d4d3a;

}



.pts-qty {

  width: 35px;



  text-align: center;



  font-weight: 600;

}



.pts-add-btn {

  cursor: pointer;

}



.cart-badge {

  position: absolute;



  top: -8px;



  right: -8px;



  width: 20px;



  height: 20px;



  border-radius: 50%;



  background: #d71e28;



  color: #fff;



  display: flex;



  justify-content: center;



  align-items: center;



  font-size: 11px;



  font-weight: 700;

}



/* ==========================cart design============================== */

/*==================================================

            MINI CART - PART 1

==================================================*/



.pts-cart-wrapper {

  position: relative;

}



/*==========================

      MINI CART

===========================*/



.pts-mini-cart {

  position: absolute;

  top: 35px;

  right: -5px;

  width: 420px;

  background: #fff;

  border-radius: 16px;

  box-shadow:

    0 25px 70px rgba(0, 0, 0, 0.15),

    0 8px 20px rgba(0, 0, 0, 0.08);

  opacity: 0;

  visibility: hidden;

  transform: translateY(20px);

  transition: 0.35s ease;

  z-index: 999999;

}



.pts-mini-cart.active {

  opacity: 1;

  visibility: visible;



  transform: translateY(0);

}



/*==========================

        TOP ARROW

===========================*/



.pts-cart-arrow {

  position: absolute;



  top: -8px;

  right: 38px;



  width: 18px;

  height: 18px;



  background: #fff;



  transform: rotate(45deg);



  box-shadow: -4px -4px 8px rgba(0, 0, 0, 0.03);

}



/*==========================

        HEADER

===========================*/



.pts-mini-header {

  display: flex;



  align-items: center;



  justify-content: space-between;



  padding: 22px;



  border-bottom: 1px solid #efefef;



  background: #fff;

}



/*==========================

      SUCCESS MESSAGE

===========================*/



.pts-success-msg {

  display: flex;



  align-items: center;



  gap: 15px;

}



.pts-success-icon {

  width: 42px;

  height: 42px;



  border-radius: 50%;



  background: #1f5b42;



  display: flex;



  justify-content: center;



  align-items: center;



  flex-shrink: 0;

}



.pts-success-content {

  display: flex;



  flex-direction: column;

}



.pts-success-content h4 {

  margin: 0;



  font-size: 17px;



  font-weight: 600;



  color: #222;



  line-height: 24px;

}



.pts-success-content span {

  margin-top: 3px;



  font-size: 15px;



  color: #888;

}



/*==========================

        CLOSE BUTTON

===========================*/



.pts-cart-close {

  width: 38px;

  height: 38px;



  border: none;



  border-radius: 50%;



  background: #edf5f0;



  cursor: pointer;



  display: flex;



  justify-content: center;



  align-items: center;



  transition: 0.25s;



  flex-shrink: 0;

}



.pts-cart-close svg {

  width: 18px;



  height: 18px;

}



.pts-cart-close:hover {

  background: #1f5b42;

}



.pts-cart-close:hover svg path {

  stroke: #fff;

}



/*==========================

        BODY

===========================*/



.pts-cart-body {

  max-height: 380px;



  overflow-y: auto;



  background: #fff;



  padding: 10px 22px;

}



/* Scrollbar */



.pts-cart-body::-webkit-scrollbar {

  width: 6px;

}



.pts-cart-body::-webkit-scrollbar-track {

  background: #f3f3f3;

}



.pts-cart-body::-webkit-scrollbar-thumb {

  background: #d3d3d3;



  border-radius: 30px;

}



.pts-cart-body::-webkit-scrollbar-thumb:hover {

  background: #bdbdbd;

}



/*==========================

      OPEN ANIMATION

===========================*/



@keyframes ptsFadeIn {

  from {

    opacity: 0;



    transform: translateY(15px);

  }



  to {

    opacity: 1;



    transform: translateY(0);

  }

}



.pts-mini-cart.active {

  animation: ptsFadeIn 0.35s ease;

}

/*==================================================

            MINI CART - PART 2

        PRODUCT LIST DESIGN

==================================================*/



.pts-cart-item {

  display: flex;

  align-items: center;

  gap: 15px;



  padding: 18px 0;



  border-bottom: 1px solid #ececec;



  position: relative;

}



.pts-cart-item:last-child {

  border-bottom: none;

}



/*==========================

        IMAGE

===========================*/



.pts-cart-image,

.pts-cart-img {

  width: 78px;

  height: 78px;



  min-width: 78px;



  border-radius: 12px;



  overflow: hidden;



  background: #f8f8f8;



  border: 1px solid #ededed;

}



.pts-cart-image img,

.pts-cart-img img {

  width: 100%;

  height: 100%;



  object-fit: cover;



  display: block;

}



/*==========================

        DETAILS

===========================*/



.pts-cart-details,

.pts-cart-info {

  flex: 1;



  min-width: 0;

}



.pts-cart-details h4,

.pts-cart-info h4 {

  margin: 0;



  font-size: 15px;



  line-height: 22px;



  color: #222;



  font-weight: 600;



  overflow: hidden;



  display: -webkit-box;



  -webkit-line-clamp: 2;



  -webkit-box-orient: vertical;

}



.pts-cart-details p,

.pts-cart-info p {

  margin: 6px 0 0;



  font-size: 15px;



  color: #888;

}



.pts-cart-price,

.pts-cart-info h5 {

  margin-top: 10px;



  color: #1d4d3a;



  font-size: 18px;



  font-weight: 700;

}



/*==========================

      QUANTITY BOX

===========================*/



.pts-cart-qty {

  display: flex;



  align-items: center;



  border: 1px solid #dadada;



  border-radius: 50px;



  overflow: hidden;



  background: #fff;



  height: 38px;



  flex-shrink: 0;

}



/* Minus & Plus */



.pts-cart-qty button {

  width: 36px;



  height: 38px;



  border: none;



  background: #fff;



  cursor: pointer;



  font-size: 20px;



  color: #1d4d3a;



  transition: 0.3s;

}



.pts-cart-qty button:hover {

  background: #1d4d3a;



  color: #fff;

}



/* Quantity */



.pts-cart-number {

  width: 38px;



  text-align: center;



  font-size: 15px;



  font-weight: 600;



  color: #222;

}



/*==========================

        HOVER

===========================*/



.pts-cart-item:hover {

  background: #fafafa;

}



/*==========================

      PRODUCT CARD

===========================*/



.pts-qty-box {

  display: none;



  align-items: center;



  border: 1px solid #ddd;



  border-radius: 30px;



  overflow: hidden;



  height: 38px;



  background: #fff;

}



.pts-qty-box.show {

  display: flex;

}



.pts-qty-box button {

  width: 34px;



  height: 38px;



  border: none;



  background: #fff;



  cursor: pointer;



  font-size: 18px;



  color: #1d4d3a;



  transition: 0.3s;

}



.pts-qty-box button:hover {

  background: #1d4d3a;



  color: #fff;

}



.pts-qty {

  width: 36px;



  text-align: center;



  font-weight: 600;



  color: #222;

}



/*==========================

      ADD BUTTON

===========================*/



.pts-add-btn {

  width: 42px;



  height: 42px;



  border: none;



  border-radius: 50%;



  background: #1d4d3a;



  color: #fff;



  display: flex;



  align-items: center;



  justify-content: center;



  cursor: pointer;



  transition: 0.3s;



  flex-shrink: 0;

}



.pts-add-btn:hover {

  background: #14392b;



  transform: scale(1.05);

}



.pts-add-btn svg {

  width: 20px;



  height: 20px;

}



.pts-add-btn svg path {

  stroke: #fff;



  stroke-width: 2;



  stroke-linecap: round;

}



/* Hide Add Button */



.pts-add-btn.hide {

  display: none;

}

/*==================================================

        MINI CART - PART 3

        FOOTER + RESPONSIVE

==================================================*/



/*==========================

        FOOTER

===========================*/



.pts-mini-footer {

  background: #fff;

  border-top: 1px solid #ececec;

  padding: 20px;

}



.pts-cart-summary {

  margin-bottom: 18px;

}



.pts-subtotal {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.pts-subtotal span {

  font-size: 15px;

  color: #666;

}



.pts-total-price {

  font-size: 22px;

  font-weight: 700;

  color: #1d4d3a;

}



/*==========================

        BUTTONS

===========================*/



.pts-cart-buttons {

  display: flex;

  gap: 12px;

}



.pts-view-cart,

.pts-checkout {

  flex: 1;



  height: 48px;



  display: flex;

  align-items: center;

  justify-content: center;



  border-radius: 8px;



  text-decoration: none;



  font-size: 15px;

  font-weight: 600;



  transition: 0.3s;

}



.pts-view-cart {

  background: #fff;



  border: 1px solid #1d4d3a;



  color: #1d4d3a;

}



.pts-view-cart:hover {

  background: #1d4d3a;



  color: #fff;

}



.pts-checkout {

  background: #1d4d3a;



  color: #fff;

}



.pts-checkout:hover {

  background: #14392b;

}



/*==========================

        CART BADGE

===========================*/



.cart-badge {

  position: absolute;



  top: -8px;



  right: -8px;



  width: 20px;

  height: 20px;



  border-radius: 50%;



  background: #d93025;



  color: #fff;



  display: flex;

  align-items: center;

  justify-content: center;



  font-size: 11px;

  font-weight: 700;



  line-height: 1;

}



/*==========================

      EMPTY CART

===========================*/



.pts-empty-cart {

  padding: 60px 20px;



  text-align: center;

}



.pts-empty-cart img {

  width: 90px;



  opacity: 0.55;



  margin-bottom: 20px;

}



.pts-empty-cart h4 {

  margin: 0 0 10px;



  color: #333;



  font-size: 18px;

}



.pts-empty-cart p {

  margin: 0;



  color: #777;



  font-size: 15px;

}



/*==========================

      TRANSITIONS

===========================*/



.pts-cart-item,

.pts-cart-qty button,

.pts-view-cart,

.pts-checkout,

.pts-add-btn {

  transition: 0.3s ease;

}



/*==========================

      RESPONSIVE

===========================*/



@media (max-width: 1200px) {

  .pts-mini-cart {

    width: 390px;

  }

}



@media (max-width: 992px) {

  .pts-mini-cart {

    width: 360px;



    right: -10px;

  }

}



@media (max-width: 768px) {

  .pts-mini-cart {

    position: fixed;



    top: 70px;



    right: 15px;



    left: 15px;



    width: auto;



    max-height: 80vh;



    border-radius: 15px;

  }



  .pts-cart-body {

    max-height: 45vh;

  }

}



@media (max-width: 576px) {

  .pts-mini-cart {

    top: 0;



    left: 0;



    right: 0;



    width: 100%;



    height: 100vh;



    max-height: none;



    border-radius: 0;



    display: flex;



    flex-direction: column;

  }



  .pts-cart-body {

    flex: 1;



    max-height: none;

  }



  .pts-mini-footer {

    margin-top: auto;

  }



  .pts-cart-buttons {

    flex-direction: column;

  }



  .pts-view-cart,

  .pts-checkout {

    width: 100%;

  }



  .pts-cart-arrow {

    display: none;

  }

}



/*==========================

        FOCUS

===========================*/



button:focus,

a:focus {

  outline: none;

}



/*==========================

        ICON FIX

===========================*/



.pts-add-btn svg,

.pts-cart-close svg {

  display: block;

}



/*==========================

        IMAGE FIX

===========================*/



.pts-cart-img img,

.pts-cart-image img {

  vertical-align: middle;

}



/*==========================

      FINAL POLISH

===========================*/



.pts-mini-cart * {

  box-sizing: border-box;

}



.pts-cart-body {

  scroll-behavior: smooth;

}

/* ============================WRAPPER============================ */

.parapara-product-slider {

  padding: 40px;

}



/* CARD */

.parapara-card {

  background: #fff;

  border-radius: 10px;

  overflow: hidden;

  margin: 10px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);

}



/* IMAGE */

.parapara-img {

  position: relative;

  height: 220px;

  overflow: hidden;

}



.parapara-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 0.4s;

}



/* HOVER IMAGE */

.parapara-img img.second {

  position: absolute;

  top: 0;

  left: 0;

  opacity: 0;

}



.parapara-card:hover .second {

  opacity: 1;

}



/* RATING */

.parapara-rating {

  position: absolute;

  bottom: 10px;

  left: 10px;

  background: #fff;

  padding: 3px 8px;

  font-size: 12px;

  border-radius: 5px;

}



/* CONTENT */

.parapara-content {

  padding: 12px;

}



.parapara-title {

  font-size: 15px;

  margin-bottom: 6px;

}



.parapara-price {

  font-weight: bold;

  margin-top: 8px;

}



/* ADD BUTTON */

.parapara-add {

  position: absolute;

  right: 10px;

  bottom: 10px;

  background: #1a3a2a;

  color: #fff;

  width: 36px;

  height: 36px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 6px;

  cursor: pointer;

}



/* QUANTITY */

.parapara-qty {

  display: none;

  position: absolute;

  right: 10px;

  bottom: 10px;

  background: #fff;

  border: 1px solid #1a3a2a;

  border-radius: 6px;

  overflow: hidden;

}



.parapara-qty button {

  border: none;

  background: #1a3a2a;

  color: #fff;

  width: 30px;

  height: 30px;

  cursor: pointer;

}



.parapara-qty span {

  display: inline-block;

  width: 30px;

  text-align: center;

  line-height: 30px;

}



/* SLIDER ARROWS */

.slick-prev,

.slick-next {

  background: #fff;

  border-radius: 50%;

  width: 40px;

  height: 40px;

  z-index: 10;

}

.parapara-slider {

  position: relative;

}



.slider-arrow {

  position: absolute;

  top: 40%;

  width: 50px;

  height: 50px;

  border-radius: 50%;

  border: none;

  background: #0f5b42;

  color: #fff;

  font-size: 22px;

  cursor: pointer;

  z-index: 99999;



  display: flex;

  align-items: center;

  justify-content: center;

}



.slider-arrow.prev {

  left: -25px;

}



.slider-arrow.next {

  right: -25px;

}

/* =============================product list=========================== */

.pts-tabs {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 0;

  background: var(--pts-white);

  border: 1px solid var(--pts-border);

  border-radius: 999px;

  padding: 4px;

  width: fit-content;

  margin: 0 auto 32px;

  box-shadow: 0 2px 10px var(--pts-shadow);

}

.pp-products {

  padding: 30px 0;

}

.pts-tab-btn {

  appearance: none;

  border: none;

  background: transparent;

  cursor: pointer;

  font-size: 15px;

  font-weight: 600;

  letter-spacing: 0.01em;

  padding: 10px 22px;

  border-radius: 999px;

  color: var(--pts-text-dark);

  transition:

    background 0.35s ease,

    color 0.35s ease,

    transform 0.2s ease;

  white-space: nowrap;

}



.pts-tab-btn:hover {

  color: var(--pts-green-dark);

}



.pts-tab-active,

.pts-tab-active:hover {

  background: var(--pts-green-dark);

  color: var(--pts-white);

}



.pts-tab-btn:active {

  transform: scale(0.97);

}



/* ---------------- Slider area / nav ---------------- */



.pts-slider-area {

  position: relative;

  display: flex;

  align-items: center;

  gap: 8px;

}



.pts-nav {

  flex: 0 0 auto;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  border: 1px solid var(--pts-border);

  background: var(--pts-white);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  box-shadow: 0 4px 12px var(--pts-shadow);

  transition:

    transform 0.2s ease,

    box-shadow 0.3s ease,

    background 0.3s ease;

  z-index: 2;

}



.pts-nav svg {

  width: 18px;

  height: 18px;

  fill: none;

  stroke: var(--pts-text-dark);

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;

  transition: stroke 0.3s ease;

}



.pts-nav:hover {

  background: var(--pts-green-dark);

  box-shadow: 0 6px 16px var(--pts-shadow-hover);

  transform: translateY(-2px);

}



.pts-nav:hover svg {

  stroke: var(--pts-white);

}



.pts-nav:active {

  transform: translateY(0) scale(0.94);

}



.pts-nav:disabled {

  opacity: 0.35;

  cursor: not-allowed;

  pointer-events: none;

}



.pts-viewport {

  overflow: hidden;

  flex: 1 1 auto;

  width: 100%;

}



.pts-track {

  position: relative;

}



/* ---------------- Panels (tab content) ---------------- */



.pts-panel {

  display: none;

}



.pts-panel-active {

  display: block;

  animation: pts-panel-fade 0.45s ease;

}



@keyframes pts-panel-fade {

  from {

    opacity: 0;

    transform: translateY(6px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.pts-cards-row {

  display: flex;

  gap: 20px;

  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);

  will-change: transform;

}



/* ---------------- Card ---------------- */



.pts-card {

  flex: 0 0 calc((100% - 60px) / 4);

  background: var(--pts-white);

  border: 1px solid var(--pts-border);

  border-radius: 15px;

  overflow: hidden;

  opacity: 0;

  transform: translateY(16px) scale(0.97);

  animation: pts-card-rise 0.55s ease forwards;

  transition:

    transform 0.35s ease,

    box-shadow 0.35s ease,

    border-color 0.35s ease;

}



.pts-panel-active .pts-card:nth-child(1) {

  animation-delay: 0.05s;

}



.pts-panel-active .pts-card:nth-child(2) {

  animation-delay: 0.12s;

}



.pts-panel-active .pts-card:nth-child(3) {

  animation-delay: 0.19s;

}



.pts-panel-active .pts-card:nth-child(4) {

  animation-delay: 0.26s;

}



.pts-panel-active .pts-card:nth-child(5) {

  animation-delay: 0.33s;

}



@keyframes pts-card-rise {

  to {

    opacity: 1;

    transform: translateY(0) scale(1);

  }

}



.pts-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 16px 30px var(--pts-shadow-hover);

  border-color: transparent;

}



.pts-card-image {

  position: relative;

  width: 100%;

  background-size: cover;

  background-position: center;

  overflow: hidden;

}

.pts-card-image img {

  width: 100%;

}

.pts-card-image::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg,

      rgba(0, 0, 0, 0) 60%,

      rgba(0, 0, 0, 0.06) 100%);

  opacity: 0;

  transition: opacity 0.4s ease;

}



.pts-card:hover .pts-card-image::after {

  opacity: 1;

}



.pts-card:hover .pts-card-image {

  transform: scale(1.015);

}



.pts-card-image {

  transition: transform 0.5s ease;

}



/* placeholder gradients standing in for product photography */

.pts-bg-hairfall,

.pts-bg-rosegold {

  background: linear-gradient(160deg, #efe2d2 0%, #1d1d1d 55%, #0c0c0c 100%);

  width: 100%;

}

.pts-bg-neemwash,

.pts-bg-green {

  background: linear-gradient(160deg, #c9d9b8 0%, #7fa05c 55%, #4f6b39 100%);

}



.pts-bg-pearlsaffron,

.pts-bg-lavender {

  background: linear-gradient(160deg, #f3e3ee 0%, #e7c9de 55%, #d9b6cf 100%);

}



.pts-bg-gumcare,

.pts-bg-blue {

  background: linear-gradient(160deg, #bfe3f2 0%, #5fb6dd 55%, #2f8fc0 100%);

}



.pts-img-tag {

  position: absolute;

  inset: 0;

}

.pts-card-image {

  position: relative;

  overflow: hidden;

}



.pts-card-image img {

  width: 100%;

  display: block;

  transition: all 0.4s ease;

}



.pts-img-default {

  opacity: 1;

  transform: scale(1);

}



.pts-img-hover {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;



  opacity: 0;

  transform: scale(1.08);

}



/* Hover */



.pts-card:hover .pts-img-default {

  opacity: 0;

  transform: scale(1.08);

}



.pts-card:hover .pts-img-hover {

  opacity: 1;

  transform: scale(1);

}

/* ---------------- Card body ---------------- */



.pts-card-body {

  padding: 15px 15px 16px;

}



.pts-rating-row {

  margin-bottom: 8px;

}



.pts-rating-pill {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  background: var(--pts-bg-soft);

  border-radius: 999px;

  padding: 3px 9px;

  font-size: 12px;

  font-weight: 700;

  color: var(--pts-text-dark);

}



.pts-star {

  color: var(--pts-yellow);

  font-size: 12px;

  line-height: 1;

}



.pts-card-body h4 {
 overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  margin: 0 0 6px;

  font-size: 28px;

  color: var(--pts-text-dark);

  font-family: "Marcellus";

}



.pts-card-body p {

  margin: 0 0 15px;

  font-size: 15px;

  line-height: 1.5;

  color: var(--pts-text-body);

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.pts-price-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.pts-price-group {

  display: flex;

  align-items: baseline;

  gap: 6px;

}



.pts-price-now {
font-family: 'Figtree';
  font-size: 26px;

  font-weight: 700;

  color: var(--pts-text-dark);

}



.pts-price-old {

  font-size: 16px;

  text-decoration: line-through;

  color: var(--pts-price-old);

}



.pts-add-btn {

  width: 32px;

  height: 32px;

  border-radius: 8px;

  border: none;

  background: var(--pts-green-dark);

  color: var(--pts-white);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition:

    background 0.3s ease,

    transform 0.2s ease;

}



.pts-add-btn svg {

  width: 16px;

  height: 16px;

  fill: none;

  stroke: currentColor;

  stroke-width: 2.4;

  stroke-linecap: round;

}



.pts-add-btn:hover {

  background: var(--pts-green-darker);

  transform: scale(1.08) rotate(90deg);

}



.pts-add-btn:active {

  transform: scale(0.92) rotate(90deg);

}



/* ---------------- Dots ---------------- */



.pts-dots {

  display: flex;

  justify-content: center;

  gap: 8px;

  margin-top: 22px;

}



.pts-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--pts-border);

  border: none;

  cursor: pointer;

  padding: 0;

  transition:

    background 0.3s ease,

    width 0.3s ease,

    border-radius 0.3s ease;

}



.pts-dot-active {

  background: var(--pts-green-dark);

  width: 18px;

  border-radius: 4px;

}



/* ---------------- Responsive ---------------- */



@media (max-width: 1024px) {

  .pts-card {

    flex: 0 0 calc((100% - 40px) / 3);

  }

}



@media (max-width: 720px) {

  .pts-card {

    flex: 0 0 calc((100% - 20px) / 2);

  }



  .pts-tabs {

    overflow-x: auto;

    border-radius: 999px;

  }



  .pts-tab-btn {

    padding: 2px 9px;

    font-size: 15px;

  }



  .pts-nav {

    width: 34px;

    height: 34px;

  }

}



@media (max-width: 480px) {

  .pts-card {

    flex: 0 0 100%;

  }



  .pts-wrapper {

    padding: 20px 0;

  }



  .pts-card-body h4 {

    font-size: 15px;

  }

}



/* ---------------- Reduced motion ---------------- */



@media (prefers-reduced-motion: reduce) {

  .pts-card,

  .pts-panel-active,

  .pts-cards-row,

  .pts-nav,

  .pts-add-btn,

  .pts-card-image {

    animation: none !important;

    transition: none !important;

  }

}

/* ==========================story section==================== */

/*==============================

Story Section

==============================*/



.story-section {

  padding: 30px 0;

  background: #f8f8f2;

  overflow: hidden;

}

.story-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  align-items: center;

  gap: 20px;

}



.story-row:last-child {

  margin-bottom: 0;

}



/*==============================

Images

==============================*/



.story-image {

  width: 100%;

  overflow: hidden;

  border-radius: 6px;

}



.story-image img {

  width: 100%;

  display: block;

  transition: 0.8s ease;

  transform: scale(1);

}



.story-image:hover img {

  transform: scale(1.08);

}



/*==============================

Content

==============================*/



.story-content {

  width: 100%;

}



.story-content h3 {

  font-size: 28px;

  color: #23473e;

  line-height: 1.2;

  margin-bottom: 22px;

  font-weight: 500;

  font-family: "Marcellus", serif;

}



.story-content p {

  margin: 0;

  color: #666;

  font-size: 15px;

  line-height: 1.9;

  font-family: "Poppins", sans-serif;

}



/*==============================

Animation

==============================*/



.story-row {

  opacity: 0;

  transform: translateY(70px);

  animation: fadeUp 1s ease forwards;

}



.story-row:nth-child(2) {

  animation-delay: 0.2s;

}



.story-row:nth-child(3) {

  animation-delay: 0.4s;

}



.story-row:nth-child(4) {

  animation-delay: 0.6s;

}



@keyframes fadeUp {

  from {

    opacity: 0;

    transform: translateY(70px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/*==============================

Hover Text

==============================*/



.story-content h3 {

  transition: 0.35s;

}



.story-row:hover h3 {

  color: #b68a35;

}



/*==============================

Tablet

==============================*/



@media (max-width: 1199px) {

  .story-row {

    gap: 50px;

  }



  .story-content h3 {

    font-size: 34px;

  }



  .story-section h2 {

    font-size: 38px;

  }

}



/*==============================

991px

==============================*/



@media (max-width: 991px) {

  .story-row {

    gap: 40px;

  }



  .story-content h3 {

    font-size: 30px;

  }



  .story-content p {

    font-size: 15px;

  }



  .story-section {

    padding: 80px 0;

  }



  .story-section h2 {

    font-size: 34px;

    margin-bottom: 60px;

  }

}



/*==============================

Mobile

==============================*/



@media (max-width: 767px) {

  .story-row {

    grid-template-columns: 1fr;

    gap: 30px;

    margin-bottom: 60px;

  }



  .story-image {

    order: 1;

  }



  .story-content {

    order: 2;

    text-align: center;

  }



  .story-content h3 {

    font-size: 28px;

  }



  .story-content p {

    font-size: 15px;

    line-height: 1.8;

  }



  .story-section {

    padding: 70px 0;

  }



  .story-section h2 {

    font-size: 30px;

    margin-bottom: 45px;

  }

}



/*==============================

Small Mobile

==============================*/



@media (max-width: 575px) {

  .story-section .container {

    width: 92%;

  }



  .story-content h3 {

    font-size: 24px;

  }



  .story-content p {

    font-size: 15px;

  }



  .story-section h2 {

    font-size: 26px;

  }



  .story-row {

    gap: 25px;

    margin-bottom: 45px;

  }



  .story-image {

    border-radius: 4px;

  }



  .story-image img:hover {

    transform: scale(1.05);

  }

}



/* ==================================testimonial===================================== */

/* =========================

   WRAPPER

========================= */

.testimonial-wrapper {}



/* =========================

   FORCE SLICK ARROWS VISIBLE

========================= */

.slick-prev,

.slick-next {

  width: 55px;

  height: 55px;

  border-radius: 50%;

  background: #ffffff !important;

  border: 1px solid #e5e5e5;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);

  z-index: 9999;



  display: flex !important;

  align-items: center;

  justify-content: center;

}



/* REMOVE DEFAULT SLICK ICON ISSUE */

.slick-prev:before,

.slick-next:before {

  font-size: 20px;

  color: #173561;

  opacity: 1;

}



/* ARROW POSITION (IMPORTANT FIX) */

.slick-prev {

  left: -70px !important;

}



.slick-next {

  right: -70px !important;

}

.testimonial-slide-group {
    margin: 30px 20px;
    align-items: center;
    justify-items: center;
    height: 360px;
}

.slick-prev,

.slick-next {

  width: 55px !important;

  height: 55px !important;

  background: #fff !important;

  border-radius: 50%;

  border: 1px solid #ddd;

  z-index: 9999 !important;

  display: flex !important;

  align-items: center;

  justify-content: center;

}



/* FORCE ICON */

.slick-prev:before {

  content: "‹" !important;

  font-size: 28px !important;

  color: #173561 !important;

}



.slick-next:before {

  content: "›" !important;

  font-size: 28px !important;

  color: #173561 !important;

}



.slider-arrows {

  display: flex;

  justify-content: space-between;

  margin-top: 20px;

  width: 100%;

}



.prev-btn,

.next-btn {

  width: 55px;

  height: 55px;

  border-radius: 50%;

  background: #fff;

  border: 1px solid #ddd;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);

  font-size: 28px;

  color: #173561;

  cursor: pointer;

}

/* =========================

   MOBILE RESPONSIVE FIX

========================= */

@media (max-width: 768px) {

  .slick-prev {

    left: 10px !important;

  }



  .slick-next {

    right: 10px !important;

  }



  .slick-prev,

  .slick-next {

    width: 45px;

    height: 45px;

  }

}

.testimonial-section {

  font-family: "Poppins", sans-serif;

  background:

    radial-gradient(circle at 8% 12%, rgba(212, 168, 67, 0.1), transparent 40%),

    radial-gradient(circle at 92% 85%, rgba(31, 77, 44, 0.1), transparent 45%),

    var(--cream);

  padding: 30px 0px;

  position: relative;

  overflow: hidden;

}



/* decorative leaf-vein background motif */

.leaf-decor {

  position: absolute;

  width: 480px;

  height: 480px;

  opacity: 0.08;

  pointer-events: none;

}

.leaf-decor--one {

  top: -120px;

  left: -140px;

  transform: rotate(25deg);

}

.leaf-decor--two {

  bottom: -160px;

  right: -150px;

  transform: rotate(-15deg);

}

.leaf-decor svg {

  width: 100%;

  height: 100%;

}



.testimonial-heading-wrap {

  text-align: center;

  max-width: 640px;

  margin: 0 auto 35px;

  position: relative;

  z-index: 2;

}



.testimonial-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: var(--terracotta);

  font-size: 15px;

  letter-spacing: 3px;

  text-transform: uppercase;

  font-weight: 600;

  margin-bottom: 15px;

}

.testimonial-eyebrow::before,

.testimonial-eyebrow::after {

  content: "";

  width: 26px;

  height: 1px;

  background: var(--terracotta);

  display: inline-block;

}



.testimonial-heading-wrap h2 {

  font-family: "Marcellus", serif;

  font-weight: 600;

  font-size: 42px;

  color: var(--forest-deep);

  line-height: 1.2;

}



.testimonial-heading-wrap h2 em {

  font-style: italic;

  color: var(--terracotta);

}



.testimonial-heading-wrap p {

  margin-top: 15px;

  color: #5c5a4f;

  font-size: 15.5px;

  line-height: 1.6;

}



/* ---------- Carousel core (CSS only) ---------- */

.testimonial-carousel {

  position: relative;

  max-width: 1080px;

  margin: 0 auto;

  z-index: 2;

}



.testimonial-track-wrap {

  border-radius: 28px;

}



.testimonial-track {

  display: flex;

  width: 400%;

  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);

}



.testimonial-radio {

  display: none;

}



/* ---------- Testimonial Card ---------- */

.testimonial-card {
    height: 100%;
  background: var(--white);

  border-radius: 24px;

  padding: 46px 44px 38px;

  width: 100%;

  max-width: 760px;

  position: relative;

  box-shadow:

    0 18px 45px -18px rgba(22, 58, 32, 0.28),

    0 2px 6px rgba(22, 58, 32, 0.06);

  border: 1px solid rgba(212, 168, 67, 0.25);

  display: flex;

  flex-direction: column;

  gap: 22px;

  animation: t-card-rise 0.6s ease both;

}



@keyframes t-card-rise {

  from {

    opacity: 0;

    transform: translateY(18px) scale(0.98);

  }

  to {

    opacity: 1;

    transform: translateY(0) scale(1);

  }

}



.testimonial-quote-mark {

  width: 54px;

  height: 54px;

  position: absolute;

  top: -22px;

  left: 40px;

  background: linear-gradient(145deg,

      var(--terracotta),

      var(--terracotta-soft));

  border-radius: 16px 16px 16px 4px;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 10px 22px -8px rgba(197, 99, 31, 0.55);

  transform: rotate(-6deg);

}



.testimonial-quote-mark svg {

  width: 24px;

  height: 24px;

  fill: var(--white);

}



.testimonial-stars {

  display: flex;

  gap: 5px;

  margin-top: 15px;

}



.testimonial-stars svg {

  width: 17px;

  height: 17px;

  fill: var(--gold);

}



.testimonial-quote-text {

  font-family: "Marcellus", serif;

  font-style: italic;

  font-weight: 500;

  font-size: 21px;

  line-height: 1.62;

  color: var(--ink);

}

.testimonial-quote-text p {

  margin: 0;

  color: #666;

  font-size: 15px;

  line-height: 1.9;

  font-family: "Poppins", sans-serif;

}

.testimonial-divider {

  width: 46px;

  height: 3px;

  background: linear-gradient(90deg, var(--gold), var(--terracotta));

  border-radius: 3px;

}



.testimonial-profile-row {

  display: flex;

  align-items: center;

  gap: 16px;

  margin-top: 4px;

}



.testimonial-avatar {

  width: 58px;

  height: 58px;

  border-radius: 50%;

  flex-shrink: 0;

  object-fit: cover;

  border: 3px solid var(--cream-deep);

  box-shadow: 0 0 0 3px rgba(31, 77, 44, 0.12);

}



.testimonial-profile-info h4 {

  font-family: "Marcellus", serif;

  font-weight: 600;

  font-size: 17px;

  color: var(--forest-deep);

}



.testimonial-profile-info p {

  font-size: 15px;

  color: var(--terracotta);

  font-weight: 500;

  letter-spacing: 0.3px;

  margin-top: 2px;

  margin: 0;

}



.testimonial-badge {

  margin-left: auto;

  display: flex;

  align-items: center;

  gap: 6px;

  background: var(--cream-deep);

  color: var(--forest);

  font-size: 12px;

  font-weight: 600;

  padding: 7px 15px;

  border-radius: 30px;

  white-space: nowrap;

}



.testimonial-badge svg {

  width: 15px;

  height: 15px;

  fill: var(--forest);

}



/* ---------- Nav arrows (prev/next via label-for hidden radios) ---------- */

.testimonial-nav {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 30px;

  margin-top: 38px;

}



.testimonial-arrow {

  width: 46px;

  height: 46px;

  border-radius: 50%;

  background: var(--white);

  border: 1.5px solid rgba(31, 77, 44, 0.18);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.3s ease;

  box-shadow: 0 6px 16px -8px rgba(22, 58, 32, 0.2);

}



.testimonial-arrow:hover {

  background: var(--forest);

  border-color: var(--forest);

  transform: translateY(-2px);

}



.testimonial-arrow svg {

  width: 17px;

  height: 17px;

  stroke: var(--forest);

  transition: stroke 0.3s ease;

}



.testimonial-arrow:hover svg {

  stroke: var(--white);

}



.testimonial-dots {

  display: flex;

  gap: 10px;

}



.testimonial-dot-label {

  width: 9px;

  height: 9px;

  border-radius: 50%;

  background: rgba(31, 77, 44, 0.22);

  cursor: pointer;

  display: block;

  transition: all 0.35s ease;

}



/* dot active-state styling, driven purely by which radio is :checked */

#t-slide-1:checked~.testimonial-nav label[for="t-slide-1"] {

  background: var(--terracotta);

  width: 26px;

  border-radius: 6px;

}

#t-slide-2:checked~.testimonial-nav label[for="t-slide-2"] {

  background: var(--terracotta);

  width: 26px;

  border-radius: 6px;

}

#t-slide-3:checked~.testimonial-nav label[for="t-slide-3"] {

  background: var(--terracotta);

  width: 26px;

  border-radius: 6px;

}

#t-slide-4:checked~.testimonial-nav label[for="t-slide-4"] {

  background: var(--terracotta);

  width: 26px;

  border-radius: 6px;

}



/* show only the prev/next arrow pair that matches the active slide */

.testimonial-arrow-set {

  display: none;

  align-items: center;

  gap: 30px;

}

#t-slide-1:checked~.testimonial-nav .testimonial-arrow-set--1,

#t-slide-2:checked~.testimonial-nav .testimonial-arrow-set--2,

#t-slide-3:checked~.testimonial-nav .testimonial-arrow-set--3,

#t-slide-4:checked~.testimonial-nav .testimonial-arrow-set--4 {

  display: flex;

}



/* ambient floating accent on the card */

.testimonial-leaf-accent {

  position: absolute;

  top: -16px;

  right: -16px;

  width: 64px;

  height: 64px;

  opacity: 0.9;

  animation: t-leaf-float 4.5s ease-in-out infinite;

}

.testimonial-leaf-accent svg {

  width: 100%;

  height: 100%;

}



@keyframes t-leaf-float {

  0%,

  100% {

    transform: translateY(0) rotate(0deg);

  }

  50% {

    transform: translateY(-8px) rotate(8deg);

  }

}



/* ---------- Responsive ---------- */

@media (max-width: 860px) {

  .testimonial-heading-wrap h2 {

    font-size: 34px;

  }

  .testimonial-card {

    padding: 40px 30px 32px;

    max-width: 90%;

  }

  .testimonial-quote-text {

    font-size: 19px;

  }

}



@media (max-width: 600px) {

  .testimonial-section {

    padding: 60px 0;

  }

  .testimonial-heading-wrap h2 {

    font-size: 27px;

  }

  .testimonial-heading-wrap p {

    font-size: 15px;

  }

  .testimonial-card {

    padding: 34px 22px 26px;

    border-radius: 20px;

    gap: 16px;

  }

  .testimonial-quote-mark {

    width: 46px;

    height: 46px;

    left: 24px;

    top: -18px;

  }

  .testimonial-quote-mark svg {

    width: 20px;

    height: 20px;

  }

  .testimonial-quote-text {

    font-size: 16.5px;

    line-height: 1.55;

  }

  .testimonial-profile-row {

    flex-wrap: wrap;

    row-gap: 10px;

  }

  .testimonial-badge {

    margin-left: 0;

  }

  .testimonial-avatar {

    width: 48px;

    height: 48px;

  }

  .testimonial-nav {

    gap: 18px;

    margin-top: 28px;

  }

  .testimonial-arrow {

    width: 40px;

    height: 40px;

  }

  .leaf-decor {

    width: 280px;

    height: 280px;

  }

}

.slider-controls {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 10px;

  margin-top: 0px;

}



/* arrows */

.prev-btn,

.next-btn {

  width: 55px;

  height: 55px;

  border-radius: 50%;

  background: #fff;

  border: 1px solid #ddd;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);

  font-size: 26px;

  color: #173561;

  cursor: pointer;

}



/* dots center */

.dots-area ul {

  display: flex !important;

  gap: 8px;

  padding: 0;

  margin: 0;

  list-style: none;

}



.dots-area li button:before {

  font-size: 10px;

  color: #cfcfcf;

}



.dots-area li.slick-active button:before {

  color: #173561;

}

/* ================================expersts=============================== */

.experts {

  --hfe-bg: #eef1e7;

  --hfe-heading: #2f4f43;

  --hfe-text-dark: #24291f;

  --hfe-text-body: #6b7064;

  --hfe-price-old: #9aa194;

  --hfe-white: #ffffff;

  --hfe-shadow: rgba(36, 41, 31, 0.1);

  --hfe-shadow-hover: rgba(36, 41, 31, 0.22);

  background: var(--hfe-bg);

  padding: 20px 0;

}

.youtube-short {

  width: 100%;

  aspect-ratio: 8/10;

  margin: auto;

}



.youtube-short iframe {

  width: 100%;

  height: 100%;

  border: 0;

  border-radius: 12px;

}



.hfe-slider-area {

  position: relative;

  display: flex;

  align-items: center;

  gap: 10px;

}



.hfe-nav {

  flex: 0 0 auto;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  border: 1px solid rgba(36, 41, 31, 0.1);

  background: var(--hfe-white);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  box-shadow: 0 4px 12px var(--hfe-shadow);

  transition:

    transform 0.2s ease,

    box-shadow 0.3s ease,

    background 0.3s ease;

  z-index: 2;

}



.hfe-nav svg {

  width: 18px;

  height: 18px;

  fill: none;

  stroke: var(--hfe-text-dark);

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;

  transition: stroke 0.3s ease;

}



.hfe-nav:hover {

  background: var(--hfe-heading);

  box-shadow: 0 6px 18px var(--hfe-shadow-hover);

  transform: translateY(-2px);

}



.hfe-nav:hover svg {

  stroke: var(--hfe-white);

}



.hfe-nav:active {

  transform: translateY(0) scale(0.94);

}



.hfe-nav:disabled {

  opacity: 0.35;

  cursor: not-allowed;

  pointer-events: none;

}



.hfe-viewport {

  overflow: hidden;

  flex: 1 1 auto;

  width: 100%;

}



.hfe-track {

  display: flex;

  gap: 20px;

  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);

  will-change: transform;

}



/* ---------------- Card ---------------- */



.hfe-card {

  flex: 0 0 calc((100% - 60px) / 4);

  display: flex;

  flex-direction: column;

  opacity: 0;

  transform: translateY(18px) scale(0.97);

  animation: hfe-card-rise 0.6s ease forwards;

}



.hfe-card:nth-child(1) {

  animation-delay: 0.05s;

}



.hfe-card:nth-child(2) {

  animation-delay: 0.14s;

}



.hfe-card:nth-child(3) {

  animation-delay: 0.23s;

}



.hfe-card:nth-child(4) {

  animation-delay: 0.32s;

}



.hfe-card:nth-child(5) {

  animation-delay: 0.41s;

}



.hfe-card:nth-child(6) {

  animation-delay: 0.5s;

}



@keyframes hfe-card-rise {

  to {

    opacity: 1;

    transform: translateY(0) scale(1);

  }

}



.hfe-media::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg,

      rgba(0, 0, 0, 0) 55%,

      rgba(0, 0, 0, 0.28) 100%);

  opacity: 0;

  transition: opacity 0.4s ease;

}



.hfe-card:hover .hfe-media {

  transform: translateY(-8px);

  box-shadow: 0 20px 34px var(--hfe-shadow-hover);

  transition: 0.3s all;

}

.hfe-card:hover {

  transition: 0.3s all;

}

.hfe-card:hover .hfe-media::after {

  opacity: 1;

}

.hfe-play-icon img {

  width: 100%;

}

.hfe-card:hover .hfe-play-icon {

  opacity: 1;

  transform: scale(1);

}



.hfe-play-icon svg {

  width: 16px;

  height: 16px;

  fill: var(--hfe-heading);

  margin-left: 1px;

}



.hfe-card h4 {
    text-align: center;
  margin: 0 0 6px;

  font-size: 17px;

  font-weight: 500;

  color: var(--hfe-text-dark);

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  padding-top: 20px;

}



.hfe-price-row {

  display: flex;

  align-items: baseline;
    text-align: center;
    margin-top: 20px;
  gap: 8px;

}



.hfe-price-now {

  font-size: 19px;

  font-weight: 700;

  color: var(--hfe-text-dark);

}



.hfe-price-old {

  font-size: 15px;

  text-decoration: line-through;

  color: var(--hfe-price-old);

}



/* ---------------- Dots ---------------- */



.hfe-dots {

  display: flex;

  justify-content: center;

  gap: 8px;

  margin-top: 28px;

}



.hfe-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: rgba(36, 41, 31, 0.18);

  border: none;

  cursor: pointer;

  padding: 0;

  transition:

    background 0.3s ease,

    width 0.3s ease,

    border-radius 0.3s ease;

}



.hfe-dot-active {

  background: var(--hfe-heading);

  width: 18px;

  border-radius: 4px;

}



/* ---------------- Responsive ---------------- */



@media (max-width: 1024px) {

  .hfe-card {

    flex: 0 0 calc((100% - 40px) / 3);

  }

}



@media (max-width: 720px) {

  .hfe-card {

    flex: 0 0 calc((100% - 20px) / 2);

  }



  .hfe-wrapper h2 {

    font-size: 22px;

  }



  .hfe-nav {

    width: 34px;

    height: 34px;

  }

}



@media (max-width: 480px) {

  .hfe-card {

    flex: 0 0 100%;

  }



  .hfe-wrapper {

    padding: 28px 0;

  }



  .hfe-card h4 {

    font-size: 15px;

  }

}



/* ---------------- Reduced motion ---------------- */



@media (prefers-reduced-motion: reduce) {

  .hfe-card,

  .hfe-media,

  .hfe-track,

  .hfe-nav,

  .hfe-play-icon {

    animation: none !important;

    transition: none !important;

  }

}



/* ==========================ingredients=============================== */

.ph-root {

  background: #fff;

  padding: 30px 0;

  font-family: "Marcellus", serif;

  color: var(--ph-ink);

  overflow: hidden;

  background-image: url(../images/in-back.jpg);

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

}



.ph-root .cmn-heading h2 {

  margin-bottom: 0;

}



/* HEADER */

.ph-heading-row {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 24px;

  margin-bottom: 30px;

}



.ph-eyebrow {

  font-size: 12px;

  letter-spacing: 0.32em;

  text-transform: uppercase;

  color: var(--ph-terracotta);

  margin: 0 0 10px;

  font-weight: 600;

}



.ph-title {

  font-weight: 500;

  font-size: clamp(28px, 4vw, 44px);

  line-height: 1.05;

  margin: 0;

  color: var(--ph-forest-deep);

  max-width: 560px;

  font-style: italic;

}



.ph-nav-controls {

  display: flex;

  gap: 12px;

}



.ph-arrow-btn {

  width: 52px;

  height: 52px;

  border-radius: 50%;

  border: 1px solid var(--ph-line);

  background: var(--ph-parchment);

  color: var(--ph-forest-deep);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.35s ease;

  box-shadow: 0 2px 0 rgba(28, 36, 23, 0.06);

}



.ph-arrow-btn svg {

  width: 18px;

  height: 18px;

  stroke: currentColor;

}



.ph-arrow-btn:hover {

  background: var(--ph-forest-deep);

  border-color: var(--ph-forest-deep);

  color: var(--ph-parchment);

  transform: translateY(-2px);

}



.ph-arrow-btn:disabled {

  opacity: 0.3;

  cursor: not-allowed;

  transform: none;

}



/* TRACK WRAP */

.ph-track-wrap {

  position: relative;

  margin: 0 auto;

}



.ph-fade-edge {

  position: absolute;

  top: 0;

  bottom: 28px;

  width: 90px;

  pointer-events: none;

  z-index: 3;

}

.ph-viewport {

  overflow: hidden;

}



.ph-track {

  width: 100%;

}



.ph-track .slick-list {

  overflow: hidden;

}



.ph-track .slick-track {

  display: flex;

  align-items: stretch;

}



.ph-track .slick-slide {

  padding: 8px 0px;

  height: auto;

}



.ph-card {

  width: 100%;

  margin: 0 auto;

}



/* =========================

   ✅ 5 ITEMS PER VIEW (DESKTOP)

========================= */

@media (min-width:1200px) {



  .ph-track .slick-slide {

    width: auto;

  }



}



/* CARD */

.ph-card {

  position: relative;

  width: 168px;

  flex: 0 0 auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-decoration: none;

  color: inherit;

  cursor: pointer;

}



/* STAGE */

.ph-card-stage {

  position: relative;

  width: 168px;

  height: 168px;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* ORBIT */

.ph-orbit {

  position: absolute;

  inset: -5px;

  border-radius: 50%;

  border: 1px dashed rgb(255 255 255 / 90%);

  transition: 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);

  margin: 5px;

}



.ph-card:hover .ph-orbit {

  transform: rotate(160deg);

  border-color: var(--ph-terracotta);

}



/* IMAGE MASK */

.ph-leaf-mask {

  position: relative;

  width: 148px;

  height: 148px;

  overflow: hidden;

  background: var(--ph-forest);

  clip-path: path("M74 4C112 4 144 30 144 70C144 112 116 144 74 144C32 144 4 112 4 70C4 30 36 4 74 4Z"

    );

  box-shadow: 0 10px 26px rgba(22, 42, 27, 0.18);

  transition: 0.6s ease;

}





/* IMAGE */

.ph-leaf-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.7s ease;
}





/* SHEEN */

.ph-sheen {

  position: absolute;

  inset: 0;

  background: linear-gradient(115deg,

      rgba(255, 255, 255, 0.32),

      transparent 28%);

  mix-blend-mode: soft-light;

}



/* INDEX */

.ph-index {

  position: absolute;

  top: 2px;

  right: 6px;

  opacity: 1;

  transition: 0.4s ease;

  font-size: 15px;

  color: #000000;

  font-family: "Figtree";

  background-color: #fff;

  width: 30px;

  height: 30px;

  border-radius: 100px;

  font-weight: 700;

  align-items: center;

  display: flex;

  justify-content: center;

}



.ph-card:hover .ph-index {

  opacity: 1;

}



/* TEXT */

.ph-card-plate {

  margin-top: 20px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

}



.ph-card-plate-rule {

  width: 22px;

  height: 1px;

  background: var(--ph-line);

  transition: 0.4s ease;

}



.ph-card:hover .ph-card-plate-rule {

  width: 38px;

  background: var(--ph-terracotta);

}



.ph-herb-name {

  font-size: 34px;

  text-align: center;

  transition: 0.3s ease;

  color: #eee;

}



.ph-card:hover .ph-herb-name {

  color: var(--ph-terracotta);

}



.ph-herb-tag {

  font-size: 16px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--ph-sage);

  margin: 0;

}



/* MOBILE */

@media (max-width: 720px) {

  .ph-heading-row {

    flex-direction: column;

    align-items: flex-start;

    padding: 0 18px;

  }



  .ph-track-wrap {

    padding: 0 18px;
    margin-bottom: 10px;

  }



  .ph-track {

    gap: 18px;

  }

}

.ph-root .cmn-heading h2 {

  font-size: 32px;

  margin-bottom: 20px;

  font-family: "Marcellus", serif;

  color: #ffffff;

}

/* =======================================footer===================================== */



.ftr-wrapper {

  --ftr-newsletter-bg: #f2f5ed;

  --ftr-disclaimer-bg: #093225;

  --ftr-main-bg: #1e4b3c;

  --ftr-gold: #ad8b3a;

  --ftr-petal: #d96b8a;

  --ftr-heading-dark: #1e4b3c;

  --ftr-white: #ffffff;

  --ftr-muted-light: rgba(255, 255, 255, 0.78);

  --ftr-muted-lighter: rgba(255, 255, 255, 0.6);

  --ftr-border-soft: rgba(83, 117, 104, 0.6);

  --ftr-link-hover: #f2f5ed;

  width: 100%;

}



/* ---------------- Newsletter ---------------- */



.ftr-newsletter {

  background: var(--ftr-newsletter-bg);

  padding: 18px 24px;

}



.ftr-newsletter-inner {

  max-width: 1180px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 32px;

  flex-wrap: wrap;

}



.ftr-newsletter-inner h3 {

  margin: 0;

  font-family: "Marcellus";

  font-size: 22px;

  font-weight: 500;

  color: var(--ftr-heading-dark);

  white-space: nowrap;

}



.ftr-newsletter-field {

  position: relative;

  flex: 1 1 320px;

  max-width: 320px;

  display: flex;

  align-items: center;

}



.ftr-newsletter-field input {

  width: 100%;

  padding: 11px 46px 11px 18px;

  border-radius: 999px;

  border: 1px solid var(--ftr-border-soft);

  background: transparent;

  font-size: 15px;

  color: var(--ftr-heading-dark);

  outline: none;

  transition:

    border-color 0.3s ease,

    box-shadow 0.3s ease;

}



.ftr-newsletter-field input::placeholder {

  color: #aab8af;

}



.ftr-newsletter-field input:focus {

  border-color: var(--ftr-heading-dark);

  box-shadow: 0 0 0 3px rgba(30, 75, 60, 0.12);

}



.ftr-newsletter-field button {

  position: absolute;

  right: 6px;

  width: 30px;

  height: 30px;

  border-radius: 50%;

  border: none;

  background: transparent;

  color: #8a978f;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition:

    background 0.3s ease,

    color 0.3s ease,

    transform 0.3s ease;

}



.ftr-newsletter-field button svg {

  width: 16px;

  height: 16px;

  fill: none;

  stroke: currentColor;

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;

}



.ftr-newsletter-field button:hover {

  background: var(--ftr-heading-dark);

  color: #fff;

  transform: translateX(2px);

}



/* ---------------- Medical Disclaimer ---------------- */



.ftr-disclaimer {

  background: #003322;

}



.ftr-disclaimer-inner {

  margin: 0 auto;

  text-align: center;

}

.ftr-disclaimer-inner span {
  margin: 0 !important;
  font-family: "Marcellus";
  font-size: 24px;
  font-weight: 500;
  color: #fff;
}



.ftr-disclaimer-lead p {

  margin: 0 0 15px;

  font-size: 11.5px;

  font-weight: 700;

  letter-spacing: 0.02em;

  color: #fff;

  text-transform: uppercase;

}



.ftr-disclaimer-body p {

  margin: 0;

  font-size: 15px;

  line-height: 1.8;

  color: #fff;

}

.ftr-disclaimer-body {

  display: flex;

  align-items: center;

}

.ftr-disclaimer-body marquee {

  padding: 10px 0;

}

/* ---------------- Main footer ---------------- */



.ftr-main {

  background: var(--ftr-main-bg);

  padding: 40px 24px 32px;

}



.ftr-main-inner {

  max-width: 95%;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;

  gap: 30px;

}



.ftr-col {

  opacity: 0;

  transform: translateY(16px);

  animation: ftr-col-rise 0.6s ease forwards;

}



.ftr-col-brand {

  animation-delay: 0.05s;

}

.ftr-col-links {

  animation-delay: 0.15s;

}

.ftr-col-policies {

  animation-delay: 0.25s;

}

.ftr-col-contact {

  animation-delay: 0.35s;

}



@keyframes ftr-col-rise {

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* ---- Brand column ---- */



.ftr-brand-logo {

  position: relative;

  display: inline-flex;

  align-items: flex-start;

  gap: 4px;

  margin-bottom: 2px;

  width: 100%;

}



.ftr-brand-logo img {

  width: 180px;

}

.ftr-brand-name {

  font-family: "Marcellus";

  font-size: 30px;

  font-weight: 700;

  color: var(--ftr-gold);

  letter-spacing: 0.01em;

}



.ftr-brand-petal {

  position: absolute;

  top: -10px;

  right: -6px;

  width: 22px;

  height: 22px;

  color: var(--ftr-petal);

  transform-origin: bottom center;

  animation: ftr-petal-sway 3.2s ease-in-out infinite;

}



.ftr-brand-petal svg {

  width: 100%;

  height: 100%;

  fill: currentColor;

}



@keyframes ftr-petal-sway {

  0%,

  100% {

    transform: rotate(-4deg);

  }

  50% {

    transform: rotate(4deg);

  }

}



.ftr-brand-tagline {

  font-size: 15px;

  font-weight: 600;

  letter-spacing: 0.42em;

  color: var(--ftr-gold);

  text-transform: uppercase;

  margin-bottom: 15px;

}



.ftr-col-brand p {

  margin: 0 0 18px;

  font-size: 15px;

  line-height: 1.7;

  color: #fff;

  max-width: 360px;

}



.ftr-payment-row {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}



.ftr-pay-badge {

  height: 24px;

  padding: 0 8px;

  border-radius: 4px;

  background: #fff;

  color: var(--ftr-heading-dark);

  font-size: 9px;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

  letter-spacing: 0.01em;

  transition:

    transform 0.25s ease,

    box-shadow 0.25s ease;

}



.ftr-pay-badge:hover {

  transform: translateY(-2px);

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);

}



.ftr-pay-visa {

  color: #1a1f71;

}

.ftr-pay-mc {

  color: #eb001b;

}

.ftr-pay-maestro {

  color: #0099df;

}

.ftr-pay-paypal {

  color: #003087;

}

.ftr-pay-visaelectron {

  color: #1a1f71;

}

.ftr-pay-amex {

  color: #2e77bc;

}



.ftr-pay-googleplay {

  flex-direction: column;

  align-items: flex-start;

  height: 26px;

  background: #000;

  color: #fff;

  padding: 3px 8px;

  gap: 0;

}



.ftr-pay-googleplay span {

  display: block;

  line-height: 1.1;

}



.ftr-pay-googleplay-bold {

  font-size: 10px;

  font-weight: 700;

}



.ftr-pay-googleplay span:first-child {

  font-size: 6.5px;

  font-weight: 400;

  color: #ccc;

}



/* ---- Link columns ---- */



.ftr-col-links h4,

.ftr-col-policies h4,

.ftr-col-contact h4 {

  margin: 0 0 18px;

  font-family: "Marcellus";

  font-size: 28px;

  font-weight: 500;

  color: #fff;

}



.ftr-link-list {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.ftr-link-list a {

  font-size: 15px;

  color: #fff;

  text-decoration: none;

  position: relative;

  width: fit-content;

  transition:

    color 0.3s ease,

    transform 0.3s ease;

}



.ftr-link-list a::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -3px;

  width: 0;

  height: 1px;

  background: var(--ftr-gold);

  transition: width 0.3s ease;

}



.ftr-link-list a:hover {

  color: var(--ftr-link-hover);

  transform: translateX(3px);

}



.ftr-link-list a:hover::after {

  width: 100%;

}



/* ---- Contact column ---- */



.ftr-contact-item {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  margin-bottom: 16px;

}



.ftr-contact-icon {

  flex: 0 0 auto;

  width: 18px;

  height: 18px;

  margin-top: 1px;

  color: #fff;

  transition: transform 0.3s ease;

}



.ftr-contact-item:hover .ftr-contact-icon {

  transform: scale(1.15);

}



.ftr-contact-icon svg {

  width: 100%;

  height: 100%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.6;

  stroke-linecap: round;

  stroke-linejoin: round;

}



.ftr-contact-item p {

  margin: 0;

  font-size: 16px;

  line-height: 1.6;

  color: #fff;

}



.ftr-social-row {

  display: flex;

  gap: 15px;

  margin-top: 20px;

}



.ftr-social-link {

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  transition:

    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),

    color 0.3s ease;

}



.ftr-social-link i {

  font-size: 20px;

}



.ftr-social-link:hover {

  transform: translateY(-4px) scale(1.15);

  color: var(--ftr-gold);

}



/* ---------------- Responsive ---------------- */



@media (max-width: 980px) {

  .ftr-main-inner {

    grid-template-columns: 1fr 1fr;

    gap: 36px 24px;

  }



  .ftr-col-brand {

    grid-column: 1 / -1;

  }

}



@media (max-width: 720px) {

  .ftr-newsletter-inner {

    flex-direction: column;

    align-items: stretch;

    text-align: center;

    gap: 15px;

  }



  .ftr-newsletter-field {

    max-width: 100%;

    flex-basis: auto;

  }



  .ftr-disclaimer-inner h3 {

    font-size: 20px;

  }



  .ftr-main-inner {

    grid-template-columns: 1fr;

    gap: 30px;

  }



  .ftr-col-brand p {

    max-width: 100%;

  }

}



@media (max-width: 480px) {

  .ftr-newsletter {

    padding: 16px 16px;

  }



  .ftr-disclaimer {

    padding: 10px 5px;

  }



  .ftr-main {

    padding: 32px 16px 24px;

  }



  .ftr-brand-name {

    font-size: 26px;

  }



  .ftr-disclaimer-inner h3 {

    font-size: 15px;

  }

}



/* ---------------- Reduced motion ---------------- */



@media (prefers-reduced-motion: reduce) {

  .ftr-col,

  .ftr-brand-petal,

  .ftr-pay-badge,

  .ftr-link-list a,

  .ftr-social-link,

  .ftr-contact-icon {

    animation: none !important;

    transition: none !important;

  }

}



/* =================================healthy================================== */



.hhk-section {

  font-family: Georgia, "Times New Roman", serif;

  background: #ffffff;

  padding: 28px 40px 48px;

  color: #1a1a1a;

}



.hhk-top-row {

  display: flex;

  align-items: flex-start;

  justify-content: center;

  position: relative;

  margin-bottom: 6px;

}



.hhk-title {

  font-size: 30px;

  font-weight: 400;

  color: #1f3d2b;

  margin: 0;

  text-align: center;

}



.hhk-see-more {

  position: absolute;

  right: 0;

  top: 8px;

  font-family: "Figtree";

  font-size: 15px;

  color: #1a1a1a;

  text-decoration: underline;

}



.hhk-subtitle {

  text-align: center;

  font-family: "Figtree";

  font-size: 15px;

  color: #2c2c2c;

  margin: 0 0 26px;

}



.hhk-grid {

  display: flex;

  gap: 22px;

  align-items: stretch;

  margin: 0 auto;

}



/* ---------- LEFT PROMO PANEL ---------- */



.hhk-promo-panel {

  flex: 0 0 50%;

  position: relative;

  border-radius: 4px;

  overflow: hidden;

  min-height: 540px;

  display: flex;

  flex-direction: column;

}

.hhk-promo-panel img {

  width: 100%;

}



.hhk-promo-heading-row {

  display: flex;

  align-items: center;

  gap: 15px;

  flex-wrap: wrap;

  margin-bottom: 30px;

}



.hhk-promo-heading {

  font-family: Georgia, "Times New Roman", serif;

  font-size: 38px;

  font-weight: 700;

  color: #2a1454;

  letter-spacing: 0.5px;

  margin: 0;

  line-height: 1;

}



.hhk-heart {

  position: relative;

  width: 92px;

  height: 80px;

  flex-shrink: 0;

  animation: hhk-beat 1.8s ease-in-out infinite;

}



@keyframes hhk-beat {

  0%,

  100% {

    transform: scale(1);

  }

  15% {

    transform: scale(1.08);

  }

  30% {

    transform: scale(0.98);

  }

  45% {

    transform: scale(1.05);

  }

  60% {

    transform: scale(1);

  }

}



.hhk-heart::before,

.hhk-heart::after {

  content: "";

  position: absolute;

  top: 0;

  width: 50px;

  height: 78px;

  background: #fbf3f7;

  border-radius: 50px 50px 0 0;

  box-shadow: 0 6px 15px rgba(60, 20, 80, 0.18);

}

.hhk-heart::before {

  left: 46px;

  transform: rotate(-45deg);

  transform-origin: 0 100%;

}

.hhk-heart::after {

  left: -4px;

  transform: rotate(45deg);

  transform-origin: 100% 100%;

}



.hhk-heart-label {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: "Brush Script MT", cursive;

  font-size: 26px;

  font-style: italic;

  color: #c98fd6;

  z-index: 2;

  transform: translateY(2px);

}



.hhk-feature-list {

  display: flex;

  flex-direction: column;

  gap: 22px;

  margin-bottom: auto;

}



.hhk-feature-item {

  display: flex;

  align-items: center;

  gap: 16px;

}



.hhk-feature-icon {

  width: 35px;

  height: 35px;

  border-radius: 50%;

  background: #ffffff;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 4px 10px rgba(40, 10, 70, 0.16);

  transition:

    transform 0.4s ease,

    box-shadow 0.4s ease;

}



.hhk-feature-item:hover .hhk-feature-icon {

  transform: translateY(-4px) scale(1.06);

  box-shadow: 0 10px 18px rgba(40, 10, 70, 0.26);

}



.hhk-feature-icon svg {

  width: 28px;

  height: 28px;

  stroke: #2a1454;

  fill: none;

  stroke-width: 1.4;

}



.hhk-feature-text {

  font-size: 21px;

  font-weight: 700;

  color: #3a1561;

  line-height: 1.25;

  margin: 0;

}



.hhk-product-stack {

  position: absolute;

  right: 26px;

  bottom: 0;

  width: 360px;

  max-width: 48%;

  display: flex;

  justify-content: flex-end;

}



.hhk-box-img {

  width: 290px;

  transform: translateY(0);

  transition: transform 0.5s ease;

}



.hhk-promo-panel:hover .hhk-box-img {

  transform: translateY(-6px);

}



.hhk-jar-img {

  position: absolute;

  left: -30px;

  bottom: -6px;

  width: 230px;

  transition: transform 0.5s ease;

}



.hhk-promo-panel:hover .hhk-jar-img {

  transform: translateY(-10px) rotate(-2deg);

}



.hhk-box-card {

  position: relative;

  width: 290px;

  height: 320px;

  margin-left: auto;

  border-radius: 6px;

  background: linear-gradient(135deg, #d9c2e8 0%, #f3e6f7 100%);

  box-shadow: 0 18px 30px rgba(40, 10, 70, 0.22);

}



.hhk-jar-card {

  position: absolute;

  left: -26px;

  bottom: -15px;

  width: 230px;

  height: 230px;

  border-radius: 50%;

  background: #f6ecf2;

  box-shadow: 0 15px 24px rgba(40, 10, 70, 0.2);

}



/* ---------- RIGHT PRODUCT LIST ---------- */



.hhk-list-panel {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 15px;

}



.hhk-product-row {

  display: flex;

  align-items: center;

  gap: 16px;

  padding: 10px;

  border: 1px solid #e7e7e7;

  border-radius: 4px;

  background: #ffffff;

  transition:

    transform 0.3s ease,

    box-shadow 0.3s ease,

    border-color 0.3s ease;

}



.hhk-product-row:hover {

  transform: translateX(4px);

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

  border-color: #d8d8d8;

}



.hhk-thumb {

  flex: 0 0 80px;

  width: 80px;

  border-radius: 3px;

  overflow: hidden;

  position: relative;

}



.hhk-thumb-1 {

  background: linear-gradient(135deg, #f0a98f, #e8866a);

}

.hhk-thumb-2 {

  background: #fafafa;

  border: 1px solid #eee;

}

.hhk-thumb-3 {

  background: linear-gradient(135deg, #bfe3ef, #d8f0f6);

}

.hhk-thumb-4 {

  background: #1f3d2b;

}

.hhk-thumb-5 {

  background: #fbf6e8;

  border: 1px solid #eee;

}



.hhk-thumb-deco {

  border-radius: 2px;

  transition:

    opacity 0.35s ease,

    transform 0.35s ease;

  width: 100%;

}

.hhk-thumb-deco img {

  width: 100%;

}



.hhk-product-row:hover .hhk-thumb-deco {

  opacity: 1;

  transform: scale(1);

}



.hhk-thumb-badge {

  position: absolute;

  left: 4px;

  bottom: 4px;

  font-family: Arial, sans-serif;

  font-size: 8px;

  color: #fff;

  background: rgba(0, 0, 0, 0.55);

  padding: 1px 4px;

  border-radius: 2px;

}



.hhk-product-info {

  flex: 1;

  min-width: 0;

}



.hhk-product-name {

  font-size: 22px;

  color: #1f3d2b;

  margin: 0 0 4px;

  font-family: "Marcellus";

}



.hhk-product-desc {

  font-family: "Figtree";

  font-size: 15px;

  color: #5a5a5a;

  margin: 0;

  line-height: 1.4;

}



.hhk-product-meta {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 8px;

}



.hhk-qty {

  font-family: "Figtree";

  font-size: 18px;

  font-weight: 700;

  color: #1a1a1a;

  margin: 0;

}



.hhk-price {

  font-family: "Figtree";

  font-size: 18px;

  font-weight: 700;

  color: #1f3d2b;

  margin: 0;

}



.hhk-buy-bar {

  margin-top: 8px;

  background: #1f3d2b;

  color: #ffffff;

  text-align: center;

  padding: 16px;

  border-radius: 4px;

  cursor: pointer;

  position: relative;

  overflow: hidden;

  transition: background 0.35s ease;

}



.hhk-buy-bar::before {

  content: "";

  position: absolute;

  top: 0;

  left: -60%;

  width: 40%;

  height: 100%;

  background: linear-gradient(115deg,

      rgba(255, 255, 255, 0) 0%,

      rgba(255, 255, 255, 0.18) 50%,

      rgba(255, 255, 255, 0) 100%);

  transform: skewX(-20deg);

  animation: hhk-shine 3.2s ease-in-out infinite;

}



@keyframes hhk-shine {

  0% {

    left: -60%;

  }

  45% {

    left: 130%;

  }

  100% {

    left: 130%;

  }

}



.hhk-buy-bar:hover {

  background: #16301f;

}



.hhk-buy-text {

  font-family: "Figtree";

  font-size: 20px;

  font-weight: 700;

  margin: 0;

  position: relative;

  z-index: 1;

}



.hhk-strike {

  text-decoration: line-through;

  opacity: 0.75;

  margin-left: 6px;

  font-weight: 400;

}



/* ---------- RESPONSIVE ---------- */



@media (max-width: 980px) {

  .hhk-grid {

    flex-direction: column;

  }

  .hhk-promo-panel {

    flex: 1;

    min-height: auto;

  }

  .hhk-see-more {

    position: static;

    margin-top: 6px;

    display: block;

    text-align: right;

  }

  .hhk-top-row {

    flex-direction: column;

    align-items: center;

  }

}



@media (max-width: 560px) {

  .hhk-section {

    padding: 22px 16px 36px;

  }

  .hhk-promo-heading {

    font-size: 28px;

  }

  .hhk-heart {

    width: 70px;

    height: 60px;

  }

  .hhk-feature-text {

    font-size: 16px;

  }

  .hhk-feature-icon {

    width: 44px;

    height: 44px;

  }

  .hhk-product-stack {

    position: static;

    width: 100%;

    max-width: 100%;

    margin-top: 24px;

    justify-content: center;

  }

  .hhk-box-card {

    width: 220px;

    height: 240px;

  }

  .hhk-jar-card {

    width: 160px;

    height: 160px;

    left: -10px;

    bottom: -20px;

  }

  .hhk-thumb {

    flex-basis: 64px;

    width: 64px;

    height: 64px;

  }

  .hhk-product-name {

    font-size: 16px;

  }

}



/* ============================gallery================================= */
/*==============================
GALLERY
==============================*/

.gallery-grid{
    row-gap:24px;
}

.gallery-item{
    position:relative;
    display:block;
    overflow:hidden;
    border-radius:16px;
    cursor:pointer;
    text-decoration:none;
    background:#f5f5f5;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.g-img-wrap{
    position:relative;
    overflow:hidden;
    border-radius:16px;
}

.g-img-wrap img{
    width:100%;
    height:320px;
    object-fit:cover;
    display:block;
    transition:.6s ease;
}

.gallery-item:hover img{
    transform:scale(1.12);
}

.g-overlay{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.45);

    opacity:0;

    transition:.35s;
}

.gallery-item:hover .g-overlay{
    opacity:1;
}

.zoom-icon{

    width:70px;
    height:70px;

    border-radius:50%;

    background:#fff;

    color:#1e4b3c;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:28px;

    transform:scale(.6);

    transition:.35s;

}

.gallery-item:hover .zoom-icon{

    transform:scale(1);

}

.g-overlay h4{

    color:#fff;

    margin-top:20px;

    font-size:20px;

    font-weight:600;

}

/*==============================
LIGHTBOX
==============================*/

.gallery-lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.96);

    display:flex;
    justify-content:center;
    align-items:center;

    opacity:0;
    visibility:hidden;

    transition:.35s;

    z-index:999999;

}

.gallery-lightbox.show{

    opacity:1;
    visibility:visible;

}

.gallery-overlay{

    position:absolute;
    inset:0;

}

/* Image */

.gallery-lightbox-content{

    position:relative;

    z-index:5;

    text-align:center;

}

.gallery-image-wrapper{

    overflow:hidden;

    border-radius:14px;

}

.gallery-image-wrapper img{

    max-width:90vw;
    max-height:80vh;

    border-radius:14px;

    animation:zoomIn .35s;

    box-shadow:0 20px 50px rgba(0,0,0,.45);

}

@keyframes zoomIn{

    from{

        transform:scale(.8);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/* Caption */

.gallery-caption{

    margin-top:18px;

}

.gallery-caption h4{

    color:#fff;

    font-size:22px;

    margin-bottom:8px;

    font-weight:600;

}

.gallery-caption p{

    color:#ddd;

    font-size:15px;

}

/* Close */

.gallery-close{

    position:absolute;

    right:25px;
    top:25px;

    width:50px;
    height:50px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#1e4b3c;

    font-size:34px;

    cursor:pointer;

    z-index:20;

    transition:.3s;

}

.gallery-close:hover{

    background:#1e4b3c;

    color:#fff;

}

/* Prev Next */

.gallery-prev,
.gallery-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:60px;
    height:60px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#1e4b3c;

    cursor:pointer;

    display:flex;
    justify-content:center;
    align-items:center;

    transition:.3s;

    z-index:20;

}

.gallery-prev{

    left:35px;

}

.gallery-next{

    right:35px;

}

.gallery-prev:hover,
.gallery-next:hover{

    background:#1e4b3c;

    color:#fff;

}

/* Mobile */

@media(max-width:768px){

.gallery-image-wrapper img{

    max-width:95vw;

    max-height:70vh;

}

.gallery-prev,
.gallery-next{

    width:48px;
    height:48px;

}

.gallery-prev{

    left:10px;

}

.gallery-next{

    right:10px;

}

.gallery-close{

    width:42px;
    height:42px;

    top:12px;
    right:12px;

}

.g-img-wrap img{

    height:220px;

}

.g-overlay h4{

    font-size:16px;

}

.zoom-icon{

    width:55px;
    height:55px;

    font-size:22px;

}

}












/* ── HIDDEN TAB CONTENT ── */

.tab-panel {

  display: none;

}

.tab-panel.active {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 18px;

  perspective: 1200px;

}

@media (max-width: 1100px) {

  .tab-panel.active {

    grid-template-columns: repeat(3, 1fr);

  }

}

@media (max-width: 780px) {

  .tab-panel.active {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media (max-width: 480px) {

  .tab-panel.active {

    grid-template-columns: 1fr;

  }

}



/* ── LIGHTBOX ── */

.lightbox {

  position: fixed;

  inset: 0;

  z-index: 1000;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(6, 14, 30, 0);

  opacity: 0;

  pointer-events: none;

  transition:

    opacity 0.4s var(--ease),

    background 0.4s var(--ease);

}

.lightbox.open {

  opacity: 1;

  pointer-events: all;

  background: rgba(6, 14, 30, 0.92);

}



.lb-backdrop {

  position: absolute;

  inset: 0;

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

}



.lb-content {

  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  max-width: 900px;

  padding: 0 70px;

  gap: 0;

}



.lb-img-wrap {

  position: relative;

  overflow: hidden;

  border-radius: 20px;

  box-shadow:

    0 30px 100px rgba(0, 0, 0, 0.7),

    0 0 0 2px rgba(201, 168, 76, 0.3);

  max-width: 780px;

  width: 100%;

  transform: scale(0.8) translateY(40px);

  transition:

    transform 0.5s var(--transition),

    opacity 0.4s var(--ease);

  opacity: 0;

}

.lightbox.open .lb-img-wrap {

  transform: scale(1) translateY(0);

  opacity: 1;

  transition-delay: 0.05s;

}



.lb-img-wrap img {

  width: 100%;

  height: auto;

  display: block;

  max-height: 75vh;

  object-fit: contain;

}



.lb-close {

  position: fixed;

  top: 24px;

  right: 28px;

  z-index: 10;

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: rgba(201, 168, 76, 0.15);

  border: 1.5px solid rgba(201, 168, 76, 0.4);

  color: var(--gold);

  font-size: 1.4rem;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s var(--transition);

  backdrop-filter: blur(8px);

}

.lb-close:hover {

  background: var(--gold);

  color: var(--navy);

  transform: rotate(90deg) scale(1.1);

}



.lb-nav {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: rgba(201, 168, 76, 0.1);

  border: 1.5px solid rgba(201, 168, 76, 0.35);

  color: var(--gold);

  font-size: 1.3rem;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s var(--transition);

  backdrop-filter: blur(6px);

  z-index: 5;

}

.lb-nav:hover {

  background: var(--gold);

  color: var(--navy);

  transform: translateY(-50%) scale(1.1);

}

.lb-prev {

  left: 8px;

}

.lb-next {

  right: 8px;

}



.lb-counter {

  position: fixed;

  bottom: 24px;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  gap: 8px;

  align-items: center;

  z-index: 10;

}

.lb-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: rgba(201, 168, 76, 0.3);

  transition: all 0.3s var(--ease);

}

.lb-dot.active {

  background: var(--gold);

  width: 22px;

  border-radius: 4px;

}



.lb-caption {

  position: fixed;

  bottom: 60px;

  left: 50%;

  transform: translateX(-50%);

  font-size: 0.82rem;

  color: var(--muted);

  letter-spacing: 0.08em;

  text-transform: uppercase;

  font-weight: 500;

  text-align: center;

  opacity: 0;

  transition: opacity 0.3s var(--ease);

}

.lightbox.open .lb-caption {

  opacity: 1;

  transition-delay: 0.2s;

}



/* slide animation for lightbox */

.lb-img-wrap.slide-left {

  animation: lbSlideLeft 0.35s var(--ease) both;

}

.lb-img-wrap.slide-right {

  animation: lbSlideRight 0.35s var(--ease) both;

}

@keyframes lbSlideLeft {

  from {

    transform: translateX(60px) scale(0.95);

    opacity: 0;

  }

  to {

    transform: translateX(0) scale(1);

    opacity: 1;

  }

}

@keyframes lbSlideRight {

  from {

    transform: translateX(-60px) scale(0.95);

    opacity: 0;

  }

  to {

    transform: translateX(0) scale(1);

    opacity: 1;

  }

}



/* ── ANIMATIONS ── */

@keyframes fadeDown {

  from {

    opacity: 0;

    transform: translateY(-24px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* ── RESPONSIVE ADJUSTMENTS ── */

@media (max-width: 600px) {

  .lb-content {

    padding: 0 52px;

  }

  .lb-nav {

    width: 38px;

    height: 38px;

    font-size: 1rem;

  }

}



/* ── SCROLLBAR ── */

::-webkit-scrollbar {

  width: 6px;

}

::-webkit-scrollbar-track {

  background: var(--navy);

}

::-webkit-scrollbar-thumb {

  background: rgba(201, 168, 76, 0.3);

  border-radius: 3px;

}



/* category color labels */

.tag {

  display: inline-block;

  font-size: 0.68rem;

  padding: 2px 8px;

  border-radius: 20px;

  background: rgba(201, 168, 76, 0.2);

  color: var(--gold);

  letter-spacing: 0.06em;

  text-transform: uppercase;

  font-weight: 600;

  margin-bottom: 4px;

}



/* =============================loader========================= */

.loader-screen {

  background-image: url(../images/in-back-3.jpg);

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  z-index: 999999;

}



/* ---------- ambient glow behind the logo ---------- */

.glow-backdrop {

  position: absolute;

  top: 50%;

  left: 50%;

  width: min(60vw, 620px);

  height: min(60vw, 620px);

  transform: translate(-50%, -58%);

  border-radius: 50%;

  background: radial-gradient(circle, rgb(76 239 179 / 28%) 0%, rgb(92 246 196 / 22%) 35%, rgb(47 185 128 / 12%) 60%, rgb(255 255 255 / 0%) 75%);

  filter: blur(6px);

  animation: breathe-glow 5s ease-in-out infinite;

  z-index: 0;

}



.glow-ring-outer {

  position: absolute;

  top: 50%;

  left: 50%;

  width: min(46vw, 460px);

  height: min(46vw, 460px);

  transform: translate(-50%, -58%);

  border-radius: 50%;

  border: 1px solid rgba(185, 134, 47, 0.25);

  animation: breathe-ring 5s ease-in-out infinite;

  z-index: 0;

}



@keyframes breathe-glow {

  0%,

  100% {

    opacity: 0.65;

    transform: translate(-50%, -58%) scale(0.92);

  }



  50% {

    opacity: 1;

    transform: translate(-50%, -58%) scale(1.06);

  }

}



@keyframes breathe-ring {

  0%,

  100% {

    opacity: 0.35;

    transform: translate(-50%, -58%) scale(0.96);

  }



  50% {

    opacity: 0.8;

    transform: translate(-50%, -58%) scale(1.1);

  }

}



/* ---------- floating petal particles ---------- */

.petals-field {

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

}



.petal {

  position: absolute;

  bottom: -40px;

  width: 15px;

  height: 15px;

  border-radius: 0% 60% 0% 60%;

  background: linear-gradient(135deg, #75ffcd, var(--ap-orange));

  opacity: 0;

  animation-name: petal-float;

  animation-timing-function: ease-in;

  animation-iteration-count: infinite;

}



.petal-1 {

  left: 12%;

  width: 10px;

  height: 10px;

  animation-duration: 9s;

  animation-delay: 0.2s;

}



.petal-2 {

  left: 24%;

  width: 16px;

  height: 16px;

  animation-duration: 11s;

  animation-delay: 2.4s;

}



.petal-3 {

  left: 40%;

  width: 8px;

  height: 8px;

  animation-duration: 8s;

  animation-delay: 1.1s;

}



.petal-4 {

  left: 62%;

  width: 15px;

  height: 15px;

  animation-duration: 10s;

  animation-delay: 3.2s;

}



.petal-5 {

  left: 78%;

  width: 11px;

  height: 11px;

  animation-duration: 9.5s;

  animation-delay: 0.8s;

}



.petal-6 {

  left: 88%;

  width: 15px;

  height: 15px;

  animation-duration: 12s;

  animation-delay: 4s;

}



@keyframes petal-float {

  0% {

    transform: translateY(0) rotate(0deg);

    opacity: 0;

  }



  10% {

    opacity: 0.85;

  }



  50% {

    transform: translateY(-52vh) rotate(180deg);

    opacity: 0.6;

  }



  90% {

    opacity: 0.15;

  }



  100% {

    transform: translateY(-102vh) rotate(340deg);

    opacity: 0;

  }

}



/* ---------- main content column ---------- */

.brand-column {

  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  padding: 0 24px;

}



.logo-frame {

  display: flex;

  justify-content: center;

  align-items: center;

  margin-bottom: clamp(18px, 3vh, 30px);

  animation: rise-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;

}



.brand-logo {

  width: clamp(220px, 34vw, 340px);

  height: auto;

  filter: drop-shadow(0 6px 22px rgba(185, 134, 47, 0.28));

  animation: logo-hover 4.5s ease-in-out infinite;

}



@keyframes logo-hover {

  0%,

  100% {

    transform: translateY(0px);

  }



  50% {

    transform: translateY(-8px);

  }

}



.welcome-text {

  animation: rise-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;

  animation-delay: 0.25s;

}



.welcome-text h1 {
font-size: 80px;
    font-family: 'Poppins';
  font-weight: 600;
  letter-spacing: 0.02em;

  margin: 0 0 10px 0;

  background: linear-gradient(100deg, #006942 10%, #026525 45%, #004b30 65%, #008f40 90%);

  background-size: 220% auto;

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

  animation: shimmer-text 4.5s linear infinite;

}



@keyframes shimmer-text {

  0% {

    background-position: 0% center;

  }



  100% {

    background-position: 220% center;

  }

}



.welcome-text p {

  margin: 0;

  color: var(--ap-muted);

  font-weight: 300;

  font-size: clamp(0.85rem, 2vw, 1rem);

  letter-spacing: 0.14em;

  text-transform: uppercase;

}



/* ---------- loading indicator ---------- */

.progress-column {

  margin-top: clamp(28px, 5vh, 44px);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 16px;

  animation: rise-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;

  animation-delay: 0.5s;

}



.lotus-ring {

  position: relative;

  width: 54px;

  height: 54px;

  border-radius: 50%;

  background: conic-gradient(from 0deg,

      var(--ap-pink),

      var(--ap-orange),

      var(--ap-gold),

      transparent 78%);

  -webkit-mask: radial-gradient(farthest-side,

      transparent calc(100% - 4px),

      #000 calc(100% - 4px));

  mask: radial-gradient(farthest-side,

      transparent calc(100% - 4px),

      #000 calc(100% - 4px));

  animation: spin-ring 1.4s linear infinite;

}



.lotus-ring::after {

  content: "";

  position: absolute;

  inset: 0;

  margin: auto;

  width: 8px;

  height: 8px;

  border-radius: 0% 60% 0% 60%;

  background: var(--ap-pink);

  box-shadow: 0 0 10px rgba(239, 76, 118, 0.6);

}



@keyframes spin-ring {

  to {

    transform: rotate(360deg);

  }

}



.loading-label p {

  margin: 0;

  display: inline-flex;

  align-items: center;

  color: var(--ap-ink);

  font-weight: 400;

  font-size: clamp(0.78rem, 1.9vw, 0.92rem);

  letter-spacing: 0.06em;

}



.dot-anim {

  display: inline-flex;

  margin-left: 3px;

}



.dot-anim span {

  width: 4px;

  height: 4px;

  margin: 0 2px;

  border-radius: 50%;

  background: var(--ap-gold);

  animation: dot-bounce 1.2s ease-in-out infinite;

}



.dot-anim span:nth-child(2) {

  animation-delay: 0.2s;

}



.dot-anim span:nth-child(3) {

  animation-delay: 0.4s;

}



@keyframes dot-bounce {

  0%,

  80%,

  100% {

    transform: translateY(0);

    opacity: 0.4;

  }



  40% {

    transform: translateY(-5px);

    opacity: 1;

  }

}



@keyframes rise-in {

  from {

    opacity: 0;

    transform: translateY(16px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* ---------- responsiveness ---------- */

@media (max-width: 640px) {

  .glow-backdrop {

    width: 78vw;

    height: 78vw;

  }



  .glow-ring-outer {

    width: 60vw;

    height: 60vw;

  }



  .petal {

    display: none;

  }



  .petal-1,

  .petal-3,

  .petal-5 {

    display: block;

  }



  .progress-column {

    margin-top: 26px;

  }

}



@media (max-width: 380px) {

  .brand-logo {

    width: 78vw;

  }

}



@media (prefers-reduced-motion: reduce) {

  .glow-backdrop,

  .glow-ring-outer,

  .petal,

  .brand-logo,

  .welcome-text h1,

  .lotus-ring,

  .dot-anim span,

  .logo-frame,

  .welcome-text,

  .progress-column {

    animation: none !important;

  }

}



/* ============================relief===================================== */



.relief-sequence-section {

  width: 100%;

  background: #f8f6f3;

  overflow: hidden;

}



/*===============================

Top Area

===============================*/



.relief-top-area {

  background: #f8efd9;

  padding: 28px 20px 24px;

  text-align: center;

}



.relief-top-icon {

  font-size: 24px;

  color: #d89014;

  margin-bottom: 8px;

  animation: reliefSun 5s linear infinite;

}



.relief-top-content h3 {

  margin: 0;

  font-family: "Montserrat", sans-serif;

  font-size: 34px;

  font-weight: 700;

  letter-spacing: 3px;

  color: #8f5634;

}



.relief-top-text {

  margin-top: 12px;

  max-width: 900px;

  margin-left: auto;

  margin-right: auto;

  font-family: "Montserrat", sans-serif;

  font-size: 16px;

  line-height: 30px;

  color: #985b39;

}



/*===============================

Heading

===============================*/



.relief-heading-area {

  background: #1e5746;

  text-align: center;

  padding: 28px 20px 34px;

}



.relief-subtitle {

  margin-bottom: 12px;

}



.relief-subtitle span {

  font-family: "Montserrat", sans-serif;

  font-size: 15px;

  font-weight: 600;

  letter-spacing: 4px;

  color: #c8b89b;

}



.relief-heading-area h2 {

  margin: 0;

  color: #fff;

  font-size: 58px;

  font-family: "Marcellus";

  font-weight: 500;

}

/*====================================

Grid

====================================*/



.relief-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  border-top: 1px solid #ddd;

  border-bottom: 1px solid #ddd;

}



/*====================================

Card

====================================*/



.relief-card {

  background: #fff;

  border-right: 1px solid #d9d9d9;

}



.relief-card:last-child {

  border-right: none;

}



/*====================================

Top Area

====================================*/



.relief-top-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

  padding: 15px;

  background: #faf9f6;

  min-height: 128px;

}



/*====================================

Image

====================================*/



.relief-image-box {

  height: 100px;

  overflow: hidden;

  border-radius: 10px;

  position: relative;

  flex-shrink: 0;

  border: 1px solid #ffa77d;

}



.relief-image-box img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 0.7s;

}



.relief-card:hover .relief-image-box img {

  transform: scale(1.08);

}



/* Shine */



.relief-image-box::before {

  content: "";

  position: absolute;

  left: -120%;

  top: 0;

  width: 60%;

  height: 100%;

  background: linear-gradient(90deg,

      transparent,

      rgba(255, 255, 255, 0.45),

      transparent);

  transition: 0.8s;

  z-index: 2;

}



.relief-card:hover .relief-image-box::before {

  left: 140%;

}



/*====================================

Heading

====================================*/



.relief-label-box {

  flex: 1;

}



.relief-label-box h4 {

  margin: 0;

  font-size: 18px;

  font-weight: 700;

  color: #8b5b41;

  text-transform: uppercase;

  font-family: "Marcellus";

}



.relief-small-text {

  margin-top: 8px;

}



.relief-small-text span {

  font-size: 15px;

  color: #8b8b8b;

  font-weight: 600;

  text-transform: uppercase;

  font-family: "Marcellus";

}



/*====================================

Content

====================================*/



.relief-content {

  text-align: center;

  padding: 35px 30px 28px;

  border-top: 1px solid #ddd;

}



.relief-time-box {

  margin-bottom: 18px;

}



.relief-time-box span {

  color: #8c5a3f;

  font-size: 15px;

  font-weight: 700;

  letter-spacing: 0.5px;

  font-family: "Marcellus";

  text-transform: uppercase;

}



.relief-content h3 {

  margin: 0;

  color: #184b3c;

  font-size: 24px;

  line-height: 1.25;

  font-family: "Marcellus";

  font-weight: 500;

}



.relief-description {

  margin-top: 16px;

  color: #7a7a7a;

  line-height: 1.6;

  font-size: 16px;

  font-family: "Marcellus";

}



/*====================================

Hover

====================================*/



.relief-card {

  transition: 0.35s;

}



.relief-card:hover {

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);

  transform: translateY(-5px);

}



.relief-card:hover .relief-label-box h4 {

  color: #184b3c;

}



.relief-card:hover .relief-content h3 {

  color: #8b5b41;

}



/*====================================

Responsive

====================================*/



@media (max-width: 991px) {

  .relief-grid {

    grid-template-columns: 1fr;

  }



  .relief-card {

    border-right: none;

    border-bottom: 1px solid #ddd;

  }

}



@media (max-width: 767px) {

  .relief-top-row {

    flex-direction: column-reverse;

    padding: 20px;

    text-align: center;

  }



  .relief-image-box {

    width: 100%;

    height: 180px;

    border-radius: 12px;

  }



  .relief-content {

    padding: 25px 20px;

  }



  .relief-content h3 {

    font-size: 20px;

  }



  .relief-description {

    font-size: 15px;

  }

}



/* ======================================product details============================ */

.myaxyl-page {

  padding: 40px 0px 80px;

}



.myaxyl-crumb {

  display: flex;

  gap: 6px;

  align-items: center;

  font-size: 15px;

  letter-spacing: 0.04em;

  color: var(--myaxyl-body);

  margin-bottom: 24px;

  opacity: 0;

  animation: myaxylFadeDown 0.6s ease forwards;

}

.myaxyl-crumb span {

  color: var(--myaxyl-green);

  font-weight: 600;

}



.myaxyl-container {

  display: grid;

  grid-template-columns: 0.85fr 1.25fr;

  gap: 35px;

  align-items: start;

}


/* ---------------- GALLERY COLUMN ---------------- */



.myaxyl-gallery-col {

  position: sticky;

  top: 24px;

  opacity: 0;

  transform: translateY(28px);

  animation: myaxylRise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s forwards;

}



.myaxyl-gallery-card {

  background: var(--myaxyl-cream);

  border-radius: 18px;

  overflow: hidden;

  box-shadow:

    0 1px 2px rgba(20, 30, 25, 0.04),

    0 18px 40px -22px rgba(20, 30, 25, 0.28);

  transition:

    box-shadow 0.45s ease,

    transform 0.45s ease;

}

.myaxyl-gallery-card:hover {

  box-shadow:

    0 4px 10px rgba(20, 30, 25, 0.06),

    0 28px 60px -20px rgba(20, 30, 25, 0.35);

  transform: translateY(-3px);

}



.myaxyl-slide-stage {

  position: relative;

  width: 100%;

}



.myaxyl-slide-frame {

  position: relative;

  width: 100%;

  aspect-ratio: 9 / 11.7;

  overflow: hidden;

  cursor: zoom-in;

}



.myaxyl-slide-img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition:

    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),

    opacity 0.35s ease;

}

.myaxyl-slide-frame:hover .myaxyl-slide-img {

  transform: scale(1.045);

}



.myaxyl-dot-trail {

  position: absolute;

  left: 8%;

  bottom: 14%;

  width: 46%;

  height: 10%;

  pointer-events: none;

}

.myaxyl-dot-trail span {

  position: absolute;

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: #5fe0c4;

  box-shadow: 0 0 6px 1px rgba(95, 224, 196, 0.8);

  animation: myaxylDotPulse 1.8s ease-in-out infinite;

}

.myaxyl-dot-trail span:nth-child(1) {

  left: 0%;

  top: 70%;

  animation-delay: 0s;

}

.myaxyl-dot-trail span:nth-child(2) {

  left: 22%;

  top: 45%;

  animation-delay: 0.25s;

}

.myaxyl-dot-trail span:nth-child(3) {

  left: 44%;

  top: 20%;

  animation-delay: 0.5s;

}

.myaxyl-dot-trail span:nth-child(4) {

  left: 66%;

  top: 5%;

  animation-delay: 0.75s;

}

.myaxyl-dot-trail span:nth-child(5) {

  left: 88%;

  top: -5%;

  animation-delay: 1s;

}



.myaxyl-caption-box {

  position: absolute;

  top: 0;

  left: 0;

  width: 62%;

  height: 100%;

  padding: 32px 26px;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  background: linear-gradient(115deg,

      rgba(249, 243, 238, 0.97) 0%,

      rgba(249, 243, 238, 0.9) 42%,

      rgba(249, 243, 238, 0) 78%);

  pointer-events: none;

}

.myaxyl-caption-heading-wrap h2 {

  font-size: clamp(22px, 2.6vw, 30px);

  color: var(--myaxyl-green);

  line-height: 1.1;

}

.myaxyl-caption-divider {

  width: 34px;

  height: 2px;

  background: var(--myaxyl-green);

  opacity: 0.5;

  margin: 15px 0 16px;

}

.myaxyl-caption-text-wrap p {

  font-size: 16px;

  line-height: 1.55;

  color: var(--myaxyl-ink);

  max-width: 280px;

}

.myaxyl-caption-text-wrap strong {

  font-weight: 700;

}



.myaxyl-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 34px;

  height: 34px;

  border-radius: 50%;

  border: none;

  background: #ffffff;

  color: var(--myaxyl-green);

  font-size: 18px;

  line-height: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  box-shadow: 0 4px 10px rgba(20, 30, 25, 0.18);

  z-index: 3;

  transition:

    transform 0.25s ease,

    background 0.25s ease;

}

.myaxyl-arrow:hover {

  transform: translateY(-50%) scale(1.1);

  background: var(--myaxyl-green);

  color: #fff;

}

.myaxyl-arrow-prev {

  left: 15px;

}

.myaxyl-arrow-next {

  right: 15px;

}



.myaxyl-gallery-data {

  display: none;

}



.myaxyl-pulse {

  animation: myaxylImgPop 0.4s ease;

}

@keyframes myaxylImgPop {

  0% {

    transform: scale(1.05);

  }

  100% {

    transform: scale(1);

  }

}



.myaxyl-stats-bar {

  background: var(--myaxyl-green);

  display: grid;

  grid-template-columns: repeat(4, 1fr);

}

.myaxyl-stat-block {

  padding: 16px 8px;

  text-align: center;

  border-right: 1px solid rgba(255, 255, 255, 0.12);

  transition: background 0.25s ease;

}

.myaxyl-stat-block:last-child {

  border-right: none;

}

.myaxyl-stat-block:hover {

  background: rgba(255, 255, 255, 0.06);

}

.myaxyl-stat-value-wrap p {

  font-family: 'Amstir-Regular';

  font-size: 22px;

  font-weight: 600;

  margin: 0;

  color: #fff;

}

.myaxyl-stat-label-wrap p {

  font-size: 15px;

  color: rgba(255, 255, 255, 0.72);

  margin: 0px;

}



/* ---------------- DETAILS COLUMN ---------------- */



.myaxyl-details-col {

  opacity: 0;

  transform: translateY(28px);

  animation: myaxylRise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.18s forwards;

}



.myaxyl-tag-pill {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: var(--myaxyl-pill);

  color: var(--myaxyl-green);

  padding: 7px 16px;

  border-radius: 999px;

  margin-bottom: 18px;

}

.myaxyl-tag-pill p {

  font-size: 11.5px;

  font-weight: 700;

  letter-spacing: 0.06em;

  margin: 0;

}



.myaxyl-details-col h1 {

  font-size: clamp(32px, 3.6vw, 44px);

  color: var(--myaxyl-green);

  line-height: 1.05;

}



.myaxyl-tagline-wrap {

  margin: 10px 0 20px;

}

.myaxyl-tagline-wrap p {

  font-family: "Marcellus";

  font-style: italic;

  font-size: 19px;

  color: var(--myaxyl-tagline);

  margin: 0;

}



.myaxyl-desc-wrap p {

  font-size: 14.5px;

  line-height: 1.75;

  color: var(--myaxyl-body);

}



.myaxyl-quote-box {

  position: relative;

  background: var(--myaxyl-pill);

  border-left: 4px solid var(--myaxyl-green);

  border-radius: 4px 12px 12px 4px;

  padding: 20px 22px;

  margin: 26px 0;

  box-shadow: 0 10px 30px -20px rgba(30, 75, 60, 0.5);

  animation: myaxylBreathe 5s ease-in-out infinite;

}

.myaxyl-quote-text-wrap p {

  font-family: "Marcellus";

  font-style: italic;

  font-size: 16.5px;

  line-height: 1.55;

  color: #4b3b12;

}

.myaxyl-quote-author-wrap {

  margin-top: 10px;

}

.myaxyl-quote-author-wrap p {

  font-size: 16px;

  font-weight: 700;

  letter-spacing: 0.03em;

  color: var(--myaxyl-gold);

}



.myaxyl-delivery-wrap {

  margin-bottom: 16px;

}

.myaxyl-delivery-wrap p {

  font-size: 16px;

  color: var(--myaxyl-body);

}



.myaxyl-price-box {

  border-radius: 10px;

  padding: 3px 22px;

  transition: border-color 0.3s ease, box-shadow 0.3s ease;

  background: #1e4b3c0a;

  border: 1px solid #1e4b3c;

  width: 245px;

}

.myaxyl-price-box:hover {

  border-color: var(--myaxyl-green);

  box-shadow: 0 8px 24px -16px rgba(30, 75, 60, 0.45);

}

.myaxyl-price-size-wrap p {

  margin: 0;

  font-family: "Amstir-Regular";

  color: #1e4b3c;

  font-size: 26px;

  letter-spacing: 0;

  display: block;

  padding-bottom: 3px;

}

.myaxyl-price-value-wrap p {

  font-weight: 600;

  margin: 0;

  display: flex;

  font-family: "Avenir-Black";

  font-size: 16px;

  line-height: 100%;

  color: #191d18;

  letter-spacing: 0;

  gap: 8px;

}

.myaxyl-strike {

  color: var(--myaxyl-strike);

  text-decoration: line-through;

  font-weight: 500;

  margin: 0 4px;

}

.myaxyl-final-price {

  color: var(--myaxyl-green);

  font-weight: 800;

}



.myaxyl-trust-row {

  display: flex;

  justify-content: space-between;

  margin-top: 30px;

  border: 1px solid var(--myaxyl-border);

  border-radius: 12px;

  padding: 20px 10px;

  align-items: center;

  gap: 32px;

}

.myaxyl-price-action-wrap {

}





/* Right Section */

.myaxyl-product-actions {

  flex: 1;

  display: flex;

  /*justify-content:flex-end;*/

  align-items: center;

  gap: 12px;

}



/* Premium Add to Cart */

.myaxyl-cart-btn {

  flex: 1;

  max-width: 300px;

  height: 54px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 0 28px;

  border-radius: 50px;

  text-decoration: none;

  background: var(--myaxyl-green);

  color: #fff;

  font-size: 16px;

  font-weight: 600;

  letter-spacing: .3px;

  box-shadow: 0 10px 25px rgba(46, 125, 50, .25);

  transition: all .35s ease;

}



.myaxyl-cart-btn i {

  width: 34px;

  height: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: rgba(255, 255, 255, .18);

  font-size: 15px;

  transition: .35s;

}



.myaxyl-cart-btn:hover {

  color: #fff;

  transform: translateY(-3px);

  box-shadow: 0 15px 35px rgba(46, 125, 50, .35);

}



.myaxyl-cart-btn:hover i {

  transform: rotate(-10deg) scale(1.1);

  background: rgba(255, 255, 255, .28);

}



/* Wishlist */

.myaxyl-wishlist-btn {

  width: 54px;

  height: 54px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #fff;

  border: 1px solid #e7e7e7;

  color: #666;

  text-decoration: none;

  font-size: 18px;

  box-shadow: 0 8px 20px rgba(0, 0, 0, .08);

  transition: all .35s ease;

}



.myaxyl-wishlist-btn:hover {

  background: #ff4d6d;

  color: #fff;

  border-color: #ff4d6d;

  transform: translateY(-3px);

  box-shadow: 0 12px 25px rgba(255, 77, 109, .35);

}



/* Responsive */

@media(max-width:768px) {



  .myaxyl-price-action-wrap {

    flex-direction: column;

    align-items: stretch;

  }



  .myaxyl-price-box {

    flex: 100%;

  }



  .myaxyl-product-actions {

    width: 100%;

  }



  .myaxyl-cart-btn {

    max-width: none;

    width: 100%;

  }

}

.myaxyl-trust-item {

  display: flex;

  flex-direction: column;

}

.myaxyl-trust-icon {

  transition:

    transform 0.35s ease,

    box-shadow 0.35s ease,

    border-color 0.35s ease,

    color 0.35s ease;

  text-align: center;

}

.myaxyl-trust-icon h5 {

  display: block;

  font-family: "Amstir-Regular";

  font-size: 20px;

  color: #1e4b3c;

  line-height: 20px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  max-width: 100%;

  text-align: left;

}

.myaxyl-trust-label-wrap h6 {

  font-size: 15px;

  line-height: 1.3;

  color: var(--myaxyl-ink);

  font-weight: 600;

  margin: 0;

  text-align: center;

  margin-top: 10px;

}



.myaxyl-trust-label-wrap p {

  font-size: 15px;

  line-height: 1.3;

  color: var(--myaxyl-ink);

  font-weight: 600;

  margin: 0;

}



/* ---------------- LIGHTBOX ---------------- */



.myaxyl-lightbox {

  position: fixed;

  inset: 0;

  background: #0e1210;

  display: none;

  align-items: center;

  justify-content: center;

  z-index: 9999;

  opacity: 0;

  transition: opacity 0.32s ease;

}

.myaxyl-lightbox.myaxyl-open {

  display: flex;

  opacity: 1;

}



.myaxyl-lightbox-stage {

  position: relative;

  width: min(640px, 92vw);

  height: min(820px, 88vh);

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  border-radius: 15px;

  transform: scale(0.94);

  transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);

}

.myaxyl-lightbox.myaxyl-open .myaxyl-lightbox-stage {

  transform: scale(1);

}



.myaxyl-lightbox-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition: opacity 0.3s ease;

}



.myaxyl-lightbox-caption-wrap {

  position: absolute;

  top: 0;

  left: 0;

  width: 52%;

  height: 100%;

  padding: 52px 40px;

  background: linear-gradient(115deg,

      rgba(249, 243, 238, 0.97) 0%,

      rgba(249, 243, 238, 0.92) 46%,

      rgba(249, 243, 238, 0) 82%);

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

}

.myaxyl-lightbox-heading-wrap h2 {

  font-size: clamp(28px, 3.4vw, 40px);

  color: var(--myaxyl-green);

}

.myaxyl-lightbox-divider {

  width: 44px;

  height: 2px;

  background: var(--myaxyl-green);

  opacity: 0.5;

  margin: 18px 0 20px;

}

.myaxyl-lightbox-text-wrap p {

  font-size: 16px;

  line-height: 1.65;

  color: var(--myaxyl-ink);

  max-width: 360px;

}

.myaxyl-lightbox-text-wrap strong {

  font-weight: 700;

}



.myaxyl-lightbox-close {

  position: absolute;

  top: 24px;

  right: 28px;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  border: none;

  background: rgba(255, 255, 255, 0.92);

  color: #1a1a1a;

  font-size: 20px;

  cursor: pointer;

  z-index: 5;

  transition:

    transform 0.25s ease,

    background 0.25s ease;

}

.myaxyl-lightbox-close:hover {

  transform: rotate(90deg);

  background: #fff;

}



.myaxyl-lightbox-nav {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 54px;

  height: 54px;

  border-radius: 50%;

  background: #fff;

  color: #1e4b3c;

  z-index: 1000;

  transition:

    transform 0.25s ease,

    background 0.25s ease;

}

.myaxyl-lightbox-nav:hover {

  background: var(--myaxyl-green);

  color: #fff;

  transform: translateY(-50%) scale(1.08);

}

.myaxyl-lightbox-prev {

  left: 20px;

}



.myaxyl-lightbox-next {

  right: 20px;

}



.myaxyl-lightbox-counter-wrap {

  position: absolute;

  bottom: 22px;

  left: 50%;

  transform: translateX(-50%);

  background: rgba(255, 255, 255, 0.92);

  padding: 6px 16px;

  border-radius: 999px;

}

.myaxyl-lightbox-counter-wrap p {

  font-size: 16px;

  font-weight: 700;

  color: var(--myaxyl-ink);

  letter-spacing: 0.03em;

  margin: 0;

}



/* ---------------- ANIMATIONS ---------------- */



@keyframes myaxylRise {

  from {

    opacity: 0;

    transform: translateY(28px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

@keyframes myaxylFadeDown {

  from {

    opacity: 0;

    transform: translateY(-8px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

@keyframes myaxylDotPulse {

  0%,

  100% {

    opacity: 0.15;

    transform: scale(0.7);

  }

  50% {

    opacity: 1;

    transform: scale(1.15);

  }

}

@keyframes myaxylBreathe {

  0%,

  100% {

    box-shadow: 0 10px 30px -20px rgba(30, 75, 60, 0.5);

  }

  50% {

    box-shadow: 0 15px 34px -16px rgba(30, 75, 60, 0.35);

  }

}



@media (prefers-reduced-motion: reduce) {

  * {

    animation-duration: 0.001s !important;

    transition-duration: 0.001s !important;

  }

}



/* ---------------- RESPONSIVE ---------------- */



@media (max-width: 980px) {

  .myaxyl-container {

    display: block;

  }

  .myaxyl-gallery-col {

    position: static;

    margin-bottom: 20px;

  }

  .myaxyl-details-col h1 {

    font-size: 28px;

  }

  .myaxyl-lightbox-prev {

    left: 15px;

  }

  .myaxyl-lightbox-next {

    right: 15px;

  }

}



@media (max-width: 620px) {

  .myaxyl-page {

    padding: 24px 16px 60px;

  }

  .myaxyl-caption-box {

    width: 78%;

    padding: 20px 16px;

  }

  .myaxyl-caption-text-wrap p {

    max-width: 100%;

  }



  .myaxyl-lightbox-caption-wrap {

    width: 100%;

    height: 44%;

    top: auto;

    bottom: 0;

    background: linear-gradient(0deg,

        rgba(249, 243, 238, 0.97) 0%,

        rgba(249, 243, 238, 0.92) 55%,

        rgba(249, 243, 238, 0) 100%);

    padding: 24px 22px;

  }

  .myaxyl-lightbox-img {

    height: 100%;

  }

  .myaxyl-lightbox-stage {

    height: 92vh;

    width: 96vw;

    border-radius: 10px;

  }

  .myaxyl-lightbox-text-wrap p {

    font-size: 16px;

    max-width: 100%;

  }

  .myaxyl-lightbox-heading-wrap h2 {

    font-size: 24px;

  }

}



.mf-benefit-main-section,

.mf-ingredient-main-section {

  width: 100%;

  padding: 30px 0px;

  background: #ffffff;

}



.mf-benefit-main-section {

  border-bottom: 1px solid #ece7df;

}



.mf-benefit-note-wrapper {

  text-align: center;

  margin-bottom: 8px;

}



.mf-benefit-note-wrapper p {

  margin: 0;

  font-size: 15px;

  color: #777;

}



.mf-benefit-heading-wrapper,

.mf-ingredient-heading-wrapper {

  text-align: center;

  margin-bottom: 25px;

}



.mf-benefit-heading-wrapper h2,

.mf-ingredient-heading-wrapper h2 {

  margin: 0;

  font-size: 35px;

  color: #1f4b3f;

  font-weight: 500;

  font-family: "Marcellus";

}



/*=========================================

Benefit Grid

=========================================*/



.mf-benefit-container {

  max-width: 1400px;

  margin: auto;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 38px;

}



.mf-benefit-left-box,

.mf-benefit-right-box {

  border: 1px solid #2e6758;

  border-radius: 4px;

  padding: 34px;

  transition: 0.45s;

}



.mf-benefit-left-box {

  background: #edf9f0;

}



.mf-benefit-right-box {

  background: #fdf8f6;

}



.mf-benefit-left-box:hover,

.mf-benefit-right-box:hover {

  transform: translateY(-8px);

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);

}



.mf-benefit-item {

  display: flex;

  align-items: flex-start;

  gap: 18px;

  margin-bottom: 25px;

  transition: 0.35s;

}



.mf-benefit-item:last-child {

  margin-bottom: 0;

}



.mf-benefit-item:hover {

  transform: translateX(10px);

}



.mf-benefit-icon-box img {

  width: 28px;

  transition: 0.4s;

}



.mf-benefit-item:hover .mf-benefit-icon-box {

  background: #1f4b3f;

  transform: rotate(8deg);

}



.mf-benefit-item:hover .mf-benefit-icon-box img {

  transform: scale(1.15);

}



.mf-benefit-danger-icon {

  width: 30px;

  height: 30px;

  min-width: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid #ff4b4b;

  border-radius: 6px;

  color: #ff1d1d;

  font-size: 18px;

  font-weight: 700;

  transition: 0.35s;

}



.danger-item:hover .mf-benefit-danger-icon {

  background: #ff1d1d;

  color: #fff;

  transform: rotate(90deg);

}



.mf-benefit-content {

  flex: 1;

}



.mf-benefit-content h3 {

  margin: 0 0 5px;



  font-size: 18px;

  color: #1f1f1f;

  transition: 0.3s;

}



.mf-benefit-item:hover h3 {

  color: #1f4b3f;

}



.mf-benefit-text p {

  margin: 0;

  font-size: 15px;

  color: #727272;

}



/*=========================================

Ingredient

=========================================*/



.mf-ingredient-main-section {

  background: #faf9f5;

}



.mf-ingredient-container {

  max-width: 1400px;

  margin: auto;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 36px;

}



.mf-ingredient-card {

  background: #fff;

  overflow: hidden;

  transition: 0.45s;

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);

}



.mf-ingredient-card:hover {

  transform: translateY(-10px);

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);

}



.mf-ingredient-image-box {

  height: 270px;

  overflow: hidden;

  position: relative;

}



.mf-ingredient-image-box img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 0.7s;

}



.mf-ingredient-card:hover img {

  transform: scale(1.12);

}



.mf-ingredient-image-box:before {

  content: "";

  position: absolute;

  top: 0;

  left: -120%;

  width: 55%;

  height: 100%;

  background: linear-gradient(90deg,

      transparent,

      rgba(255, 255, 255, 0.45),

      transparent);

  transition: 0.8s;

  z-index: 2;

}



.mf-ingredient-card:hover .mf-ingredient-image-box:before {

  left: 140%;

}



.mf-ingredient-content {

  padding: 28px;

  text-align: center;

}



.mf-ingredient-content h3 {

  margin: 0;

  color: #1f4b3f;

  font-size: 25px;

  font-weight: 500;

  font-family: "Marcellus";

}



.mf-ingredient-subtitle {

  margin: 16px 0;

}



.mf-ingredient-subtitle p {

  margin: 4px 0;

  font-size: 17px;

  color: #666;

}



.mf-ingredient-description p {

  margin: 0;

  font-size: 16px;

  line-height: 30px;

  color: #6f6f6f;

}



/*=========================================

Responsive

=========================================*/



@media (max-width: 1200px) {

  .mf-benefit-container,

  .mf-ingredient-container {

    gap: 25px;

  }



  .mf-benefit-heading-wrapper h2,

  .mf-ingredient-heading-wrapper h2 {

    font-size: 48px;

  }

}



@media (max-width: 991px) {

  .mf-benefit-container,

  .mf-ingredient-container {

    grid-template-columns: 1fr;

  }



  .mf-benefit-main-section,

  .mf-ingredient-main-section {

    padding: 60px 20px;

  }



  .mf-benefit-heading-wrapper h2,

  .mf-ingredient-heading-wrapper h2 {

    font-size: 25px;

  }

}



@media (max-width: 767px) {

  .mf-benefit-main-section,

  .mf-ingredient-main-section {

    padding: 45px 15px;

  }



  .mf-benefit-left-box,

  .mf-benefit-right-box {

    padding: 22px;

  }



  .mf-benefit-item {

    gap: 15px;

    display: block;

  }

  .mf-benefit-icon-box img {

    width: 56px;

    height: auto;

  }

  .mf-benefit-item:hover .mf-benefit-icon-box {

    background: #1f4b3f;

  }



  .mf-benefit-item:hover .mf-benefit-icon-box img {

    filter: brightness(0) invert(1);

  }

  .mf-benefit-icon-box {

    width: 46px;

    height: 46px;

    min-width: 46px;

  }



  .mf-benefit-icon-box img {

    width: 22px;

  }



  .mf-benefit-content h3 {

    font-size: 21px;

  }



  .mf-benefit-text p {

    font-size: 15px;

    line-height: 26px;

  }



  .mf-benefit-heading-wrapper h2,

  .mf-ingredient-heading-wrapper h2 {

    font-size: 25px;

  }



  .mf-ingredient-image-box {

    height: 220px;

  }



  .mf-ingredient-content {

    padding: 22px;

  }



  .mf-ingredient-content h3 {

    font-size: 25px;

  }



  .mf-ingredient-subtitle p {

    font-size: 15px;

  }



  .mf-ingredient-description p {

    font-size: 15px;

    line-height: 26px;

  }

}



.mf-benefit-icon-box {

  position: relative;

}



.mf-benefit-icon-box img {

  width: 38px;

  height: 38px;

  transition: 0.35s ease;

  object-fit: contain;

  padding: 10px;

}



/* Green check badge */



.mf-benefit-icon-box::after {

  content: "✓";

  position: absolute;

  right: -2px;

  bottom: -2px;

  width: 20px;

  height: 20px;

  background: #4d735d;

  color: #fff;

  border-radius: 50%;

  border: 2px solid #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 12px;

  font-weight: 700;

  box-sizing: border-box;

  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);

}

.mf-benefit-item:hover .mf-benefit-icon-box::after {

  transform: scale(1.15) rotate(360deg);

  transition: 0.4s ease;

}

.mf-benefit-icon-box {

  width: 45px;

  height: 45px;

  border: 1px solid #476d5c;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #fff;

  transition: 0.35s ease;

}



/* Hover */



.mf-benefit-item:hover .mf-benefit-icon-box {

  background: #1f4b3f;

}



.mf-benefit-item:hover .mf-benefit-icon-box img {

  filter: brightness(0) invert(1);

}



.ptf-main-section {

  width: 100%;

  padding: 20px 0;

  background: #fff;

}



.ptf-heading-box {

  text-align: center;

  margin-bottom: 45px;

}



.ptf-heading-box h2 {

  margin: 0;

  font-family: "Marcellus";

  font-size: 35px;

  color: #1d4d42;

  font-weight: 500;

}



/*=========================================

Container

=========================================*/



.ptf-container {

  margin: auto;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 34px;

}



/*=========================================

Card

=========================================*/



.ptf-card {

  background: #fbfaf7;

  padding: 30px;

  text-align: center;

  transition: 0.45s;

  position: relative;

  overflow: hidden;

}



.ptf-card:hover {

  transform: translateY(-10px);

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);

}



.ptf-card::before {

  content: "";

  position: absolute;

  top: 0;

  left: -120%;

  width: 60%;

  height: 100%;

  background: linear-gradient(90deg,

      transparent,

      rgba(255, 255, 255, 0.45),

      transparent);

  transition: 0.8s;

}



.ptf-card:hover::before {

  left: 140%;

}



/*=========================================

Image

=========================================*/



.ptf-image-box {

  width: 92px;

  height: 92px;

  margin: auto;

  border-radius: 50%;

  overflow: hidden;

  position: relative;

}



.ptf-image-box img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 0.7s;

}



.ptf-card:hover .ptf-image-box img {

  transform: scale(1.18) rotate(3deg);

}



/*=========================================

Content

=========================================*/



.ptf-content {

  margin-top: 24px;

}



.ptf-content h3 {

  margin: 0;

  font-family: "Marcellus";

  font-size: 35px;

  color: #245347;

  transition: 0.35s;

}



.ptf-card:hover h3 {

  color: #8d6a2f;

}



.ptf-text {

  margin-top: 10px;

}



.ptf-text p {

  margin: 0;

  font-family: "Inter", sans-serif;

  color: #777;

  font-size: 16px;

}



/*=========================================

Banner

=========================================*/



.ptf-banner-section {

  width: 100%;

  background: #fff;

  padding: 0 20px;

}



.ptf-banner-image {

  max-width: 1400px;

  margin: auto;

  overflow: hidden;

}



.ptf-banner-image img {

  width: 100%;

  display: block;

  transition: 1s;

}



.ptf-banner-image:hover img {

  transform: scale(1.03);

}



/*=========================================

Steps

=========================================*/



.ptf-step-section {

  width: 100%;

  background: #fff;

  padding: 0 20px 70px;

}

.step-img {

  width: 100%;

}

.step-img img {

  width: 100%;

}

.ptf-step-container {

  margin: auto;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  border: 1px solid #e4e4e4;

  border-top: none;

}



.ptf-step-card {

  text-align: center;

  background: #fff;

  border-right: 1px solid #e4e4e4;

  transition: 0.35s;

}



.ptf-step-card:last-child {

  border-right: none;

}



.ptf-step-card:hover {

  background: #faf9f5;

}



/*=========================================

Number

=========================================*/



.ptf-step-number {

  padding: 26px 15px 8px;

}



.ptf-step-number span {

  font-family: 'Amstir-Regular';

  font-size: 48px;

  color: #245347;

  transition: 0.35s;

}



.ptf-step-card:hover .ptf-step-number span {

  color: #a17534;

}



/*=========================================

Title

=========================================*/



.ptf-step-title {

  margin-bottom: 25px;

}



.ptf-step-title h3 {

  margin: 0;

  font-size: 22px;

  font-family: "Inter", sans-serif;

  font-weight: 600;

  color: #777;

  letter-spacing: 2px;

}



/*=========================================

Description

=========================================*/



.ptf-step-description {

  border-top: 1px solid #e4e4e4;

  padding: 26px 25px 35px;

}



.ptf-step-description p {

  margin: 0;

  font-family: "Inter", sans-serif;

  color: #666;

  line-height: 31px;

  font-size: 16px;

}



/*=========================================

Responsive

=========================================*/



@media (max-width: 1200px) {

  .ptf-heading-box h2 {

    font-size: 48px;

  }



  .ptf-content h3 {

    font-size: 34px;

  }

}



@media (max-width: 991px) {

  .ptf-container {

    grid-template-columns: 1fr;

  }



  .ptf-step-container {

    grid-template-columns: 1fr;

    border: none;

  }



  .ptf-step-card {

    border: 1px solid #e5e5e5;

    margin-bottom: 20px;

  }



  .ptf-main-section {

    padding: 60px 20px 30px;

  }



  .ptf-step-section {

    padding-bottom: 20px;

  }

}



@media (max-width: 767px) {

  .ptf-main-section {

    padding: 45px 15px 25px;

  }



  .ptf-banner-section,

  .ptf-step-section {

    padding-left: 15px;

    padding-right: 15px;

  }



  .ptf-heading-box {

    margin-bottom: 30px;

  }



  .ptf-heading-box h2 {

    font-size: 36px;

  }



  .ptf-card {

    padding: 25px 18px;

  }



  .ptf-image-box {

    width: 80px;

    height: 80px;

  }



  .ptf-content {

    margin-top: 18px;

  }



  .ptf-content h3 {

    font-size: 30px;

  }



  .ptf-text p {

    font-size: 15px;

  }



  .ptf-step-number span {

    font-size: 40px;

  }

  .ptf-step-title {

    margin-bottom: 8px;

  }

  .ptf-step-title h3 {

    font-size: 15px;

  }



  .ptf-step-description {

    padding: 20px;

  }



  .ptf-step-description p {

    font-size: 15px;

    line-height: 27px;

  }

}

/* ===================================faq================================ */



.faq-page {

  margin: 0;

  padding: 0;

  background: var(--faq-bg);

  font-family: "Georgia", "Iowan Old Style", "Times New Roman", serif;

}



.faq-section {

  width: 100%;

  padding: 30px 0px;

  background: var(--faq-bg);

  display: flex;

  justify-content: center;

}



.faq-container {

  width: 100%;

}



.faq-heading-wrap {

  text-align: center;

  margin-bottom: 24px;

  animation: faq-fade-down 0.7s ease both;

}



.faq-eyebrow-wrap {

  display: block;

  margin-bottom: 10px;

}



.faq-eyebrow-wrap span {

  color: var(--faq-eyebrow);

  font-family: "Marcellus";

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 4px;

}



.faq-title-wrap h2 {

  color: var(--faq-heading);

  font-size: 34px;

  font-weight: 400;

  margin: 0;

  letter-spacing: 0.2px;

  font-family: "Marcellus";

}



.faq-list-wrap {

  display: flex;

  flex-direction: column;

  background: var(--faq-card-bg);

  border-radius: 15px;

  overflow: hidden;

  animation: faq-fade-up 0.8s ease both;

  animation-delay: 0.1s;

}



.faq-item-wrap {

  border-bottom: 1px solid var(--faq-divider);

  position: relative;

  transition: background 0.35s ease;

}



.faq-item-wrap:last-child {

  border-bottom: none;

}



.faq-toggle {

  position: absolute;

  opacity: 0;

  pointer-events: none;

}



.faq-question-wrap {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding: 22px 40px;

  cursor: pointer;

  user-select: none;

  transition:

    background 0.35s ease,

    padding-left 0.35s ease;

}



.faq-question-wrap:hover {

  background: #fbfaf6;

  padding-left: 46px;

}



.faq-question-wrap span {

  font-family: "Amstir-Regular";

  font-size: 20px;

  line-height: 20px;

  letter-spacing: 0;

  color: #191D18E5;

  flex: 1;

  transition: color var(--ia-transition);

}



.faq-icon-wrap {

  flex-shrink: 0;

  width: 22px;

  height: 22px;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);

}



.faq-icon-wrap svg {

  width: 16px;

  height: 16px;

  stroke: var(--faq-icon);

  stroke-width: 2px;

  fill: none;

  stroke-linecap: round;

  stroke-linejoin: round;

}



.faq-answer-outer {

  display: grid;

  grid-template-rows: 0fr;

  transition: grid-template-rows 0.45s cubic-bezier(0.65, 0, 0.35, 1);

}



.faq-answer-inner-wrap {

  overflow: hidden;

}



.faq-answer-content-wrap {

  padding: 0 40px 0;

}



.faq-answer-content-wrap p {

  margin: 0 0 24px;

  color: var(--faq-answer-text);

  font-family: "Marcellus";

  font-size: 15px;

  line-height: 1.7;

  letter-spacing: 0.1px;

}



/* checked state */



.faq-toggle:checked~.faq-answer-outer {

  grid-template-rows: 1fr;

}



.faq-toggle:checked~.faq-question-wrap span {

  color: var(--faq-question-open);

  font-weight: 600;

}



.faq-toggle:checked~.faq-question-wrap .faq-icon-wrap {

  transform: rotate(180deg);

}



.faq-toggle:checked~.faq-question-wrap {

  background: #fbfaf6;

}



.faq-item-wrap:has(.faq-toggle:checked) {

  background: #fdfcf9;

}



/* focus visibility for keyboard users */

.faq-toggle:focus-visible~.faq-question-wrap {

  outline: 2px solid var(--faq-eyebrow);

  outline-offset: -2px;

}



@keyframes faq-fade-down {

  from {

    opacity: 0;

    transform: translateY(-15px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes faq-fade-up {

  from {

    opacity: 0;

    transform: translateY(18px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@media (prefers-reduced-motion: reduce) {

  .faq-heading-wrap,

  .faq-list-wrap,

  .faq-icon-wrap,

  .faq-answer-outer,

  .faq-question-wrap {

    animation: none !important;

    transition: none !important;

  }

}



@media (max-width: 768px) {

  .faq-section {

    padding: 35px 16px 72px;

  }

  .faq-title-wrap h2 {

    font-size: 28px;

  }

  .faq-question-wrap {

    padding: 18px 22px;

  }

  .faq-question-wrap:hover {

    padding-left: 26px;

  }

  .faq-question-wrap span {

    font-size: 15.5px;

  }

  .faq-answer-content-wrap {

    padding: 0 22px 0;

  }

}



@media (max-width: 420px) {

  .faq-eyebrow-wrap span {

    font-size: 11px;

    letter-spacing: 3px;

  }

  .faq-title-wrap h2 {

    font-size: 24px;

  }

  .faq-question-wrap span {

    font-size: 14.5px;

  }

}



/* ===========================review=============================== */



.cr-main-section {

  width: 100%;

  padding: 0px 0px 30px;

  background: #fff;

}



.cr-container {

  margin: auto;

}



/*=========================================

Heading

=========================================*/



.cr-heading-box {

  text-align: center;

  margin-bottom: 55px;

}



.cr-heading-box h2 {

  margin: 0;

  font-family: "Marcellus";

  font-size: 38px;

  font-weight: 500;

  color: #1c4f43;

}



.cr-rating-box {

  margin-top: 15px;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 10px;

}



.cr-rating-text span {

  font-size: 20px;

  color: #666;

  font-family: "Inter", sans-serif;

}



.cr-rating-stars {

  color: #ffb400;

  font-size: 20px;

  letter-spacing: 2px;

}



/*=========================================

Grid

=========================================*/



.cr-review-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 20px;

}



/*=========================================

Card

=========================================*/



.cr-review-card {

  background: #fff;

  border: 1px solid #dfdfdf;

  border-radius: 8px;

  padding: 30px;

  transition: 0.4s ease;

  position: relative;

  overflow: hidden;

}



.cr-review-card:hover {

  transform: translateY(-8px);

  border-color: #1c4f43;

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);

}



/* Top Shine */



.cr-review-card::before {

  content: "";

  position: absolute;

  top: 0;

  left: -120%;

  width: 60%;

  height: 100%;

  background: linear-gradient(90deg,

      transparent,

      rgba(255, 255, 255, 0.45),

      transparent);

  transition: 0.8s;

}



.cr-review-card:hover::before {

  left: 140%;

}



/*=========================================

Top

=========================================*/



.cr-review-top {

  display: flex;

  align-items: flex-start;

  gap: 18px;

}



/*=========================================

User Image

=========================================*/



.cr-user-image {

  width: 64px;

  height: 64px;

  border-radius: 50%;

  overflow: hidden;

  flex-shrink: 0;

  background: #efefef;

}



.cr-user-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/*=========================================

User Info

=========================================*/



.cr-user-info {

  flex: 1;

}



.cr-user-info h3 {

  margin: 0;

  font-family: "Marcellus";

  color: #1c4f43;

  font-size: 24px;

  font-weight: 500;

}



.cr-review-time {

  margin-top: 3px;

}



.cr-review-time span {

  font-size: 15px;

  color: #9d9d9d;

  font-family: "Inter", sans-serif;

}



.cr-review-stars {

  margin-top: 8px;

  color: #ffb400;

  font-size: 18px;

  letter-spacing: 2px;

}



/*=========================================

Title

=========================================*/



.cr-review-title {

  margin-top: 18px;

}



.cr-review-title h4 {

  margin: 0;

  font-family: "Inter", sans-serif;

  color: #1c4f43;

  font-size: 18px;

  font-weight: 600;

}



/*=========================================

Content

=========================================*/



.cr-review-content {

  margin-top: 12px;

}



.cr-review-content p {

  margin: 0;

  color: #555;

  font-family: "Inter", sans-serif;

  line-height: 1.75;

  font-size: 16px;

}



/*=========================================

Hidden Review

=========================================*/



.cr-hidden-review {

  display: none;

}



/*=========================================

Load More

=========================================*/



.cr-loadmore-box {

  text-align: center;

  margin-top: 40px;

}



#crLoadMoreBtn {

  padding: 15px 36px;

  border: 1px solid #d7d7d7;

  background: #fff;

  color: #444;

  cursor: pointer;

  border-radius: 6px;

  font-size: 18px;

  font-family: "Inter", sans-serif;

  transition: 0.35s;

}



#crLoadMoreBtn:hover {

  background: #1c4f43;

  color: #fff;

  border-color: #1c4f43;

}



/*=========================================

Responsive

=========================================*/



@media (max-width: 991px) {

  .cr-review-grid {

    grid-template-columns: 1fr;

  }



  .cr-heading-box h2 {

    font-size: 46px;

  }

}



@media (max-width: 767px) {

  .cr-main-section {

    padding: 0px 0px;

  }



  .cr-heading-box {

    margin-bottom: 40px;

  }



  .cr-heading-box h2 {

    font-size: 25px;

  }



  .cr-review-card {

    padding: 22px;

  }



  .cr-user-image {

    width: 54px;

    height: 54px;

  }



  .cr-user-info h3 {

    font-size: 21px;

  }



  .cr-review-content p {

    font-size: 15px;

    line-height: 1.65;

  }



  .cr-rating-text span,

  .cr-rating-stars {

    font-size: 17px;

  }



  #crLoadMoreBtn {

    width: 100%;

  }

}



.licensed-logo {

  display: flex;

  justify-content: space-between;

  align-items: center;

  width: 40%;

}

.fill-responsive {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

  align-items: center;

}

.youtube-review iframe {

  width: 100%;

}


/* ========================about us page==================== */


/* =================================================== ORNAMENTS / SECTION HEADINGS
=================================================== */
.leaf-ornament {
  position: relative;
  width: 26px;
  height: 16px;
  display: inline-block;
  margin-bottom: 14px;
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  border-radius: 0 100% 0 100%;
  animation: sway 3.2s ease-in-out infinite;
  transform-origin: bottom left;
}

@keyframes sway {

  0%,
  100% {
    transform: rotate(-6deg);
  }

  50% {
    transform: rotate(6deg);
  }
}

.section-heading {
  text-align: center;
  margin-bottom: 56px;
}

.section-heading .eyebrow {
  display: block;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 10px;
}

.section-heading h2 {
  font-size: 42px;
}

.section-heading .rule {
  width: 70px;
  height: 2px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, var(--deep-green), transparent);
}

/* =================================================== PAGE HERO
=================================================== */
.page-hero {
  position: relative;
  min-height: 265px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, rgba(18, 48, 40, .88), rgba(30, 75, 60, .78)), url('../images/in-back-2.jpg') center/cover no-repeat;
  overflow: hidden;
}

.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
}

.page-hero::before {
  top: -90px;
  left: -70px;
}

.page-hero::after {
  bottom: -110px;
  right: -60px;
}

.hero-inner {
  position: relative;
  z-index: 2;
  animation: heroFade 1.1s ease both;
}

@keyframes heroFade {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-inner span.tag {
  display: inline-block;
  color: var(--gold-soft);
  letter-spacing: 3px;
  font-size: 13px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.hero-inner h1 {
  color: #fff;
  font-size: 58px;
  margin-bottom: 16px;
  font-family: 'Marcellus';
}

.breadcrumb-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, .85);
  letter-spacing: .5px;
}

.breadcrumb-row a {
  color: var(--gold-soft);
  transition: color .3s;
}

.breadcrumb-row a:hover {
  color: #fff;
}

/* =================================================== REVEAL ON SCROLL (progressive enhancement, no JS)
=================================================== */
.reveal {
  opacity: 1;
  transform: none;
}

@supports (animation-timeline: view()) {
  .reveal {
    opacity: 0;
    animation: fadeUp 1s ease both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }

  .reveal-left {
    animation-name: fadeRight;
  }

  .reveal-right {
    animation-name: fadeLeft;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* =================================================== WHO WE ARE
=================================================== */
.who-we-are {
  padding: 40px 0 50px;
  background: var(--cream);
}

.who-media {
  position: relative;
}

.who-media .frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .6s ease;
}

.who-media .frame img {
  transition: transform .8s ease;
  filter: saturate(1.05);
  width: 100%;
}

.who-media:hover .frame img {
  transform: scale(1.08);
}

.who-media .frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(30, 75, 60, .28), transparent 55%);
}

.badge-float {
  position: absolute;
  bottom: -26px;
  right: -18px;
  background: var(--deep-green);
  color: #fff;
  padding: 18px 26px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  text-align: center;
  animation: floatY 4s ease-in-out infinite;
}

@keyframes floatY {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.badge-float h3 {
  color: #fff;
  font-size: 30px;
  line-height: 1;
}

.badge-float small {
  display: block;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-top: 4px;
}

.who-text .eyebrow {
  display: block;
  color: var(--gold);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 12px;
}

.eyebrow img {
  width: 20px;
}

.who-text h2 {
  text-align: left;
}

.who-text p {
  color: var(--ink-soft);
  font-size: 16.5px;
}

.who-text .signature {
  margin-top: 26px;
  font-family: 'Marcellus';
  font-style: italic;
  font-size: 20px;
  color: var(--deep-green);
  border-left: 3px solid var(--gold);
  padding-left: 16px;
}

/* =================================================== COUNTER STRIP
=================================================== */
.legacy-strip {
  background: linear-gradient(135deg, rgba(18, 48, 40, .94), rgba(30, 75, 60, .9)), url('https://picsum.photos/seed/paramparaleaf/1400/500') center/cover;
  padding: 70px 0;
  position: relative;
}

.stat-block {
  text-align: center;
  color: #fff;
  padding: 14px 10px;
  transition: transform .4s ease;
}

.stat-block:hover {
  transform: translateY(-8px);
}

.stat-block .num {
  font-family: 'Marcellus';
  color: var(--gold-soft);
  line-height: 1;
  font-size: 50px;
}

.stat-block .num::after {
  content: "+";
}

.stat-block .label {
  margin-top: 10px;
  font-size: 13.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}

.stat-block .divider {
  width: 34px;
  height: 2px;
  background: var(--gold);
  margin: 14px auto 0;
}

/* counter engine (CSS only) */
@property --n1 {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

@property --n2 {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

@property --n3 {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

@property --n4 {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

.c1 {
  counter-reset: c1 5;
}

.c1 .num::before {
  content: counter(c1);
}

.c2 {
  counter-reset: c2 1000;
}

.c2 .num::before {
  content: counter(c2);
}

.c3 {
  counter-reset: c3 7;
}

.c3 .num::before {
  content: counter(c3);
}

.c4 {
  counter-reset: c4 50;
}

.c4 .num::before {
  content: counter(c4);
}

@supports (animation-timeline: view()) {
  .c1 {
    --n1: 0;
    counter-reset: c1 var(--n1);
    animation: cnt1 1.6s ease-out forwards;
    animation-timeline: view();
    animation-range: entry 10% cover 45%;
  }

  .c2 {
    --n2: 0;
    counter-reset: c2 var(--n2);
    animation: cnt2 1.8s ease-out forwards;
    animation-timeline: view();
    animation-range: entry 10% cover 45%;
  }

  .c3 {
    --n3: 0;
    counter-reset: c3 var(--n3);
    animation: cnt3 1.6s ease-out forwards;
    animation-timeline: view();
    animation-range: entry 10% cover 45%;
  }

  .c4 {
    --n4: 0;
    counter-reset: c4 var(--n4);
    animation: cnt4 1.8s ease-out forwards;
    animation-timeline: view();
    animation-range: entry 10% cover 45%;
  }
}

@keyframes cnt1 {
  to {
    --n1: 5;
  }
}

@keyframes cnt2 {
  to {
    --n2: 1000;
  }
}

@keyframes cnt3 {
  to {
    --n3: 7;
  }
}

@keyframes cnt4 {
  to {
    --n4: 50;
  }
}

/* =================================================== ZIGZAG STORY BLOCKS
=================================================== */
.story-block {
  padding: 95px 0;
}

.story-block.alt {
  background: var(--sage);
}

.story-media {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;
}

.story-media img {
  transition: transform .7s ease;
  width: 100%;
}

.story-media:hover img {
  transform: scale(1.06);
}

.story-text {
  padding: 10px 10px;
}

.story-text .num-tag {
  font-family: 'Marcellus';
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}

.story-text h3 {
  font-size: 34px;
  margin-bottom: 18px;
}

.story-text p {
  color: var(--ink-soft);
  font-size: 16px;
}

/* ========================= VALUES / PILLARS ========================== */
.values {
  padding: 30px 0;
  background: var(--cream);
}

.value-card {
  background: #fff;
  border-radius: 14px;
  padding: 40px 26px;
  text-align: center;
  height: 100%;
  box-shadow: 0 10px 30px -18px rgba(18, 48, 40, .25);
  border: 1px solid rgba(30, 75, 60, .08);
  transition: all .45s cubic-bezier(.2, .8, .2, 1);
  position: relative;
  overflow: hidden;
}

.value-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--deep-green), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease;
}

.value-card:hover {
  transform: translateY(-12px);
  box-shadow: var(--shadow);
  border-color: transparent;
}

.value-card:hover::before {
  transform: scaleX(1);
}

.value-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--sage);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--deep-green);
  transition: all .5s ease;
}

.value-card:hover .value-icon {
  background: var(--deep-green);
  color: #fff;
  transform: rotate(360deg);
}

.value-card h4 {
  font-size: 22px;
  margin-bottom: 12px;
}

.value-card p {
  color: var(--ink-soft);
  font-size: 15px;
  margin-bottom: 0;
}

/* ===================== QUOTE / TRUSTED PARTNER BANNER============================== */
.quote-banner {
  position: relative;
  padding: 30px 0;
  text-align: center;
  background: linear-gradient(135deg, rgba(18, 48, 40, .9), rgba(30, 75, 60, .82)), url('https://picsum.photos/seed/paramparafamily/1600/700') center/cover fixed;
  color: #fff;
}

.quote-banner .quote-mark {
  font-family: 'Marcellus';
  font-size: 80px;
  color: var(--gold-soft);
  line-height: 1;
  margin-bottom: 6px;
}

.quote-banner h3 {
  color: #fff;
  font-size: 32px;
  font-weight: 500;
  font-style: italic;
  max-width: 820px;
  margin: 0 auto 20px;
  line-height: 1.5;
}

.quote-banner span.who {
  display: inline-block;
  letter-spacing: 2px;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--gold-soft);
}

/* =================================================== GALLERY (CSS-only lightbox, zoom, slide, close)
=================================================== */
.gallery {
  padding: 30px 0;
  background: var(--cream);
}

.gallery-grid .g-col {
  padding: 8px;
}

.gallery-item {
  display: block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: 0 10px 26px -16px rgba(18, 48, 40, .4);
}

.gallery-item .g-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.gallery-item:hover img {
  transform: scale(1.18);
}

.gallery-item .g-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(18, 48, 40, .85));
  display: flex;
  align-items: flex-end;
  padding: 16px;
  opacity: 0;
  transition: opacity .4s ease;
}

.gallery-item:hover .g-overlay {
  opacity: 1;
}

.gallery-item .g-overlay p {
  color: #fff;
  font-size: 14px;
  letter-spacing: .5px;
  margin: 0;
  transform: translateY(10px);
  transition: transform .4s ease;
}

.gallery-item:hover .g-overlay p {
  transform: translateY(0);
}

.gallery-item .zoom-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--deep-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  opacity: 0;
  transform: scale(.5);
  transition: all .35s ease;
}

.gallery-item:hover .zoom-icon {
  opacity: 1;
  transform: scale(1);
}

/* lightbox overlay */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.lightbox-overlay:target {
  display: flex;
}

.lightbox-bg {
  position: absolute;
  inset: 0;
  background: rgba(18, 30, 26, .92);
}

.lightbox-content {
  position: relative;
  z-index: 2;
  max-width: 78vw;
  max-height: 82vh;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
  animation: lbIn .45s ease both;
}

@keyframes lbIn {
  from {
    opacity: 0;
    transform: scale(.85) translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.lightbox-content img {
  max-width: 78vw;
  max-height: 82vh;
  object-fit: contain;
  display: block;
}

.lightbox-close {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 44px;
  height: 44px;
  background: var(--deep-green);
  color: #fff;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: all .3s ease;
}

.lightbox-close:hover {
  background: var(--gold);
  transform: rotate(90deg);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 3;
  transition: all .3s ease;
}

.lightbox-nav:hover {
  background: var(--gold);
  border-color: var(--gold);
}

.lightbox-prev {
  left: 4%;
}

.lightbox-next {
  right: 4%;
}

/* =================================================== CLOSING STRIP
=================================================== */
.closing-strip {
  padding: 60px 0;
  text-align: center;
  background: var(--sage);
}

.closing-strip .leaf-ornament {
  margin-bottom: 16px;
}

.closing-strip h3 {
  font-size: 28px;
  margin-bottom: 10px;
}

.closing-strip p {
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto;
}

/* =================================================== RESPONSIVE
=================================================== */
@media (max-width:991px) {
  .hero-inner h1 {
    font-size: 42px;
  }

  .section-heading h2 {
    font-size: 32px;
  }

  .who-text h2 {
    font-size: 30px;
  }

  .story-block {
    padding: 70px 0;
  }

  .story-text h3 {
    font-size: 26px;
  }

  .quote-banner h3 {
    font-size: 24px;
  }

  .badge-float {
    right: 14px;
    bottom: -20px;
    padding: 14px 18px;
  }

  .badge-float h3 {
    font-size: 22px;
  }
}

@media (max-width:575px) {
  .page-hero {
    min-height: 260px;
  }

  .hero-inner h1 {
    font-size: 32px;
  }

  .stat-block .num {
    font-size: 38px;
  }

  .lightbox-content,
  .lightbox-content img {
    max-width: 92vw;
    max-height: 70vh;
  }

  .lightbox-prev {
    left: 2%;
  }

  .lightbox-next {
    right: 2%;
  }
}

/* ==========================mission vision=============================== */
/* ---------- animations ---------- */
@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gentleSway {

  0%,
  100% {
    transform: rotate(-3deg) translateY(0);
  }

  50% {
    transform: rotate(3deg) translateY(-6px);
  }
}

@keyframes ringPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(193, 149, 63, 0.35);
  }

  50% {
    box-shadow: 0 0 0 14px rgba(193, 149, 63, 0);
  }
}

@keyframes floatSlow {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes drawLine {
  from {
    stroke-dashoffset: 300;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.reveal {
  animation: riseIn 0.9s cubic-bezier(.22, .9, .34, 1) both;
}

.reveal-1 {
  animation-delay: .05s;
}

.reveal-2 {
  animation-delay: .2s;
}

.reveal-3 {
  animation-delay: .35s;
}

.reveal-4 {
  animation-delay: .5s;
}

.leaf-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 10px 0 22px;
}

.leaf-divider.left-align {
  justify-content: flex-start;
}

.leaf-divider svg {
  width: 20px;
  height: 20px;
  fill: var(--gold);
}

.leaf-divider .rule {
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.section-label span {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .75rem;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 10px;
  position: relative;
  padding-left: 30px;
}

.section-label span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 1px;
  background: var(--gold);
  transform: translateY(-50%);
}

/* ================= HERO ================= */
.mv-hero {
  position: relative;
  padding: 30px 0 90px;
  background:
    radial-gradient(circle at 15% 20%, rgba(193, 149, 63, 0.10), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(30, 75, 60, 0.08), transparent 45%),
    var(--cream-deep);
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(30, 75, 60, 0.12);
}

.mv-hero-eyebrow {
  display: inline-block;
  font-family: 'Marcellus';
  font-style: italic;
  font-size: 1.1rem;
  color: var(--forest-soft);
  margin-bottom: 6px;
}

.mv-hero h1 {
  font-size: 3.9rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.mv-hero .lede p {
  font-size: 1.12rem;
  max-width: 640px;
  margin: 0 auto;
}

.hero-leaf-decor {
  position: absolute;
  width: 130px;
  height: 130px;
  opacity: .5;
  animation: gentleSway 7s ease-in-out infinite;
}

.hero-leaf-decor.left {
  top: -20px;
  left: -30px;
}

.hero-leaf-decor.right {
  bottom: -30px;
  right: -20px;
  animation-delay: 1.5s;
}

.hero-leaf-decor svg {
  width: 100%;
  height: 100%;
  fill: var(--forest);
  opacity: .18;
}

/* ================= FEATURE ROW (Mission / Vision) ================= */
.mv-feature {
  padding: 30px 0;
}

.mv-feature.alt {
  background: var(--cream-deep);
}


.mv-feature .copy p {
  margin-bottom: 16px;
  font-size: 1rem;
}

.mv-feature .copy p:last-of-type {
  margin-bottom: 0;
}

.pull-quote {
  margin-top: 26px;
  padding: 18px 22px;
  border-left: 3px solid var(--gold);
  background: rgba(193, 149, 63, 0.07);
  border-radius: 0 10px 10px 0;
}

.pull-quote p {
  font-family: 'Marcellus';
  font-style: italic;
  font-size: 1.25rem;
  color: var(--forest);
  line-height: 1.5;
}

.panel-core {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--cream);
  padding: 30px;
}

.panel-icon-ring {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  border: 1px solid rgba(232, 205, 148, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  animation: ringPulse 3.2s ease-in-out infinite, floatSlow 5s ease-in-out infinite;
}

.panel-icon-ring .ring-inner {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(250, 245, 233, 0.06);
  border: 1px solid rgba(232, 205, 148, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-icon-ring svg {
  width: 36px;
  height: 36px;
  stroke: var(--gold-soft);
  fill: none;
  stroke-width: 1.5;
}

.panel-core .tagline {
  font-family: 'Marcellus';
  font-style: italic;
  font-size: 1.3rem;
  color: var(--gold-soft);
  margin-bottom: 22px;
}

.panel-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.panel-tags span {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid rgba(232, 205, 148, 0.4);
  border-radius: 30px;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(250, 245, 233, 0.85);
  transition: background .35s ease, transform .35s ease, border-color .35s ease;
}

.mv-panel:hover .panel-tags span {
  border-color: var(--gold-soft);
}

.panel-tags span:hover {
  background: rgba(232, 205, 148, 0.16);
  transform: translateY(-3px);
}

/* ================= PILLARS ROW ================= */
.pillars {
  padding: 30px 0;
}

.pillars .section-title {
  margin-bottom: 52px;
}

.pillars .section-title h2 {
  font-size: 2.5rem;
  font-weight: 600;
}

.pillar-card {
  background: #fff;
  border-radius: 16px;
  padding: 38px 26px;
  height: 100%;
  text-align: center;
  border: 1px solid rgba(30, 75, 60, 0.08);
  box-shadow: 0 12px 30px -18px rgba(30, 75, 60, 0.18);
  transition: transform .4s cubic-bezier(.22, .9, .34, 1), box-shadow .4s ease;
  position: relative;
  overflow: hidden;
}

.pillar-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--forest), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}

.pillar-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 26px 44px -18px rgba(30, 75, 60, 0.3);
}

.pillar-card:hover::before {
  transform: scaleX(1);
}

.pillar-num {
  font-family: 'Marcellus';
  font-size: 40px;
  color: var(--gold);
  height: 80px;
  width: 80px;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  display: flex;
  background-color: #d7fae2;
  margin-bottom: 30px;
  border-radius: 50px;
}

.pillar-card h3 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.pillar-card p {
  font-size: .92rem;
}

/* ================= CLOSING ================= */
.mv-closing {
  background-image: url(../images/in-back.jpg);
  padding: 50px 0;
  text-align: center;
}

.mv-closing h2 {
  color: var(--cream);
  font-size: 2.3rem;
  font-weight: 600;
  margin-bottom: 18px;
}

.mv-closing p {
  color: rgba(250, 245, 233, 0.8);
  max-width: 650px;
  margin: 0 auto 8px;
  font-size: 1.02rem;
}

.mv-closing .signoff {
  font-family: 'Marcellus';
  font-style: italic;
  font-size: 1.2rem;
  color: var(--gold-soft);
  margin-top: 18px;
}

.mv-closing .leaf-divider svg {
  fill: var(--gold-soft);
}

@media (max-width: 991px) {
  .mv-hero h1 {
    font-size: 2.9rem;
  }

  .mv-feature {
    padding: 64px 0;
  }

  .mv-panel {
    min-height: 340px;
    margin-top: 36px;
  }
}

@media (max-width: 575px) {
  .mv-hero {
    padding: 80px 0 60px;
  }

  .mv-hero h1 {
    font-size: 2.3rem;
  }

  .mv-feature,
  .pillars {
    padding: 56px 0;
  }
}


/* ===========================founder============================= */


/* ===================================================
   FOUNDER PROFILE
=================================================== */
.founder-profile {
  padding: 30px 0 90px;
  background: var(--cream);
}

.profile-media {
  position: relative;
}

.profile-media .frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.profile-media .frame img {
  transition: transform .8s ease;
  filter: saturate(1.05);
  width: 100%;
}

.profile-media:hover .frame img {
  transform: scale(1.08);
}

.profile-media .frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(30, 75, 60, .28), transparent 55%);
}

.badge-float {
  position: absolute;
  bottom: -26px;
  right: -18px;
  background: var(--deep-green);
  color: #fff;
  padding: 18px 26px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  text-align: center;
  animation: floatY 4s ease-in-out infinite;
}

@keyframes floatY {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.badge-float h3 {
  color: #fff;
  font-size: 26px;
  line-height: 1;
  font-family: "Marcellus", serif;
}

.badge-float small {
  display: block;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-top: 4px;
}

.profile-text .eyebrow {
  display: block;
  color: var(--gold);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 12px;
}

.profile-text h2 {
  font-size: 38px;
  margin-bottom: 6px;
}

.profile-text .role-line {
  display: block;
  font-size: 15px;
  color: var(--ink-soft);
  letter-spacing: .5px;
  margin-bottom: 22px;
  text-align: left;
}

.profile-text p {
  color: var(--ink-soft);
  font-size: 16px;
}

.credential-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.credential-tags .tag-pill {
  padding: 9px 18px;
  border-radius: 30px;
  background: var(--sage);
  color: var(--deep-green-dark);
  font-size: 13px;
  letter-spacing: .4px;
  border: 1px solid rgba(30, 75, 60, .15);
  transition: all .35s ease;
}

.credential-tags .tag-pill:hover {
  background: var(--deep-green);
  color: #fff;
  transform: translateY(-4px);
}


/* ===================================================
   TIMELINE (Legacy through generations)
=================================================== */
.timeline-section {
  padding: 30px 0;
  background: var(--sage);
}

.timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding-left: 34px;
  border-left: 2px solid rgba(30, 75, 60, .25);
}

.timeline-item {
  position: relative;
  padding-bottom: 52px;
  transition: transform .4s ease;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item .dot {
  position: absolute;
  left: -43px;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--deep-green);
  border: 4px solid var(--cream-soft);
  transition: all .4s ease;
}

.timeline-item:hover .dot {
  background: var(--gold);
  transform: scale(1.3);
}

.timeline-item .year-tag {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.timeline-item .card {
  background: #fff;
  border-radius: 12px;
  padding: 26px 30px;
  box-shadow: 0 10px 28px -18px rgba(18, 48, 40, .3);
  transition: all .4s ease;
}

.timeline-item:hover .card {
  transform: translateX(10px);
  box-shadow: var(--shadow);
}

.timeline-item h4 {
  font-size: 23px;
  margin-bottom: 10px;
  font-family: 'Marcellus';
}

.timeline-item p {
  color: var(--ink-soft);
  font-size: 15px;
  margin-bottom: 0;
}

/* ===================================================
   ZIGZAG STORY BLOCKS
=================================================== */
.story-block {
  padding: 95px 0;
  background: var(--cream);
}

.story-media {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;
}

.story-media img {
  transition: transform .7s ease;
}

.story-media:hover img {
  transform: scale(1.06);
}

.story-text {
  padding: 10px 10px;
}

.story-text .num-tag {
  font-family: 'Marcellus';
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}

.story-text h3 {
  font-size: 32px;
  margin-bottom: 18px;
}

.story-text p {
  color: var(--ink-soft);
  font-size: 16px;
}

/* ===================================================
   QUOTE BANNER
=================================================== */
.quote-banner {
  position: relative;
  padding: 30px 0;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(18, 48, 40, .9), rgba(30, 75, 60, .82)),
    url(../images/in-back.jpg) center/cover fixed;
  color: #fff;
}

.quote-banner .quote-mark {
  font-family: 'Marcellus';
  font-size: 80px;
  color: var(--gold-soft);
  line-height: 1;
  margin-bottom: 6px;
}

.quote-banner h3 {
  color: #fff;
  font-size: 30px;
  font-weight: 500;
  font-style: italic;
  max-width: 840px;
  margin: 0 auto 20px;
  line-height: 1.5;
}

.quote-banner span.who {
  display: inline-block;
  letter-spacing: 2px;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--gold-soft);
}

/* ===================================================
   RECOGNITION LIST
=================================================== */
.recognition {
  padding: 30px 0;
  background: var(--sage);
}

.recog-item {
  background: #fff;
  border-radius: 12px;
  padding: 28px 26px;
  height: 100%;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  box-shadow: 0 8px 24px -18px rgba(18, 48, 40, .3);
  transition: all .4s ease;
  border-left: 3px solid transparent;
}

.recog-item:hover {
  transform: translateY(-8px);
  border-left: 3px solid var(--gold);
  box-shadow: var(--shadow);
}

.recog-item .recog-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sage);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--deep-green);
  transition: all .4s ease;
}

.recog-item:hover .recog-icon {
  background: var(--deep-green);
  color: #fff;
}

.recog-item h4 {
  font-size: 19px;
  margin-bottom: 8px;
}

.recog-item p {
  color: var(--ink-soft);
  font-size: 14.5px;
  margin-bottom: 0;
}

/* ===================================================
   RESPONSIVE
=================================================== */
@media (max-width:991px) {
  .hero-inner h1 {
    font-size: 40px;
  }

  .section-heading h2 {
    font-size: 32px;
  }

  .profile-text h2 {
    font-size: 28px;
  }

  .story-block {
    padding: 70px 0;
  }

  .story-text h3 {
    font-size: 26px;
  }

  .quote-banner h3 {
    font-size: 23px;
  }

  .badge-float {
    right: 14px;
    bottom: -20px;
    padding: 14px 18px;
  }

  .timeline {
    padding-left: 26px;
  }

  .timeline-item .dot {
    left: -35px;
  }
}

@media (max-width:575px) {
  .page-hero {
    min-height: 260px;
  }

  .hero-inner h1 {
    font-size: 30px;
  }

  .stat-block .num {
    font-size: 36px;
  }

  .lightbox-content,
  .lightbox-content img {
    max-width: 92vw;
    max-height: 70vh;
  }

  .lightbox-prev {
    left: 2%;
  }

  .lightbox-next {
    right: 2%;
  }

  .recog-item {
    flex-direction: column;
  }
}

/* =========================awards============================ */
.awards-hero {
  position: relative;
  padding: 30px 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(198, 154, 77, 0.10) 0%, transparent 45%),
    radial-gradient(circle at 90% 10%, rgba(30, 75, 60, 0.08) 0%, transparent 40%),
    var(--ivory);
  text-align: center;
  overflow: hidden;
}

.awards-hero::before,
.awards-hero::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(30, 75, 60, 0.18);
  border-radius: 50%;
  top: -90px;
  left: -90px;
}

.awards-hero::after {
  left: auto;
  right: -100px;
  top: auto;
  bottom: -110px;
  width: 280px;
  height: 280px;
  border-color: rgba(198, 154, 77, 0.25);
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
  animation: riseIn 0.9s ease both;
}

.eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Jost', sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 12.5px;
  color: var(--forest);
  font-weight: 600;
  margin-bottom: 22px;
}

.eyebrow-tag .line {
  width: 34px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}

.awards-hero h1 {
  font-family: 'Marcellus';
  font-size: clamp(2.6rem, 5vw, 4.1rem);
  color: var(--forest-deep);
  line-height: 1.08;
  letter-spacing: 0.5px;
}

.hero-divider {
  width: 70px;
  height: 2px;
  background: var(--gold);
  margin: 26px auto 26px;
  position: relative;
}

.hero-divider::before,
.hero-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  transform: translateY(-50%);
}

.hero-divider::before {
  left: -14px;
}

.hero-divider::after {
  right: -14px;
}

.awards-hero p {
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink-soft);
  font-weight: 300;
  max-width: 640px;
  margin: 0 auto;
}

/* ---------- SECTION LABEL (reused) ---------- */
.section-label {
  text-align: center;
  margin-bottom: 52px;
}

.section-label .eyebrow-tag {
  margin-bottom: 14px;
}

.section-label h2 {
  font-family: 'Marcellus';
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  color: var(--forest-deep);
}

/* ---------- GRID SECTION ---------- */
.awards-grid-section {
  position: relative;
  margin-bottom: 50px;
}

.award-card {
  height: 100%;
}

.award-card:nth-child(1) {
  animation-delay: .05s;
}

.award-card:nth-child(2) {
  animation-delay: .18s;
}

.award-card:nth-child(3) {
  animation-delay: .31s;
}

.award-card:nth-child(4) {
  animation-delay: .44s;
}

.award-card-inner {
  position: relative;
  height: 100%;
  background: #ffffff;
  border: 1px solid rgba(30, 75, 60, 0.10);
  border-radius: 14px;
  padding: 38px 32px 32px;
  transition: .45s all;
  overflow: hidden;
}

.award-card-inner img {
  width: 100%;
  border-radius: 20px;
  margin-bottom: 30px;
}

.award-card-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--forest) 0%, var(--gold) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease;
}

.award-card-inner:hover {
  transform: translateY(-9px);
  box-shadow: 0 22px 40px rgba(18, 50, 39, 0.14);
  border-color: transparent;
}

.award-card-inner:hover::before {
  transform: scaleX(1);
}

.badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.laurel-badge {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--sage);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .45s ease, transform .5s ease;
}

.award-card-inner:hover .laurel-badge {
  background: var(--forest);
  transform: rotate(-8deg) scale(1.05);
}

.laurel-badge svg {
  width: 28px;
  height: 28px;
  stroke: var(--forest);
  transition: stroke .45s ease;
}

.award-card-inner:hover .laurel-badge svg {
  stroke: var(--gold-soft);
}

.award-tag {
  font-size: 11.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  background: rgba(198, 154, 77, 0.12);
  padding: 6px 14px;
  border-radius: 20px;
}

.award-card-inner h3 {
  font-family: 'Marcellus';
  font-weight: 700;
  font-size: 25px;
  color: var(--forest-deep);
  line-height: 1.28;
  margin-bottom: 14px;
}

.award-card-inner p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  font-weight: 300;
  margin-bottom: 20px;
}

.award-institution {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--forest);
  padding-top: 16px;
  border-top: 1px dashed rgba(30, 75, 60, 0.2);
}

.award-institution svg {
  width: 16px;
  height: 16px;
  stroke: var(--gold);
  flex-shrink: 0;
}

/* ---------- FEATURED CARD ---------- */
.featured-card {

}

.featured-inner {
  position: relative;
  border-radius: 16px;
  background: linear-gradient(120deg, var(--forest-deep) 0%, var(--forest) 55%, var(--forest-soft) 100%);
  padding: 46px 40px;
  overflow: hidden;
  transition: box-shadow .5s ease, transform .5s ease;
}

.featured-inner:hover {
  box-shadow: 0 26px 50px rgba(18, 50, 39, 0.35);
  transform: translateY(-6px);
}

.featured-inner::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(230, 201, 138, 0.25);
  border-radius: 50%;
}

.featured-inner::after {
  content: "";
  position: absolute;
  left: -40px;
  bottom: -70px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(230, 201, 138, 0.15);
  border-radius: 50%;
}

.featured-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
}

.featured-medal {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid var(--gold-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .6s ease;
}

.featured-inner:hover .featured-medal {
  transform: rotate(12deg) scale(1.06);
}

.featured-medal svg {
  width: 42px;
  height: 42px;
  stroke: var(--gold-soft);
}

.featured-text {
  flex: 1;
  min-width: 260px;
}

.featured-text .award-tag {
  background: rgba(230, 201, 138, 0.16);
  color: var(--gold-soft);
}

.featured-text h3 {
  font-family: 'Marcellus';
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: #ffffff;
  margin: 14px 0 12px;
}

.featured-text p {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 300;
  max-width: 640px;
}

.years-strip {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.year-chip {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--forest-deep);
  background: var(--gold-soft);
  padding: 6px 14px;
  border-radius: 20px;
  transition: transform .35s ease;
}

.featured-inner:hover .year-chip:nth-child(1) {
  transform: translateY(-3px);
}

.featured-inner:hover .year-chip:nth-child(2) {
  transform: translateY(-5px);
}

.featured-inner:hover .year-chip:nth-child(3) {
  transform: translateY(-3px);
}

/* ---------- LEGACY STRIP ---------- */
.legacy-strip {
  position: relative;
  background: var(--forest-deep);
  padding: 30px 0;
  margin-top: 0px;
  overflow: hidden;
  background-image: url(../images/in-back.jpg);
  background-position: center;
}

.legacy-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.legacy-inner .quote-mark {
  font-family: 'Marcellus';
  font-size: 64px;
  color: var(--gold);
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}

.legacy-inner p {
  font-family: 'Marcellus';
  font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  color: #f2ede0;
  line-height: 1.6;
  font-weight: 500;
}

.legacy-signature {
  margin-top: 26px;
  font-family: 'Jost', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12.5px;
  color: var(--gold-soft);
  font-weight: 600;
}

/* ---------- ANIMATIONS ---------- */
@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width:767px) {
  .awards-hero {
    padding: 70px 0 60px;
  }

  .award-card-inner {
    padding: 30px 24px 26px;
  }

  .featured-inner {
    padding: 36px 26px;
  }

  .featured-row {
    gap: 24px;
  }

  .legacy-strip {
    padding: 50px 0;
  }
}

/* =====================contact us============================ */
/* ---------- Ornament / Divider ---------- */

.leaf-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 10px;
}

.leaf-ornament .line {
  width: 44px;
  height: 1px;
  background: linear-gradient(to right, transparent, #C8963F);
}

.leaf-ornament .line.right {
  background: linear-gradient(to left, transparent, #C8963F);
}

.leaf-ornament svg {
  width: 22px;
  height: 22px;
  fill: #C8963F;
  animation: swayLeaf 3.5s ease-in-out infinite;
}

@keyframes swayLeaf {

  0%,
  100% {
    transform: rotate(-6deg);
  }

  50% {
    transform: rotate(8deg);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatSlow {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

/* ---------- HERO ---------- */

.contact-hero {
  position: relative;
  background:
    radial-gradient(circle at 15% 20%, rgba(200, 150, 63, .18), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(200, 150, 63, .12), transparent 40%),
    linear-gradient(135deg, #123028, #1E4B3C 60%, #235A48);
  padding: 90px 20px 100px;
  text-align: center;
  color: #FFFFFF;
}

.contact-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 60px;
  background: #FAF6EE;
  clip-path: polygon(0 100%,
      100% 100%,
      100% 40%,
      75% 100%,
      50% 20%,
      25% 100%,
      0 40%);
}

.breadcrumb-trail {
  display: inline-flex;
  gap: 8px;
  font-size: .82rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #E9C88A;
  margin-bottom: 22px;
  animation: fadeInUp .8s ease both;
}

.contact-hero h1 {
  font-size: 3.4rem;
  font-weight: 700;
  color: #FFFFFF;
  animation: fadeInUp .9s ease both .1s;
}

.contact-hero p {
  max-width: 560px;
  margin: 18px auto 0;
  color: #DCE8E1;
  font-weight: 300;
  letter-spacing: .3px;
  animation: fadeInUp 1s ease both .25s;
}

/* ---------- SECTION TITLES ---------- */

.section-heading {
  text-align: center;
  margin-bottom: 55px;
}

.section-heading .eyebrow {
  display: block;
  font-size: .78rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #C8963F;
  font-weight: 500;
  margin-bottom: 6px;
}

.section-heading h2 {
  font-size: 2.4rem;
  font-weight: 600;
  color: #1E4B3C;
}

.section-heading p {
  max-width: 560px;
  margin: 14px auto 0;
  color: #6D7770;
  font-size: .98rem;
}

/* ---------- INFO SECTION ---------- */

.contact-info-section {
  padding: 90px 0 70px;
  background: #FAF6EE;
}

.info-card {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 44px 30px 38px;
  text-align: center;
  height: 100%;
  border: 1px solid rgba(30, 75, 60, .08);
  box-shadow: 0 10px 30px rgba(30, 75, 60, .10);
  transition:
    transform .45s ease,
    box-shadow .45s ease,
    border-color .45s ease;
  animation: fadeInUp .8s ease both;
  position: relative;
  overflow: hidden;
}

.info-card::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 130px;
  height: 130px;
  background: #EEF3EA;
  border-radius: 50%;
  transition: transform .5s ease, background .5s ease;
  z-index: 0;
}

.info-card:hover::before {
  transform: scale(1.6);
  background: #E7EFE9;
}

.info-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 22px 45px rgba(30, 75, 60, .22);
  border-color: #C8963F;
}

.info-card>* {
  position: relative;
  z-index: 1;
}


.icon-circle {
  width: 78px;
  height: 78px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EEF3EA;
  border: 1px solid rgba(30, 75, 60, .12);
  transition: background .45s ease, transform .45s ease;
}

.icon-circle i {
  font-size: 1.7rem;
  color: #1E4B3C;
  transition: color .45s ease;
}

.info-card:hover .icon-circle {
  background: #1E4B3C;
  transform: rotate(-8deg) scale(1.08);
}

.info-card:hover .icon-circle i {
  color: #E9C88A;
}

.info-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #1E4B3C;
}

.info-card p {
  color: #6D7770;
  font-size: .94rem;
  margin-bottom: 20px;
}

.info-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 24px;
  border-radius: 30px;
  border: 1.5px solid #1E4B3C;
  color: #1E4B3C;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .3px;
  transition: all .35s ease;
}

.info-link:hover {
  background: #1E4B3C;
  color: #E9C88A;
  border-color: #1E4B3C;
  letter-spacing: .6px;
}

.info-card:nth-child(1) {
  animation-delay: .05s;
}

.info-card:nth-child(2) {
  animation-delay: .2s;
}

.info-card:nth-child(3) {
  animation-delay: .35s;
}

/* ---------- MAIN CONTACT SECTION ---------- */

.contact-main-section {
  padding: 20px 0 100px;
  background: #FAF6EE;
}

.contact-form-card {
  background: #FFFFFF;
  border-radius: 22px;
  padding: 52px 48px;
  box-shadow: 0 10px 30px rgba(30, 75, 60, .10);
  height: 100%;
  border: 1px solid rgba(30, 75, 60, .08);
  transition: box-shadow .4s ease;
  width:80%;
    margin: 0 auto;
}

.contact-form-card:hover {
  box-shadow: 0 22px 45px rgba(30, 75, 60, .22);
}

.contact-form-card h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #1E4B3C;
}

.contact-form-card p {
  color: #6D7770;
  margin-bottom: 32px;
  font-size: .95rem;
}

.field-label {
  display: block;
  font-size: .8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #1E4B3C;
  font-weight: 500;
  margin-bottom: 8px;
}

.form-control,
.form-select {
  border: 1.5px solid #E3DDD0;
  border-radius: 10px;
  padding: 12px 16px;
  font-family: 'Jost', sans-serif;
  font-size: .95rem;
  background: #FAF6EE;
  transition: border-color .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: #C8963F;
  box-shadow: 0 0 0 4px rgba(200, 150, 63, .15);
  background: #FFFFFF;
  outline: none;
}

.submit-btn {
  background: #1E4B3C;
  color: #FFFFFF;
  border: none;
  border-radius: 32px;
  padding: 14px 42px;
  font-size: .95rem;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  transition: transform .35s ease,
    box-shadow .35s ease,
    color .35s ease;
  z-index: 1;
}

.submit-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #C8963F, #E9C88A);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
  z-index: -1;
}

.submit-btn:hover {
  color: #123028;
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(200, 150, 63, .35);
}

.submit-btn:hover::before {
  transform: scaleX(1);
}

/* ---------- STORE DETAILS CARD ---------- */

.store-details-card {
  background: linear-gradient(160deg, #123028, #1E4B3C);
  border-radius: 22px;
  padding: 48px 40px;
  height: 100%;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(30, 75, 60, .10);
}

.store-details-card .deco-leaf {
  position: absolute;
  width: 170px;
  height: 170px;
  right: -45px;
  top: -45px;
  opacity: .12;
  animation: floatSlow 5s ease-in-out infinite;
}

.store-details-card .deco-leaf svg {
  width: 100%;
  height: 100%;
  fill: #E9C88A;
}

.store-details-card h2 {
  color: #FFFFFF;
  font-size: 1.9rem;
  font-weight: 600;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}

.store-details-card p {
  color: #D8E6DE;
  font-size: .9rem;
  margin-bottom: 26px;
  position: relative;
  z-index: 1;
}


.detail-row {
  display: flex;
  gap: 16px;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}

.detail-row .dot-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(233, 200, 138, .35);
  transition: background .35s ease, transform .35s ease;
}

.detail-row:hover .dot-icon {
  background: #C8963F;
  transform: scale(1.1);
}

.detail-row .dot-icon i {
  color: #E9C88A;
  font-size: 1rem;
  transition: color .35s ease;
}

.detail-row:hover .dot-icon i {
  color: #123028;
}

.detail-text .label {
  display: block;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #E9C88A;
  margin-bottom: 4px;
}

.detail-text .value {
  font-size: .92rem;
  color: #FFFFFF;
  font-weight: 400;
}

.map-frame {
  border-radius: 14px;
  overflow: hidden;
  margin-top: 8px;
  border: 1px solid rgba(233, 200, 138, .25);
  position: relative;
  z-index: 1;
}

.map-frame iframe {
  width: 100%;
  height: 190px;
  border: 0;
  filter: grayscale(15%) saturate(1.1);
}

/* ---------- CTA STRIP ---------- */

.contact-cta-strip {
  background:
    radial-gradient(circle at 20% 50%, rgba(200, 150, 63, .15), transparent 40%),
    #123028;
  padding: 0px 20px 30px;
  text-align: center;
  position: relative;
}

.contact-cta-strip h2 {
  color: #FFFFFF;
  font-size: 2.1rem;
  font-weight: 600;
  max-width: 680px;
  margin: 0 auto;
}

.contact-cta-strip p {
  color: #CFE0D7;
  max-width: 520px;
  margin: 16px auto 30px;
  font-size: .95rem;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #C8963F;
  color: #123028;
  padding: 14px 38px;
  border-radius: 32px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .5px;
  transition: all .4s ease;
}

.cta-btn:hover {
  background: #FFFFFF;
  color: #1E4B3C;
  transform: scale(1.06);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .25);
}

/* ---------- RESPONSIVE ---------- */

@media (max-width:991px) {

  .contact-hero h1 {
    font-size: 2.5rem;
  }

  .contact-form-card {
    padding: 40px 28px;
  }

  .store-details-card {
    padding: 38px 28px;
    margin-top: 30px;
  }

}

@media (max-width:576px) {

  .contact-hero {
    padding: 70px 16px 90px;
  }

  .contact-hero h1 {
    font-size: 2rem;
  }

  .section-heading h2 {
    font-size: 1.9rem;
  }

  .contact-form-card {
    padding: 30px 20px;
  }

}


/*=========================debraj================================*/
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:'Jost',sans-serif;
    letter-spacing:3px;
    text-transform:uppercase;
    font-size:.78rem;
    color:#bf9b30;
    font-weight:600;
    margin-bottom:14px;
}

.eyebrow::before,
.eyebrow::after{
    content:"";
    width:22px;
    height:1px;
    background:#bf9b30;
}

/*==============================
        ANIMATION
===============================*/

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(28px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

@keyframes sway{

    0%,100%{
        transform:rotate(-3deg);
    }

    50%{
        transform:rotate(3deg);
    }

}

@keyframes drift{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-14px);
    }

    100%{
        transform:translateY(0px);
    }

}

@keyframes ringPulse{

    0%{
        box-shadow:0 0 0 0 rgba(191,155,48,.35);
    }

    100%{
        box-shadow:0 0 0 18px rgba(191,155,48,0);
    }

}

/*==============================
        ANIMATION CLASS
===============================*/

.fade-up{
    animation:fadeUp .9s ease both;
}

.fade-up.d1{
    animation-delay:.12s;
}

.fade-up.d2{
    animation-delay:.24s;
}

.fade-up.d3{
    animation-delay:.36s;
}

.fade-up.d4{
    animation-delay:.48s;
}

/*==================================================
                HERO SECTION
==================================================*/

.founder-hero{
    position:relative;
    padding:30px 0;
    background:
    radial-gradient(circle at 88% 12%, rgba(191,155,48,.10), transparent 45%),
    linear-gradient(180deg,#f2ead9 0%,#faf6ec 70%);
    overflow:hidden;
}

.hero-leaf-deco{
    position:absolute;
    top:-40px;
    left:-60px;
    font-size:220px;
    color:#1e4b3c;
    opacity:.06;
    animation:sway 7s ease-in-out infinite;
}

.hero-copy .eyebrow{
    margin-bottom:16px;
}

.hero-copy h1{
    font-size:3rem;
    line-height:1.15;
    margin-bottom:6px;
}

.hero-copy h4{
    font-weight:500;
    color:#2d6350;
    font-style:italic;
    margin-bottom:22px;
    font-size:1.15rem;
}

.hero-copy p{

}

/*==============================
        CREDENTIAL
===============================*/

.credential-row{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.credential-pill{
    background:#ffffff;
    border:1px solid #dbd2bd;
    border-radius:40px;
    padding:9px 18px;
    font-size:.82rem;
    color:#123026;
    display:flex;
    align-items:center;
    gap:8px;
    letter-spacing:.3px;
    transition:.35s ease;
}

.credential-pill i{
    color:#bf9b30;
}

.credential-pill:hover{
    background:#1e4b3c;
    color:#ffffff;
    border-color:#1e4b3c;
    transform:translateY(-4px);
}

.credential-pill:hover i{
    color:#e7d9ae;
}

/*==============================
        PORTRAIT
===============================*/

.portrait-frame{
    position:relative;
    width:100%;
    animation:drift 6s ease-in-out infinite;
}
.portrait-frame img{
  width: 100%;
  border-radius: 100%;
}

.portrait-frame::before{
    content:"";
    position:absolute;
    inset:14px;
    border:1.5px dashed rgba(231,217,174,.55);
    border-radius:50% 50% 46% 46% / 54% 54% 46% 46%;
}

.portrait-monogram{
    font-family:'Playfair Display',serif;
    font-size:5rem;
    color:#e7d9ae;
    font-style:italic;
}

.portrait-ring{
    position:absolute;
    width:70px;
    height:70px;
    background:#bf9b30;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    font-size:1.5rem;
    bottom:-10px;
    right:10px;
    animation:ringPulse 2.4s ease-out infinite;
}

/*==================================================
            QUOTE SECTION
==================================================*/

.philosophy-band{
    background:#123026;
    padding:20px 0;
    position:relative;
}

.philosophy-band::before{
    content:"\201C";
    font-family:'Playfair Display',serif;
    position:absolute;
    top:-10px;
    left:50%;
    transform:translateX(-50%);
    font-size:8rem;
    color:#bf9b30;
    opacity:.25;
    line-height:1;
}

.philosophy-band h2{
    color:#f6f1e2;
    text-align:center;
    font-weight:500;
    font-style:italic;
    font-size:1.7rem;
    max-width:820px;
    margin:0 auto;
    line-height:1.6;
}

.philosophy-signoff{
    text-align:center;
    color:#e7d9ae;
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:.75rem;
    margin-top:26px;
}

/*==================================================
            JOURNEY SECTION
==================================================*/

.journey-section{
    padding:30px 0;
}

.section-heading{
    text-align:center;
    margin-bottom:64px;
}

.section-heading h2{
    font-size:2.3rem;
    color:#123026;
}

/*==============================
        TIMELINE
===============================*/

.timeline-track{
    position:relative;
    padding-left:0;
}

.timeline-track::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    width:2px;
    background:repeating-linear-gradient(
        180deg,
        #bf9b30 0 8px,
        transparent 8px 16px
    );
    transform:translateX(-50%);
}

.timeline-row{
    display:flex;
    justify-content:center;
    margin-bottom:10px;
}

.timeline-card{
    position:relative;
    background:#ffffff;
    border:1px solid #dbd2bd;
    border-radius:14px;
    padding:26px 28px;
    width:100%;
    max-width:420px;
    transition:.4s ease;
}

.timeline-card:hover{
    transform:translateY(-8px);
    border-color:#2d6350;
    box-shadow:0 22px 40px -18px rgba(30,75,60,.28);
}

.timeline-year{
    display: block;
    margin-bottom: 8px;
    font-family: 'Marcellus';
    color: #0ea970;
    font-size: .95rem;
    letter-spacing: 1px;
}

.timeline-card h4{
    font-size:1.2rem;
    color:#123026;
    margin-bottom:10px;
}

.timeline-card p{
    color:#5c665f;
    line-height:1.8;
}

.timeline-node{
    position:absolute;
    left:50%;
    top:38px;
    width:16px;
    height:16px;
    background:#1e4b3c;
    border:3px solid #e7d9ae;
    border-radius:50% 50% 50% 0;
    transform:translateX(-50%) rotate(45deg);
    z-index:2;
}

/*==============================
        RESPONSIVE
===============================*/

@media(max-width:767px){

    .timeline-track::before{
        left:10px;
    }

    .timeline-node{
        left:10px;
    }

    .timeline-card{
        margin-left:34px;
        max-width:100%;
    }

}

/*==================================================
                VALUES SECTION
==================================================*/

.values-section{
    padding:90px 0;
    background:#f2ead9;
    position:relative;
}

.value-card{
    background:#ffffff;
    border-radius:16px;
    padding:38px 30px;
    height:100%;
    text-align:center;
    border:1px solid transparent;
    transition:transform .4s ease,
               box-shadow .4s ease,
               border-color .4s ease,
               background .4s ease;
}

.value-icon{
    width:72px;
    height:72px;
    border-radius:50%;
    background:#f2ead9;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 22px;
    font-size:1.7rem;
    color:#1e4b3c;
    transition:.4s ease;
}

.value-card:hover{
    background:#1e4b3c;
    border-color:#e7d9ae;
    transform:translateY(-10px);
    box-shadow:0 24px 46px -22px rgba(30,75,60,.30);
}

.value-card:hover .value-icon{
    background:#bf9b30;
    color:#ffffff;
    transform:rotate(-8deg) scale(1.08);
}

.value-card h4{
    font-size:1.15rem;
    margin-bottom:12px;
    color:#123026;
}

.value-card p{
    color:#5c665f;
}

.value-card:hover h4,
.value-card:hover p{
    color:#f4efe1;
}

/*==================================================
                STATS SECTION
==================================================*/

.stats-section{
    padding:70px 0;
    background:#1e4b3c;
    position:relative;
}

.stat-block{
    text-align:center;
    padding:18px 10px;
    border-right:1px solid rgba(255,255,255,.15);
    transition:.35s ease;
}

.stat-block:hover{
    transform:translateY(-6px);
}

.stat-block:last-child{
    border-right:none;
}

.stat-block h3{
    color:#e7d9ae;
    font-size:2.6rem;
    margin-bottom:6px;
    font-family:'Playfair Display',serif;
}

.stat-block p{
    color:#dce7e0;
    text-transform:uppercase;
    letter-spacing:1.5px;
    font-size:.75rem;
}

@media(max-width:767px){

    .stat-block{
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.15);
        margin-bottom:14px;
    }

    .stat-block:last-child{
        border-bottom:none;
    }

}

/*==================================================
            RECOGNITION SECTION
==================================================*/

.recognition-section{
    padding:90px 0;
    background:#faf6ec;
}

.recognition-card{
    position:relative;
    overflow:hidden;
    background:#ffffff;
    border:1px solid #dbd2bd;
    border-radius:14px;
    padding:30px 26px;
    height:100%;
    transition:.4s ease;
}

.recognition-card::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0%;
    height:3px;
    background:#bf9b30;
    transition:.4s ease;
}

.recognition-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px -20px rgba(30,75,60,.25);
}

.recognition-card:hover::after{
    width:100%;
}

.recognition-card i{
    display:inline-block;
    margin-bottom:14px;
    font-size:1.5rem;
    color:#bf9b30;
}

.recognition-card h4{
    font-size:1.05rem;
    color:#123026;
    margin-bottom:8px;
}

.recognition-card p{
    color:#5c665f;
}

/*==================================================
                CLOSING SECTION
==================================================*/

.closing-section{
    padding:100px 0 110px;
    background:linear-gradient(
        180deg,
        #faf6ec 0%,
        #f2ead9 100%
    );
    text-align:center;
}

.closing-section h2{
    font-size:2.1rem;
    color:#123026;
    max-width:700px;
    margin:0 auto 18px;
}

.closing-section p{
    color:#5c665f;
    max-width:600px;
    margin:0 auto 30px;
    line-height:1.8;
}

.signature-mark{
    display:inline-block;
    margin-top:10px;
    padding-top:18px;
    border-top:1px solid #dbd2bd;
    font-family:'Playfair Display',serif;
    font-size:1.6rem;
    font-style:italic;
    color:#1e4b3c;
}


/*=================================button whatsapp=========================*/
.floating-buttons{
    position:fixed;
        z-index: 9;
}

/* =======================
BOOK APPOINTMENT
======================= */

.book-sticky{
    position: fixed;
    right: 0px;
    bottom: -5px;
    transform: rotate(0deg);
    background: #1e4b3c;
    color: #fff;
    border: 2px solid #00d991;
    padding: 8px 0px;
    border-radius: 10px 10px 0 0;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    margin: 0 auto;
    gap: 10px;
    transition: .4s;
    width: 169px;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.book-sticky i{
    animation:spin 2.5s linear infinite;
}


@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

/* =======================
WHATSAPP
======================= */

.whatsapp-sticky{
    position:fixed;
    right:0;
    bottom: 70px;
    width:58px;
    height:58px;
    background:#25D366;
    color:#fff;
    display:flex;
    align-items:center;
    border-radius:30px 0 0 30px;
    overflow:hidden;
    text-decoration:none;
    transition:.4s;
    box-shadow:0 5px 20px rgba(0,0,0,.25);
}

.whatsapp-sticky i{

    width:58px;
    text-align:center;
    font-size:28px;
    flex-shrink:0;

}

.whatsapp-sticky span{

    white-space:nowrap;
    opacity:0;

    transition:.3s;

    padding-right:20px;
    font-weight:600;

}

.whatsapp-sticky:hover{

    width:185px;

}

.whatsapp-sticky:hover span{

    opacity:1;

}

.whatsapp-sticky:hover{

    color:#fff;

}

/* Pulse */

.whatsapp-sticky{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,.5);
    }

    70%{
        box-shadow:0 0 0 18px rgba(37,211,102,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }

}



/*=============================buy now=================================*/
.buy-now-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin: 0 auto;
    padding:14px 34px;
    background:#1e4b3c;
    color:#fff;
    border:2px solid #1e4b3c;
    border-radius:50px;
    font-size:16px;
    font-weight:600;
    text-decoration:none;
    overflow:hidden;
    transition:all .4s ease;
}

/* Shine Background */
.buy-now-btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transition:.8s;
}

.buy-now-btn:hover::before{
    left:100%;
}

/* Text */
.buy-now-btn span,
.buy-now-btn i{
    position:relative;
    z-index:2;
}

/* Arrow Animation */
.buy-now-btn i{
    transition:transform .35s ease;
}

/* Hover */
.buy-now-btn:hover{
    background:#2c6a56;
    border-color:#2c6a56;
    color:#fff;
    transform:translateY(-4px);
    box-shadow:0 14px 35px rgba(30,75,60,.35);
}

.buy-now-btn:hover i{
    transform:translateX(6px);
}

/* Click Effect */
.buy-now-btn:active{
    transform:scale(.96);
}

/* Focus */
.buy-now-btn:focus{
    outline:none;
    box-shadow:0 0 0 4px rgba(30,75,60,.18);
}

/* ===========================================
   PREMIUM BLUE BUY NOW BUTTON
=========================================== */

.pa-buynow-blue{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 9px 9px 9px 35px;
    background: linear-gradient(135deg, #c16504, #d8a71d);
    color: #fff;
    border-radius: 60px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    transition: .35s ease;
    box-shadow: 0 12px 28px rgba(37, 99, 235, .30);
}

/* Shine */

.pa-buynow-blue::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-20deg);

    transition:.8s;

}

.pa-buynow-blue:hover::before{

    left:160%;

}

/* Text */

.pa-buynow-blue-text{

    position:relative;
    z-index:2;

}

/* Icon */

.pa-buynow-blue-icon{

    width:36px;
    height:36px;

    border-radius:50%;

    background:#fff;
    color:#2563eb;

    display:flex;
    justify-content:center;
    align-items:center;

    transition:.35s;

    position:relative;
    z-index:2;

}

/* Hover */

.pa-buynow-blue:hover{
    color:#fff;

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(37,99,235,.40);

}

.pa-buynow-blue:hover .pa-buynow-blue-icon{

    transform:translateX(8px) rotate(-10deg);

}

/* Click */

.pa-buynow-blue:active{

    transform:scale(.97);

}

/* Mobile */

@media(max-width:576px){

    .pa-buynow-blue{

        width:100%;
        justify-content:center;
        padding:13px 20px;

    }

}

/*=============================product list===========================*/


@media (max-width:991px){

.pa-filter-panel{
    position:fixed !important;
    top:0;
    left:0;
    width:320px;
    max-width:90%;
    height:100vh;
    background:#fff;
    overflow-y:auto;
    z-index:9999;
    transform:translateX(-100%);
    transition:transform .35s ease;
    box-shadow:0 0 30px rgba(0,0,0,.2);
}

.pa-filter-panel.pa-open{
    transform:translateX(0);
}

.pa-filter-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:9998;
}

.pa-filter-backdrop.pa-show{
    opacity:1;
    visibility:visible;
}

body.filter-open{
    overflow:hidden;
}

}






.pa-filter-shop-section {
      --pa-green-900: #123128;
      --pa-green-700: #1e4b3c;
      --pa-green-600: #26604d;
      --pa-green-100: #eaf3ef;
      --pa-green-50: #f5faf8;
      --pa-gold-500: #b6862f;
      --pa-white: #ffffff;
      --pa-ink-900: #16211d;
      --pa-ink-600: #5b6b64;
      --pa-ink-400: #97a49e;
      --pa-line: #e4ece8;
      --pa-shadow-sm: 0 2px 8px rgba(18, 49, 40, 0.06);
      --pa-shadow-md: 0 10px 30px rgba(18, 49, 40, 0.10);
      --pa-shadow-lg: 0 24px 48px rgba(18, 49, 40, 0.16);
      --pa-radius-sm: 10px;
      --pa-radius-md: 16px;
      --pa-radius-lg: 22px;
      --pa-ease: cubic-bezier(.22, .9, .32, 1);
      font-family: 'Figtree';
      background: var(--pa-white);
      color: var(--pa-ink-900);
      padding: 56px 5vw 96px;
      box-sizing: border-box;
      position: relative;
      overflow: visible;
    }

    .pa-filter-shop-section *,
    .pa-filter-shop-section *::before,
    .pa-filter-shop-section *::after {
      box-sizing: border-box;
    }

    .pa-filter-shop-section .pa-font-display {
      font-family: font-family: 'Figtree';;
    }

    .pa-bg-leaf-mark {
      position: absolute;
      top: -60px;
      right: -80px;
      width: 420px;
      height: 420px;
      opacity: 0.035;
      pointer-events: none;
      z-index: 0;
    }

    /* ---------------- heading + toolbar ---------------- */
    .pa-shop-heading-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 8px;
      position: relative;
      z-index: 1;
    }

    .pa-shop-eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--pa-gold-500);
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .pa-shop-eyebrow-line {
      width: 28px;
      height: 1px;
      background: var(--pa-gold-500);
    }

    .pa-shop-title-wrap .pa-shop-title {
      font-size: clamp(28px, 3.4vw, 40px);
      line-height: 1.1;
      color: var(--pa-green-700);
      margin: 0;
      font-weight: 500;
    }

    .pa-shop-title-wrap .pa-shop-subtitle {
      margin: 8px 0 0;
      color: var(--pa-ink-600);
      font-size: 14.5px;
      max-width: 46ch;
    }

    .pa-toolbar-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .pa-mobile-filter-trigger {
      display: none;
      align-items: center;
      gap: 8px;
      background: var(--pa-green-700);
      color: #fff;
      border: none;
      padding: 12px 18px;
      border-radius: 999px;
      font-family: inherit;
      font-weight: 700;
      font-size: 13.5px;
      cursor: pointer;
      box-shadow: var(--pa-shadow-sm);
      transition: transform 0.25s var(--pa-ease), box-shadow 0.25s var(--pa-ease);
      position: relative;
      overflow: hidden;
    }

    .pa-mobile-filter-trigger:hover {
      transform: translateY(-2px);
      box-shadow: var(--pa-shadow-md);
    }

    .pa-mobile-filter-trigger svg {
      width: 16px;
      height: 16px;
    }

    .pa-mobile-filter-badge {
    background: #ffffff;
    color: #d70000;
    font-size: 13px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    }

    .pa-sort-select-wrap {
      position: relative;
    }

    .pa-sort-select {
      appearance: none;
      -webkit-appearance: none;
      font-family: inherit;
      font-weight: 600;
      font-size: 13.5px;
      color: var(--pa-green-700);
      background: var(--pa-white);
      border: 1.5px solid var(--pa-line);
      border-radius: 999px;
      padding: 11px 38px 11px 18px;
      cursor: pointer;
      transition: border-color 0.25s var(--pa-ease), box-shadow 0.25s var(--pa-ease);
    }

    .pa-sort-select:hover,
    .pa-sort-select:focus-visible {
      border-color: var(--pa-green-600);
      box-shadow: 0 0 0 4px var(--pa-green-100);
      outline: none;
    }

    .pa-sort-select-wrap::after {
      content: "";
      position: absolute;
      right: 16px;
      top: 50%;
      width: 8px;
      height: 8px;
      border-right: 2px solid var(--pa-green-700);
      border-bottom: 2px solid var(--pa-green-700);
      transform: translateY(-70%) rotate(45deg);
      pointer-events: none;
    }

    .pa-shop-divider {
      height: 1px;
      background: linear-gradient(90deg, var(--pa-line), transparent 85%);
      margin: 28px 0 36px;
      position: relative;
      z-index: 1;
    }

    /* ---------------- layout ---------------- */
    .pa-shop-layout {
      display:grid;
    grid-template-columns:292px 1fr;
    gap:40px;
    align-items:start;
      position: relative;
      z-index: 1;
    }

    /* ---------------- filter panel ---------------- */
    .pa-filter-panel {
    position:sticky;
    top:20px;
    align-self:start;
    height:fit-content;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
      background: var(--pa-white);
      border: 1px solid var(--pa-line);
      border-radius: var(--pa-radius-lg);
      box-shadow: var(--pa-shadow-sm);
    }

    .pa-filter-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 22px;
      background-image: linear-gradient(135deg, var(--pa-green-700), var(--pa-green-900));
      color: #fff;
    }

    .pa-filter-panel-title {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 15.5px;
      font-weight: 700;
    }

    .pa-filter-panel-title svg {
      width: 17px;
      height: 17px;
    }

    .pa-filter-clear-all {
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.25);
      color: #fff;
      font-family: inherit;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 999px;
      cursor: pointer;
      transition: background 0.2s var(--pa-ease);
      position: relative;
      overflow: hidden;
    }

    .pa-filter-clear-all:hover {
      background: rgba(255, 255, 255, 0.24);
    }

    .pa-mobile-drawer-close {
      display: none;
      background: transparent;
      border: none;
      color: #fff;
      cursor: pointer;
      padding: 4px;
    }

    .pa-mobile-drawer-close svg {
      width: 20px;
      height: 20px;
    }

    .pa-filter-group {
      border-bottom: 1px solid var(--pa-line);
    }

    .pa-filter-group:last-of-type {
      border-bottom: none;
    }

    .pa-filter-group-header {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: none;
      border: none;
      font-family: inherit;
      padding: 18px 22px;
      cursor: pointer;
      text-align: left;
    }

    .pa-filter-group-header-label {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14.5px;
      font-weight: 700;
      color: var(--pa-ink-900);
    }

    .pa-filter-group-header-label svg.pa-group-icon {
      width: 16px;
      height: 16px;
      color: var(--pa-green-600);
      flex-shrink: 0;
    }

    .pa-chevron {
      width: 10px;
      height: 10px;
      border-right: 2px solid var(--pa-ink-400);
      border-bottom: 2px solid var(--pa-ink-400);
      transform: rotate(45deg);
      transition: transform 0.35s var(--pa-ease), border-color 0.25s var(--pa-ease);
      flex-shrink: 0;
    }

    .pa-filter-group.pa-is-open .pa-chevron {
      transform: rotate(-135deg);
      border-color: var(--pa-green-700);
    }

    .pa-filter-group-body-outer {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.42s var(--pa-ease);
    }

    .pa-filter-group.pa-is-open .pa-filter-group-body-outer {
      grid-template-rows: 1fr;
    }

    .pa-filter-group-body-inner {
      overflow: hidden;
    }

    .pa-filter-group-body {
      padding: 2px 22px 22px;
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity 0.3s var(--pa-ease) 0.05s, transform 0.35s var(--pa-ease) 0.05s;
    }

    .pa-filter-group.pa-is-open .pa-filter-group-body {
      opacity: 1;
      transform: translateY(0);
    }

    .pa-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 22px 20px;
    }

    .pa-toggle-row-label {
      font-size: 14px;
      font-weight: 600;
      color: var(--pa-ink-900);
    }

    .pa-toggle-row-sub {
      font-size: 12px;
      color: var(--pa-ink-400);
      margin-top: 2px;
    }

    .pa-switch {
      position: relative;
      width: 44px;
      height: 26px;
      flex-shrink: 0;
    }

    .pa-switch input {
      opacity: 0;
      width: 0;
      height: 0;
      position: absolute;
    }

    .pa-switch-track {
      position: absolute;
      inset: 0;
      background: #d8dfdb;
      border-radius: 999px;
      cursor: pointer;
      transition: background 0.3s var(--pa-ease);
    }

    .pa-switch-track::before {
      content: "";
      position: absolute;
      width: 20px;
      height: 20px;
      left: 3px;
      top: 3px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      transition: transform 0.32s var(--pa-ease);
    }

    .pa-switch input:checked+.pa-switch-track {
      background: var(--pa-green-700);
    }

    .pa-switch input:checked+.pa-switch-track::before {
      transform: translateX(18px);
    }

    .pa-price-values {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
    }

    .pa-price-box {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 4px;
      border: 1.5px solid var(--pa-line);
      border-radius: var(--pa-radius-sm);
      padding: 9px 10px;
      font-size: 13.5px;
      font-weight: 700;
      color: var(--pa-green-700);
      transition: border-color 0.2s var(--pa-ease);
    }

    .pa-price-box:focus-within {
      border-color: var(--pa-green-600);
    }

    .pa-price-box span {
      color: var(--pa-ink-400);
      font-weight: 600;
    }

    .pa-price-box input {
      width: 100%;
      border: none;
      outline: none;
      font: inherit;
      color: inherit;
      background: transparent;
    }

    .pa-price-sep {
      color: var(--pa-ink-400);
      font-size: 12px;
    }

    .pa-range-slider {
      position: relative;
      height: 20px;
      margin: 6px 4px 4px;
    }

    .pa-range-slider-track {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 4px;
      transform: translateY(-50%);
      background: var(--pa-line);
      border-radius: 999px;
    }

    .pa-range-slider-fill {
      position: absolute;
      top: 50%;
      height: 4px;
      transform: translateY(-50%);
      background: var(--pa-green-700);
      border-radius: 999px;
    }

    .pa-range-slider input[type="range"] {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      margin: 0;
      -webkit-appearance: none;
      appearance: none;
      background: none;
      pointer-events: none;
      height: 20px;
    }

    .pa-range-slider input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      pointer-events: all;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      border: 3px solid var(--pa-green-700);
      box-shadow: var(--pa-shadow-sm);
      cursor: pointer;
      transition: transform 0.2s var(--pa-ease), box-shadow 0.2s var(--pa-ease);
    }

    .pa-range-slider input[type="range"]:hover::-webkit-slider-thumb,
    .pa-range-slider input[type="range"]:active::-webkit-slider-thumb {
      transform: scale(1.15);
      box-shadow: 0 0 0 6px var(--pa-green-100);
    }

    .pa-range-slider input[type="range"]::-moz-range-thumb {
      pointer-events: all;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      border: 3px solid var(--pa-green-700);
      box-shadow: var(--pa-shadow-sm);
      cursor: pointer;
    }

    .pa-check-search {
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1.5px solid var(--pa-line);
      border-radius: var(--pa-radius-sm);
      padding: 8px 12px;
      margin-bottom: 14px;
      transition: border-color 0.2s var(--pa-ease);
    }

    .pa-check-search:focus-within {
      border-color: var(--pa-green-600);
    }

    .pa-check-search svg {
      width: 14px;
      height: 14px;
      color: var(--pa-ink-400);
      flex-shrink: 0;
    }

    .pa-check-search input {
      border: none;
      outline: none;
      font: inherit;
      font-size: 13px;
      width: 100%;
      background: transparent;
      color: var(--pa-ink-900);
    }

    .pa-check-list {
      list-style: none;
      margin: 0;
      padding: 0;
      max-height: 258px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .pa-check-list::-webkit-scrollbar {
      width: 5px;
    }

    .pa-check-list::-webkit-scrollbar-thumb {
      background: var(--pa-line);
      border-radius: 999px;
    }

    .pa-check-item {
      position: relative;
    }

    .pa-check-item label {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 8px 8px 8px 4px;
      border-radius: 9px;
      cursor: pointer;
      font-size: 13.3px;
      color: var(--pa-ink-900);
      transition: background 0.2s var(--pa-ease), color 0.2s var(--pa-ease), padding-left 0.2s var(--pa-ease);
    }

    .pa-check-item label:hover {
      background: var(--pa-green-50);
      padding-left: 8px;
    }

    .pa-check-item input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .pa-check-box {
      width: 18px;
      height: 18px;
      border-radius: 5px;
      border: 1.6px solid #cdd8d3;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.22s var(--pa-ease), border-color 0.22s var(--pa-ease), transform 0.22s var(--pa-ease);
    }

    .pa-check-box svg {
      width: 11px;
      height: 11px;
      opacity: 0;
      transform: scale(0.5);
      transition: opacity 0.18s var(--pa-ease), transform 0.18s var(--pa-ease);
    }

    .pa-check-item input:checked+.pa-check-box {
      background: var(--pa-green-700);
      border-color: var(--pa-green-700);
      transform: scale(1.04);
    }

    .pa-check-item input:checked+.pa-check-box svg {
      opacity: 1;
      transform: scale(1);
      color: #fff;
    }

    .pa-check-item input:checked~.pa-check-label-text {
      color: var(--pa-green-700);
      font-weight: 700;
    }

    .pa-check-count {
      margin-left: auto;
      font-size: 11.5px;
      color: var(--pa-ink-400);
      font-weight: 600;
    }

    .pa-filter-actions {
      display: flex;
      gap: 10px;
      padding: 20px 22px 22px;
    }

    .pa-btn-apply,
    .pa-btn-reset {
      flex: 1;
      font-family: inherit;
      font-weight: 700;
      font-size: 13.5px;
      padding: 13px 16px;
      border-radius: 999px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: transform 0.25s var(--pa-ease), box-shadow 0.25s var(--pa-ease), background 0.25s var(--pa-ease);
    }

    .pa-btn-apply {
      background: var(--pa-green-700);
      color: #fff;
      border: none;
      box-shadow: var(--pa-shadow-sm);
    }

    .pa-btn-apply:hover {
      background: var(--pa-green-900);
      transform: translateY(-2px);
      box-shadow: var(--pa-shadow-md);
    }

    .pa-btn-reset {
      background: #fff;
      color: var(--pa-green-700);
      border: 1.5px solid var(--pa-line);
    }

    .pa-btn-reset:hover {
      border-color: var(--pa-green-600);
      background: var(--pa-green-50);
    }

    .pa-ripple {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.55);
      transform: scale(0);
      animation: pa-ripple-anim 0.6s var(--pa-ease);
      pointer-events: none;
    }

    .pa-btn-reset .pa-ripple {
      background: rgba(30, 75, 60, 0.16);
    }

    @keyframes pa-ripple-anim {
      to {
        transform: scale(2.6);
        opacity: 0;
      }
    }

    .pa-filter-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(18, 49, 40, 0.45);
      backdrop-filter: blur(2px);
      z-index: 998;
      opacity: 0;
      transition: opacity 0.35s var(--pa-ease);
    }

    .pa-filter-backdrop.pa-is-visible {
      opacity: 1;
    }

    /* ---------------- product grid ---------------- */
    .pa-results-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      flex-wrap: wrap;
      gap: 10px;
    }

    .pa-results-count {
      font-size: 13.5px;
      color: var(--pa-ink-600);
    }

    .pa-results-count b {
      color: var(--pa-green-700);
    }

    .pa-active-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .pa-chip {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--pa-green-100);
      color: var(--pa-green-700);
      font-size: 12px;
      font-weight: 700;
      padding: 6px 8px 6px 12px;
      border-radius: 999px;
      animation: pa-chip-in 0.3s var(--pa-ease);
    }

    @keyframes pa-chip-in {
      from {
        opacity: 0;
        transform: scale(0.85);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .pa-chip button {
      background: rgba(30, 75, 60, 0.14);
      border: none;
      color: var(--pa-green-700);
      width: 16px;
      height: 16px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 10px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pa-product-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px;
      align-items: stretch;
    }

    
    /* ---------------- responsive ---------------- */
    @media (max-width: 1080px) {
      .pa-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }

      .pa-shop-layout {
        grid-template-columns: 1fr;
        gap: 28px;
      }
    }

    @media (max-width: 860px) {
      .pa-filter-shop-section {
        padding: 40px 5vw 72px;
      }

      .pa-shop-layout {199
        grid-template-columns: 1fr;
      }

      .pa-mobile-filter-trigger {
        display: inline-flex;
      }

      .pa-filter-panel {
        position: absolute !important;
        top: 0 !important;
        left: 0;
        height: 500px;
        max-width: 100%;
        border-radius: 0;
        z-index: 999;
        transform: translateX(-123%);
        transition: transform 0.42s var(--pa-ease);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
      }

      .pa-filter-panel.pa-drawer-open {
        transform: translateX(0);
      }

      .pa-mobile-drawer-close {
        display: inline-flex;
      }

      .pa-filter-backdrop.pa-is-visible {
        display: block;
      }

      .pa-filter-actions {
        position: sticky;
        bottom: 0;
        background: #fff;
        margin-top: auto;
      }
    }

    @media (max-width: 620px) {
      .pa-product-grid {
        grid-template-columns: 1fr;
      }

      .pa-shop-heading-row {
        flex-direction: column;
        align-items: flex-start;
      }

      .pa-toolbar-right {
        width: 100%;
        justify-content: space-between;
      }

      .pa-sort-select {
        width: 100%;
      }

      .pa-sort-select-wrap {
        flex: 1;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .pa-filter-shop-section * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
      }
    }

.video-testimonial .youtube-short {
    height: 330px;
    margin-bottom: 30px;
}
.video-testimonial{
    padding-top: 30px;
}

/*==============================showroom page=============================*/

:root{
  --cream:        #FBF7EE;
  --cream-deep:    #F3ECDB;
  --green-900:     #12271C;
  --green-800:     #1E3D2F;
  --green-700:     #2B5240;
  --green-600:     #3C6B54;
  --gold:          #C6952B;
  --gold-light:    #E6C878;
  --gold-pale:     #F3E4BB;
  --text-main:     #23302A;
  --text-muted:    #62705F;
  --white:         #FFFFFF;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-soft: 0 10px 34px rgba(18,39,28,0.09);
  --shadow-lift: 0 22px 48px rgba(18,39,28,0.16);
}

.section-pad{
    padding: 40px 0;
}
.white-text h2{
    color: #fff;
}
.white-text p{
    color: #fff;
}
/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn{ border-radius: 999px; font-weight: 600; padding: 0.75rem 1.6rem; transition: all .35s ease; }

.btn-forest{
    background: var(--green);
    color: #fff;
    border: 1px solid var(--gold);
}
.btn-forest:hover{ background: var(--green-900); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.btn-gold{
  background: var(--gold);
  color: var(--green-900);
  border: 1px solid var(--gold);
}
.btn-gold:hover{ background: var(--gold-light); color: var(--green-900); transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.btn-outline-cream{
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(251,247,238,0.55);
}
.btn-outline-cream:hover{ background: rgba(251,247,238,0.12); color: var(--cream); border-color: var(--cream); }

.btn-outline-forest{
  background: transparent;
  color: var(--green-800);
  border: 1px solid var(--green-700);
}
.btn-outline-forest:hover{ background: var(--green-800); color: var(--white); }

.btn-sm-pill{ padding: 0.5rem 1.1rem; font-size: 0.88rem; }

/* ============================================================
   3. TOP NAV (lightweight, continues homepage identity)
   ============================================================ */
.showroom-nav{
  position: sticky; top: 0; z-index: 999;
  background: rgba(251,247,238,0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(30,61,47,0.08);
}
.showroom-nav .brand{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--green-900);
}
.showroom-nav .brand span{ color: var(--gold); }
.showroom-nav .nav-link{
  color: var(--text-main);
  font-weight: 600;
  font-size: 0.92rem;
}
.showroom-nav .nav-link:hover{ color: var(--gold); }

/* ============================================================
   4. HERO
   ============================================================ */
.hero{
  position: relative;
  padding-block: clamp(96px, 14vw, 150px) clamp(70px, 9vw, 110px);
  background:
    radial-gradient(60% 55% at 85% -10%, rgba(198,149,43,0.14), transparent 65%),
    radial-gradient(55% 50% at -10% 20%, rgba(43,82,64,0.12), transparent 60%),
    var(--cream);
  overflow: hidden;
}

/* organic decorative blobs — pure CSS */
.hero-blob{
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.55;
  z-index: 0;
}
.blob-1{
  width: 340px; height: 340px;
  top: -90px; right: -70px;
  background: radial-gradient(circle at 35% 30%, var(--gold-pale), transparent 70%);
  animation: float-slow 9s ease-in-out infinite;
}
.blob-2{
  width: 260px; height: 260px;
  bottom: -80px; left: -60px;
  background: radial-gradient(circle at 60% 40%, rgba(43,82,64,0.18), transparent 70%);
  animation: float-slow 11s ease-in-out infinite reverse;
}
.hero-ring{
  position: absolute;
  border: 1px solid rgba(198,149,43,0.35);
  border-radius: 50%;
  z-index: 0;
}
.ring-1{ width: 420px; height: 420px; top: 8%; right: 4%; }
.ring-2{ width: 180px; height: 180px; top: 22%; right: 16%; border-style: dashed; }

@keyframes float-slow{
  0%,100%{ transform: translateY(0) translateX(0); }
  50%{ transform: translateY(-18px) translateX(10px); }
}

.hero-content{ position: relative; z-index: 2; max-width: 760px; }

.hero h1{
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  font-weight: 500;
  line-height: 1.08;
  margin-bottom: 18px;
}
.hero .subtitle{
  font-family: var(--font-body);
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 16px;
  display: block;
}
.hero p.lead-text{
  color: var(--text-muted);
  font-size: 1.12rem;
  max-width: 560px;
  margin-bottom: 34px;
}
.hero-cta{ display: flex; gap: 16px; flex-wrap: wrap; }

.hero-leaf-icon{
  position: absolute; z-index: 1;
  color: var(--green-700); opacity: 0.16; font-size: 5rem;
  top: 12%; right: 20%;
  animation: sway 7s ease-in-out infinite;
}
@keyframes sway{ 0%,100%{ transform: rotate(-6deg);} 50%{ transform: rotate(6deg);} }

/* ============================================================
   5. SHOWROOM NETWORK CARDS
   ============================================================ */
.showroom-card{
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  height: 100%;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(30,61,47,0.06);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
  position: relative;
  overflow: hidden;
}
.showroom-card::before{
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--green-700), var(--gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s ease;
}
.showroom-card:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
}
.showroom-card:hover::before{ transform: scaleX(1); }

.showroom-card .card-top{
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px;
}
.showroom-card h3{
  font-size: 1.25rem; font-weight: 600; margin-bottom: 2px;
}
.showroom-card .city-tag{
  color: var(--gold); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
}

.status-pill{
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.status-pill .dot{ width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.status-open{ background: rgba(60,107,84,0.12); color: var(--green-700); }
.status-open .dot{ background: var(--green-700); box-shadow: 0 0 0 3px rgba(60,107,84,0.18); }
.status-closed{ background: rgba(180,60,60,0.1); color: #A13F3F; }
.status-closed .dot{ background: #A13F3F; }

.showroom-card .info-line{
  display: flex; gap: 10px; font-size: 0.92rem; color: var(--text-muted); margin-bottom: 8px;
}
.showroom-card .info-line i{ color: var(--green-700); margin-top: 3px; flex-shrink: 0; }

.services-wrap{ display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; }
.service-chip{
  font-size: 0.72rem; font-weight: 600; color: var(--green-800);
  background: var(--cream-deep); padding: 4px 10px; border-radius: 999px;
}

.showroom-card .card-actions{ display: flex; gap: 10px; margin-top: auto; }
.showroom-card .card-actions .btn{ flex: 1; font-size: 0.85rem; padding: 0.6rem 0.9rem; }

/* ============================================================
   6. FIND NEAREST SHOWROOM — abstract network map
   ============================================================ */
.locator-panel{
  position: relative;
  background: linear-gradient(160deg, var(--green-900), var(--green-800) 60%, var(--green-700));
  border-radius: var(--radius-lg);
  padding: 20px;
  min-height: 460px;
  box-shadow: var(--shadow-lift);
}
.locator-panel::before{
  content:"";
  position: absolute; inset: 0;
  background: radial-gradient(50% 60% at 80% 10%, rgba(198,149,43,0.18), transparent 70%);
}
.map-svg-lines{ position: absolute; inset: 0; width: 100%; height: 100%; }
.map-svg-lines line{
  stroke: rgba(230,200,120,0.35);
  stroke-width: 0.35;
  stroke-dasharray: 2 2;
}

.map-pin{
  position: absolute;
  transform: translate(-50%,-50%);
  z-index: 3;
}
.map-pin .pin-dot{
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--cream);
  position: relative;
  cursor: pointer;
}
.map-pin .pin-dot::after{
  content: "";
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-light);
  animation: pulse-ring 2.4s ease-out infinite;
}
@keyframes pulse-ring{
  0%{ transform: scale(0.6); opacity: 0.9; }
  100%{ transform: scale(2.4); opacity: 0; }
}

.map-pin .pin-label{
  position: absolute;
  top: 20px; left: 50%; transform: translateX(-50%);
  font-size: 0.72rem; font-weight: 700; color: var(--cream);
  white-space: nowrap; letter-spacing: 0.03em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.map-tooltip{
  position: absolute;
  bottom: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: 220px;
  background: rgba(251,247,238,0.97);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 10;
  text-align: left;
}
.map-tooltip::after{
  content: "";
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: rgba(251,247,238,0.97);
}
.map-pin:hover .map-tooltip, .map-pin:focus-within .map-tooltip{
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.map-tooltip strong{ display: block; font-family: var(--font-display); color: var(--green-900); font-size: 1rem; margin-bottom: 4px; }
.map-tooltip span{ display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 2px; }

.locator-hint{
  color: rgba(251,247,238,0.65); font-size: 0.85rem; margin-top: 14px;
}

/* ============================================================
   7. SHOWROOM JOURNEY — signature year timeline
   ============================================================ */
.journey-section{
  background: var(--green-900);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.journey-section::before{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(45% 60% at 15% 20%, rgba(198,149,43,0.14), transparent 70%);
}
.journey-section .eyebrow{ color: var(--gold-light); }
.journey-section .section-title{ color: var(--cream); }
.journey-section .section-sub{ color: rgba(251,247,238,0.6); }

.journey-stage{
  position: relative;
  height: 480px;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
  touch-action: pan-y;
}

.year-track{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
}

.year-slide{
  position: absolute;
  text-align: center;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease, filter .6s ease;
  width: 100%;
}
.year-slide .year-num{
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1;
}
.year-slide.is-active{
  transform: translateY(0) scale(1);
  opacity: 1; filter: blur(0);
  z-index: 3;
}
.year-slide.is-active .year-num{ font-size: clamp(3.4rem, 9vw, 7rem); color: var(--gold); }

.year-slide.is-prev{
  transform: translateY(-150px) scale(0.72);
  opacity: 0.35; filter: blur(2px);
  z-index: 1;
}
.year-slide.is-prev .year-num{ font-size: clamp(2.4rem, 5vw, 4rem); color: rgba(251,247,238,0.5); }

.year-slide.is-next{
  transform: translateY(150px) scale(0.72);
  opacity: 0.35; filter: blur(2px);
  z-index: 1;
}
.year-slide.is-next .year-num{ font-size: clamp(2.4rem, 5vw, 4rem); color: rgba(251,247,238,0.5); }

.year-slide.is-hidden{ opacity: 0; pointer-events: none; }

.journey-card{
  margin-top: 18px;
  max-width: 460px;
  margin-inline: auto;
  background: rgba(251,247,238,0.08);
  border: 1px solid rgba(251,247,238,0.16);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  padding: 20px 26px;
}
.journey-card h4{ color: var(--cream); font-size: 1.05rem; margin-bottom: 6px; }
.journey-card p{ color: rgba(251,247,238,0.68); font-size: 0.92rem; margin: 0; }

.journey-controls{
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
  z-index: 5;
}
.journey-controls button{
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(251,247,238,0.08);
  border: 1px solid rgba(251,247,238,0.25);
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  transition: all .3s ease;
}
.journey-controls button:hover{ background: var(--gold); color: var(--green-900); border-color: var(--gold); }

.journey-dots{
  display: flex; justify-content: center; gap: 8px; margin-top: 28px;
}
.journey-dots button{
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(251,247,238,0.28);
  border: none; padding: 0; transition: all .3s ease;
}
.journey-dots button.active{ background: var(--gold); width: 22px; border-radius: 4px; }

@media (max-width: 767px){
  .journey-controls{ flex-direction: row; right: auto; top: auto; bottom: -6px; left: 50%; transform: translateX(-50%); position: relative; margin-top: 10px; }
}

/* ============================================================
   8. EXPLORE / EXPERIENCE CARDS
   ============================================================ */
.experience-card{
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  height: 100%;
  box-shadow: var(--shadow-soft);
  transition: transform .4s ease, box-shadow .4s ease;
  border: 1px solid rgba(30,61,47,0.06);
}
.experience-card:hover{ transform: translateY(-6px) scale(1.01); box-shadow: var(--shadow-lift); }
.experience-icon{
  width: 58px; height: 58px; border-radius: 16px;
  background: var(--cream-deep);
  color: var(--green-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 18px;
  transition: background .4s ease, color .4s ease;
}
.experience-card:hover .experience-icon{ background: var(--green-800); color: var(--gold-light); }
.experience-card h3{ font-size: 1.15rem; font-weight: 600; margin-bottom: 8px; }
.experience-card p{ color: var(--text-muted); font-size: 0.94rem; margin: 0; }

/* ============================================================
   9. FACILITIES
   ============================================================ */
.facility-item{
  text-align: center;
  padding: 26px 14px;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-soft);
  height: 100%;
  transition: transform .35s ease, background .35s ease;
}
.facility-item:hover{ transform: translateY(-4px); background: var(--cream-deep); }
.facility-item i{ font-size: 1.7rem; color: var(--gold); margin-bottom: 10px; display: block; }
.facility-item span{ font-size: 0.86rem; font-weight: 600; color: var(--green-900); }

/* ============================================================
   10. VISIT PROCESS — horizontal step timeline
   ============================================================ */
.process-track{
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 12px;
}
.process-step{
  flex: 1 1 0;
  min-width: 170px;
  text-align: center;
  position: relative;
  padding: 0 12px;
}
.process-step .step-circle{
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--green-700);
  color: var(--green-800);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.3rem;
  margin: 0 auto 16px;
  position: relative; z-index: 2;
  transition: background .35s ease, color .35s ease, transform .35s ease;
}
.process-step:hover .step-circle{ background: var(--gold); border-color: var(--gold); color: var(--green-900); transform: scale(1.08); }
.process-step .step-label{ font-weight: 600; font-size: 0.94rem; color: var(--green-900); }
.process-step .step-connector{
  position: absolute;
  top: 32px; left: calc(50% + 32px); right: calc(-50% + 32px);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 12px);
}
.process-step:last-child .step-connector{ display: none; }

/* ============================================================
   11. WHY VISIT — feature cards
   ============================================================ */
.feature-card{
  display: flex; align-items: flex-start; gap: 14px;
  padding: 22px;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-soft);
  height: 100%;
  transition: transform .35s ease, box-shadow .35s ease;
}
.feature-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.feature-card i{ color: var(--gold); font-size: 1.3rem; margin-top: 3px; }
.feature-card h4{ font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.feature-card p{ font-size: 0.88rem; color: var(--text-muted); margin: 0; }

/* ============================================================
   12. TESTIMONIALS
   ============================================================ */
.testimonial-card{
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  height: 100%;
  box-shadow: var(--shadow-soft);
}
.testimonial-card .stars{ color: var(--gold); letter-spacing: 2px; margin-bottom: 12px; }
.testimonial-card p.review{ font-size: 0.96rem; color: var(--text-main); margin-bottom: 18px; }
.testimonial-footer{ display: flex; align-items: center; justify-content: space-between; }
.testimonial-footer .who strong{ display: block; font-size: 0.94rem; }
.testimonial-footer .who span{ font-size: 0.78rem; color: var(--text-muted); }
.verified-badge{
  font-size: 0.68rem; font-weight: 700; color: var(--green-700);
  background: rgba(60,107,84,0.1); padding: 4px 9px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
}

/* ============================================================
   13. FAQ ACCORDION
   ============================================================ */
.faq-accordion .accordion-item{
  background: var(--white);
  border: none;
  border-radius: var(--radius-md) !important;
  margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.faq-accordion .accordion-button{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--green-900);
  background: var(--white);
  padding: 20px 24px;
}
.faq-accordion .accordion-button:not(.collapsed){
  color: var(--green-900);
  background: var(--cream-deep);
  box-shadow: none;
}
.faq-accordion .accordion-button:focus{ box-shadow: none; }
.faq-accordion .accordion-button::after{
  filter: sepia(1) saturate(2) hue-rotate(2deg);
}
.faq-accordion .accordion-body{
  padding: 4px 24px 22px;
  color: var(--text-muted);
  font-size: 0.94rem;
}

/* ============================================================
   14. CONTACT CTA
   ============================================================ */
.contact-cta{
  position: relative;
  background: linear-gradient(150deg, var(--green-800), var(--green-900));
  border-radius: var(--radius-lg);
  padding: clamp(48px, 7vw, 80px);
  overflow: hidden;
  text-align: center;
}
.contact-cta::before{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(50% 70% at 90% 0%, rgba(198,149,43,0.22), transparent 70%);
}
.contact-cta h2{ color: var(--cream); position: relative; z-index: 2; max-width: 720px; margin-inline: auto; }
.contact-cta .cta-buttons{ position: relative; z-index: 2; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }



/*==============================article================================*/

 /* ============ PAGE ORNAMENT HEADING ============ */
  .newsPageHeading{
    text-align:center;
    padding:48px 15px 10px;
  }
  .newsHeadingOrnamentRow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-bottom:8px;
  }
  .newsHeadingLeaf{
    width:20px;
    height:20px;
    fill:#C79A46;
  }
  .newsPageHeading h1{
    font-family:'Marcellus';
    
    font-size:2.4rem;
    color:#1F4B3F;
    letter-spacing:.5px;
    margin:0;
  }
  .newsPageSubline{
    color:#6B6558;
    font-size:.98rem;
    max-width:560px;
    margin:10px auto 0;
  }
 
  /* ============ CATEGORY FILTER PILLS ============ */
  .newsCategoryStrip{
    display:flex;
    gap:12px;
    overflow-x:auto;
    padding:26px 15px 10px;
    justify-content:center;
    flex-wrap:wrap;
  }
  .newsCategoryPill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#FFFFFF;
    border:1px solid #E4DCC8;
    color:#1F4B3F;
    padding:9px 20px;
    border-radius:30px;
    font-size:.85rem;
    font-weight:500;
    white-space:nowrap;
    text-decoration:none;
    transition:all .2s ease;
  }
  .newsCategoryPill:hover{
    background:#1F4B3F;
    color:#FBF6EC;
    border-color:#1F4B3F;
  }
  .newsCategoryPillActive{
    background:#1F4B3F;
    color:#FFFFFF;
    border-color:#1F4B3F;
  }
  .newsCategoryDot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#C79A46;
    display:inline-block;
  }
 
  /* ============ FEATURED ARTICLE ============ */
  .newsFeaturedWrap{
    padding:20px 15px 10px;
  }
  .newsFeaturedCard{
    background:#FFFFFF;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(31,75,63,0.08);
    border-left:5px solid #C79A46;
  }
    .newsFeaturedCard1{
    background:#FFFFFF;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(31,75,63,0.08);
    border-right:5px solid #C79A46;
    margin: 20px 0;

  }
  .newsFeaturedImgBox{
    position:relative;
    height:600px;
    background-size:cover;
    background-position:top;
  
  }
  .newsFeaturedTag{
    position:absolute;
    top:18px;
    left:18px;
    background:#1F4B3F;
    color:#FBF6EC;
    font-size:.72rem;
    letter-spacing:.5px;
    text-transform:uppercase;
    padding:6px 14px;
    border-radius:20px;
    font-weight:600;
  }
  .newsFeaturedBody{
    padding:36px 40px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    height:100%;
  }
  .newsFeaturedMeta{
    color:#C79A46;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.6px;
    text-transform:uppercase;
    margin-bottom:12px;
  }
  .newsFeaturedTitle{
    font-family:'Marcellus';
    
    font-size:1.9rem;
    color:#1F4B3F;
    line-height:1.3;
    margin-bottom:14px;
  }
  .newsFeaturedExcerpt{
    color:#6B6558;
    font-size:.95rem;
    line-height:1.7;
    margin-bottom:22px;
  }
  .newsReadMoreLink{
    color:#1F4B3F;
    font-weight:600;
    font-size:.88rem;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border-bottom:2px solid #C79A46;
    padding-bottom:3px;
    width:fit-content;
  }
  .newsReadMoreLink:hover{
    color:#C79A46;
  }
 
  /* ============ MAIN GRID + SIDEBAR ============ */
  .newsMainSection{
    padding:50px 15px 70px;
  }
  .newsSectionLabel{
    font-family: 'Marcellus';
    font-size: 1.35rem;
    color: #1F4B3F;
    margin-bottom:26px;
    padding-bottom:12px;
    border-bottom:2px solid #E4DCC8;
    position:relative;
  }
  .newsSectionLabel::after{
    content:"";
    position:absolute;
    bottom:-2px;
    left:0;
    width:60px;
    height:2px;
    background:#C79A46;
  }
 
  .newsArticleCard{
    background:#FFFFFF;
    border-radius:12px;
    overflow:hidden;
    height:100%;
    box-shadow:0 6px 18px rgba(31,75,63,0.06);
    border:1px solid #F0E9D8;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .newsArticleCard:hover{
    transform:translateY(-5px);
    box-shadow:0 14px 28px rgba(31,75,63,0.13);
  }
  .newsArticleThumb{
    height:300px;
    background-size:cover;
    background-position:center;
    position:relative;
  }
  .newsArticleCategoryChip{
    position:absolute;
    bottom:12px;
    left:12px;
    background:#FBF6EC;
    color:#1F4B3F;
    font-size:.68rem;
    font-weight:600;
    letter-spacing:.4px;
    text-transform:uppercase;
    padding:5px 12px;
    border-radius:16px;
  }
  .newsArticleCardBody{
    padding:22px 20px 24px;
  }
  .newsArticleDate{
    color:#C79A46;
    font-size:.74rem;
    font-weight:600;
    letter-spacing:.4px;
    text-transform:uppercase;
    margin-bottom:10px;
  }
  .newsArticleTitle{
    font-family:'Marcellus';
    font-weight:600;
    font-size:1.12rem;
    color:#1F4B3F;
    line-height:1.4;
    margin-bottom:10px;
    min-height:52px;
  }
  .newsArticleExcerpt{
    color:#6B6558;
    font-size:.86rem;
    line-height:1.6;
    margin-bottom:16px;
  }
  .newsArticleFooterRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:14px;
    border-top:1px dashed #E4DCC8;
  }
  .newsArticleAuthor{
    font-size:.78rem;
    color:#33302A;
    font-weight:500;
  }
  .newsArticleReadTime{
    font-size:.74rem;
    color:#9A9384;
  }
 
  /* ============ SIDEBAR ============ */
  .newsSidebarCard{
    background:#FFFFFF;
    border-radius:12px;
    padding:26px 24px;
    margin-bottom:26px;
    border:1px solid #F0E9D8;
    box-shadow:0 6px 18px rgba(31,75,63,0.05);
  }
  .newsSidebarHeading{
    font-family:'Marcellus';
    
    font-size:1.08rem;
    color:#1F4B3F;
    margin-bottom:20px;
  }
  .newsPopularItem{
    display:flex;
    gap:14px;
    margin-bottom:18px;
    text-decoration:none;
  }
  .newsPopularThumb{
    width:64px;
    height:64px;
    min-width:64px;
    border-radius:8px;
    background-size:cover;
    background-position:center;
  }
  .newsPopularTitle{
    font-size:.87rem;
    font-weight:600;
    color:#33302A;
    line-height:1.4;
    margin-bottom:4px;
  }
  .newsPopularDate{
    font-size:.72rem;
    color:#9A9384;
  }
 
  .newsTagCloudWrap{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .newsTagChip{
    background:#E8F0E3;
    color:#1F4B3F;
    font-size:.78rem;
    font-weight:500;
    padding:7px 14px;
    border-radius:16px;
    text-decoration:none;
  }
  .newsTagChip:hover{
    background:#1F4B3F;
    color:#FFFFFF;
  }
 
  .newsNewsletterCard{
    background:#1F4B3F;
    border-radius:12px;
    padding:30px 26px;
    color:#FBF6EC;
    text-align:center;
  }
  .newsNewsletterCard h5{
    font-family:'Marcellus';
    
    font-size:1.15rem;
    margin-bottom:10px;
  }
  .newsNewsletterCard p{
    font-size:.85rem;
    color:#D8E3D6;
    margin-bottom:20px;
  }
  .newsNewsletterInputRow{
    display:flex;
    gap:0;
  }
  .newsNewsletterInput{
    border:none;
    border-radius:6px 0 0 6px;
    padding:11px 14px;
    font-size:.85rem;
    flex:1;
    outline:none;
  }
  .newsNewsletterBtn{
    background:#C79A46;
    color:#1F4B3F;
    border:none;
    border-radius:0 6px 6px 0;
    padding:11px 18px;
    font-size:.85rem;
    font-weight:600;
    cursor:pointer;
  }
 
  /* ============ PAGINATION ============ */
  .newsPaginationWrap{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:50px;
  }
  .newsPageBtn{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#FFFFFF;
    border:1px solid #E4DCC8;
    color:#1F4B3F;
    font-weight:600;
    font-size:.9rem;
    text-decoration:none;
  }
  .newsPageBtnActive{
    background:#1F4B3F;
    color:#FFFFFF;
    border-color:#1F4B3F;
  }
  .newsPageBtn:hover{
    background:#C79A46;
    color:#FFFFFF;
    border-color:#C79A46;
  }
 
  @media (max-width:991px){
    .newsFeaturedImgBox{ min-height:240px; }
    .newsFeaturedBody{ padding:30px 26px; }
  }




  /* ============ ARTICLE BODY ============ */
  .detailBodyWrap{
    max-width:720px;
    margin:0 auto;
    padding:40px 15px 10px;
  }
  .detailBodyWrap p{
    font-size:1rem;
    line-height:1.85;
    color:#4A4638;
    margin-bottom:22px;
  }
  .detailSectionHeading{
    font-family:'Marcellus';
    font-weight:700;
    font-size:1.35rem;
    color:#1F4B3F;
    margin:34px 0 16px;
  }
  .detailPullQuote{
    border-left:4px solid #C79A46;
    background:#F3EEDF;
    padding:20px 26px;
    border-radius:0 10px 10px 0;
    margin:30px 0;
  }
  .detailPullQuote p{
    font-family:'Marcellus';
    font-style:italic;
    font-size:1.1rem;
    color:#1F4B3F;
    margin-bottom:0;
    line-height:1.6;
  }
  .detailBodyWrap ul{
    padding-left:20px;
    margin-bottom:22px;
  }
  .detailBodyWrap ul li{
    font-size:1rem;
    line-height:1.85;
    color:#4A4638;
    margin-bottom:10px;
  }


.custom-img{
    width:100%;
    height:450px;
    object-fit:cover;
    border-radius:15px;
    transition:.4s ease;
}

.custom-img:hover{
    transform:scale(1.04);
}

.btn{
    padding:12px 30px;
    border-radius:50px;
    transition:.3s;
}

.btn:hover{
    transform:translateY(-3px);
}

@media (max-width:991px){

    .custom-img{
        height:320px;
    }

}

.modern-header {background-color: #1d7b59; font-family: "Marcellus", serif; padding:10px; text-align: center; color: #fff; font-size: 20px; color:#fff; font-weight: normal; margin-top: 20px;}

.border-img {border:3px solid var(--green);}

/*=========================News Articles Card=============================*/


/* ===========================
   News Articles Card
=========================== */

.newsArticlesCard {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #e7ece9;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    transition: all .35s ease;
    height: 100%;
}

.newsArticlesCard a{
    text-decoration:none;
}
.newsArticlesThumb::before{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:5px;
    background:#1e4b3c;
    z-index:2;
}
.newsArticlesCard:hover{
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(73,108,97,0.18);
}

/* Image */

.newsArticlesThumb{
    position:relative;
    height:260px;
    background-size:cover;
    background-position:center;
    overflow:hidden;
    transition:.5s;
}

.newsArticlesCard:hover .newsArticlesThumb{
    transform:scale(1.05);
}

/* Dark Overlay */

.newsArticlesThumb::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
            rgba(0,0,0,.45),
            rgba(0,0,0,.05));
}

/* Category */

.newsArticlesCategoryChip{
    position:absolute;
    top:18px;
    left:18px;
    background:#1e4b3c;
    color:#fff;
    padding:7px 18px;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
    letter-spacing:.3px;
    z-index:2;
    box-shadow:0 5px 15px rgba(73,108,97,.3);
}

/* Body */

.newsArticlesCardBody{
    padding:28px;
}

/* Date */

.newsArticlesDate{
    color:#1e4b3c;
    font-size:13px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:12px;
}

/* Title */

.newsArticlesTitle{
    color:#222;
    font-size:24px;
    line-height:1.4;
    font-weight:700;
    margin-bottom:15px;
    transition:.3s;
}

.newsArticlesCard:hover .newsArticlesTitle{
    color:#1e4b3c;
}

/* Description */

.newsArticlesExcerpt{
    color:#666;
    font-size:15px;
    line-height:1.8;
    margin-bottom:25px;
}

/* Footer */

.newsArticlesFooterRow{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:18px;
    border-top:1px solid #edf2ef;
}

.newsArticlesAuthor{
    color:#2e4c43;
    font-weight:600;
    font-size:14px;
}

.newsArticlesReadTime{
    background:#edf5f2;
    color:#1e4b3c;
    padding:7px 14px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}

/* Responsive */

@media(max-width:768px){

.newsArticlesThumb{
    height:220px;
}

.newsArticlesCardBody{
    padding:22px;
}

.newsArticlesTitle{
    font-size:20px;
}

.newsArticlesExcerpt{
    font-size:14px;
}

}


/*==========================debraj article=================================*/
.ayur-articles-section{
        border-right: 1px solid #ddd;
}
  .ayur-wrapper{
    background:#ffffff;
    padding:70px 0;
    font-family:'Poppins', sans-serif;
    overflow:hidden;
  }
 
  /* ---------- Section headings ---------- */
  .ayur-heading-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:36px;
  }
 
  .ayur-heading-title{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .ayur-heading-title img{
    width: 50px;
  }
 
  .ayur-heading-title h2{
    font-size: 32px;
    font-family: "Marcellus", serif;
    color: var(--green);
  }
 
  .ayur-leaf-icon{
    color:#8a9a5b;
    font-size:1.1rem;
    display:inline-block;
    animation: ayur-sway 3s ease-in-out infinite;
  }
 
  .ayur-leaf-icon.ayur-leaf-right{
    animation-delay:.4s;
  }
 
  @keyframes ayur-sway{
    0%,100%{ transform: rotate(-8deg); }
    50%{ transform: rotate(8deg); }
  }
 
  .ayur-view-all a{
    color:#33472f;
    font-size:.8rem;
    letter-spacing:1px;
    font-weight:600;
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition: border-color .25s ease, color .25s ease;
    text-decoration: underline;
  }
  .ayur-view-all a:hover{
    color:#8a9a5b;
    border-color:#8a9a5b;
  }
 
  .ayur-heading-center{
    justify-content:center;
  }
 
  /* ---------- Article cards ---------- */
  .ayur-article-card{
    display:flex;
    gap:18px;
    padding:14px 6px;
    border-bottom:1px solid #e7e1d3;
    opacity:0;
    transform: translateY(18px);
    animation: ayur-fade-up .7s ease forwards;
    align-items: center;
  }
  .ayur-article-card:last-child{ border-bottom:none; }
 
  .ayur-article-card:nth-child(1){ animation-delay:.1s; }
  .ayur-article-card:nth-child(2){ animation-delay:.3s; }
  .ayur-article-card:nth-child(3){ animation-delay:.5s; }
 
  @keyframes ayur-fade-up{
    to{ opacity:1; transform:translateY(0); }
  }
 
  .ayur-article-thumb{
    position: relative;
    width: 195px;
    min-width: 130px;
    border-radius: 10px;
    overflow: hidden;    
    border: 1px solid #33472f;
  }
 
  .ayur-article-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition: transform .5s ease;
  }
 
  .ayur-article-card:hover .ayur-article-thumb img{
    transform: scale(1.1);
  }
 
  .ayur-tag-badge{
    position:absolute;
    top:8px;
    left:8px;
    background:#33472f;
    color:#f4f0e4;
    font-size:.62rem;
    font-weight:600;
    letter-spacing:.3px;
    padding:4px 10px;
    border-radius:14px;
  }
 
  .ayur-article-body{
    flex:1;
  }
 
  .ayur-article-meta{
    font-size:.68rem;
    color:#9a9284;
    letter-spacing:.5px;
    text-transform:uppercase;
    margin-bottom:4px;
  }
 
  .ayur-article-title h3{
font-family: 'Marcellus';
    font-size: 21px;
    color: #000000;
    margin: 0 0 6px 0;
    line-height: 1.3;
    transition: color .25s ease;
  }
 
  .ayur-article-card:hover .ayur-article-title h3{
    color:#6f7f45;
  }
 
  .ayur-article-desc p{
    font-size:.82rem;
    color:#726c60;
    line-height:1.5;
    margin:0 0 8px 0;
  }
 
  .ayur-article-footer{
    font-size:.72rem;
    color:#8a9a5b;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:6px;
  }
 
  .ayur-dot-sep{
    width:3px;
    height:3px;
    border-radius:50%;
    background:#c8c2b3;
    display:inline-block;
  }
 
  /* ---------- Certification cards ---------- */
  .ayur-cert-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:22px;
  }
 
  .ayur-cert-card{
    background:#fffdf8;
    border:2px solid #c8a25a;
    border-radius:2px;
    box-shadow:0 6px 18px rgba(60,50,20,.08);
    text-align:center;
    position:relative;
    opacity:0;
    transform: translateY(20px) scale(.96);
    animation: ayur-cert-in .6s ease forwards;
    transition: transform .35s ease, box-shadow .35s ease;
    width: 100%;
  }
  .ayur-cert-card img{
      width: 100%;
  }
 
  .ayur-cert-card:hover{
    transform: translateY(-6px) scale(1.02);
    box-shadow:0 16px 28px rgba(60,50,20,.15);
  }
 
  .ayur-cert-card:nth-child(1){ animation-delay:.15s; }
  .ayur-cert-card:nth-child(2){ animation-delay:.3s; }
  .ayur-cert-card:nth-child(3){ animation-delay:.45s; }
  .ayur-cert-card:nth-child(4){ animation-delay:.6s; }
  .ayur-cert-card:nth-child(5){ animation-delay:.75s; }
  .ayur-cert-card:nth-child(6){ animation-delay:.9s; }
 
  @keyframes ayur-cert-in{
    to{ opacity:1; transform:translateY(0) scale(1); }
  }
 
  .ayur-cert-card::before{
    content:"";
    position:absolute;
    inset:6px;
    border:1px solid #e3d4ab;
    pointer-events:none;
  }
 
  .ayur-cert-title h4{
    font-family:'Marcellus';
    font-size:.95rem;
    font-weight:700;
    color:#3a3a30;
    margin:0 0 2px 0;
    line-height:1.3;
  }
 
  .ayur-cert-sub p{
    font-size:.68rem;
    letter-spacing:1px;
    color:#8b8474;
    margin:0 0 12px 0;
    text-transform:uppercase;
  }
 
  .ayur-cert-icon-wrap{
    width:64px;
    height:64px;
    margin:0 auto;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
  }
 
  .ayur-cert-icon-wrap.ayur-icon-green{
    background: radial-gradient(circle at 35% 30%, #6f9b52, #33472f);
  }
  .ayur-cert-icon-wrap.ayur-icon-blue{
    background:#fff;
    border:2px solid #1c4fa0;
  }
  .ayur-cert-icon-wrap.ayur-icon-plain{
    background:transparent;
  }
 
  .ayur-cert-icon-wrap svg{
    width:34px;
    height:34px;
  }
 
  .ayur-cert-icon-wrap.ayur-icon-emblem img,
  .ayur-cert-icon-wrap.ayur-icon-fssai img,
  .ayur-cert-icon-wrap.ayur-icon-medal img{
    width:100%;
    height:100%;
    object-fit:contain;
  }
 
  .ayur-ring-text{
    position:absolute;
    inset:0;
    border-radius:50%;
    animation: ayur-spin-slow 14s linear infinite;
  }
 
  @keyframes ayur-spin-slow{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
  }
 
  @media (max-width: 991px){
    .ayur-cert-grid{ grid-template-columns:repeat(2, 1fr); }
  }
 
  @media (max-width: 767px){
    .ayur-cert-grid{ grid-template-columns:1fr 1fr; }
    .ayur-article-thumb{ width:100px; min-width:100px; height:80px; }
  }
 
  @media (max-width: 575px){
    .ayur-cert-grid{ grid-template-columns:1fr; }
    .ayur-article-card{ flex-direction:column; }
    .ayur-article-thumb{ width:100%; height:160px; }
  }
 
  @media (prefers-reduced-motion: reduce){
    .ayur-article-card, .ayur-cert-card, .ayur-leaf-icon, .ring-text{
      animation:none !important;
      opacity:1 !important;
      transform:none !important;
    }
  }








.myaxyl-price-wrapper {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.myaxyl-price-box {
    flex: 1;
    min-width: 180px;
    padding: 12px 14px;
    border: 1px solid #2f5d56;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: all .3s ease;
    box-sizing: border-box;
}

.myaxyl-price-box:hover {
    border-color: #2f5d56;
}

.myaxyl-price-size-wrap {
    margin-bottom: 4px;
}

.myaxyl-strike {
    text-decoration: line-through;
    color: #777;
    margin: 0 4px;
}

.myaxyl-final-price {
    color: #000;
    font-weight: 700;
}

/* Active Tab */
.myaxyl-price-box.active {
    background: #2f5d56;
    border-color: #2f5d56;
}

.myaxyl-price-box.active .myaxyl-price-size-wrap p,
.myaxyl-price-box.active .myaxyl-price-value-wrap p,
.myaxyl-price-box.active .myaxyl-final-price {
    color: #fff;
}

.myaxyl-price-box.active .myaxyl-strike {
    color: rgba(255,255,255,.75);
}