@charset "UTF-8";
/*-----------------------------------------------------------------------------------

    Theme Name: Orfarm - Multipurpose eCommerce HTML5 Template
    Author: Theme Pure
    Support: basictheme@gmail.com
    Description: Template Name  – HTML5 Template
    Version: 1.0

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

    01. THEME DEFAULT CSS
    02. HEADER CSS
    03. MEAN MENU CSS
    04. SLIDER CSS
    05. TEAM CSS
    06. SERVICES CSS
    07. PORTFOLIO CSS
    08. BLOG CSS
    09. EFFECT CSS
    10. CATEGORY CSS
    11. PRODUCT CSS
    12. PRODUCT-DETAILS CSS
    13. BANNER CSS
    14. COUNDOWN CSS
    15. FEATURE CSS
    16. ABOUT CSS
    17. CHOOSE CSS
    18. BRAND-PRODUCT CSS
    19. TESTIMONIAL CSS
    20. SHOP CSS
    21. CART CSS
    22. COMING-SOON CSS
    23. SHOP-LOCATION CSS
    24. CONTACT CSS
    25. LOG-IN CSS
    26. FAQ CSS
    27. FOOTER CSS


**********************************************/
/*----------------------------------------*/
/*  01. THEME DEFAULT CSS START
/*----------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=Quicksand:wght@300;400;500;600;700&family=Schoolbell&display=swap");
:root {
  /**
  @font family declaration
  */
  --tp-ff-body: 'Jost', sans-serif;
  --tp-ff-heading: 'Quicksand', sans-serif;
  --tp-ff-p: 'Jost', sans-serif;
  --tp-ff-jost: 'Jost', sans-serif;
  --tp-ff-font-family: Font Awesome 5 Pro;
  /**
  @color declaration
  */
  --tp-common-white: #ffffff;
  --tp-common-black: #000;
  --tp-heading-primary: #2D2A6E;
  --tp-heading-secondary: #96AE00;
  --tp-grey-1: #F2F2F6;
  --tp-grey-2: #F5F6F8;
  --tp-grey-3: #F5F2FF;
  --tp-grey-4: #FFF3EC;
  --tp-grey-5: #ECFBFF;
  --tp-grey-6: #FEEFD0;
  --tp-grey-7: #C4C4C4;
  --tp-grey-8: #F7F7F9;
  --tp-grey-9: #B4DEA4;
  --tp-grey-10: #B0AFCC;
  --tp-text-body: #4D5574;
  --tp-text-1: #FFB800;
  --tp-text-2: #334763;
  --tp-text-3: #79819C;
  --tp-text-4: #FACFD4;
  --tp-text-5: #FFD600;
  --tp-theme-1: #2D2A6E;
  --tp-theme-2: #EA0D42;
  --tp-theme-3: #12B7CE;
  --tp-theme-4: #2D2C6E;
  --tp-theme-5: #D91212;
  --tp-border-1: #E6EBF0;
  --tp-border-2: #ACAFB7;
  --tp-border-3: #EBEFF4;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*---------------------------------
	typography css start 
---------------------------------*/
body {
  font-family: var(--tp-ff-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--tp-text-body);
  line-height: 23px;
  overflow-X: hidden !important;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--tp-ff-heading);
  color: #2D2A6E;
  margin-top: 0px;
  font-weight: var(--tp-fw-sbold);
  line-height: 1.2;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 34px;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 26px;
}

h5 {
  font-size: 22px;
}

h6 {
  font-size: 18px;
}

ul {
  margin: 0px;
  padding: 0px;
}

p {
  font-family: var(--tp-ff-p);
  font-size: 16px;
  font-weight: 400;
  color: var(--tp-text-body);
  margin-bottom: 15px;
  line-height: 23px;
}

a,
.btn,
button,
p,
i,
input,
select,
textarea,
li,
img,
svg path,
*::after,
*::before,
.transition-3,
h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

a:focus,
.button:focus {
  text-decoration: none;
  outline: none;
}

a:focus,
a:hover {
  color: inherit;
  text-decoration: none;
}

a,
button {
  color: inherit;
  outline: none;
  border: none;
  background: transparent;
}

button:hover {
  cursor: pointer;
}

button:focus {
  outline: 0;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

input {
  outline: none;
}

input[type=color] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
  padding: 0;
  border-radius: 50%;
}

*::-moz-selection {
  background: var(--tp-common-black);
  color: var(--tp-common-white);
  text-shadow: none;
}

::-moz-selection {
  background: var(--tp-common-black);
  color: var(--tp-common-white);
  text-shadow: none;
}

::selection {
  background: var(--tp-common-black);
  color: var(--tp-common-white);
  text-shadow: none;
}

*::-moz-placeholder {
  color: var(--tp-common-black);
  font-size: var(--tp-fz-body);
  opacity: 1;
}

input::placeholder {
  font-weight: 400;
  font-size: 13px;
  color: #79819C;
}

.custom-container {
  max-width: 1200px;
}

/*---------------------------------
    common classes css start 
---------------------------------*/
.w-img img {
  width: 100%;
}

.m-img img {
  max-width: 100%;
}

.fix {
  overflow: hidden;
}

.clear {
  clear: both;
}

.overflow-y-visible {
  overflow-x: hidden;
  overflow-y: visible;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

.include-bg {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.custom-row {
  display: flex;
  justify-content: space-between;
}

.gx-6 {
  --bs-gutter-x: 40px;
}

/* scroll up */
.scroll-top {
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50px;
  z-index: 99;
  background-color: var(--tp-heading-secondary);
  opacity: 0.5;
  font-size: 16px;
  color: var(--tp-common-white);
  cursor: pointer;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  border: none;
  bottom: -10%;
  position: fixed;
  right: 50px;
}
.scroll-top:hover {
  opacity: 1;
}
.scroll-top::after {
  position: absolute;
  z-index: -1;
  content: "";
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
}

.scroll-top.open {
  bottom: 30px;
}

.gx-7 {
  --bs-gutter-x: 20px;
}

/*--
    - Spacing
-----------------------------------------*/
.tp-btn {
  background-color: var(--tp-heading-secondary);
  text-align: center;
  color: var(--tp-common-white);
  font-weight: 600;
  border-radius: 50px;
  display: inline-block;
  font-size: 13px;
  text-transform: uppercase;
  padding: 13px 53px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
@media (max-width: 767px), only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-btn {
    padding: 8px 30px;
  }
}
.tp-btn:hover {
  color: var(--tp-common-white);
  background-color: var(--tp-heading-primary);
}

.tp-btn-2 {
  padding: 1px 40px;
  background-color: var(--tp-heading-secondary);
  display: inline-block;
  text-align: center;
  line-height: 35px;
  text-transform: uppercase;
  color: var(--tp-common-white);
  font-weight: 600;
  border-radius: 50px;
  font-size: 13px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-btn-2 {
    padding: 1px 18px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-btn-2 {
    padding: 1px 30px;
  }
}
.tp-btn-2:hover {
  color: var(--tp-common-white);
  background-color: #859A00;
}

.tp-btn-3,
.tp-btn-4,
.whight-btn {
  padding: 5px 55px;
  background-color: var(--tp-heading-secondary);
  display: inline-block;
  text-align: center;
  line-height: 35px;
  text-transform: uppercase;
  color: var(--tp-common-white);
  font-weight: 600;
  border-radius: 50px;
  font-size: 13px;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-btn-3,
.tp-btn-4,
.whight-btn {
    padding: 5px 40px;
  }
}
.tp-btn-3:hover,
.tp-btn-4:hover,
.whight-btn:hover {
  color: var(--tp-common-white);
  background-color: #27632A;
}

.tp-btn-4 {
  background-color: var(--tp-heading-primary);
}
.tp-btn-4:hover {
  color: var(--tp-common-white);
  pointer-events: auto;
  background-color: #27632A;
}

.whight-btn {
  color: var(--tp-heading-secondary);
  background-color: var(--tp-common-white);
  border: 2px solid var(--tp-common-white);
}
.whight-btn:hover {
  color: var(--tp-common-white);
  background-color: transparent;
  border: 2px solid var(--tp-common-white);
}

.tp-news-btn {
  font-weight: 600;
  font-size: 13px;
  line-height: 19px;
  color: var(--tp-common-white);
  text-transform: uppercase;
  padding: 12px 30px;
  background-color: var(--tp-heading-secondary);
  border-radius: 3px;
}

.tpcart-btn,
.tpcheck-btn {
  border: 2px solid var(--tp-heading-secondary);
  display: block;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  min-height: 45px;
  text-transform: uppercase;
  background: var(--tp-heading-secondary);
  color: var(--tp-common-white);
  border-radius: 30px;
  padding: 10px 30px;
  text-align: center;
  line-height: 1.5;
  padding: 14px;
  font-weight: 600;
}
.tpcart-btn:hover,
.tpcheck-btn:hover {
  background-color: #859A00;
  color: var(--tp-common-white);
  border: 2px solid #859A00;
}

.tpcart-btn {
  background-color: transparent;
  color: var(--tp-heading-secondary);
}
.tpcart-btn:hover {
  background-color: #859A00;
  color: var(--tp-common-white);
  border: 2px solid #859A00;
}

.banner-btn {
  background-color: var(--tp-common-white);
  color: var(--tp-heading-primary);
}

.border-btn {
  background-color: transparent;
  color: var(--tp-common-white);
}
.border-btn:hover {
  background-color: var(--tp-common-white);
  color: var(--tp-heading-secondary);
}

/* 01. ========= shape animation ========== */
@keyframes lara {
  0% {
    transform: translateY(-1px);
  }
  25% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(-7px);
  }
  75% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(-1px);
  }
}
@keyframes chara {
  100% {
    transform: translateY(-8px);
  }
}
/* 01. ========= animation plus ========== */
@keyframes animation-plus {
  25% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
}
/* 01. ========= animation plus ========== */
@keyframes shakenext {
  25% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-3px, 0, 0);
  }
  75% {
    transform: translate3d(3px, 0, 0);
  }
}
/* 01. ========= shape animation ========== */
@keyframes slider-anim {
  0% {
    transform: translateX(-1px);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(-10px);
  }
  75% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(-1px);
  }
}
/* 01. ========= up-down animation ========== */
@keyframes up-down {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(-10px);
  }
  75% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0px);
  }
}
/* 01. ========= up-down animation ========== */
@keyframes left-right {
  0% {
    transform: translateX(3px);
  }
  25% {
    transform: translateX(7px);
  }
  50% {
    transform: translateX(15px);
  }
  75% {
    transform: translateX(7px);
  }
  100% {
    transform: translateX(2px);
  }
}
/*--
    - Background color
-----------------------------------------*/
.grey-bg {
  background: var(--tp-grey-1);
}

.grey-bg-2 {
  background: var(--tp-grey-2);
}

.white-bg {
  background: var(--tp-common-white);
}

.black-bg {
  background: var(--tp-common-black);
}

.theme-bg-1 {
      background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
}

.theme-bg-2 {
  background-color: var(--tp-theme-4);
}

.tp-breadcrumb__title {
  font-family: "Quicksand";
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
  color: var(--tp-heading-primary);
  letter-spacing: -0.03em;
  margin-bottom: 0;
}
.tp-breadcrumb__content {
  padding: 8px 0;
}
.tp-breadcrumb__list span {
  font-size: 14px;
  color: var(--tp-theme-1);
  line-height: 30px;
  font-weight: 400;
}
.tp-breadcrumb__list .dvdr {
  color: var(--tp-text-3);
  transform: translateY(0px);
  display: inline-block;
  padding: 0 0;
}
.tp-breadcrumb__active {
  color: var(--tp-text-3) !important;
}
.tp-breadcrumb__active a:hover {
  color: var(--tp-heading-secondary);
}

.basic-pagination ul li {
  display: inline-block;
  list-style: none;
}
.basic-pagination ul li:not(:last-child) {
  margin-right: 5px;
}
.basic-pagination ul li a, .basic-pagination ul li span {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 38px;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid #DCE1E8;
  font-size: 14px;
  font-weight: 600;
  color: var(--tp-text-3);
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  -ms-transition: all 0.2s ease-out 0s;
  -o-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
}
@media (max-width: 767px) {
  .basic-pagination ul li a, .basic-pagination ul li span {
    height: 30px;
    width: 30px;
    line-height: 28px;
    font-size: 12px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .basic-pagination ul li a, .basic-pagination ul li span {
    height: 40px;
    width: 40px;
    line-height: 36px;
    font-size: 14px;
  }
}
.basic-pagination ul li a:hover, .basic-pagination ul li a.current, .basic-pagination ul li span:hover, .basic-pagination ul li span.current {
  background: var(--tp-heading-secondary);
  border-color: var(--tp-heading-secondary);
  color: var(--tp-common-white);
}
.basic-pagination ul li a i, .basic-pagination ul li span i {
  font-weight: 600;
}

.tpnavtab__area nav {
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
}
.tpnavtab__area nav .nav-link.active {
  color: var(--tp-heading-secondary);
  background-color: transparent;
  border: none;
}
.tpnavtab__area nav .nav-tabs {
  border-bottom: none;
}
.tpnavtab__area nav .nav-link {
  color: var(--tp-text-body);
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 0;
  background: 0 0;
  border: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 0 22px;
  margin-bottom: 8px;
}
@media (max-width: 767px) {
  .tpnavtab__area nav .nav-link {
    padding: 0 8px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tpnavtab__area nav .nav-link {
    padding: 0 12px;
    font-size: 14px;
  }
}
.tpnavtab__newitem {
  display: flex;
  align-items: flex-start;
}
.tpnavtab__newitem.tpnavtab__area nav .nav-link.active {
  color: var(--tp-heading-primary);
}
.tpnavtab__newitem.tpnavtab__area nav .nav-link {
  color: var(--tp-text-3);
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 0;
  background: 0 0;
  border: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 0 0;
  margin-right: 28px;
  margin-bottom: 10px;
  font-family: "Quicksand";
}

#nav-tabContent-tp {
  position: relative;
  z-index: 9999;
}

.tpsection p {
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: var(--tp-text-body);
}
.tpsection p a {
  color: var(--tp-heading-secondary);
}
.tpsection__sub-title {
  color: var(--tp-heading-secondary);
  font-family: "Schoolbell";
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
}
.tpsection__title {
  font-weight: 700;
  font-size: 30px;
  line-height: 38px;
  color: var(--tp-heading-primary);
  letter-spacing: -0.3px;
}
@media (max-width: 767px) {
  .tpsection__title {
    font-size: 28px;
  }
}

.section__content p {
  color: var(--tp-common-white);
}
@media (max-width: 767px) {
  .section__content p br {
    display: none;
  }
}
.section__sub-title {
  font-family: "Schoolbell", Sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
  color: var(--tp-common-white);
  display: block;
}
.section__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 43px;
  letter-spacing: -0.5px;
  color: var(--tp-common-white);
}
@media (max-width: 767px) {
  .section__title {
    font-size: 28px;
  }
}
@media (max-width: 767px) {
  .section__title br {
    display: none;
  }
}

/*----------------------------------------*/
/*  03. MEAN MENU CSS
/*----------------------------------------*/
/* mean menu customize */
.mean-container a.meanmenu-reveal {
  display: none;
}

.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}

.mean-container .mean-bar {
  padding: 0;
  min-height: auto;
  background: none;
}

.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}

.mean-container a.meanmenu-reveal {
  display: none !important;
}

.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 10px 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  text-transform: capitalize !important;
}
.mean-container .mean-nav ul li a:hover {
  color: var(--tp-heading-secondary);
}

.mean-container .mean-nav ul li a.mean-expand {
  margin-top: 8px;
  padding: 0 !important;
  line-height: 14px;
  border: 1px solid #3C3962 !important;
  height: 26px;
  width: 26px;
  line-height: 26px;
  color: #fff;
  top: 0;
  font-weight: 400;
}
.mean-container .mean-nav ul li a.mean-expand:hover {
  background: var(--clr-theme-1);
  color: var(--tp-common-white);
  border-color: var(--clr-theme-1);
}

.mean-container .mean-nav ul li > a > i {
  display: none;
}

.mean-container .mean-nav ul li > a.mean-expand i {
  display: inline-block;
  font-size: 14px;
}

.mean-container .mean-nav > ul > li:first-child > a {
  border-top: 0;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked {
  color: var(--tp-heading-secondary);
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
  transform: rotate(45deg);
  color: var(--tp-heading-secondary);
}

.mean-container .mean-nav ul .home-menu-style li a {
  text-align: center;
}
.mean-container .mean-nav ul li a:hover img {
  transform: scale(0.92);
}
.mean-container .mean-nav ul li a img {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  width: 100%;
  margin-bottom: 5px;
}

/*----------------------------------------*/
/*  02. HEADER CSS
/*----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__top-left {
    text-align: center;
  }
}
.header__top-left span {
  color: var(--tp-common-white);
  font-size: 13px;
}
.header__top-left span strong {
  font-weight: 400;
  color: var(--tp-text-1);
  font-size: 13px;
}
.header__top-right {
  justify-content: end;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__top-right {
    justify-content: center;
  }
}
.header__top-link a {
  color: var(--tp-common-white);
  display: inline-block;
  font-size: 13px;
  margin-left: 25px;
}
.header__top-link a:hover {
  color: var(--tp-heading-secondary);
}
.header__top-link a:first-child {
  margin-left: 0;
}
.header__top-price .nice-select {
  background: var(--tp-heading-primary);
  color: #fff;
  border: none;
  font-size: 13px;
  height: 40px;
  width: 60px;
  padding-right: 16px;
  font-weight: 400;
  margin-left: 5px;
}
.header__top-price .nice-select::after {
  height: 6px;
  margin-top: -5px;
  right: 3px;
  width: 6px;
  border-bottom: 1px solid #B0AFCC;
  border-right: 1px solid #B0AFCC;
}
.header__top-price .nice-select .list {
  background: var(--tp-common-white);
  box-shadow: 0px 8px 20px rgba(61, 110, 168, 0.1);
  border-radius: 0px 0px 5px 5px !important;
  color: var(--tp-text-2);
  width: 65px;
  padding: 0 0 20px 0;
}
.header__top-price .nice-select .option {
  margin-bottom: -13px;
}
.header__top-price .nice-select .option:hover {
  color: var(--tp-heading-secondary);
}
.header__lang {
  position: relative;
  z-index: 99;
  padding: 7px 0;
}
.header__lang:hover .header__lang-select {
  opacity: 1;
  visibility: visible;
  top: 100%;
}
.header__lang:hover .header__lang-select i {
  transform: rotate(180deg);
  color: var(--tp-text-primary);
}
.header__lang:hover .header__lang-submenu {
  visibility: visible;
  opacity: 1;
  transform: perspective(400px) rotateX(0deg);
}
.header__lang-select {
  color: var(--tp-common-white);
  padding-left: 15px;
  margin-left: 15px;
  position: relative;
}
.header__lang-select::before {
  position: absolute;
  content: "";
  left: 0;
  background-color: #5E5AA3;
  height: 15px;
  width: 1px;
  top: 50%;
  transform: translateY(-50%);
}
.header__lang-select i {
  font-size: 14px;
  margin-left: 2px;
  color: #B0AFCC;
}
.header__lang-submenu {
  position: absolute;
  top: 110%;
  left: 0px;
  width: 120px;
  background: var(--tp-common-white);
  z-index: 9;
  padding: 14px 16px;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
  box-shadow: 0px 8px 20px rgba(61, 110, 168, 0.1);
  border-radius: 0px 0px 5px 5px;
}
.header__lang-submenu li {
  list-style: none;
  margin-bottom: 5px;
}
.header__lang-submenu li:last-child {
  margin-bottom: 0;
}
.header__lang-submenu li a {
  font-size: 14px;
  font-weight: 400;
}
.header__lang-submenu li a:hover {
  color: var(--tp-heading-secondary);
}
.header__main-area {
  border: 1px solid #E6EAF0;
}
.main-menu ul li {
  position: relative;
  display: inline-block;
  line-height: 1;
  list-style: none;
}
.main-menu ul li:hover.has-dropdown a::after {
  color: var(--tp-heading-secondary);
}
.main-menu ul li:hover .sub-menu {
  visibility: visible;
  opacity: 1;
  top: 100%;
}
.main-menu ul li a {
  display: inline-block;
  font-weight: 500;
  font-size: 16px;
  padding: 10px 12px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .main-menu ul li a {
    padding: 32px 10px;
  }
}
.main-menu ul li a:hover {
  color: var(--tp-heading-secondary);
}
.main-menu ul li.has-dropdown > a {
  position: relative;
}
.main-menu ul li.has-dropdown > a::after {
  content: "\e94f";
  font-size: 14px;
  color: var(--tp-common-black);
  font-family: "icon-dukamarket";
  font-weight: 400;
  margin-left: 6px;
  display: inline-block;
  font-weight: var(--tp-fw-bold);
}
.main-menu ul li.has-megamenu {
  position: static;
}
.main-menu ul li.has-homemenu {
  position: static;
}
.main-menu ul li .sub-menu {
  position: absolute;
  top: 120%;
  left: 0;
  min-width: 270px;
  padding: 30px 0;
  background-color: var(--tp-common-white);
  z-index: 2;
  transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1), visibility 0.4s cubic-bezier(0.19, 1, 0.22, 1), transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  box-shadow: 0px 8px 20px rgba(61, 110, 168, 0.1);
  border-radius: 0px 0px 10px 10px;
  border-top: 2px solid var(--tp-heading-secondary);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.main-menu ul li .sub-menu > li {
  margin: 0;
  list-style: none;
  padding: 0 20px 0 40px;
  display: block;
}
.main-menu ul li .sub-menu > li > a {
  display: block;
  font-family: var(--font-body);
  text-transform: none;
  padding: 10px 0;
  padding-left: 0px;
  color: #334763;
  font-size: var(--menu-font-size);
  font-weight: normal;
  white-space: normal;
  word-wrap: break-word;
  word-break: normal;
  transition: 0.3s;
  line-height: 131%;
  text-align: left;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.main-menu ul li .sub-menu > li > a:hover {
  color: var(--tp-heading-secondary);
  padding-left: 8px;
}
.main-menu ul li .sub-menu > li > a::before {
  display: none;
}
.main-menu ul li .sub-menu > li > a::after {
  display: none;
}
.main-menu ul li .mega-menu {
  padding: 35px 40px 26px 40px;
  position: absolute;
  top: 120%;
  width: 1200px;
  background-color: var(--tp-common-white);
  left: 0;
  right: 0;
  z-index: 9999;
  transform-origin: top;
  display: flex;
  justify-content: space-between;
  flex: 0 0 auto;
  margin: 0 auto;
  box-shadow: 0px 8px 20px rgba(61, 110, 168, 0.1);
  border-radius: 0px 0px 10px 10px;
  border-top: 2px solid var(--tp-heading-secondary);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .main-menu ul li .mega-menu {
    width: 100%;
  }
}
.main-menu ul li .mega-menu li {
  width: 260px;
  text-align: left;
  padding-left: 0;
  padding-right: 0;
}
.main-menu ul li .mega-menu li .mega-menu-title {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 13px;
  position: relative;
  text-transform: uppercase;
  color: var(--tp-heading-secondary);
  font-family: "Jost", sans-serif;
  margin-bottom: 10px;
}
.main-menu ul li .mega-menu li .mega-menu-title:hover {
  padding-left: 0;
}
.main-menu ul li .mega-menu li ul {
  padding-left: 0;
  text-align: left;
}
.main-menu ul li .mega-menu li ul li {
  padding-left: 0;
  text-align: left;
}
.main-menu ul li .mega-menu li ul li a {
  position: relative;
  padding: 10px;
  font-size: 16px;
  font-weight: 400;
  color: var(--tp-text-body);
  text-transform: capitalize;
  text-align: start;
  margin: 0;
  padding-left: 0;
}
.main-menu ul li .mega-menu li ul li a:hover {
  color: var(--tp-heading-secondary);
  padding-left: 8px;
}
.main-menu ul li .home-menu-style {
  width: 100%;
}
.main-menu ul li .home-menu-style li {
  display: inline-block;
  padding: 0 10px;
  width: 230px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .main-menu ul li .home-menu-style li {
    width: 220px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .main-menu ul li .home-menu-style li {
    width: 175px;
  }
}
.main-menu ul li .home-menu-style li a {
  text-align: center;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.main-menu ul li .home-menu-style li a:hover {
  padding-left: 0px;
  transform: scale(0.92);
}
.main-menu ul li .home-menu-style li a img {
  border: 1px solid rgba(222, 226, 230, 0.5607843137);
  border-radius: 10px;
  width: 100%;
  display: block;
  margin-bottom: 25px;
}

.header__info {
  justify-content: end;
}
.header__info a i, .header__info button i {
  height: 40px;
  width: 40px;
  border-radius: 50px;
  background-color: var(--tp-grey-3);
  text-align: center;
  line-height: 40px;
  color: var(--tp-theme-1);
  display: block;
}
.header__info-cart {
  position: relative;
}
.header__info-cart span {
  position: absolute;
  font-size: 11px;
  background-color: red;
  color: var(--tp-common-white);
  height: 18px;
  width: 18px;
  text-align: center;
  line-height: 18px;
  display: block;
  border-radius: 50px;
  top: -2px;
  right: -3px;
}

.sub-menu.mega-menu {
  background-repeat: no-repeat;
  background-position: right bottom;
}

.tpsearchbar {
  background-color: var(--tp-common-white);
  text-align: start;
  position: fixed;
  right: 0;
  left: 0;
  margin: 0 auto;
  top: 0;
  width: 100%;
  min-height: 320px;
  box-shadow: rgba(5, 13, 54, 0.05) 5px 15px 30px 0px;
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  z-index: 9999999;
  padding: 30px;
  transform: translateY(-100%);
}
.tpsearchbar__title {
  font-size: 18px;
  color: var(--tp-theme-1);
  text-transform: uppercase;
  font-weight: 700;
  font-family: "Quicksand", sans-serif;
  margin-bottom: 35px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tpsearchbar__title {
    font-size: 12px;
  }
}
.tpsearchbar.tp-searchbar-opened {
  transform: translateY(0);
}
.tpsearchbar__close {
  color: var(--tp-theme-1);
  font-size: 30px;
  background: var(--tp-theme-secondary);
  width: 35px;
  height: 35px;
  position: absolute;
  top: 15%;
  right: 15%;
}
.tpsearchbar__close:hover {
  color: var(--tp-heading-secondary);
}
.tpsearchbar__form {
  position: relative;
}
.tpsearchbar__form input {
  width: 100%;
  height: 45px;
  border: 1px solid var(--tp-border-1);
  padding: 10px 45px 10px 20px;
  color: var(--tp-theme-1);
  font-size: 16px;
  font-weight: 500;
}
.tpsearchbar__form input::placeholder {
  font-size: 13px;
  color: #ACAFB7;
}
.tpsearchbar__search-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 25px;
  color: var(--tp-theme-1);
  font-size: 16px;
}

.search-body-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
}
.search-body-overlay.opened {
  opacity: 1;
  visibility: visible;
}

.tp-cart-toggle {
  font-size: 16px;
  line-height: 0;
}

.tp-cart-info-area.tp-sidebar-opened {
  transform: translateX(0);
}

.tp-sidebar-close {
  color: var(--tp-common-white);
  position: absolute;
  left: -35px;
  font-size: 21px;
  background: #171151;
  width: 35px;
  height: 35px;
}

.tpcartinfo {
  background-color: var(--tp-common-white);
  text-align: start;
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  box-shadow: rgba(5, 13, 54, 0.05) 5px 15px 30px 0px;
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  z-index: 9999999;
  width: 380px;
  transform: translateX(100%);
}
@media (max-width: 767px) {
  .tpcartinfo {
    width: 280px;
  }
}
.tpcartinfo .tp-shop-sidebar-opened {
  transform: translateX(0);
}

.tpcart__close {
  color: var(--tp-heading-secondary);
  right: 30px;
  font-size: 18px;
  width: 35px;
  height: 35px;
  position: absolute;
  top: 8px;
  z-index: 2;
}
@media (max-width: 767px) {
  .tpcart__close {
    width: 30px;
    height: 30px;
  }
}


/* ============================================ 
    MODERN SEARCH SIDEBAR STYLES 
=============================================== */

.tpsearchbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* සම්පූර්ණ තිරයම වැසීමට */
    background: rgba(255, 255, 255, 0.98); /* සැහැල්ලු සුදු පැහැති පසුබිමක් */
    backdrop-filter: blur(10px); /* පසුබිම මඳක් බොඳ කිරීමට */
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Sidebar එක විවෘත වූ විට */
.tpsearchbar.tp-searchbar-opened {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Close Button - දකුණු පස ඉහළ කෙළවරේ */
.tpsearchbar__close {
    position: absolute;
    top: 40px;
    right: 40px;
    font-size: 30px;
    color: #333;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tpsearchbar__close:hover {
    background: #f0f0f0;
    transform: rotate(90deg);
    color: var(--primary-green);
}

/* Title Style */
.tpsearchbar__title {
    font-size: 36px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 30px;
    font-family: 'Quicksand', sans-serif;
}

/* Search Form Design */
.tpsearchbar__form {
    position: relative;
    width: 100%;
    max-width: 600px; /* මැදට එන පරිදි */
    margin: 0 auto;
}

.tpsearchbar__form input {
    width: 100%;
    height: 70px;
    background: transparent;
    border: none;
    border-bottom: 3px solid #eee; /* යටින් ඉරක් පමණක් පෙනෙන පරිදි */
    padding: 10px 60px 10px 0;
    font-size: 28px;
    font-weight: 600;
    color: #333;
    transition: all 0.3s ease;
}

.tpsearchbar__form input:focus {
    outline: none;
    border-bottom-color: var(--primary-green); /* Focus කළ විට කොළ පැහැ වේ */
}

.tpsearchbar__form input::placeholder {
    color: #ccc;
    font-size: 24px;
}

/* Search Button Inside Input */
.tpsearchbar__search-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tpsearchbar__search-btn:hover {
    color: var(--primary-green);
    transform: translateY(-50%) scale(1.2);
}

/* Overlay */
.search-body-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.search-body-overlay.opened {
    opacity: 1;
    visibility: visible;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .tpsearchbar__title {
        font-size: 24px;
    }
    
    .tpsearchbar__form input {
        height: 50px;
        font-size: 20px;
    }
    
    .tpsearchbar__form input::placeholder {
        font-size: 18px;
    }
    
    .tpsearchbar__close {
        top: 20px;
        right: 20px;
        font-size: 24px;
    }

    /* Mobile එකේදී form එක තව පළල් කිරීමට */
    .col-6 {
        width: 90% !important;
        flex: 0 0 90% !important;
        max-width: 90% !important;
    }
}

.cartbody-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
}
.cartbody-overlay.opened {
  opacity: 1;
  visibility: visible;
}

.tpcart {
  float: none;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  flex-direction: column;
}
.tpcart__product {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  padding: 0 30px;
}
.tpcart__title {
  padding: 16px 30px;
  background-color: var(--tp-grey-1);
  font-weight: 700;
  font-size: 14px;
  color: var(--tp-heading-primary);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.tpcart ul li {
  list-style: none;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--tp-border-1);
}
.tpcart__item {
  display: flex;
  align-items: center;
}
.tpcart__img {
  margin-right: 20px;
  position: relative;
}
@media (max-width: 767px) {
  .tpcart__img {
    margin-right: 4px;
  }
}
.tpcart__img img {
  width: 70px;
  border-radius: 10px;
}
.tpcart__del {
  position: absolute;
  color: var(--tp-heading-secondary);
  left: 0;
  top: 0;
}
.tpcart__content-title {
  font-size: 14px;
  font-weight: 400;
  color: var(--tp-heading-primary);
}
.tpcart__content-title a:hover {
  color: var(--tp-heading-secondary);
}
.tpcart__cart-price {
  font-weight: 600;
  font-size: 12px;
  color: var(--tp-heading-primary);
}
.tpcart__cart-price .new-price {
  color: var(--tp-heading-secondary);
}
.tpcart__total-price {
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--tp-heading-primary);
  margin-bottom: 25px;
  padding-top: 25px;
  border-top: 1px solid var(--tp-border-1);
}
.tpcart__total-price .heilight-price {
  font-size: 18px;
  font-weight: 700;
}
.tpcart__free-shipping {
  padding: 13px 30px;
  background-color: var(--tp-theme-5);
}
@media (max-width: 767px) {
  .tpcart__free-shipping {
    padding: 13px 15px;
  }
}
.tpcart__free-shipping span {
  color: var(--tp-common-white);
  font-size: 14px;
}
.tpcart__free-shipping span b {
  font-weight: 600;
  text-transform: uppercase;
}
.tpcart__checkout {
  margin-bottom: 30px;
}

.tpmobile-menu {
  padding: 20px 0;
  border-bottom: 1px solid var(--tp-border-1);
}

.tp-menu-toggle {
  font-size: 28px;
}

.tp-sidebar-close {
  color: #fff;
  position: absolute;
  left: -35px;
  font-size: 21px;
  background: #171151;
  width: 35px;
  height: 35px;
}

.body-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
}
.body-overlay.opened {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-icon {
  font-size: 24px;
  color: var(--tp-heading-primary);
}

.tpsideinfo {
  background: #2D2A6E;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  padding: 30px;
  width: 350px;
  transform: translateX(-120%);
  transition: 0.3s;
  z-index: 999;
  overflow-y: scroll;
}
@media (max-width: 767px) {
  .tpsideinfo {
    width: 275px;
  }
}
.tpsideinfo.tp-sidebar-opened {
  transform: translateX(0);
}
.tpsideinfo__close {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: var(--tp-common-white);
  width: 100%;
  display: block;
  min-height: 45px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
  background-color: var(--tp-heading-secondary);
}
.tpsideinfo__search-title {
  color: var(--tp-common-white);
  font-size: 13px;
  text-transform: uppercase;
}
.tpsideinfo__search form {
  position: relative;
  padding-top: 13px;
  padding-bottom: 20px;
}
.tpsideinfo__search form input {
  width: 100%;
  height: 45px;
  border-radius: 3px;
  font-size: 14px;
  border: 1px solid transparent;
  background: #F3F3F9;
  padding: 10px 20px;
  padding-right: 45px;
}
.tpsideinfo__search form input::placeholder {
  color: var(--tp-border-2);
}
.tpsideinfo__search button {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.tpsideinfo__nabtab .nav-link.active {
  border: 0;
  padding: 10px 15px;
  position: relative;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 500;
  border-radius: 3px;
  background-color: var(--tp-heading-secondary);
}
.tpsideinfo__nabtab .nav-link {
  border: 0;
  padding: 10px 15px;
  position: relative;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 500;
  border-radius: 3px;
  color: var(--tp-theme-1);
  background-color: var(--tp-common-white);
}
.tpsideinfo__nabtab button {
  width: 100%;
}
.tpsideinfo__nabtab .nav li {
  display: inline-block;
  width: 49%;
  margin-right: 4px;
}
.tpsideinfo__nabtab .nav li:last-child {
  margin-right: 0;
}
.tpsideinfo__nabtab .mega-menu-title {
  color: var(--tp-heading-secondary);
  font-size: 13px;
  text-transform: uppercase;
}
.tpsideinfo__nabtab .mean-container .mean-nav ul {
  background-image: none !important;
}
.tpsideinfo__nabtab .home-menu-style li {
  width: 50% !important;
}
.tpsideinfo__nabtab .home-menu-style li a {
  font-size: 13px !important;
  font-weight: 400 !important;
}

.tpsideinfo__account-link a, .tpsideinfo__wishlist-link a {
  font-size: 16px;
  color: var(--tp-common-white);
}
.tpsideinfo__account-link a:hover, .tpsideinfo__wishlist-link a:hover {
  color: var(--tp-heading-secondary);
}
.tpsideinfo__account-link a:hover i, .tpsideinfo__wishlist-link a:hover i {
  color: var(--tp-heading-secondary);
}
.tpsideinfo__account-link a i, .tpsideinfo__wishlist-link a i {
  font-size: 18px;
  color: var(--tp-common-white);
  line-height: 35px;
  text-align: center;
  margin-right: 10px;
}


.tpsidebar-categories ul li a {
  color: var(--tp-common-white);
}

.secondary-header,
.secondary-mobile-menu {
  border-bottom: none;
}

.header-three__search form {
  position: relative;
}
.header-three__search form input {
  height: 40px;
  width: 260px;
  border-radius: 30px;
  border: none;
  background-color: #F4F4F4;
  display: block;
  padding: 5px 20px 5px 45px;
}
.header-three__search form input::-webkit-input-placeholder {
  font-weight: 400;
  font-size: 13px;
  color: #79819C;
}
.header-three__search form input:-moz-placeholder {
  font-weight: 400;
  font-size: 13px;
  color: #79819C;
}
.header-three__search form input::-moz-placeholder {
  font-weight: 400;
  font-size: 13px;
  color: #79819C;
}
.header-three__search form input:-ms-input-placeholder {
  font-weight: 400;
  font-size: 13px;
  color: #79819C;
}
.header-three__search form i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
  margin-right: 8px;
  font-size: 16px;
  color: var(--tp-common-black);
}

.header-logo-border {
  padding: 30px 0;
  border-bottom: 1px solid var(--tp-border-1);
}

.mainmenu-three ul li a {
  padding: 22px 12px;
}

.header-sticky {
  position: fixed;
  left: 0;
  margin: auto;
  top: 0;
  width: 100%;
  box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
  z-index: 200;
  animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
  background: var(--tp-common-white);
}



/*----------------------------------------*/
/*  05. TEAM CSS
/*----------------------------------------*/
/*----------------------------------------*/
/*  06. SERVICES CSS
/*----------------------------------------*/
/*----------------------------------------*/
/*  07. PORTFOLIO CSS
/*----------------------------------------*/
/*----------------------------------------*/
/*  08. BLOG CSS
/*----------------------------------------*/
.tpblog__item:hover .tpblog__thumb img {
  transform: scale(1.05);
}
.tpblog__thumb {
  border-radius: 10px 10px 0 0;
}
.tpblog__thumb img {
  width: 100%;
  -webkit-transition: all 1s ease-out 0s;
  -moz-transition: all 1s ease-out 0s;
  -ms-transition: all 1s ease-out 0s;
  -o-transition: all 1s ease-out 0s;
  transition: all 1s ease-out 0s;
}
.tpblog__entry-wap span {
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  margin-right: 8px;
  padding-right: 10px;
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 576px) and (max-width: 767px) {
  .tpblog__entry-wap span {
    margin-right: 4px;
    padding-right: 7px;
  }
}
.tpblog__entry-wap span:last-child {
  margin-right: 0;
  padding-right: 0;
}
.tpblog__entry-wap span::after {
  position: absolute;
  content: "";
  height: 3px;
  width: 3px;
  border-radius: 50%;
  background-color: #CFD4DE;
  top: 50%;
  transform: translateY(-50%);
  right: 0px;
}
.tpblog__entry-wap span:last-child::after {
  display: none;
}
.tpblog__entry-wap span a:hover {
  color: var(--tp-heading-secondary);
}
.tpblog__entry-wap .cat-links {
  color: var(--tp-heading-secondary);
}
.tpblog__wrapper {
  border-radius: 0 0 10px 10px;
  background-color: var(--tp-common-white);
  padding: 20px 28px 20px 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 767px) {
  .tpblog__wrapper {
    padding: 20px 20px 20px 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tpblog__wrapper {
    padding: 20px 15px 20px 15px;
  }
}
.tpblog__wrapper p {
  margin-bottom: 25px;
  font-size: 16px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tpblog__wrapper p {
    margin-bottom: 15px;
  }
}
.tpblog__title {
  font-weight: 700;
  font-size: 18px;
  color: var(--tp-theme-1);
  margin-bottom: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  word-break: break-word;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .tpblog__title {
    font-size: 16px;
  }
}
.tpblog__title a:hover {
  color: var(--tp-heading-secondary);
}
.tpblog__details {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--tp-heading-secondary);
}
.tpblog__details a {
  display: flex;
  align-items: center;
}
.tpblog__details a:hover i {
  opacity: 1;
  visibility: visible;
  animation: shakenext 1s ease infinite;
}
.tpblog__details a i {
  display: inline-block;
  font-size: 16px;
  margin-left: 3px;
  opacity: 0;
  visibility: hidden;
}
.tpblog__item-2 .tpblog__thumb {
  border-radius: 10px;
}

.tpblog__single-title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.22;
  color: var(--tp-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tpblog__single-title {
    font-size: 18px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpblog__single-title {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .tpblog__single-title {
    font-size: 16px;
    margin-bottom: 8px;
  }
}
.tpblog__single-img {
  position: relative;
}
.tpblog__single-img::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 10px;
  background: rgba(10, 12, 31, 0.5);
}
.tpblog__single-img img {
  width: 100%;
  border-radius: 10px;
}
.tpblog__single-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
}
.tpblog__single-text .tpblog__entry-wap span {
  color: var(--tp-common-white);
}
.tpblog__single-text > a {
  font-family: var(--tp-ff-jost);
  font-weight: 600;
  font-size: 12px;
  line-height: 17px;
  align-items: center;
  text-transform: uppercase;
  color: var(--tp-common-white);
}
.tpblog__left-item {
  padding-right: 50px;
  border-right: 1px dashed #E6ECF0;
  margin-right: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpblog__left-item {
    padding-right: 30px;
    margin-right: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tpblog__left-item {
    padding-right: 0;
    border-right: none;
    margin-right: 0;
  }
}
.tpblog__left-item .tpblog__title {
  font-size: 24px;
}
.tpblog__right-item {
  margin-left: -60px;
}
@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tpblog__right-item {
    margin-left: 0;
  }
}

.sidebar__search input {
  background: #F7F7F9;
  height: 50px;
  width: 100%;
  border: 1px solid #EBEFF4;
  border-radius: 3px;
  padding: 5px 40px 5px 20px;
}
.sidebar__search input::-webkit-input-placeholder {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #79819C;
}
.sidebar__search input:-moz-placeholder {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #79819C;
}
.sidebar__search input::-moz-placeholder {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #79819C;
}
.sidebar__search input:-ms-input-placeholder {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #79819C;
}
.sidebar__search button {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.sidebar__widget {
  padding-bottom: 40px;
  border-bottom: 1px dashed #E6ECF0;
}
.sidebar__widget:last-child {
  border-bottom: none;
}
.sidebar__widget-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--tp-heading-primary);
}
.sidebar__widget-content ul li {
  list-style: none;
  margin-bottom: 8px;
}
.sidebar__widget-content ul li a {
  font-family: var(--tp-ff-jost);
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.22;
  color: var(--tp-text-body);
}
.sidebar__widget-content ul li a:hover {
  color: var(--tp-heading-secondary);
}

.rc__post-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.03em;
  color: var(--tp-heading-primary);
  margin-bottom: 4px;
}
.rc__post-thumb {
  flex: 0 0 auto;
  margin-right: 10px;
}
.rc__post-thumb img {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  object-fit: cover;
}
.rc__meta {
  font-family: var(--tp-ff-jost);
  font-weight: 500;
  font-size: 12px;
  line-height: 17px;
  text-transform: uppercase;
  color: var(--tp-text-3);
}

.tagcloud a {
  font-family: var(--tp-ff-jost);
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--tp-text-body);
  background: var(--tp-border-3);
  padding: 8px 20px;
  display: inline-block;
  border-radius: 30px;
  margin-bottom: 5px;
}
.tagcloud a:hover {
  background-color: var(--tp-heading-secondary);
  color: var(--tp-common-white);
}

.tp-blog-details__thumb img {
  max-width: 100%;
}
.tp-blog-details__img-item img {
  max-width: 100%;
  border-radius: 10px;
}
.tp-blog-details__wrapper {
  padding: 35px 70px 30px 275px;
  margin-top: -120px;
  background-color: var(--tp-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tp-blog-details__wrapper {
    padding: 35px 70px 30px 130px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-blog-details__wrapper {
    padding: 35px 30px 30px 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-blog-details__wrapper {
    padding: 35px 15px 30px 15px;
    margin-top: 0;
  }
}
@media (max-width: 767px) {
  .tp-blog-details__wrapper {
    padding: 35px 15px 30px 15px;
    margin-top: 0;
  }
}
.tp-blog-details__title {
  font-weight: 700;
  font-size: 40px;
  line-height: 1.11;
  color: var(--tp-heading-primary);
}
@media (max-width: 767px) {
  .tp-blog-details__title {
    font-size: 18px;
  }
}
.tp-blog-details__content p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--tp-text-body);
  margin-bottom: 25px;
}
@media (max-width: 767px) {
  .tp-blog-details__content p {
    font-size: 16px;
  }
}
.tp-blog-details__quation {
  font-family: var(--tp-ff-jost);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  color: var(--tp-heading-primary);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-blog-details__quation {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .tp-blog-details__quation {
    font-size: 17px;
  }
}
@media (max-width: 767px) {
  .tp-blog-details__quation br {
    display: none;
  }
}
.tp-blog-details__post-item span {
  font-family: var(--tp-ff-jost);
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  line-height: 17px;
  color: var(--tp-text-3);
  display: block;
  margin-bottom: 10px;
}
.tp-blog-details__post-item span i {
  font-size: 12px;
}
.tp-blog-details__post-item a {
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: -0.03em;
  color: var(--tp-heading-primary);
  display: block;
}
.tp-blog-details__post-item a:hover {
  color: var(--tp-heading-secondary);
}
.tp-blog-details__author {
  background-color: var(--tp-grey-8);
  padding: 40px;
  border: 1px solid #EBEBF3;
  border-radius: 10px;
}
@media (max-width: 767px) {
  .tp-blog-details__author {
    flex-wrap: wrap;
    padding: 40px 15px 40px 15px;
  }
}
.tp-blog-details__author-img {
  flex: 0 0 auto;
}
@media (max-width: 767px) {
  .tp-blog-details__author-img {
    margin-right: 0;
    margin-bottom: 20px;
  }
}
.tp-blog-details__author-img img {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  object-fit: cover;
}
.tp-blog-details__author-title {
  font-family: var(--tp-ff-jost);
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 17px;
  text-transform: uppercase;
  color: var(--tp-heading-primary);
}
.tp-blog-details__author-text p {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
  color: #4D5574;
  margin-bottom: 20px;
}
.tp-blog-details__author-text .author-btn {
  font-family: var(--tp-ff-jost);
  font-weight: 600;
  font-size: 12px;
  line-height: 17px;
  text-transform: uppercase;
  color: var(--tp-common-white);
  background-color: var(--tp-heading-primary);
  padding: 11px 33px;
  border-radius: 30px;
}
.tp-blog-details__author-text .author-btn:hover {
  background-color: var(--tp-heading-secondary);
}

.postbox__tag-list span, .postbox__social-tag span {
  font-family: var(--tp-ff-jost);
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 17px;
  text-transform: uppercase;
  color: var(--tp-heading-primary);
  display: inline-block;
  margin-right: 8px;
}
.postbox__social-tag {
  text-align: end;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .postbox__social-tag {
    text-align: start;
  }
}
.postbox__social-tag a {
  margin-left: 5px;
}
.postbox__tag-border {
  padding-top: 15px;
  padding-bottom: 25px;
  border-bottom: 1px solid #E6ECF0;
}
.postbox__comment ul li {
  list-style: none;
}
.postbox__comment-title {
  font-weight: 700;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--tp-heading-primary);
}
.postbox__comment-avater img {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  object-fit: cover;
}
.postbox__comment-box {
  border-bottom: 1px dashed #E6ECF0;
  margin-bottom: 30px;
  padding-bottom: 30px;
}
@media (max-width: 767px) {
  .postbox__comment-box {
    padding-left: 0;
  }
}
.postbox__comment-name h5 {
  font-family: var(--tp-ff-jost);
  font-weight: 600;
  font-size: 12px;
  line-height: 17px;
  text-transform: uppercase;
  color: var(--tp-heading-primary);
}
.postbox__comment-name p {
  font-family: var(--tp-ff-jost);
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
  color: var(--tp-text-body);
}
.postbox__comment-text p {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
  color: var(--tp-text-body);
}
@media (max-width: 767px) {
  .postbox__comment-text p br {
    display: none;
  }
}
.postbox__comment-reply a {
  font-family: var(--tp-ff-jost);
  font-weight: 500;
  font-size: 12px;
  line-height: 17px;
  text-transform: uppercase;
  color: var(--tp-heading-secondary);
}
.postbox__form p {
  font-family: var(--tp-ff-jost);
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: var(--tp-text-body);
  margin-bottom: 25px;
}
.postbox__check-box label {
  font-family: var(--tp-ff-jost);
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: var(--tp-text-body) !important;
}

.blog-left-sidebar .tpblog__left-item {
  padding-left: 50px;
  border-left: 1px dashed #E6ECF0;
  margin-left: 80px;
  padding-right: 0px;
  border-right: none;
  margin-right: 0px;
}
@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-left-sidebar .tpblog__left-item {
    padding-left: 0px;
    border-left: none;
    margin-left: 0px;
  }
}
.blog-left-sidebar.tpblog__right-item {
  margin-left: 0;
  margin-right: -60px;
}
@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-left-sidebar.tpblog__right-item {
    margin-right: 0;
  }
}

/*----------------------------------------*/
/*  09. EFFECT CSS
/*----------------------------------------*/
.tpcolor__purple a i {
  background-color: var(--tp-grey-3);
}
.tpcolor__yellow a i {
  background-color: var(--tp-grey-4);
}
.tpcolor__greenish a i {
  background-color: var(--tp-grey-5);
}
.tpcolor__oasis a i, .tpcolor__oasis button i {
  background-color: var(--tp-grey-6);
}

.tperror__thumb > img {
  animation: left-right 3s infinite linear;
  max-width: 100%;
}
.tperror__shape {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-60%);
  z-index: -1;
}
.tperror__shape img {
  max-width: 100%;
}
.tperror__title {
  font-family: "Quicksand";
  font-weight: 700;
  font-size: 48px;
  line-height: 40px;
  letter-spacing: -0.03em;
  color: var(--tp-heading-primary);
}
@media (max-width: 767px) {
  .tperror__title {
    font-size: 22px;
  }
}
.tperror__content p {
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
  color: var(--tp-text-body);
  margin-bottom: 45px;
}
.tperror__btn a {
  font-weight: 600;
  font-size: 13px;
  line-height: 19px;
  text-align: center;
  text-transform: uppercase;
  color: var(--tp-common-white);
  background-color: var(--tp-heading-secondary);
  display: inline-block;
  padding: 16px 35px;
  border-radius: 30px;
}
.tperror__btn a:hover {
  background-color: #859A00;
}

.tpvideo__bg img {
  border-radius: 10px;
  max-width: 100%;
}
.tpvideo__video-btn {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  transform: translateY(-50%);
}
.tpvideo__video-btn i {
  height: 60px;
  width: 60px;
  line-height: 55px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.3);
  display: inline-block;
  border-radius: 50%;
  border: 1px solid var(--tp-common-white);
}
@media (max-width: 767px) {
  .tpvideo__video-btn i {
    height: 40px;
    width: 40px;
    line-height: 37px;
  }
}
.tpvideo__icon i {
  font-family: var(--tp-ff-jost);
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 35px;
  text-transform: uppercase;
  color: #96AE00;
  display: flex;
  align-items: baseline;
}
.tpvideo__icon i img {
  max-width: 100%;
  flex: 0 0 auto;
  margin-right: 5px;
}
.tpvideo__title {
  font-weight: 700;
  font-size: 20px;
  line-height: 25px;
  color: var(--tp-heading-primary);
}
.tpvideo__content p {
  font-family: var(--tp-ff-jost);
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
  color: var(--tp-text-body);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpvideo__content p br {
    display: none;
  }
}

/*----------------------------------------*/
/*  10. CATEGORY CSS
/*----------------------------------------*/
.category__item {
  text-align: center;
  background-color: var(--tp-common-white);
  border-radius: 10px;
  padding: 30px 10px 25px 10px;
}
.category__item:hover .category__thumb::after {
  opacity: 1;
  visibility: visible;
}
.category__item:hover .category__thumb::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  transform: scale3d(1.08, 1.08, 1.08);
}
.category__thumb {
  display: inline-block;
  border-radius: 50%;
  position: relative;
}
.category__thumb::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: linear-gradient(#ffffff 0 0), linear-gradient(#ffffff 0 0);
  background-position: center;
  background-size: 100% 1px, 1px 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  z-index: 11;
  pointer-events: none;
}
.category__thumb::before {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  background-color: rgba(0, 0, 0, 0.4);
  content: "";
  z-index: 2;
  right: 50%;
  bottom: 50%;
  opacity: 0;
  transition: all 240ms linear 0s;
  pointer-events: none;
}
.category__thumb img {
  height: 80px;
  width: 80px;
  border-radius: 50%;
}
.category__title {
  font-weight: 500;
  font-size: 15px;
  line-height: 1.1;
  color: var(--tp-heading-primary);
  margin-bottom: 0;
  font-family: "Jost", sans-serif;
}
.category__title a:hover {
  color: var(--tp-heading-secondary);
}
.category__count {
  font-weight: 400;
  font-size: 13px;
  color: var(--tp-text-body);
}

/*----------------------------------------*/
/*  11. PRODUCT CSS
/*----------------------------------------*/
.tpproduct {
  background-color: var(--tp-common-white);
  border-radius: 10px;
  border: 1px solid var(--tp-common-white);
}
.tpproduct:hover .tpproduct__shopping a {
  opacity: 1;
  visibility: visible;
  transform: translateY(-10px);
}
.tpproduct:hover .tpproduct__hover-text {
  border: 1px solid var(--tp-common-white);
  border-top: transparent;
  opacity: 1;
  visibility: visible;
  bottom: -130px;
  box-shadow: 0px 15px 30px rgba(61, 110, 168, 0.1);
  border-radius: 0 0 10px 10px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpproduct:hover .tpproduct__hover-text {
    bottom: -135px;
  }
}
.tpproduct:hover .tpproduct__thumb-img {
  opacity: 1;
  visibility: visible;
  transform: scale(1.09);
}
.tpproduct__thumb {
  padding: 20px 20px;
  overflow: hidden;
  border-radius: 10px;
}
.tpproduct__thumb-img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  -ms-transition: all 0.2s ease-out 0s;
  -o-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
}
.tpproduct__thumb img {
  width: 100%;
}
.tpproduct__content {
  background-color: var(--tp-grey-8);
  padding: 11px 22px 20px 18px;
  border-radius: 10px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpproduct__content {
    padding: 11px 13px 20px 13px;
  }
}
.tpproduct__content-weight {
  font-size: 13px;
  color: var(--tp-text-3);
  display: block;
}
.tpproduct__content-weight a {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.tpproduct__content-weight a:hover {
  text-decoration: underline;
}
.tpproduct__title {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 16px;
  color: var(--tp-heading-primary);
  margin-bottom: 5px;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  word-break: break-word;
  overflow: hidden;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .tpproduct__title {
    font-size: 15px;
  }
}
.tpproduct__title a:hover {
  color: var(--tp-heading-secondary);
}
.tpproduct__rating a i {
  margin-right: -5px;
  font-size: 14px;
  color: var(--tp-text-1);
}
.tpproduct__price span {
  color: var(--tp-theme-2);
  font-weight: 500;
  font-size: 18px;
}
.tpproduct__price del {
  font-weight: 400;
  font-size: 14px;
}
.tpproduct__info {
  position: absolute;
  top: 17px;
  left: 17px;
}
.tpproduct__shopping {
  position: absolute;
  top: 17px;
  right: 17px;
}
.tpproduct__shopping a {
  opacity: 0;
  visibility: hidden;
}
.tpproduct__shopping a:first-child {
  transition-delay: 100ms;
}
.tpproduct__shopping a:nth-child(2) {
  transition-delay: 150ms;
}
.tpproduct__shopping a:last-child {
  transition-delay: 200ms;
}
.tpproduct__shopping a > i {
  font-size: 12px;
  height: 32px;
  width: 32px;
  line-height: 30px;
  text-align: center;
  background: var(--tp-common-white);
  border: 1px solid var(--tp-border-1);
  border-radius: 50%;
  display: block;
  margin-bottom: 5px;
}
.tpproduct__shopping a > i:hover {
  background-color: var(--tp-heading-secondary);
  border: 1px solid var(--tp-heading-secondary);
  color: var(--tp-common-white);
}
.tpproduct__hover-text {
  background-color: var(--tp-grey-8);
  padding: 11px 21px 20px 19px;
  position: absolute;
  bottom: -125px;
  left: -1px;
  right: -1px;
  border: 1px solid var(--tp-common-white);
  border-top: transparent;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  -ms-transition: all 0.2s ease-out 0s;
  -o-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpproduct__hover-text {
    bottom: -120px;
    padding: 11px 15px 20px 15px;
  }
}
.tpproduct__descrip ul li {
  font-size: 13px;
  color: var(--tp-text-3);
  list-style: none;
  padding-left: 10px;
  position: relative;
}
.tpproduct__descrip ul li::before {
  position: absolute;
  content: "";
  height: 3px;
  width: 3px;
  background-color: var(--tp-grey-7);
  border-radius: 50%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.tpproduct__arrow:hover .tpprduct-arrow {
  opacity: 1;
  visibility: visible;
}
.tpproduct__all-item span {
  font-size: 16px;
  color: var(--tp-text-body);
}
.tpproduct__all-item span a {
  font-weight: 500;
  font-size: 16px;
  color: var(--tp-heading-secondary);
  display: inline-flex;
  align-items: center;
}
.tpproduct__all-item span a:hover i {
  animation: shakenext 1s ease infinite;
}
.tpproduct__all-item span a i {
  display: inline-block;
  font-size: 16px;
  margin-left: 5px;
}
.tpproduct__all-item {
  text-align: end;
  margin-bottom: 15px;
}
@media (max-width: 767px) {
  .tpproduct__all-item {
    text-align: start;
  }
}
.tpproduct__progress .progress {
  height: 7px;
  width: 100%;
}
.tpproduct__progress .progress-bar {
  color: #ECF0E8;
  background-color: var(--tp-heading-secondary);
}
.tpproduct__progress span {
  font-size: 14px;
  color: var(--tp-heading-primary);
  font-weight: 400;
}
.tpproduct__progress span b {
  font-weight: 500;
  color: var(--tp-heading-primary);
}
.tpproduct__all-item a {
  font-size: 15px;
  font-weight: 400;
  color: var(--tp-text-3);
}
.tpproduct__all-item a i {
  margin-left: -4px;
}
.tpproduct__all-item a:hover {
  color: var(--tp-heading-secondary);
}
@media (max-width: 767px) {
  .tpproduct__padding {
    padding-left: 0;
    padding-right: 0;
  }
}
.tpproduct__big-title {
  font-size: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpproduct__big-title {
    font-size: 18px;
  }
}
.tpproduct__big-price span {
  font-size: 24px;
}

.deals-label {
  font-size: 16px;
  color: var(--tp-theme-1);
}

.bage__discount {
  font-weight: 500;
  font-size: 12px;
  background-color: var(--tp-theme-3);
  border-radius: 2px;
  color: var(--tp-common-white);
  padding: 3px 9px;
}
.bage__hot {
  font-weight: 500;
  font-size: 12px;
  background-color: var(--tp-text-4);
  border-radius: 2px;
  color: var(--tp-theme-2);
  padding: 3px 9px;
}

.tpproduct__arrow:hover .swiper-container {
  padding-bottom: 150px;
  margin-bottom: -150px;
}

.tpprduct-arrow {
  position: absolute;
  top: 37%;
  left: -27px;
  z-index: 9;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
}
.tpprduct-arrow.tpproduct-btn__nxt {
  left: auto;
  right: -25px;
}
.tpprduct-arrow i {
  display: block;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  background-color: var(--tp-heading-secondary);
  opacity: 0.3;
  color: var(--tp-common-white);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.tpprduct-arrow i:hover {
  opacity: 1;
}
.tpprduct-arrow.tpproduct-btn__nxt4 {
  left: auto;
  right: -25px;
}

.whight-product .tpproduct {
  border: 1px solid #EBEFF4;
}
.whight-product .tpproduct__content {
  background-color: var(--tp-common-white);
}
.whight-product .tpproduct:hover .tpproduct__hover-text {
  border: 1px solid #EBEFF4;
  border-top: none;
  background-color: var(--tp-common-white);
  position: absolute;
  z-index: 11;
}

.tpprogress__hover .tpproduct__hover-text {
  bottom: -80px;
}
.tpprogress__hover:hover .tpproduct__hover-text {
  bottom: -90px;
}

.tp-navtab-style-2 {
  display: flex;
  justify-content: end;
}
@media (max-width: 767px) {
  .tp-navtab-style-2 {
    justify-content: start;
  }
}
.tp-navtab-style-2.tpnavtab__area nav .nav-link {
  color: var(--tp-text-body);
  font-weight: 400;
  font-size: 15px;
  margin-bottom: 0;
  background: 0 0;
  border: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 0 0px;
  margin-bottom: 8px;
  margin-left: 25px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-navtab-style-2.tpnavtab__area nav .nav-link {
    font-size: 14px;
    margin-left: 14px;
  }
}
@media (max-width: 767px) {
  .tp-navtab-style-2.tpnavtab__area nav .nav-link {
    font-size: 14px;
    margin-left: 0;
    margin-right: 14px;
  }
}
.tp-navtab-style-2 .nav-link.active {
  color: var(--tp-heading-secondary) !important;
}

.green-product-border .green-border {
  border: 1px solid var(--tp-heading-secondary);
}
.green-product-border .green-border:hover .tpproduct__hover-text {
  border: 1px solid var(--tp-heading-secondary);
  border-top: 0px;
}

.tplist__product {
  background-color: var(--tp-common-white);
  padding: 20px;
  border-radius: 10px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .tplist__product {
    flex-wrap: wrap;
  }
}
.tplist__product:hover .tplist__product-img-one {
  opacity: 0;
  visibility: hidden;
}
.tplist__product:hover .tplist__product-img-two {
  opacity: 1;
  visibility: visible;
  transform: scale(1.08);
}
.tplist__product-img {
  position: relative;
  flex: 0 0 auto;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  overflow: hidden;
}
.tplist__product-img .tplist__product-img-two {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
.tplist__content {
  margin-left: -230px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tplist__content {
    margin-left: 0;
  }
}
.tplist__content span {
  font-weight: 400;
  font-size: 13px;
  line-height: 19px;
  color: var(--tp-text-3);
}
.tplist__content-title {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  font-family: var(--tp-ff-jost);
}
.tplist__content-title a:hover {
  color: var(--tp-heading-secondary);
}
.tplist__content-info li {
  font-family: var(--tp-ff-jost);
  color: var(--tp-text-3);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  position: relative;
  padding-left: 16px;
  list-style: none;
}
.tplist__content-info li::before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background-color: var(--tp-text-3);
}
.tplist__rating a i {
  margin-right: -5px;
  font-size: 14px;
  color: var(--tp-text-1);
}
.tplist__instock {
  font-family: var(--tp-ff-jost);
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--tp-text-body);
  margin-bottom: 0;
}
.tplist__instock span {
  color: #00B853;
}
.tplist__count {
  font-family: var(--tp-ff-jost);
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  color: #EA0D42;
}
.tplist__shopping a {
  font-family: var(--tp-ff-jost);
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 17px;
  color: var(--tp-text-3);
  text-transform: uppercase;
  margin-right: 20px;
}
.tplist__shopping a i {
  font-size: 14px;
  margin-right: 5px;
}
.tplist__price {
  position: relative;
  padding-left: 30px;
  flex: 0 0 auto;
}
@media (max-width: 767px) {
  .tplist__price {
    padding-left: 0;
    margin-top: 30px;
  }
}
.tplist__price::before {
  position: absolute;
  content: "";
  left: 0;
  height: 200px;
  width: 1px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #EBEFF4;
}
@media (max-width: 767px) {
  .tplist__price::before {
    display: none;
  }
}
.tplist__price .tp-btn-2 {
  padding: 3px 58px;
}

.product__table-count .product__details-count {
  display: flex;
}
.product__table-title a {
  color: var(--tp-heading-primary);
  font-size: 16px;
}
.product__table table td {
  text-align: center;
  vertical-align: inherit;
  padding: 15px 15px 15px 15px;
  width: auto;
  text-align: left;
  border: 1px solid var(--tp-border-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .product__table table td {
    width: 200%;
  }
}

/*----------------------------------------*/
/*  12. PRODUCT-DETAILS CSS
/*----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tpdetails__area {
    margin-right: 0;
  }
}
.tpdetails__product {
  background-color: var(--tp-common-white);
  padding: 35px 40px 45px 40px;
  border-radius: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .tpdetails__product {
    padding: 20px 20px 16px 20px;
  }
}
.tpdetails__title-box {
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid #E6ECF0;
}
.tpdetails__brand li {
  list-style: none;
  display: inline-block;
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 13px;
  line-height: 19px;
  color: #455770;
  padding-right: 20px;
  position: relative;
  margin-right: 15px;
}
.tpdetails__brand li:last-child {
  padding-right: 0;
  margin-right: 0;
}
.tpdetails__brand li:last-child::before {
  display: none;
}
.tpdetails__brand li::before {
  position: absolute;
  content: "";
  right: 0;
  height: 12px;
  width: 1px;
  background-color: #E6ECF0;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 767px) {
  .tpdetails__brand li::before {
    display: none;
  }
}
.tpdetails__brand li a {
  display: inline-block;
  font-weight: 500;
  color: var(--tp-heading-secondary);
}
.tpdetails__brand li i {
  margin-right: -5px;
  font-size: 14px;
  color: var(--tp-text-1);
}
.tpdetails__brand li span {
  font-weight: 500;
  color: var(--tp-heading-secondary);
  display: inline-block;
}
.tpdetails__brand li b {
  font-weight: 500;
  text-transform: uppercase;
  color: var(--tp-text-3);
  margin-left: 5px;
}
.tpdetails__title {
  font-family: var(--tp-ff-jost);
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 35px;
  color: var(--tp-heading-primary);
}

.tpproduct-details__thumb-img img {
  max-width: 100%;
}
@media (max-width: 767px) {
  .tpproduct-details__nab {
    margin-bottom: 30px;
  }
}
.tpproduct-details__nab .tab-pane {
  position: relative;
}
.tpproduct-details__nab .nav-tabs {
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0;
}
.tpproduct-details__nab .nav-tabs .nav-link {
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0 5px;
  border: 1px solid #E6ECF0;
  border-radius: 5px;
}
.tpproduct-details__nab .nav-tabs .nav-link.active {
  border-color: var(--tp-heading-secondary);
}
.tpproduct-details__nab .nav-tabs .nav-link img {
  height: 60px;
  width: 60px;
  object-fit: cover;
}

.product__details-price-box {
  padding-bottom: 25px;
  border-bottom: 1px solid #E6ECF0;
  margin-bottom: 30px;
}
.product__details-price {
  font-family: var(--tp-ff-jost);
  font-weight: 500;
  font-size: 24px;
  line-height: 35px;
  color: #EA0D42;
}
.product__details-info-list li {
  font-family: var(--tp-ff-jost);
  list-style: none;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--tp-text-body);
  position: relative;
  padding-left: 18px;
}
.product__details-info-list li::after {
  position: absolute;
  content: "";
  height: 5px;
  width: 5px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--tp-text-body);
  border-radius: 50%;
}
.product__details-cart {
  padding-bottom: 20px;
  border-bottom: 1px solid #E6ECF0;
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .product__details-quantity {
    flex-wrap: wrap;
  }
}
.product__details-quantity b {
  font-family: var(--tp-ff-jost);
  font-weight: 500;
  font-size: 12px;
  line-height: 17px;
  text-transform: uppercase;
  color: #2D2A6E;
  flex: 0 0 auto;
  margin-right: 8px;
}
.product__details-count {
  flex: 0 0 auto;
  background-color: #F3F3F9;
  border-radius: 30px;
  display: inline-block;
  border: 1px solid #EBEFF4;
  padding: 10px 29px;
  color: var(--tp-text-body);
  cursor: pointer;
}
.product__details-count input {
  background-color: #F3F3F9;
  border: none;
  width: 25px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--tp-text-body);
}
.product__details-btn {
  flex: 0 0 auto;
}
@media (max-width: 767px) {
  .product__details-btn {
    margin-top: 18px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .product__details-btn {
    margin-top: 0px;
  }
}
.product__details-btn a {
  font-family: var(--tp-ff-jost);
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  text-transform: uppercase;
  color: var(--tp-common-white);
  background-color: var(--tp-heading-secondary);
  padding: 13px 97px;
  border-radius: 30px;
  display: inline-block;
}
.product__details-btn a:hover {
  background-color: #859A00;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .product__details-btn a {
    padding: 13px 30px;
  }
}
@media (max-width: 767px) {
  .product__details-btn a {
    padding: 13px 30px;
  }
}
.product__details-check {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.product__details-check li {
  list-style: none;
  font-family: var(--tp-ff-jost);
  font-weight: 500;
  font-size: 12px;
  line-height: 17px;
  text-transform: uppercase;
  color: var(--tp-heading-primary);
  margin-right: 25px;
  margin-bottom: 5px;
}
.product__details-check li:last-child {
  margin-right: 0;
}
.product__details-stock li {
  list-style: none;
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: var(--tp-text-body);
  margin-bottom: 5px;
}
.product__details-stock li i {
  color: #00B853;
  font-style: normal;
}
.product__details-payment {
  background-color: var(--tp-grey-8);
  padding: 20px;
  border-radius: 5px;
}
.product__details-payment img {
  max-width: 100%;
}
.product__details-payment span {
  display: block;
  margin-top: 5px;
}
.product__color-title {
  font-family: var(--tp-ff-jost);
  font-weight: 500;
  font-size: 12px;
  line-height: 17px;
  text-transform: uppercase;
  color: #2D2A6E;
}
.product__color-switch .form-check-input:checked {
  background-color: var(--tp-common-black);
  border-color: var(--tp-border-1);
}
.product__color-switch .form-check-input:checked:focus {
  outline: 0;
  border: none;
}
.product__sticky {
  position: sticky;
  top: 100px;
}

.tpdescription__box {
  background-color: var(--tp-common-white);
  padding: 20px 40px 16px 40px;
  border-radius: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .tpdescription__box {
    padding: 20px 20px 16px 20px;
  }
}
.tpdescription__content p {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: var(--tp-text-body);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tpdescription__product-wrapper {
    flex-wrap: wrap;
  }
}
.tpdescription__product-title {
  font-family: var(--tp-ff-jost);
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  line-height: 19px;
  text-transform: uppercase;
  color: var(--tp-heading-primary);
}
.tpdescription__product-info li {
  list-style: none;
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: var(--tp-text-body);
}
.tpdescription__product-info p {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: var(--tp-text-body);
}
.tpdescription__product-thumb img {
  border-radius: 5px;
  max-width: 100%;
}
.tpdescription__video p {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: var(--tp-text-body);
}
.tpdescription__video-wrapper img {
  border-radius: 5px;
}
.tpdescription__box-center {
  border-bottom: 1px solid #E6ECF0;
  margin-bottom: 30px;
}
.tpdescription__box-center .nav-tabs {
  border: none;
  outline: 0;
}
.tpdescription__box-center .nav-tabs .nav-link {
  border: none;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #79819C;
  padding: 0 0 14px 0;
  margin: 0 22px;
}
@media (max-width: 767px) {
  .tpdescription__box-center .nav-tabs .nav-link {
    margin: 0 8px;
    font-size: 13px;
  }
}
.tpdescription__box-center .nav-tabs .nav-link.active {
  color: var(--tp-heading-secondary);
  border-bottom: 2px solid var(--tp-heading-secondary);
}

.tpsidebar {
  margin-left: -60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tpsidebar {
    margin-left: 0;
  }
}
.tpsidebar__warning {
  border: 1px solid #E8C3C3;
  border-radius: 10px;
  padding: 25px 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpsidebar__warning {
    padding: 25px 15px;
  }
}
.tpsidebar__warning ul li {
  list-style: none;
  padding-bottom: 30px;
  margin-bottom: 26px;
  border-bottom: 1px dashed #E8C3C3;
}
.tpsidebar__warning ul li:last-child {
  padding-bottom: 0;
  border: none;
  margin-bottom: 0;
}
.tpsidebar__warning-item {
  text-align: center;
}
.tpsidebar__warning-text p {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #B45353;
  margin-bottom: 0px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpsidebar__warning-text p br {
    display: none;
  }
}
.tpsidebar__warning-icon i {
  color: #B45353;
  font-size: 20px;
}
.tpsidebar__banner img {
  max-width: 100%;
}
.tpsidebar__title {
  font-weight: 700;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: -0.03em;
  color: var(--tp-heading-primary);
}
.tpsidebar__product {
  background: var(--tp-common-white);
  border-radius: 10px;
  padding: 35px 30px 25px 30px;
}
.tpsidebar__product-category {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 13px;
  line-height: 19px;
  color: #79819C;
}
.tpsidebar__product-title {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--tp-heading-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  word-break: break-word;
}
.tpsidebar__product-item {
  border-bottom: 1px dashed #E6ECF0;
  margin-bottom: 15px;
  padding-bottom: 12px;
}
.tpsidebar__product-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border: none;
}
.tpsidebar__product-thumb img {
  max-width: 100%;
}
.tpsidebar__info {
  position: absolute;
  top: 0;
  left: 0;
}

.tpreview__wrapper-title {
  font-size: 24px;
  color: var(--tp-heading-primary);
  margin-bottom: 20px;
  font-weight: 600;
}
.tpreview__comment {
  display: flex;
  margin-bottom: 20px;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--tp-border-1);
}
.tpreview__comment-img {
  flex: 0 0 auto;
}
.tpreview__comment-text {
  flex: 0 0 auto;
  border: 1px solid var(--tp-border-1);
  border-radius: 10px;
  padding: 10px;
}
.tpreview__comment-text .date {
  color: #767676;
  font-size: 14px;
  font-weight: 400;
  display: inline-block;
}
.tpreview__comment-author {
  font-weight: 600;
  color: var(--tp-heading-primary);
  font-size: 13px;
  text-transform: uppercase;
  flex: 0 0 auto;
  margin-right: 10px;
}
.tpreview__comment-star {
  flex: 0 0 auto;
}
.tpreview__comment-star i {
  font-size: 14px;
  color: var(--tp-text-1);
  margin: 0 0 0 -5px;
}
.tpreview__form-title {
  color: var(--tp-heading-primary);
  font-weight: 600;
  font-size: 20px;
}
.tpreview__input input {
  height: 60px;
  width: 100%;
  border: 1px solid var(--tp-border-1);
  border-radius: 30px;
  padding: 5px 30px;
}
.tpreview__input input:focus {
  border: 1px solid var(--tp-heading-primary);
}
.tpreview__input input::-webkit-input-placeholder {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #8A94AC;
}
.tpreview__input input:-moz-placeholder {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #8A94AC;
}
.tpreview__input input::-moz-placeholder {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #8A94AC;
}
.tpreview__input input:-ms-input-placeholder {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #8A94AC;
}
.tpreview__input textarea {
  width: 100%;
  padding: 10px;
  height: 220px;
  border: 1px solid var(--tp-border-1);
  border-radius: 10px;
  outline: 0;
}
.tpreview__input textarea:focus {
  border: 1px solid var(--tp-heading-primary);
}
.tpreview__input textarea::-webkit-input-placeholder {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #8A94AC;
}
.tpreview__input textarea:-moz-placeholder {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #8A94AC;
}
.tpreview__input textarea::-moz-placeholder {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #8A94AC;
}
.tpreview__input textarea:-ms-input-placeholder {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #8A94AC;
}
.tpreview__star .title {
  font-size: 16px;
  font-weight: 600;
  color: var(--tp-heading-primary);
}
.tpreview__star-icon i {
  color: var(--tp-heading-primary);
}
.tpreview__star-icon i:hover {
  color: var(--tp-text-1);
}

.tpdetails__grid-img img {
  max-width: 100%;
}

/*----------------------------------------*/
/*  13. BANNER CSS
/*----------------------------------------*/
.tpbanner__content {
  min-height: 220px;
  border-radius: 10px;
  padding: 31px 40px 27px 40px;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tpbanner__content {
    background-repeat: no-repeat;
  }
}
.tpbanner__content p {
  color: var(--tp-common-white);
  font-size: 16px;
}
.tpbanner__sub-title {
  color: var(--tp-text-5);
  font-weight: 500;
  font-size: 14px;
  display: block;
  text-transform: uppercase;
}
.tpbanner__title {
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.3px;
  color: var(--tp-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpbanner__title {
    font-size: 20px;
  }
}
.tpbanner__white {
  color: var(--tp-common-white);
}
.tpbanner__bg {
  background-position: right;
  background-size: cover;
  padding: 42px 20px 40px 40px;
  border-radius: 10px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpbanner__bg {
    padding: 42px 20px 40px 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpbanner__bg {
    padding: 42px 20px 40px 20px;
    background-position: left;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tpbanner__bg {
    padding: 55px 15px 35px 15px;
  }
}
.tpbanner__bg .tpbanner__sub-title {
  color: var(--tp-theme-2);
}
.tpbanner__bg .tpbanner__title {
  color: var(--tp-heading-primary);
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
}
.tpbanner__bg p {
  font-size: 16px;
  color: var(--tp-heading-primary);
  margin-bottom: 0;
}
.tpbanner__main-thumb img {
  width: 100%;
}
.tpbanner__main-content {
  padding: 110px 50px;
}
@media (max-width: 767px) {
  .tpbanner__main-content {
    padding: 110px 15px;
  }
}
.tpbanner__main__sub-title {
  color: var(--tp-theme-2);
  font-family: "Quicksand";
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpbanner__main__sub-title {
    margin-bottom: 5px;
  }
}
.tpbanner__main__title {
  color: var(--tp-theme-1);
  font-family: "Quicksand";
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpbanner__main__title {
    font-size: 24px;
    margin-bottom: 20px;
  }
}
@media (max-width: 767px) {
  .tpbanner__main__title {
    font-size: 28px;
    margin-bottom: 20px;
  }
}
.tpbanner__white {
  color: var(--tp-common-white);
}
.tpbanner__yellow {
  color: var(--tp-text-5);
}
.tpbanner__bg2 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media (max-width: 767px) {
  .tpbanner__bg2 {
    background-position: left;
  }
}
.tpbanner__big-bg {
  background-position: right;
  background-size: cover;
  padding: 185px 20px 45px 40px;
  border-radius: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px), only screen and (min-width: 576px) and (max-width: 767px) {
  .tpbanner__big-bg {
    background-position: left;
  }
}
.tpbanner__big-bg .tpbanner__sub-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  color: #FCDE00;
}
.tpbanner__big-bg .tpbanner__title {
  font-weight: 700;
  font-size: 36px;
  color: var(--tp-common-white);
  line-height: 1.2;
  text-transform: uppercase;
}
.tpbanner__big-bg-content p {
  font-size: 16px;
  color: var(--tp-common-white);
  margin-bottom: 50px;
}
.tpbanner__bg3 {
  background-repeat: no-repeat;
  background-size: cover;
  padding: 60px 20px 25px 40px;
  background-position: center;
  border-radius: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px), only screen and (min-width: 576px) and (max-width: 767px) {
  .tpbanner__bg3 {
    background-position: left;
  }
}
.tpbanner__bg3 .tpbanner__sub-title {
  color: var(--tp-theme-5);
}
.tpbanner__bg3 .tpbanner__title {
  text-transform: uppercase;
}
.tpbanner__bg3 p {
  color: var(--tp-common-white);
}
.tpbanner__bg4 {
  background-repeat: no-repeat;
  background-size: cover;
  padding: 90px 20px 25px 40px;
  background-position: center;
  border-radius: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .tpbanner__bg4 {
    background-position: left;
  }
}
.tpbanner__bg4 .tpbanner__sub-title {
  color: var(--tp-theme-5);
}
.tpbanner__bg4 .tpbanner__title {
  text-transform: uppercase;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpbanner__bg4 .tpbanner__title {
    font-size: 18px;
  }
}
.tpbanner__bg4 p {
  color: var(--tp-common-white);
}

.tpbannertwo__sub-title {
  text-transform: uppercase;
  color: var(--tp-text-1);
  font-weight: 500;
  font-size: 14px;
  display: inline-block;
}
.tpbannertwo__title {
  color: var(--tp-common-white);
  font-weight: 700;
  font-size: 24px;
}
.tpbannertwo p {
  color: var(--tp-common-white);
  font-weight: 400;
  font-size: 16px;
}
.tpbannertwo__bg {
  background-repeat: no-repeat;
  border-radius: 10px;
}
@media (max-width: 767px) {
  .tpbannertwo__bg {
    background-position: center;
    background-size: cover;
    margin-bottom: 20px;
  }
}

.tphero__bg {
  background-position: bottom;
  min-height: 840px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tphero__bg {
    min-height: 700px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tphero__bg {
    min-height: 500px;
  }
}
@media (max-width: 767px) {
  .tphero__thumb {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tphero__thumb {
    margin-bottom: 50px;
  }
}
.tphero__thumb .pera2 img {
  width: 100%;
}
.tphero__thumb-shape-one {
  top: 220px;
  right: 45px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tphero__thumb-shape-one {
    top: 175px;
    right: -45px;
  }
}
@media (max-width: 767px) {
  .tphero__thumb-shape-one {
    top: 95px;
    right: 0px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tphero__thumb-shape-one {
    top: 95px;
    right: 0px;
  }
}
.tphero__thumb-shape-two {
  top: 220px;
  right: 45px;
}
.tphero__thumb-shape-three {
  top: 20px;
  right: -145px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .tphero__thumb-shape-three {
    right: 0;
  }
}
.tphero__thumb-shape-four {
  bottom: 180px;
  left: -80px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tphero__thumb-shape-four {
    bottom: 100px;
  }
}
.tphero__thumb-shape-five {
  top: 170px;
  left: -260px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tphero__thumb-shape-five {
    top: 400px;
    left: -100px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tphero__thumb-shape-five {
    top: 270px;
    left: -150px;
  }
}
.tphero__thumb-img {
  position: absolute;
}
.tphero__thumb-img img {
  width: 100%;
}
.tphero__wrapper p {
  color: var(--tp-common-white);
  font-size: 18px;
  margin-bottom: 60px;
}
@media (max-width: 767px) {
  .tphero__wrapper p {
    margin-bottom: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tphero__wrapper p {
    font-size: 15px;
    margin-bottom: 35px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .tphero__wrapper p br {
    display: none;
  }
}
.tphero__wrapper-shape {
  position: absolute;
  bottom: 25px;
  left: -230px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tphero__wrapper-shape {
    bottom: -150px;
    left: 205px;
  }
}
.tphero__sub-title {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 500;
  color: var(--tp-common-white);
}
@media (max-width: 767px) {
  .tphero__sub-title {
    margin-bottom: 10px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tphero__sub-title {
    font-size: 14px;
    margin-bottom: 10px;
  }
}
.tphero__title {
  font-size: 65px;
  font-weight: 700;
  color: var(--tp-common-white);
  font-family: "Quicksand";
  line-height: 1.1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tphero__title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tphero__title {
    font-size: 48px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tphero__title {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  .tphero__title {
    font-size: 30px;
    margin-bottom: 15px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tphero__title {
    font-size: 26px;
    margin-bottom: 15px;
  }
}
@media (max-width: 767px) {
  .tphero__title br {
    display: none;
  }
}
@media (max-width: 767px) {
  .tphero__pt {
    padding-top: 30px;
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  .pera3 img {
    width: 250px;
  }
}

/*----------------------------------------*/
/*  14. COUNDOWN CSS
/*----------------------------------------*/
.tpcoundown {
  padding: 150px 5px 130px 5px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px), only screen and (min-width: 576px) and (max-width: 767px) {
  .tpcoundown {
    margin-left: 0;
  }
}
.tpcoundown__bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 767px) {
  .tpcoundown__bg {
    background-position: right;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tpcoundown__bg-green {
    background-position: left;
  }
}
.tpcoundown__count-title {
  color: var(--tp-common-white);
  font-size: 14px;
  line-height: 18px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0;
}
.tpcoundown__countdown {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}
.tpcoundown__countdown span {
  margin-right: 50px;
  display: flex;
  align-items: end;
}
@media (max-width: 767px) {
  .tpcoundown__countdown span {
    margin-right: 15px;
  }
}
.tpcoundown__countdown span p {
  font-weight: 500;
  font-size: 12px;
  line-height: 17px;
  text-transform: uppercase;
  color: var(--tp-grey-9);
  margin-bottom: 0;
  transform: translateY(-10px);
  margin-left: 3px;
}
@media (max-width: 767px) {
  .tpcoundown__countdown span p {
    font-size: 10px;
    transform: translateY(-15px);
  }
}
.tpcoundown__countdown .time-count {
  font-weight: 500;
  font-size: 36px;
  line-height: 52px;
  color: #fff;
  margin-right: 0;
}
@media (max-width: 767px) {
  .tpcoundown__countdown .time-count {
    font-size: 20px;
  }
}
.tpcoundown__shape img {
  position: absolute;
}
.tpcoundown__shape img:hover {
  animation-name: chara, lara;
  animation-duration: 0.3s, 1.5s;
  animation-delay: 0s, 0.3s;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
  animation-direction: normal, alternate;
}
.tpcoundown__shape-one {
  left: -175px;
  top: 140px;
}
.tpcoundown__shape-two {
  right: 600px;
  bottom: 190px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpcoundown__shape-two {
    right: 400px;
    bottom: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpcoundown__shape-two {
    right: 0px;
    bottom: 0;
  }
}
.tpcoundown__shape-three {
  right: 70px;
  top: 215px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpcoundown__shape-three {
    right: 370px;
  }
}
.tpcoundown__shape-four {
  right: 280px;
  bottom: 270px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpcoundown__shape-four {
    right: 150px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpcoundown__shape-four {
    right: 0px;
  }
}
@media (max-width: 767px) {
  .tpcoundown__btn a {
    margin-left: 0;
    margin-bottom: 10px;
  }
}
.tpcoundown__themebg {
  margin-bottom: 26px;
}
.tpcoundown__themebg .time-count {
  font-weight: 500;
  font-size: 40px;
  line-height: 52px;
  color: var(--tp-theme-1);
  margin-right: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpcoundown__themebg .time-count {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .tpcoundown__themebg .time-count {
    font-size: 16px;
    line-height: 38px;
  }
}
.tpcoundown__themebg span {
  margin-right: 20px;
  display: flex;
  align-items: end;
}
@media (max-width: 767px) {
  .tpcoundown__themebg span {
    margin-right: 15px;
  }
}
.tpcoundown__themebg span p {
  font-weight: 500;
  font-size: 12px;
  line-height: 17px;
  text-transform: uppercase;
  color: var(--tp-theme-1);
  margin-bottom: 0;
  transform: translateY(-10px);
  margin-left: 3px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpcoundown__themebg span p {
    line-height: 28px;
  }
}
@media (max-width: 767px) {
  .tpcoundown__themebg span p {
    font-size: 10px;
    line-height: 12px;
  }
}

/*----------------------------------------*/
/*  15. FEATURE CSS
/*----------------------------------------*/
.tpfeature__thumb {
  text-align: right;
  margin-right: -16px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px), only screen and (min-width: 576px) and (max-width: 767px) {
  .tpfeature__thumb {
    text-align: center;
    margin-right: 0;
  }
}
.tpfeature__thumb img {
  max-width: 100%;
}
.tpfeature__thumb img:hover {
  transform: translateY(-8px);
}
.tpfeature__content p {
  font-size: 16px;
  line-height: 1.4;
}
@media (max-width: 767px) {
  .tpfeature__content p br {
    display: none;
  }
}
.tpfeature__title {
  font-size: 40px;
  line-height: 1.1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpfeature__title {
    font-size: 33px;
  }
}
@media (max-width: 767px) {
  .tpfeature__title {
    font-size: 28px;
    line-height: 1.4;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .tpfeature__title br {
    display: none;
  }
}
.tpfeature__title span {
  color: var(--tp-heading-secondary);
}
.tpfeature__product-title {
  font-family: "Jost", sans-serif;
  color: var(--tp-heading-primary);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 20px;
  padding: 0px 0px 5px 0px;
  border-style: dashed;
  border-width: 0px 0px 1px 0px;
  border-color: #C2C2D3;
}
.tpfeature__product-info {
  font-size: 16px;
  color: var(--tp-text-body);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpfeature__product-info {
    font-size: 15px;
  }
}
@media (max-width: 767px), only screen and (min-width: 576px) and (max-width: 767px) {
  .tpfeature__product-item {
    margin-bottom: 20px;
  }
}
.tpfeature__shape-one {
  position: absolute;
  top: 30px;
  left: 0;
}
.tpfeature__shape-one:hover {
  animation-name: chara, lara;
  animation-duration: 0.3s, 1.5s;
  animation-delay: 0s, 0.3s;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
  animation-direction: normal, alternate;
}
.tpfeature__shape-two {
  position: absolute;
  bottom: 320px;
  right: -53px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tpfeature__shape-two {
    right: 0px;
  }
}
.tpfeature__shape-two:hover {
  animation-name: chara, lara;
  animation-duration: 0.3s, 1.5s;
  animation-delay: 0s, 0.3s;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
  animation-direction: normal, alternate;
}
.tpfeature__shape-three {
  position: absolute;
  top: 0px;
  right: -95px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tpfeature__shape-three {
    right: 0px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpfeature__shape-three {
    top: 100px;
    right: 420px;
  }
}
.tpfeature__shape-three:hover {
  animation-name: chara, lara;
  animation-duration: 0.3s, 1.5s;
  animation-delay: 0s, 0.3s;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
  animation-direction: normal, alternate;
}
@media (max-width: 767px), only screen and (min-width: 576px) and (max-width: 767px) {
  .tpfeature__box {
    margin-bottom: 30px;
  }
}
.tpfeature__price-red {
  font-size: 16px;
  color: var(--tp-text-body);
  font-family: var(--tp-ff-jost);
}
.tpfeature__price-red span {
  color: var(--tp-theme-2);
  font-weight: 600;
  font-size: 20px;
}

.tpproduct-feature {
  margin-left: 75px;
  margin-right: 90px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px), only screen and (min-width: 576px) and (max-width: 767px) {
  .tpproduct-feature {
    margin-left: 0;
    margin-right: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpproduct-feature {
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
  }
}

.mainfeature__item:hover .mainfeature__icon img {
  animation: animation-plus 1s infinite linear alternate;
}
.mainfeature__bg {
  background-repeat: repeat-x;
}
.mainfeature__icon {
  margin-bottom: 10px;
}
.mainfeature__icon img {
  height: 25px;
  width: 25px;
}
.mainfeature__content p {
  color: var(--tp-grey-10);
  font-size: 14px;
  margin-bottom: 0;
}
.mainfeature__title {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  color: var(--tp-common-white);
  margin-bottom: 2px;
}
.mainfeature__border {
  border-bottom: 1px solid #484492;
}

.whight-feature .mainfeature__title {
  color: var(--tp-heading-primary);
}
.whight-feature .mainfeature__content p {
  color: var(--tp-text-body);
}

.feature-bg-round {
  border-radius: 20px 20px 0 0;
  padding: 50px 50px;
}
.feature-bg-round .tpfeature-border {
  border-bottom: 1px solid var(--tp-border-1);
}

.feature-top {
  margin-top: -220px;
  position: relative;
  z-index: 9;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 767px) {
  .feature-top {
    margin-top: 0;
  }
}

.tpinsta__item {
  border-radius: 10px;
  position: relative;
}
.tpinsta__item:hover::before {
  opacity: 1;
  transform: scale(1);
}
.tpinsta__item:hover .tpinsta__links {
  opacity: 1;
  visibility: visible;
}
.tpinsta__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 2;
  opacity: 0;
  width: 100%;
  height: 100%;
  transform: scale(0.1);
}
.tpinsta__item img {
  width: 100%;
}
.tpinsta__links {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  visibility: hidden;
}
.tpinsta__links i {
  background-color: var(--tp-common-white);
  height: 80px;
  width: 80px;
  line-height: 80px;
  text-align: center;
  border-radius: 50px;
  font-size: 20px;
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  -ms-transition: all 0.2s ease-out 0s;
  -o-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
}
.tpinsta__links i:hover {
  background-color: var(--tp-heading-secondary);
  color: var(--tp-common-white);
}

/* ========================================
   MODERN ABOUT US PAGE - COMPLETE REDESIGN
======================================== */

:root {
    --primary-green: #81b214;
    --dark-green: #6a9611;
    --light-gray: #f8f9fa;
    --border-color: #e9ecef;
    --text-dark: #212529;
    --text-muted: #6c757d;
}

/* ========================================
   HERO SECTION - ENHANCED
======================================== */

.about-hero-section {
    position: relative;
    min-height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(129, 178, 20, 0.95) 0%, rgba(106, 150, 17, 0.95) 100%),
                url('../img/banner/about-bg-1.jpg') center/cover no-repeat;
    overflow: hidden;
}

.about-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.about-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 100px 20px;
    animation: fadeInUp 0.8s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.about-hero-title {
    font-size: 56px;
    font-weight: 700;
    color: white;
    margin-bottom: 25px;
    line-height: 1.2;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.about-hero-subtitle {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

.about-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 45px;
    background: white;
    color: var(--primary-green);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.about-hero-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    color: var(--dark-green);
}

.about-hero-btn i {
    transition: transform 0.3s ease;
}

.about-hero-btn:hover i {
    transform: translateX(5px);
}

/* Decorative Elements */
.hero-decorative {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 6s ease-in-out infinite;
}

.hero-decorative-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

.hero-decorative-2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
    animation-delay: 2s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-20px) scale(1.05);
    }
}

/* ========================================
   STORY SECTION - MODERN LAYOUT
======================================== */

.story-section {
    padding: 100px 0;
    background: white;
}

.story-image-container {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.about-image-carousel {
    border-radius: 20px;
    overflow: hidden;
}

.about-image-carousel .swiper-slide img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 20px;
}

.about-image-carousel .swiper-button-next,
.about-image-carousel .swiper-button-prev {
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.about-image-carousel .swiper-button-next:after,
.about-image-carousel .swiper-button-prev:after {
    font-size: 20px;
    color: var(--primary-green);
    font-weight: 700;
}

.about-image-carousel .swiper-pagination {
    bottom: 20px;
}

.about-image-carousel .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: white;
    opacity: 0.7;
}

.about-image-carousel .swiper-pagination-bullet-active {
    background: var(--primary-green);
    opacity: 1;
}

/* Story Content */
.story-content {
    padding-left: 40px;
}

.story-badge {
    display: inline-flex;
    gap: 15px;
    margin-bottom: 20px;
}

.story-tag {
    display: inline-block;
    padding: 8px 20px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    color: white;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.story-tag.outline {
    background: transparent;
    border: 2px solid var(--primary-green);
    color: var(--primary-green);
}

.story-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 25px;
    line-height: 1.3;
}

.story-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    margin-top: 20px;
    border-radius: 10px;
}

.story-text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.story-highlight {
    background: linear-gradient(135deg, rgba(129, 178, 20, 0.1) 0%, rgba(106, 150, 17, 0.05) 100%);
    padding: 25px;
    border-radius: 15px;
    border-left: 4px solid var(--primary-green);
    margin: 30px 0;
}

.story-highlight p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-dark);
}

/* Stats Counter */
.stats-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.stat-item {
    text-align: center;
    padding: 25px;
    background: var(--light-gray);
    border-radius: 15px;
    transition: all 0.3s ease;
}

.stat-item:hover {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(129, 178, 20, 0.3);
}

.stat-number {
    font-size: 36px;
    font-weight: 700;
    color: var(--primary-green);
    margin-bottom: 10px;
    transition: color 0.3s;
}

.stat-item:hover .stat-number {
    color: white;
}

.stat-label {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 600;
    transition: color 0.3s;
}

.stat-item:hover .stat-label {
    color: white;
}

/* ========================================
   FEATURES SECTION - MODERN CARDS
======================================== */

.features-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.feature-card {
    background: white;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    height: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.feature-card:hover {
    border-color: var(--primary-green);
    box-shadow: 0 15px 50px rgba(129, 178, 20, 0.15);
    transform: translateY(-10px);
}

.feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, rgba(129, 178, 20, 0.1) 0%, rgba(106, 150, 17, 0.05) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    transform: scale(1.1) rotate(5deg);
}

.feature-icon img {
    max-width: 50px;
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon img {
    filter: brightness(0) invert(1);
}

.feature-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.feature-description {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0;
}

/* ========================================
   TEAM SECTION - ENHANCED CARDS
======================================== */

.team-section {
    padding: 100px 0;
    background: white;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-subtitle {
    font-size: 14px;
    color: var(--primary-green);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.section-title {
    font-size: 42px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.section-description {
    font-size: 16px;
    color: var(--text-muted);
    max-width: 1018px;
    margin: 0 auto;
    line-height: 1.7;
}

.team-card {
    background: white;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    height: 100%;
}

.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(129, 178, 20, 0.15);
}

.team-image-wrapper {
    position: relative;
    margin-bottom: 25px;
    display: inline-block;
}

.team-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--light-gray);
    transition: all 0.3s ease;
}

.team-card:hover .team-image {
    border-color: var(--primary-green);
    transform: scale(1.05);
}

.team-social {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
}

.team-card:hover .team-social {
    opacity: 1;
    transform: scale(1);
}

.team-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.team-position {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 8px;
    line-height: 1.5;
}

.team-degree {
    font-size: 13px;
    color: var(--primary-green);
    font-weight: 600;
    padding: 8px 15px;
    background: rgba(129, 178, 20, 0.1);
    border-radius: 20px;
    display: inline-block;
    margin-top: 15px;
}

/* ========================================
   WHY CHOOSE US SECTION
======================================== */

.why-choose-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.choose-card {
    background: white;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.choose-card:hover {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(129, 178, 20, 0.2);
}

.choose-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 25px;
    background: rgba(129, 178, 20, 0.1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.choose-card:hover .choose-icon {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.choose-icon img {
    max-width: 55px;
}

.choose-card:hover .choose-icon img {
    filter: brightness(0) invert(1);
}

.choose-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 15px;
    transition: color 0.3s;
}

.choose-card:hover .choose-title {
    color: white;
}

.choose-description {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 20px;
    transition: color 0.3s;
}

.choose-card:hover .choose-description {
    color: rgba(255, 255, 255, 0.9);
}

.choose-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s;
}

.choose-card:hover .choose-link {
    color: white;
}

.choose-link i {
    transition: transform 0.3s;
}

.choose-link:hover i {
    transform: translateX(5px);
}

.help-center-banner {
    text-align: center;
    padding: 40px;
    background: white;
    border-radius: 20px;
    margin-top: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.help-center-banner span {
    font-size: 16px;
    color: var(--text-dark);
}

.help-center-banner a {
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 700;
    margin-left: 10px;
}

.help-center-banner a:hover {
    text-decoration: underline;
}

/* ========================================
   TESTIMONIALS SECTION
======================================== */

.testimonials-section {
    padding: 100px 0;
    background: white;
}

.testimonial-card {
    background: white;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.testimonial-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 25px;
    border: 5px solid var(--light-gray);
}

.testimonial-quote {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-muted);
    margin-bottom: 25px;
    font-style: italic;
}

.testimonial-rating {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 20px;
}

.testimonial-rating i {
    color: #ffc107;
    font-size: 18px;
}

.testimonial-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.testimonial-position {
    font-size: 14px;
    color: var(--text-muted);
}

/* ========================================
   RESPONSIVE DESIGN
======================================== */

/* Tablet */
@media (max-width: 991.98px) {
    .about-hero-title {
        font-size: 42px;
    }
    
    .about-hero-subtitle {
        font-size: 18px;
    }
    
    .story-content {
        padding-left: 0;
        margin-top: 40px;
    }
    
    .story-title {
        font-size: 36px;
    }
    
    .stats-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    .section-title {
        font-size: 36px;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .about-hero-section {
        min-height: 450px;
    }
    
    .about-hero-content {
        padding: 60px 20px;
    }
    
    .about-hero-title {
        font-size: 32px;
    }
    
    .about-hero-subtitle {
        font-size: 16px;
        margin-bottom: 30px;
    }
    
    .about-hero-btn {
        padding: 14px 35px;
        font-size: 14px;
    }
    
    .story-section,
    .features-section,
    .team-section,
    .why-choose-section,
    .testimonials-section {
        padding: 60px 0;
    }
    
    .story-title {
        font-size: 28px;
    }
    
    .story-text {
        font-size: 15px;
    }
    
    .stats-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .stat-number {
        font-size: 28px;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .section-header {
        margin-bottom: 40px;
    }
    
    .about-image-carousel .swiper-slide img {
        height: 300px;
    }
    
    .feature-card,
    .team-card,
    .choose-card {
        margin-bottom: 20px;
    }
    
    .story-badge {
        flex-direction: column;
        gap: 10px;
    }
}

/* Small Mobile */
@media (max-width: 575.98px) {
    .about-hero-title {
        font-size: 26px;
    }
    
    .about-hero-subtitle {
        font-size: 14px;
    }
    
    .about-image-carousel .swiper-slide img {
        height: 250px;
    }
    
    .about-image-carousel .swiper-button-next,
    .about-image-carousel .swiper-button-prev {
        width: 40px;
        height: 40px;
    }
    
    .feature-card,
    .team-card,
    .choose-card {
        padding: 30px 20px;
    }
    
    .team-image {
        width: 120px;
        height: 120px;
    }
}

/* ========================================
   ANIMATIONS
======================================== */

.fade-in {
    animation: fadeIn 0.8s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in-left {
    animation: slideInLeft 0.8s ease;
}

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

.slide-in-right {
    animation: slideInRight 0.8s ease;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/*----------------------------------------*/
/*  17. CHOOSE CSS
/*----------------------------------------*/
.tpchoose__item {
  background-color: var(--tp-common-white);
  padding: 50px 35px 45px 35px;
  border-radius: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpchoose__item {
    padding: 30px 20px 30px 21px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpchoose__item {
    padding: 35px 15px 30px 15px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tpchoose__item {
    padding: 50px 15px 45px 15px;
  }
}
.tpchoose__item:hover .tpchoose__details i {
  opacity: 1;
  visibility: visible;
  animation: shakenext 1s ease infinite;
}
.tpchoose__item:hover .tpchoose__icon img {
  animation: lara 1s infinite linear;
}
.tpchoose__title {
  font-size: 16px;
  color: var(--tp-heading-primary);
  font-weight: 700;
}
.tpchoose__content p {
  font-size: 16px;
}
.tpchoose__details {
  color: var(--tp-heading-secondary);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
}
.tpchoose__details:hover {
  color: var(--tp-heading-secondary);
}
.tpchoose__details i {
  display: inline-block;
  margin-left: 5px;
  opacity: 0;
  visibility: hidden;
  font-size: 16px;
}
.tpchoose__bg {
  background-size: cover;
}

/*----------------------------------------*/
/*  18. BRAND-PRODUCT CSS
/*----------------------------------------*/
.tpbrandproduct__main {
  border: 1px solid #EBEFF4;
  padding: 55px 30px 35px 30px;
  border-radius: 10px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpbrandproduct__main {
    padding: 15px 15px 7px 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpbrandproduct__main {
    padding: 30px 15px 15px 15px;
  }
}
@media (max-width: 767px) {
  .tpbrandproduct__main {
    margin-bottom: 20px;
  }
}
.tpbrandproduct__main-contetn p {
  font-size: 15px;
  color: var(--tp-text-3);
}
.tpbrandproduct__item {
  border: 1px solid #EBEFF4;
  border-radius: 10px;
  align-items: center;
  padding: 22px 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpbrandproduct__item {
    padding: 10px 10px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpbrandproduct__item {
    padding: 22px 18px;
  }
}
.tpbrandproduct__title {
  margin-bottom: 15px;
  color: var(--tp-heading-primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}
.tpbrandproduct__img {
  flex: 0 0 auto;
  margin-right: 18px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpbrandproduct__img {
    margin-right: 5px;
  }
}
.tpbrandproduct__img img {
  height: 100px;
  width: 100px;
  object-fit: cover;
}
.tpbrandproduct__product-title {
  font-size: 16px;
  font-weight: 400;
  color: var(--tp-heading-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  margin-bottom: 5px;
  line-height: 20px;
}
.tpbrandproduct__product-title a:hover {
  color: var(--tp-heading-secondary);
}
.tpbrandproduct__bage {
  top: 0;
  left: 0;
}

.brand-product {
  border-radius: 0 0 10px 10px;
}

.brand-product-title {
  font-size: 22px;
}

/*----------------------------------------*/
/*  19. TESTIMONIAL CSS
/*----------------------------------------*/
.tptestimonial__avata img {
  height: 70px;
  width: 70px;
  border-radius: 50px;
}
.tptestimonial__content p {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  padding-bottom: 5px;
}
@media (max-width: 767px) {
  .tptestimonial__content p {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tptestimonial__content p br {
    display: none;
  }
}
.tptestimonial__rating {
  color: var(--tp-text-1);
}
.tptestimonial__rating a {
  margin: 0 -3px;
}
.tptestimonial__title {
  font-weight: 700;
  font-size: 13px;
  color: var(--tp-heading-primary);
  text-transform: uppercase;
  margin-bottom: 0;
}
.tptestimonial__content2 p {
  font-size: 16px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 767px) {
  .tptestimonial__content2 p br {
    display: none;
  }
}
.tptestimonial__bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.tptestimonial__bg:hover .tptestimonial__prv, .tptestimonial__bg:hover .tptestimonial__nxt {
  opacity: 1;
  visibility: visible;
}

.testimonial__shape img {
  position: absolute;
}
.testimonial__shape-one {
  top: -25px;
  left: 230px;
  animation: slider-anim 2s infinite linear alternate;
}
.testimonial__shape-two {
  top: -85px;
  right: 335px;
  animation: up-down 3s infinite linear alternate;
}
.testimonial__shape-three {
  bottom: -440px;
  left: 420px;
  animation: up-down 2.5s infinite linear alternate;
}

.testi-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99;
}
.testi-arrow i {
  height: 50px;
  width: 50px;
  background-color: var(--tp-heading-secondary);
  opacity: 0.3;
  line-height: 50px;
  border-radius: 50%;
  font-size: 14px;
  color: var(--tp-common-white);
  display: inline-block;
}
.testi-arrow i:hover {
  opacity: 1;
}
.testi-arrow.tptestimonial-arrow-left {
  left: 250px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .testi-arrow.tptestimonial-arrow-left {
    left: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testi-arrow.tptestimonial-arrow-left {
    left: 15px;
  }
}
.testi-arrow.tptestimonial-arrow-right {
  right: 250px;
  left: 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testi-arrow.tptestimonial-arrow-right {
    right: 150px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testi-arrow.tptestimonial-arrow-right {
    right: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testi-arrow.tptestimonial-arrow-right {
    right: 15px;
  }
}

.tptestimonial__prv {
  left: 220px;
  opacity: 0;
  visibility: hidden;
}
@media only screen and (min-width: 1601px) and (max-width: 1700px) {
  .tptestimonial__prv {
    left: 60px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tptestimonial__prv {
    left: 5px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tptestimonial__prv {
    left: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tptestimonial__prv {
    left: 100px;
  }
}
.tptestimonial__nxt {
  right: 220px;
  left: 0 auto;
  opacity: 0;
  visibility: hidden;
}
@media only screen and (min-width: 1601px) and (max-width: 1700px) {
  .tptestimonial__nxt {
    right: 60px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tptestimonial__nxt {
    right: 5px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tptestimonial__nxt {
    right: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tptestimonial__nxt {
    right: 100px;
  }
}

.tptestimonial-active3 .tptestimonial__item {
  border: 1px solid #EBEFF4;
  border-radius: 10px;
  padding: 40px 30px 35px 30px;
}

/*----------------------------------------*/
/*  20. SHOP CSS
/*----------------------------------------*/
.tpshop__leftbar {
  margin-right: -60px;
  background-color: var(--tp-common-white);
  padding: 25px 30px 18px 30px;
  border-radius: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tpshop__leftbar {
    margin-right: 0;
  }
}
.tpshop__widget {
  border-bottom: dotted 1px #000;
}
.tpshop__widget:last-child {
  border-bottom: none;
}
.tpshop__widget-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.tpshop__widget .form-check-input[type=checkbox] {
  border-radius: 3px;
  height: 15px;
  width: 15px;
  border: 1px solid var(--tp-border-3);
  transform: translateY(3px);
}
.tpshop__widget .form-check-input:focus {
  box-shadow: none;
}
.tpshop__widget .form-check-input:checked {
  background-color: var(--tp-heading-secondary);
  border-color: var(--tp-border-1);
}
.tpshop__widget label {
  font-weight: 400;
  font-size: 14px;
  line-height: 30px;
  color: var(--tp-text-3);
}
.tpshop__widget .form-check i {
  font-weight: 400;
  font-size: 17px;
  line-height: 30px;
  letter-spacing: -0.3em;
  color: #FFB800;
  transform: translateY(-2px);
}
.tpshop__widget-color-box .form-check-input[type=checkbox] {
  border-radius: 50%;
  height: 15px;
  width: 15px;
  border: none;
  transform: translateY(3px);
}
.tpshop__widget-color-box input {
  background-color: var(--tp-common-black);
}
.tpshop__widget-color-box .form-check-input:checked {
  background-color: var(--tp-common-black);
  border-color: var(--tp-border-1);
}
.tpshop__widget-color-box .form-check-input.blue-input {
  background-color: #1E73BE;
}
.tpshop__widget-color-box .form-check-input.brown-input {
  background-color: #49271D;
}
.tpshop__widget-color-box .form-check-input.grey-input {
  background-color: #BFBFBF;
}
.tpshop__widget-color-box .form-check-input.green-input {
  background-color: #50B948;
}
.tpshop__widget-color-box .form-check-input.orange-input {
  background-color: #FF7900;
}
.tpshop__widget-color-box .form-check-input.red-input {
  background-color: #CB2028;
}
.tpshop__content span {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  text-transform: uppercase;
  color: var(--tp-text-1);
  display: inline-block;
  margin-bottom: 8px;
}
.tpshop__content-title {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 25px;
  text-align: center;
  text-transform: uppercas;
  color: var(--tp-common-white);
}
.tpshop__content p {
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
  color: var(--tp-common-white);
  margin-bottom: 0;
}
.tpshop__banner {
  padding: 45px 0;
  border-radius: 10px;
}
@media (max-width: 767px) {
  .tpshop__banner {
    background-repeat: no-repeat;
    background-size: cover;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tpshop__top {
    margin-left: 0;
    margin-top: 30px;
  }
}
.tpshop__leftbar-area {
  margin-left: -60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tpshop__leftbar-area {
    margin-left: 0;
  }
}
.tpshop__leftbar-area.tpshop__leftbar {
  margin-right: 0;
}
.tpshop__leftbar-area .tpshop__sidbar-thumb img {
  max-width: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tpshop__sidebar-area {
    margin-right: 0;
    margin-bottom: 50px;
  }
}

@media (max-width: 767px) {
  .product__navtabs {
    justify-content: start !important;
  }
}
.product__filter-content {
  background-color: var(--tp-common-white);
  border-radius: 10px;
  padding: 7px 20px;
}

@media (max-width: 767px) {
  .tpproductnav {
    justify-content: start !important;
  }
}
.tpproductnav .nav-tabs {
  border-bottom: none;
}
.tpproductnav .nav-tabs .nav-link.active {
  color: var(--tp-heading-secondary);
  background-color: transparent;
  border-color: none;
  border: none;
}
.tpproductnav .nav-tabs .nav-link.active i {
  color: var(--tp-heading-secondary);
}
.tpproductnav .nav-tabs .nav-link:focus, .tpproductnav .nav-tabs .nav-link:hover {
  border: none;
}
.tpproductnav .nav-tabs .nav-link {
  border: none;
}
.tpproductnav .nav-tabs .nav-link i {
  color: #D6D6E5;
}

.tp-shop-selector .nice-select {
  border: none;
}
.tp-shop-selector .nice-select .list {
  border-radius: 0;
  box-shadow: none;
  border: none;
  width: 100%;
}

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

.productsidebar__range .ui-slider-horizontal {
  height: 4px;
  background-color: #EBEFF4;
  border-radius: 10px;
  border: none;
}
.productsidebar__range .ui-slider-horizontal .ui-slider-range {
  background: var(--tp-heading-secondary);
}
.productsidebar__range .ui-slider .ui-slider-handle {
  height: 14px;
  width: 14px;
  background-color: var(--tp-common-white);
}
.productsidebar__range .ui-state-default, .productsidebar__range .ui-widget-content .ui-state-default, .productsidebar__range .ui-widget-header .ui-state-default, .productsidebar__range .ui-button, .productsidebar__range html .ui-button.ui-state-disabled:hover, .productsidebar__range html .ui-button.ui-state-disabled:active {
  border: 4px solid var(--tp-heading-secondary);
  border-radius: 50%;
}
.productsidebar__btn a {
  font-family: "Quicksand";
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  background-color: var(--tp-heading-secondary);
  color: var(--tp-common-white);
  border-radius: 30px;
  display: block;
  padding: 10px 10px;
  text-align: center;
}

.price-filter input {
  outline: none;
  border: none;
  font-size: 14px;
  color: #4D5574;
  font-weight: 400;
  margin-top: 5px;
}

/* ========================================
   MODERN CART PAGE - ALTERNATIVE DESIGN
======================================== */

:root {
    --primary-green: #81b214;
    --dark-green: #6a9611;
    --light-gray: #f8f9fa;
    --border-color: #e9ecef;
    --text-dark: #212529;
    --text-muted: #6c757d;
}

/* Page Background */
body {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.cart-area {
    padding: 40px 0 80px;
}

/* Breadcrumb */
.breadcrumb__area {
    background: white;
    padding: 20px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.tp-breadcrumb__list {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tp-breadcrumb__active a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s;
}

.tp-breadcrumb__active a:hover {
    color: var(--primary-green);
}

.tp-breadcrumb__list .dvdr {
    color: var(--border-color);
}

.tp-breadcrumb__list span:last-child {
    color: var(--primary-green);
    font-weight: 600;
    font-size: 14px;
}

/* Main Cart Container */
.cart-modern-wrapper {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

/* Cart Header */
.cart-modern-header {

    padding: 30px 40px;
    color: white;
}

.cart-modern-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.cart-modern-title i {
    font-size: 32px;
}

.cart-items-count {
    font-size: 14px;
    font-weight: 500;
    background: rgba(255,255,255,0.2);
    padding: 5px 15px;
    border-radius: 20px;
    margin-left: 15px;
}

/* Cart Items List */
.cart-items-list {
    padding: 0;
}

.cart-item-card {
    display: flex;
    gap: 25px;
    padding: 30px 40px;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s ease;
    position: relative;
}

.cart-item-card:hover {
    background: #f8fafb;
}

.cart-item-card:last-child {
    border-bottom: none;
}

/* Product Image */
.cart-item-image {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--light-gray);
    border: 3px solid var(--border-color);
    transition: all 0.3s ease;
}

.cart-item-card:hover .cart-item-image {
    border-color: var(--primary-green);
    transform: scale(1.05);
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.cart-item-card:hover .cart-item-image img {
    transform: scale(1.1);
}

/* Product Details */
.cart-item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cart-item-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    text-decoration: none;
    display: block;
    transition: color 0.3s;
}

.cart-item-name:hover {
    color: var(--primary-green);
}

.cart-item-meta {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.cart-item-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: var(--text-muted);
}

.cart-item-meta-item i {
    color: var(--primary-green);
}

/* Price and Quantity Section */
.cart-item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
    min-width: 200px;
}

.cart-item-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-green);
}

.cart-item-price-original {
    font-size: 16px;
    color: var(--text-muted);
    text-decoration: line-through;
    margin-left: 10px;
}

/* Modern Quantity Control */
.quantity-control-modern {
    display: flex;
    align-items: center;
    background: var(--light-gray);
    border-radius: 50px;
    padding: 5px;
    border: 2px solid var(--border-color);
}

.qty-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: white;
    color: var(--text-dark);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-btn:hover {
    background: var(--primary-green);
    color: white;
    transform: scale(1.1);
}

.qty-btn:active {
    transform: scale(0.95);
}

.qty-input {
    width: 60px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
}

/* Remove Button */
.cart-item-remove {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fee;
    color: #dc3545;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0;
}

.cart-item-card:hover .cart-item-remove {
    opacity: 1;
}

.cart-item-remove:hover {
    background: #dc3545;
    color: white;
    transform: rotate(90deg) scale(1.1);
}

/* Cart Summary Sidebar */
.cart-summary-sidebar {
    position: sticky;
    top: 100px;
}

.cart-summary-card {
    background: white;
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

.summary-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border-color);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    font-size: 15px;
    color: var(--text-muted);
}

.summary-row-total {
    border-top: 2px solid var(--border-color);
    margin-top: 15px;
    padding-top: 20px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
}

.summary-amount {
    font-weight: 600;
    color: var(--text-dark);
}

.summary-amount-total {
    font-size: 28px;
    color: var(--primary-green);
}

/* Promo Code Section */
.promo-code-section {
    margin: 25px 0;
    padding: 20px;
    background: var(--light-gray);
    border-radius: 12px;
}

.promo-code-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.promo-code-input-group {
    display: flex;
    gap: 10px;
}

.promo-code-input {
    flex: 1;
    padding: 12px 15px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s;
}

.promo-code-input:focus {
    outline: none;
    border-color: var(--primary-green);
}

.promo-apply-btn {
    padding: 12px 20px;
    background: var(--text-dark);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.promo-apply-btn:hover {
    background: var(--primary-green);
}

/* Checkout Button */
.checkout-btn-modern {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(129, 178, 20, 0.3);
}

.checkout-btn-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(129, 178, 20, 0.4);
}

.checkout-btn-modern i {
    transition: transform 0.3s;
}

.checkout-btn-modern:hover i {
    transform: translateX(5px);
}

/* Continue Shopping */
.continue-shopping-link {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s;
}

.continue-shopping-link:hover {
    color: var(--primary-green);
}

.continue-shopping-link i {
    margin-right: 5px;
}



/* Empty Cart State */
.empty-cart-modern {
    text-align: center;
    padding: 100px 20px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

.empty-cart-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    color: white;
}

.empty-cart-modern h3 {
    font-size: 28px;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.empty-cart-modern p {
    font-size: 16px;
    color: var(--text-muted);
    margin-bottom: 35px;
}

.start-shopping-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 6px 20px rgba(129, 178, 20, 0.3);
}

.start-shopping-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(129, 178, 20, 0.4);
}

/* Trust Badges */
.trust-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 25px;
}

.trust-badge {
    text-align: center;
    padding: 15px;
    background: var(--light-gray);
    border-radius: 10px;
}

.trust-badge i {
    font-size: 24px;
    color: var(--primary-green);
    margin-bottom: 8px;
}

.trust-badge-text {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}

/* Loading State */
.cart-item-loading {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

.cart-item-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-green);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Success Message */
.cart-success-message {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: white;
    padding: 20px 25px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 9999;
    animation: slideInUp 0.4s ease;
    border-left: 4px solid var(--primary-green);
}

.cart-success-message i {
    font-size: 24px;
    color: var(--primary-green);
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ========================================
   RESPONSIVE DESIGN
======================================== */

/* Tablet */
@media (max-width: 991.98px) {
    .cart-modern-header {
        padding: 25px 30px;
    }
    
    .cart-modern-title {
        font-size: 24px;
    }
    
    .cart-item-card {
        padding: 25px 30px;
    }
    
    .cart-summary-sidebar {
        position: static;
        margin-top: 30px;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .cart-area {
        padding: 20px 0 60px;
    }
    
    .cart-modern-header {
        padding: 20px;
    }
    
    .cart-modern-title {
        font-size: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .cart-modern-title i {
        font-size: 24px;
    }
    
    .cart-items-count {
        margin-left: 0;
        font-size: 12px;
    }
    
    .cart-item-card {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }
    
    .cart-item-image {
        width: 100%;
        height: 220px;
    }
    
    .cart-item-details {
        text-align: left;
    }
    
    .cart-item-name {
        font-size: 16px;
    }
    
    .cart-item-meta {
        flex-direction: column;
        gap: 8px;
    }
    
    .cart-item-actions {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        min-width: auto;
    }
    
    .cart-item-price {
        font-size: 20px;
    }
    
    .cart-item-remove {
        position: static;
        opacity: 1;
        margin-left: auto;
    }
    
    .cart-summary-card {
        padding: 25px 20px;
    }
    
    .summary-title {
        font-size: 20px;
    }
    
    .promo-code-input-group {
        flex-direction: column;
    }
    
    .trust-badges {
        grid-template-columns: 1fr;
    }
    
    .empty-cart-modern {
        padding: 60px 20px;
    }
    
    .empty-cart-icon {
        width: 100px;
        height: 100px;
        font-size: 50px;
    }
    
    .empty-cart-modern h3 {
        font-size: 22px;
    }
    
    .cart-success-message {
        bottom: 90px;
        left: 15px;
        right: 15px;
    }
}

/* Small Mobile */
@media (max-width: 575.98px) {
    .cart-modern-header {
        padding: 15px;
    }
    
    .cart-modern-title {
        font-size: 18px;
    }
    
    .cart-item-card {
        padding: 15px;
    }
    
    .cart-item-image {
        height: 180px;
    }
    
    .quantity-control-modern {
        width: 100%;
        justify-content: space-between;
    }
}

/* Checkout */
.coupon-accordion h3 {
  background-color: #f6f6f6;
  border-top: 3px solid rgba(150, 174, 0, 0.3);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 25px;
  padding: 1em 2em 1em 3.5em;
  position: relative;
  width: auto;
}

.coupon-accordion h3::before {
  content: "\f07b";
  left: 15px;
  top: 13px;
  position: absolute;
  color: #6f7172;
  font-family: "Font Awesome 5 Pro";
  font-weight: 700;
}

.coupon-accordion span {
  color: #6f7172;
  cursor: pointer;
  transition: 0.3s;
  font-weight: 500;
}

.coupon-accordion span:hover, p.lost-password a:hover {
  color: var(--tp-theme-primary);
}

.coupon-content {
  border: 1px solid #eaedff;
  display: none;
  margin-bottom: 20px;
  padding: 30px;
}

.coupon-info p.coupon-text {
  margin-bottom: 15px;
}

.coupon-info p {
  margin-bottom: 0;
}

.coupon-info p.form-row-first label, .coupon-info p.form-row-last label {
  display: block;
  color: #6f7172;
}

.coupon-info p.form-row-first label span.required, .coupon-info p.form-row-last label span.required {
  color: red;
  font-weight: 700;
}

.coupon-info p.form-row-first input, .coupon-info p.form-row-last input {
  border: 1px solid #eaedff;
  height: 45px;
  margin: 0 0 14px;
  max-width: 100%;
  padding: 0 0 0 10px;
  width: 100%;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.coupon-info p.form-row-first input:focus, .coupon-info p.form-row-last input:focus {
  border-color: var(--tp-text-primary);
}

.coupon-info p.form-row input[type=submit]:hover, p.checkout-coupon input[type=submit]:hover {
  background: #3e976c none repeat scroll 0 0;
}

.coupon-info p.form-row input[type=checkbox] {
  position: relative;
  top: 4px;
  transform: translateY(-3px);
}

.form-row > label {
  margin-top: 15px;
  margin-left: 15px;
  color: #6f7172;
}

.buttons-cart input, .coupon input[type=submit], .buttons-cart a, .coupon-info p.form-row input[type=submit] {
  background: #252525 none repeat scroll 0 0;
  border: medium none;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  height: 40px;
  line-height: 40px;
  margin-right: 15px;
  padding: 0 15px;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
}

p.lost-password {
  margin-top: 15px;
}

p.lost-password a {
  color: #6f6f6f;
}

p.checkout-coupon input[type=text] {
  height: 45px;
  padding: 0 15px;
  width: 100%;
  border: 1px solid #eaedff;
  margin-bottom: 15px;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
p.checkout-coupon input[type=text]:focus {
  border-color: var(--tp-text-primary);
}

.coupon-checkout-content {
  display: none;
}

.checkbox-form h3 {
  border-bottom: 1px solid #eaedff;
  font-size: 24px;
  font-family: var(--tp-ff-jost);
  margin: 0 0 20px;
  padding-bottom: 10px;
  width: 100%;
}

.country-select {
  margin-bottom: 30px;
  position: relative;
}

.country-select select {
  width: 100%;
  background-color: transparent;
  border: 1px solid #eaedff;
  padding: 0 10px;
  height: 50px;
}

.country-select label, .checkout-form-list label {
  color: #6f7172;
  display: block;
  margin: 0 0 5px;
}

.country-select label span.required, .checkout-form-list label span.required {
  color: red;
}

.country-select .nice-select {
  border: 1px solid #eaedff;
  height: 45px;
  padding-left: 10px;
  width: 100%;
  color: #6f7172;
  margin-bottom: 20px;
}

.country-select .nice-select .list {
  width: 100%;
}

.checkout-form-list {
  margin-bottom: 30px;
}

.checkout-form-list label {
  color: #6f7172;
}

.checkout-form-list input[type=text], .checkout-form-list input[type=password], .checkout-form-list input[type=email] {
  background: #ffffff;
  border: 1px solid #eaedff;
  border-radius: 0;
  height: 45px;
  padding: 0 0 0 10px;
  width: 100%;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.checkout-form-list input[type=text]:focus, .checkout-form-list input[type=password]:focus, .checkout-form-list input[type=email]:focus {
  border-color: var(--tp-text-primary);
}

.checkout-form-list input[type=text]::-moz-placeholder,
.checkout-form-list input[type=password]::-moz-placeholder,
.checkout-form-list input[type=email]::-moz-placeholder {
  color: #6f7172;
  opacity: 1;
}

.checkout-form-list input[type=text]::placeholder,
.checkout-form-list input[type=password]::placeholder,
.checkout-form-list input[type=email]::placeholder {
  color: #6f7172;
  opacity: 1;
}

.checkout-form-list input[type=checkbox] {
  display: inline-block;
  margin-right: 10px;
  position: relative;
  top: 4px;
  transform: translateY(-3px);
}

.create-acc label {
  color: #6f7172;
  display: inline-block;
}

.create-account {
  display: none;
}

.ship-different-title h3 label {
  display: inline-block;
  margin-right: 20px;
  color: #6f7172;
  font-family: var(--tp-ff-jost);
}

.order-notes textarea {
  border: 1px solid #eaedff;
  height: 120px;
  padding: 15px;
  width: 100%;
  outline: 0;
  resize: none;
}

.order-notes textarea:focus {
  border-color: var(--tp-text-primary);
}

.order-notes textarea::-moz-placeholder {
  color: #6f7172;
  opacity: 1;
}

.order-notes textarea::placeholder {
  color: #6f7172;
  opacity: 1;
}

#ship-box-info {
  display: none;
}

.panel-group .panel {
  border-radius: 0;
}

.panel-default > .panel-heading {
  border-radius: 0;
}

.your-order {
  padding: 30px 40px 45px;
  border: 3px solid rgba(150, 174, 0, 0.3);
}

@media (max-width: 767px) {
  .your-order {
    padding: 15px;
  }
}
.your-order h3 {
  border-bottom: 1px solid #eaedff;
  font-size: 30px;
  margin: 0 0 20px;
  padding-bottom: 10px;
  font-family: var(--tp-ff-jost);
  width: 100%;
}

.your-order-table table {
  background: none;
  border: 0;
  width: 100%;
}

.your-order-table table th, .your-order-table table td {
  border-bottom: 1px solid #eaedff;
  border-right: medium none;
  color: #6f7172;
  font-size: 14px;
  padding: 15px 0;
  text-align: left;
}

@media (max-width: 767px) {
  .your-order-table table th, .your-order-table table td {
    padding-right: 10px;
  }
}
.your-order-table table th {
  border-top: medium none;
  color: #6f7172;
  font-weight: normal;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  width: 250px;
}

.panel-body > p {
  color: #222;
}

.your-order-table table .shipping ul li {
  list-style: none;
}

.your-order-table table .shipping ul li input {
  position: relative;
  top: 2px;
}

.your-order-table table .shipping ul li label {
  color: #6f7172;
}

.your-order-table table .shipping th {
  vertical-align: top;
}



.payment-method {
  margin-top: 40px;
}
.payment-method .accordion-item:last-of-type {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.payment-method .accordion-item {
  background-color: #fff;
  border: 0;
  border-bottom: 1px solid var(--tp-border-primary);
}
.payment-method .accordion-button {
  font-size: 16px;
  font-weight: 500;
  color: var(--tp-theme-primary);
  padding: 23px 0;
  border: none;
}
.payment-method .accordion-button:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.payment-method .accordion-button::after {
  position: absolute;
  content: "\f067";
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-family: "Font Awesome 5 Pro";
  font-size: 16px;
  font-weight: 400;
  margin-left: 0;
  background-image: none;
}
.payment-method .accordion-button:not(.collapsed) {
  color: var(--tp-theme-primary);
  background-color: var(--tp-common-white);
  box-shadow: none;
}
.payment-method .accordion-button:not(.collapsed)::after {
  content: "\f068";
}
.payment-method .accordion-body {
  padding: 8px 0;
  padding-bottom: 40px;
}
.payment-method .accordion-collapse {
  border: none;
}

.panel-title > a {
  display: block;
}

.order-button-payment input {
  background: #232323 none repeat scroll 0 0;
  border: medium none;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  height: 40px;
  margin: 0px 0 0;
  padding: 0;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  width: 100%;
}

.order-button-payment input:hover {
  background: #3e976c none repeat scroll 0 0;
}

.payment-method .btn-link {
  background: no-repeat;
  border: medium none;
  border-radius: 0;
  color: #444;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 0;
  padding: 3px 10px;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
}

.payment-method .card {
  background-color: #ffffff;
  border: 1px solid #eaedff;
  border-radius: 0;
  margin-bottom: 10px;
}

.payment-method .accordion .card:first-of-type {
  border: 1px solid #eaedff;
}

.card-header:first-child {
  border-radius: 0;
}

.payment-method .card-header {
  background-color: #ffffff;
  border-bottom: 1px solid #eaedff;
}

/*----------------------------------------*/
/*  22. COMING-SOON CSS
/*----------------------------------------*/
.tpsoon__sub-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--tp-heading-secondary);
}
.tpsoon__title {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 40px;
  letter-spacing: -0.03em;
  color: var(--tp-heading-primary);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpsoon__title {
    font-size: 36px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tpsoon__title br {
    display: none;
  }
}
.tpsoon p {
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
  color: var(--tp-text-body);
  margin-bottom: 50px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tpsoon p br {
    display: none;
  }
}
.tpsoon__input {
  position: relative;
}
.tpsoon__input input {
  height: 50px;
  width: 330px;
  background-color: var(--tp-common-white);
  border: none;
  border-radius: 30px;
  padding: 5px 45px;
}
.tpsoon__input input::-webkit-input-placeholder {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--tp-border-2);
}
.tpsoon__input input:-moz-placeholder {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--tp-border-2);
}
.tpsoon__input input::-moz-placeholder {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--tp-border-2);
}
.tpsoon__input input:-ms-input-placeholder {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--tp-border-2);
}
@media (max-width: 767px) {
  .tpsoon__input input {
    width: 100%;
  }
}
.tpsoon__input span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
}
.tpsoon__submit-wrapper {
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tpsoon__submit-wrapper {
    flex-wrap: wrap;
  }
}
.tpsoon__copyright a {
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  color: var(--tp-heading-secondary);
}
.tpsoon__shape-one {
  position: absolute;
  top: 145px;
  left: 140px;
}
.tpsoon__shape-two {
  position: absolute;
  bottom: 240px;
  right: 35px;
}

.rainbow__social a i {
  height: 35px;
  width: 35px;
  line-height: 35px;
  text-align: center;
  background-color: #3C5B9B;
  border-radius: 50%;
  color: var(--tp-common-white);
  margin-right: 6px;
}
.rainbow__social .rainbow__facebook i {
  background-color: #40C1DF;
}
.rainbow__social .rainbow__pin i {
  background-color: #EB281D;
}
.rainbow__social .rainbow__skype i {
  background-color: #21A7C6;
}
.rainbow__social .rainbow__youtube i {
  background-color: #ED3C32;
}

/*----------------------------------------*/
/*  23. SHOP-LOCATION CSS
/*----------------------------------------*/
.tplocation__thumb img {
  border-radius: 10px 10px 0 0;
}
.tplocation__content {
  background-color: #F7F7F9;
  border: 1px solid #EBEFF4;
  border-radius: 0 0 10px 10px;
  padding: 65px 40px 50px 40px;
}
@media (max-width: 767px) {
  .tplocation__content {
    padding: 50px 15px 40px 15px;
  }
}
.tplocation__content ul li {
  list-style: none;
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
  color: var(--tp-text-body);
  margin-bottom: 2px;
}
@media (max-width: 767px) {
  .tplocation__content ul li {
    font-size: 15px;
  }
}
@media (max-width: 767px) {
  .tplocation__content ul li br {
    display: none;
  }
}
.tplocation__content ul li a {
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
  color: var(--tp-text-body);
}
@media (max-width: 767px) {
  .tplocation__content ul li a {
    font-size: 15px;
  }
}
.tplocation__content ul li .tplocation__button {
  font-weight: 600;
  font-size: 13px;
  line-height: 19px;
  text-transform: uppercase;
  color: var(--tp-common-white) !important;
  background-color: var(--tp-heading-secondary);
  display: inline-block;
  padding: 16px 47px;
  border-radius: 30px;
}
.tplocation__content ul li .tplocation__button:hover {
  background-color: #859A00;
}
.tplocation__content ul li span {
  color: var(--tp-heading-secondary);
  display: inline-block;
}
.tplocation__content-two {
  background-color: transparent;
  border: none;
  padding: 0;
}
.tplocation__text-title {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
  line-height: 19px;
  text-transform: uppercase;
  color: var(--tp-heading-primary);
}
.tplocation__wrapper {
  border: 1px solid #EBEFF4;
  padding: 20px 30px 20px 20px;
  border-radius: 10px;
  height: 772px;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--tp-heading-secondary) #E2E6EB;
}
@media (max-width: 767px) {
  .tplocation__wrapper {
    padding: 20px 15px 20px 15px;
  }
}
.tplocation__item {
  padding-bottom: 20px;
  border-bottom: 1px solid #E6EAF0;
  margin-bottom: 40px;
}
.tplocation__item:hover .tplocation__text-title {
  color: var(--tp-heading-secondary);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .tplocation__item {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
}
.tplocation__item:last-child {
  padding-bottom: 0;
  border: none;
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .tplocation__img {
    margin-bottom: 20px;
  }
}
.tplocation__img img {
  border-radius: 10px;
}
@media (max-width: 767px) {
  .tplocation__img img {
    width: 100%;
    margin-bottom: 20px;
  }
}

.tplocation__wrapper::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

.tpcontactmap {
  height: 770px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpcontactmap {
    height: 650px;
  }
}
@media (max-width: 767px) {
  .tpcontactmap {
    height: 350px;
  }
}
.tpcontactmap iframe {
  height: 100%;
  border-radius: 10px;
  width: 100%;
}

/* ========================================
   MODERN CONTACT US PAGE - COMPLETE DESIGN
======================================== */

:root {
    --primary-green: #81b214;
    --dark-green: #6a9611;
    --light-gray: #f8f9fa;
    --border-color: #e9ecef;
    --text-dark: #212529;
    --text-muted: #6c757d;
}

/* ========================================
   BREADCRUMB
======================================== */

.breadcrumb__area {
    background: white;
    padding: 20px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.tp-breadcrumb__list {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tp-breadcrumb__active a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s;
}

.tp-breadcrumb__active a:hover {
    color: var(--primary-green);
}

.tp-breadcrumb__list .dvdr {
    color: var(--border-color);
}

.tp-breadcrumb__list span:last-child {
    color: var(--primary-green);
    font-weight: 600;
    font-size: 14px;
}

/* ========================================
   CONTACT HERO SECTION
======================================== */

.contact-hero {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(129, 178, 20, 0.05) 0%, rgba(106, 150, 17, 0.02) 100%);
}

.contact-hero-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    animation: fadeInUp 0.8s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.contact-hero-badge {
    display: inline-block;
    padding: 8px 20px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    color: white;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.contact-hero-title {
    font-size: 48px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.2;
}

.contact-hero-description {
    font-size: 18px;
    color: var(--text-muted);
    line-height: 1.7;
}

/* ========================================
   CONTACT INFO CARDS
======================================== */

.contact-info-section {
    padding: 80px 0;
    background: white;
}

.contact-info-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    border: 2px solid transparent;
}

.contact-info-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(129, 178, 20, 0.15);
    border-color: var(--primary-green);
}

.contact-card-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.contact-info-card:hover .contact-card-image {
    transform: scale(1.1);
}

.contact-card-image-wrapper {
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    position: relative;
}

.contact-card-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(129, 178, 20, 0.3);
}

.contact-card-content {
    padding: 30px;
}

.contact-card-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-card-title i {
    color: var(--primary-green);
    font-size: 24px;
}

.contact-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 15px;
    line-height: 1.6;
}

.contact-info-list li:last-child {
    margin-bottom: 0;
}

.contact-info-list i {
    color: var(--primary-green);
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.contact-info-list a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s;
}

.contact-info-list a:hover {
    color: var(--primary-green);
}

/* ========================================
   CONTACT FORM & MAP SECTION
======================================== */

.contact-form-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.map-wrapper {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    height: 100%;
    min-height: 600px;
}

.map-wrapper iframe {
    width: 100%;
    height: 100%;
    min-height: 600px;
    border: none;
}

.form-wrapper {
    background: white;
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.form-header {
    margin-bottom: 35px;
}

.form-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.form-title i {
    color: var(--primary-green);
    font-size: 36px;
}

.form-description {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.6;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 10px;
    font-size: 14px;
}

.form-label .required {
    color: #dc3545;
    margin-left: 3px;
}

.form-control-modern {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-size: 15px;
    transition: all 0.3s ease;
    background: white;
}

.form-control-modern:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 4px rgba(129, 178, 20, 0.1);
}

.form-control-modern::placeholder {
    color: #adb5bd;
}

textarea.form-control-modern {
    min-height: 150px;
    resize: vertical;
}

.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 25px 0;
}

.form-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--primary-green);
    flex-shrink: 0;
}

.form-checkbox label {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    cursor: pointer;
}

.form-checkbox label a {
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 600;
}

.form-checkbox label a:hover {
    text-decoration: underline;
}

.submit-btn {
    width: 100%;
    padding: 16px 30px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(129, 178, 20, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(129, 178, 20, 0.4);
}

.submit-btn i {
    font-size: 18px;
    transition: transform 0.3s;
}

.submit-btn:hover i {
    transform: translateX(5px);
}

/* ========================================
   QUICK CONTACT SECTION
======================================== */

.quick-contact-section {
    padding: 80px 0;
    background: white;
}

.quick-contact-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.quick-contact-card {
    background: linear-gradient(135deg, rgba(129, 178, 20, 0.05) 0%, rgba(106, 150, 17, 0.02) 100%);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.quick-contact-card:hover {
    background: white;
    border-color: var(--primary-green);
    box-shadow: 0 15px 50px rgba(129, 178, 20, 0.15);
    transform: translateY(-5px);
}

.quick-contact-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    transition: all 0.3s ease;
}

.quick-contact-card:hover .quick-contact-icon {
    transform: scale(1.1) rotate(5deg);
}

.quick-contact-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.quick-contact-info {
    font-size: 15px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.quick-contact-link {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 25px;
    background: var(--primary-green);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s;
}

.quick-contact-link:hover {
    background: var(--dark-green);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(129, 178, 20, 0.3);
}

/* ========================================
   SOCIAL MEDIA SECTION
======================================== */

.social-section {
    padding: 60px 0;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    text-align: center;
}

.social-title {
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin-bottom: 15px;
}

.social-description {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.social-link {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.social-link:hover {
    background: white;
    color: var(--primary-green);
    transform: translateY(-5px);
}

/* ========================================
   RESPONSIVE DESIGN
======================================== */

/* Tablet */
@media (max-width: 991.98px) {
    .contact-hero {
        padding: 60px 0;
    }
    
    .contact-hero-title {
        font-size: 36px;
    }
    
    .contact-info-section,
    .contact-form-section,
    .quick-contact-section {
        padding: 60px 0;
    }
    
    .form-wrapper {
        padding: 40px 30px;
        margin-top: 40px;
    }
    
    .map-wrapper {
        min-height: 400px;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .contact-hero {
        padding: 40px 0;
    }
    
    .contact-hero-title {
        font-size: 28px;
    }
    
    .contact-hero-description {
        font-size: 16px;
    }
    
    .contact-info-section,
    .contact-form-section,
    .quick-contact-section {
        padding: 40px 0;
    }
    
    .contact-info-card {
        margin-bottom: 20px;
    }
    
    .form-wrapper {
        padding: 30px 20px;
        border-radius: 16px;
    }
    
    .form-title {
        font-size: 24px;
    }
    
    .map-wrapper {
        min-height: 350px;
        margin-bottom: 30px;
    }
    
    .map-wrapper iframe {
        min-height: 350px;
    }
    
    .quick-contact-cards {
        grid-template-columns: 1fr;
    }
    
    .social-title {
        font-size: 22px;
    }
    
    .social-links {
        gap: 15px;
    }
    
    .social-link {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

/* Small Mobile */
@media (max-width: 575.98px) {
    .contact-hero-title {
        font-size: 24px;
    }
    
    .form-title {
        font-size: 20px;
    }
    
    .form-wrapper {
        padding: 25px 15px;
    }
    
    .contact-card-content {
        padding: 20px;
    }
}

/* ========================================
   ANIMATIONS
======================================== */

.fade-in {
    animation: fadeIn 0.8s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in {
    animation: slideIn 0.8s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========================================
   SHOP LOCATIONS MAIN SECTION
======================================== */

.shop-locations-main-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.section-header-shop {
    margin-bottom: 60px;
}

.section-title-shop {
    font-size: 42px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 20px 0 15px;
}

.section-description-shop {
    font-size: 16px;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto;
}

/* Province Block */
.province-block {
    margin-bottom: 60px;
}

.province-header-block {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 40px;
}

.province-icon-box {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.province-icon-box i {
    font-size: 32px;
    color: white;
}

.province-name {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.province-desc {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0;
}

/* Shops Grid */
.shops-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
}

/* Shop Location Card */
.shop-location-card {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    border: 2px solid transparent;
}

.shop-location-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(129, 178, 20, 0.2);
    border-color: var(--primary-green);
}

/* Featured Shop (Head Office) */
.featured-shop {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    color: white;
}

.featured-shop .shop-title,
.featured-shop .shop-area,
.featured-shop .info-row span,
.featured-shop .info-row a {
    color: white;
}

.featured-shop .shop-icon-main {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.featured-shop .shop-count {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.featured-shop .info-row i {
    color: rgba(255, 255, 255, 0.9);
}

/* Logo Only Shop */
.logo-shop {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px dashed #dee2e6;
}

/* Shop Tag */
.shop-tag {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.logo-tag {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
}

/* Shop Count */
.shop-count {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(129, 178, 20, 0.3);
}

/* Shop Icon */
.shop-icon-main {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(129, 178, 20, 0.1) 0%, rgba(106, 150, 17, 0.05) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px auto 20px;
    color: var(--primary-green);
    font-size: 28px;
}

/* Shop Title & Area */
.shop-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
    text-align: center;
}

.shop-area {
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 20px;
    font-weight: 500;
}

/* Shop Info List */
.shop-info-list {
    margin-bottom: 20px;
}

.info-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 14px;
}

.featured-shop .info-row {
    background: rgba(255, 255, 255, 0.1);
}

.info-row:last-child {
    margin-bottom: 0;
}

.info-row i {
    color: var(--primary-green);
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.info-row span,
.info-row a {
    color: #495057;
    text-decoration: none;
    line-height: 1.5;
}

.info-row a:hover {
    color: var(--primary-green);
}

/* Logo Shop Note */
.logo-shop-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: #fff3cd;
    border-radius: 8px;
    color: #856404;
    font-size: 13px;
    font-weight: 500;
    margin-top: 20px;
}

.logo-shop-note i {
    color: #ff9800;
    font-size: 18px;
}

/* Shop Button Group */
.shop-btn-group {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.shop-btn-call,
.shop-btn-map {
    flex: 1;
    padding: 10px 16px;
    border-radius: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.shop-btn-call {
    background: var(--primary-green);
    color: white;
}

.shop-btn-call:hover {
    background: var(--dark-green);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(129, 178, 20, 0.3);
    color: white;
}

.shop-btn-map {
    background: #f8f9fa;
    color: var(--primary-green);
    border: 2px solid var(--primary-green);
}

.shop-btn-map:hover {
    background: var(--primary-green);
    color: white;
}

.featured-shop .shop-btn-call {
    background: white;
    color: var(--primary-green);
}

.featured-shop .shop-btn-map {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-color: white;
}

.featured-shop .shop-btn-call:hover {
    background: rgba(255, 255, 255, 0.9);
}

.featured-shop .shop-btn-map:hover {
    background: white;
    color: var(--primary-green);
}

/* Responsive */
@media (max-width: 991px) {
    .shop-locations-main-section {
        padding: 60px 0;
    }

    .section-title-shop {
        font-size: 32px;
    }

    .province-header-block {
        padding: 25px;
    }

    .province-icon-box {
        width: 60px;
        height: 60px;
    }

    .province-icon-box i {
        font-size: 28px;
    }

    .province-name {
        font-size: 24px;
    }

    .shops-list-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .shop-locations-main-section {
        padding: 50px 0;
    }

    .section-title-shop {
        font-size: 28px;
    }

    .province-header-block {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .province-icon-box {
        margin-bottom: 15px;
    }

    .province-name {
        font-size: 22px;
    }

    .shops-list-grid {
        grid-template-columns: 1fr;
    }

    .shop-location-card {
        padding: 20px;
    }
}

@media (max-width: 575px) {
    .section-title-shop {
        font-size: 24px;
    }

    .province-name {
        font-size: 20px;
    }

    .shop-btn-group {
        flex-direction: column;
    }

    .shop-btn-call,
    .shop-btn-map {
        width: 100%;
    }
}

/* ========================================
   MODERN FAQ PAGE - COMPLETE DESIGN
======================================== */

:root {
    --primary-green: #81b214;
    --dark-green: #6a9611;
    --light-gray: #f8f9fa;
    --border-color: #e9ecef;
    --text-dark: #212529;
    --text-muted: #6c757d;
}

/* ========================================
   BREADCRUMB
======================================== */

.breadcrumb__area {
    background: white;
    padding: 20px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.tp-breadcrumb__list {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tp-breadcrumb__active a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s;
}

.tp-breadcrumb__active a:hover {
    color: var(--primary-green);
}

.tp-breadcrumb__list .dvdr {
    color: var(--border-color);
}

.tp-breadcrumb__list span:last-child {
    color: var(--primary-green);
    font-weight: 600;
    font-size: 14px;
}

/* ========================================
   FAQ HERO SECTION
======================================== */

.faq-hero {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(129, 178, 20, 0.95) 0%, rgba(106, 150, 17, 0.95) 100%);
    position: relative;
    overflow: hidden;
}

.faq-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.faq-hero-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    animation: fadeInUp 0.8s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.faq-hero-badge {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}

.faq-hero-title {
    font-size: 48px;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    line-height: 1.2;
}

.faq-hero-description {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.7;
}

/* Search Box */
.faq-search-box {
    max-width: 600px;
    margin: 40px auto 0;
    position: relative;
}

.faq-search-input {
    width: 100%;
    padding: 18px 60px 18px 25px;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.faq-search-input:focus {
    outline: none;
}

.faq-search-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s;
}

.faq-search-btn:hover {
    transform: translateY(-50%) scale(1.1);
}

/* ========================================
   FAQ MAIN SECTION
======================================== */

.faq-main-section {
    padding: 80px 0;
    background: white;
}

/* Left Side - Help Info */
.faq-help-card {
    background: linear-gradient(135deg, rgba(129, 178, 20, 0.05) 0%, rgba(106, 150, 17, 0.02) 100%);
    border-radius: 20px;
    padding: 40px;
    border: 2px solid var(--border-color);
    position: sticky;
    top: 100px;
}

.faq-help-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 36px;
    margin-bottom: 25px;
}

.faq-help-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.faq-help-description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 25px;
}

.faq-help-steps {
    background: white;
    border-radius: 15px;
    padding: 25px;
    margin: 25px 0;
}

.faq-help-steps-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.faq-help-steps ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.faq-help-steps li {
    padding-left: 30px;
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
    position: relative;
}

.faq-help-steps li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    background: var(--primary-green);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.faq-help-note {
    background: white;
    border-radius: 15px;
    padding: 20px;
    border-left: 4px solid var(--primary-green);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-top: 25px;
}

.faq-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.3s;
    margin-top: 20px;
}

.faq-contact-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(129, 178, 20, 0.3);
    color: white;
}

/* Right Side - FAQ Accordion */
.faq-accordion-wrapper {
    padding-left: 40px;
}

.faq-category {
    margin-bottom: 50px;
}

.faq-category-header {
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.faq-category-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

.faq-category-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

/* Modern Accordion Styles */
.modern-accordion .accordion-item {
    border: 2px solid var(--border-color);
    border-radius: 15px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.modern-accordion .accordion-item:hover {
    border-color: var(--primary-green);
    box-shadow: 0 5px 20px rgba(129, 178, 20, 0.1);
}

.modern-accordion .accordion-header {
    margin: 0;
}

.modern-accordion .accordion-button {
    padding: 20px 25px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    background: white;
    border: none;
    border-radius: 15px;
    transition: all 0.3s;
    position: relative;
}

.modern-accordion .accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, rgba(129, 178, 20, 0.05) 0%, rgba(106, 150, 17, 0.02) 100%);
    color: var(--primary-green);
}

.modern-accordion .accordion-button::after {
    width: 30px;
    height: 30px;
    background: var(--primary-green);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transition: all 0.3s;
}

.modern-accordion .accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
    background: var(--primary-green);
}

.modern-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: var(--primary-green);
}

.modern-accordion .accordion-body {
    padding: 25px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-muted);
    background: white;
}

.modern-accordion .accordion-collapse {
    border: none;
}

/* ========================================
   QUICK HELP SECTION
======================================== */

.quick-help-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-badge {
    display: inline-block;
    padding: 8px 20px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    color: white;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.section-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 15px;
}


.quick-help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.quick-help-card {
    background: white;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.quick-help-card:hover {
    border-color: var(--primary-green);
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(129, 178, 20, 0.15);
}

.quick-help-card-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, rgba(129, 178, 20, 0.1) 0%, rgba(106, 150, 17, 0.05) 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-green);
    font-size: 36px;
    transition: all 0.3s;
}

.quick-help-card:hover .quick-help-card-icon {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    color: white;
    transform: scale(1.1);
}

.quick-help-card-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.quick-help-card-description {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.quick-help-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s;
}

.quick-help-card-link:hover {
    gap: 12px;
}

/* ========================================
   STILL HAVE QUESTIONS SECTION
======================================== */

.contact-cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.contact-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}

.contact-cta-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}

.contact-cta-title {
    font-size: 42px;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
}

.contact-cta-description {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 35px;
    line-height: 1.7;
}

.contact-cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 35px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s;
}

.cta-btn-primary {
    background: white;
    color: var(--primary-green);
}

.cta-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    color: var(--dark-green);
}

.cta-btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid white;
    backdrop-filter: blur(10px);
}

.cta-btn-secondary:hover {
    background: white;
    color: var(--primary-green);
    transform: translateY(-3px);
}

/* ========================================
   RESPONSIVE DESIGN
======================================== */

/* Tablet */
@media (max-width: 991.98px) {
    .faq-hero {
        padding: 60px 0;
    }
    
    .faq-hero-title {
        font-size: 36px;
    }
    
    .faq-accordion-wrapper {
        padding-left: 0;
        margin-top: 40px;
    }
    
    .faq-help-card {
        position: static;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .contact-cta-title {
        font-size: 32px;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .faq-hero {
        padding: 40px 0;
    }
    
    .faq-hero-title {
        font-size: 28px;
    }
    
    .faq-hero-description {
        font-size: 16px;
    }
    
    .faq-search-input {
        padding: 15px 55px 15px 20px;
        font-size: 14px;
    }
    
    .faq-main-section,
    .quick-help-section,
    .contact-cta-section {
        padding: 60px 0;
    }
    
    .faq-help-card {
        padding: 30px 20px;
    }
    
    .faq-help-title {
        font-size: 22px;
    }
    
    .faq-category-title {
        font-size: 20px;
    }
    
    .modern-accordion .accordion-button {
        padding: 15px 20px;
        font-size: 14px;
    }
    
    .modern-accordion .accordion-body {
        padding: 20px;
        font-size: 14px;
    }
    
    .quick-help-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-cta-title {
        font-size: 24px;
    }
    
    .contact-cta-description {
        font-size: 16px;
    }
    
    .contact-cta-buttons {
        flex-direction: column;
    }
    
    .cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Small Mobile */
@media (max-width: 575.98px) {
    .faq-hero-title {
        font-size: 24px;
    }
    
    .faq-help-icon {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }
    
    .faq-category-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}

/* ========================================
   ANIMATIONS
======================================== */

.fade-in {
    animation: fadeIn 0.8s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/*----------------------------------------*/
/*  25. LOG-IN CSS
/*----------------------------------------*/
.tptrack__item-icon {
  flex: 0 0 auto;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  background-color: var(--tp-common-white);
  border-radius: 6px;
  margin-right: 20px;
}
.tptrack__content {
  padding: 50px;
  border-radius: 10px;
}
@media (max-width: 767px) {
  .tptrack__content {
    padding: 20px 15px;
  }
}
.tptrack__item-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--tp-heading-primary);
}
.tptrack__item-content p {
  font-size: 14px;
  color: var(--tp-text-body);
  line-height: 24px;
  margin-bottom: 0;
}
.tptrack__id span, .tptrack__email span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 30px;
  font-size: 16px;
}
.tptrack__id form, .tptrack__email form {
  position: relative;
}
.tptrack__id form input, .tptrack__email form input {
  width: 100%;
  height: 60px;
  border: none;
  background-color: var(--tp-common-white);
  padding: 10px 60px;
  border-radius: 6px;
}
.tptrack__id form input::-webkit-input-placeholder, .tptrack__email form input::-webkit-input-placeholder {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #8A94AC;
}
.tptrack__id form input:-moz-placeholder, .tptrack__email form input:-moz-placeholder {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #8A94AC;
}
.tptrack__id form input::-moz-placeholder, .tptrack__email form input::-moz-placeholder {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #8A94AC;
}
.tptrack__id form input:-ms-input-placeholder, .tptrack__email form input:-ms-input-placeholder {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #8A94AC;
}
.tptrack__submition {
  background: var(--tp-heading-primary);
  border-radius: 6px;
  color: var(--tp-common-white);
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 0;
  padding: 22px 50px;
  text-align: center;
  touch-action: manipulation;
  transition: all 0.3s ease 0s;
  vertical-align: middle;
  white-space: nowrap;
  width: 100%;
}
.tptrack__submition i {
  margin-left: 20px;
}
.tptrack__submition:hover, .tptrack__submition.active {
  background-color: var(--tp-heading-secondary);
}

.tptrack__submition.active:hover {
  background-color: #859A00;
}

/*----------------------------------------*/
/*  26. FAQ CSS
/*----------------------------------------*/
.tpfaq__title {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.03em;
  color: #2D2A6E;
}
.tpfaq__content {
  border-bottom: 1px solid var(--tp-border-1);
  margin-bottom: 60px;
  padding-bottom: 35px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tpfaq__content {
    margin-right: 0;
  }
}
.tpfaq__content p, .tpfaq__content span {
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: #4D5574;
}
.tpfaq__content span {
  display: block;
}
.tpfaq__content ul {
  margin-bottom: 20px;
}
.tpfaq__content ul li {
  list-style: none;
  margin-bottom: 20px;
}
.tpfaq__item .accordion-button:not(.collapsed) {
  color: var(--tp-heading-secondary);
}
.tpfaq__item .accordion-button {
  color: var(--tp-text-body);
  font-family: var(--tp-ff-jost);
  background-color: transparent;
  box-shadow: none;
  font-weight: 500;
  font-size: 18px;
  padding: 20px 0 20px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tpfaq__item .accordion-button {
    font-size: 17px;
  }
}
.tpfaq__item .accordion-button::after {
  content: "\f078";
  font-family: "Font Awesome 5 Pro";
  background-image: none;
}
.tpfaq__item .accordion {
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 0;
}
.tpfaq__item .accordion-item {
  color: #b52727;
  border-bottom: 1px solid #E6ECF0;
  font-family: var(--tp-ff-jost);
  font-weight: 400;
  font-size: 16px;
  color: var(--tp-text-body);
}
.tpfaq__item .accordion-body {
  padding: 0 30px 30px 0;
}
.tpfaq__item .accordion-button:not(.collapsed)::after {
  background-image: none;
}

/*----------------------------------------*/
/*  27. FOOTER CSS
/*----------------------------------------*/
.tpfooter__top {
  border-bottom: 1px solid #484492;
}
.tpfooter__widget-title {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  color: var(--tp-common-white);
  margin-bottom: 30px;
}
.tpfooter__widget p {
  color: var(--tp-grey-10);
  font-size: 16px;
  margin-bottom: 0;
}
.tpfooter__widget p a {
  color: var(--tp-heading-secondary);
}
.tpfooter__widget-social a {
  color: var(--tp-common-white);
  font-size: 16px;
  margin-right: 5px;
}
.tpfooter__widget-social a:hover {
  color: var(--tp-heading-secondary);
}
.tpfooter__widget-social-title {
  color: var(--tp-grey-10);
  display: block;
}
.tpfooter__widget-social img {
  width: 100%;
}
.tpfooter__widget-time-info span {
  font-size: 16px;
  color: var(--tp-grey-10);
  display: block;
}
.tpfooter__widget-time-info span b {
  font-weight: 400;
  font-size: 16px;
  color: var(--tp-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tpfooter__widget-time-info span b {
    font-size: 15px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tpfooter__widget-time-info span b {
    font-size: 13px;
  }
}
.tpfooter__widget-links ul li {
  list-style: none;
}
.tpfooter__widget-links ul li a {
  font-size: 16px;
  color: var(--tp-grey-10);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  display: inline-block;
  margin-bottom: 8px;
}
.tpfooter__widget-links ul li a:hover {
  color: var(--tp-common-white);
  padding-left: 8px;
}
.tpfooter__widget-newsletter p {
  font-size: 16px;
  color: var(--tp-common-white);
  margin-bottom: 20px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tpfooter__widget-newsletter p br {
    display: none;
  }
}
.tpfooter__widget-newsletter form {
  position: relative;
}
.tpfooter__widget-newsletter form input {
  border-radius: 3px;
  height: 50px;
  width: 100%;
  background-color: var(--tp-common-white);
  border: none;
  padding: 5px 150px 5px 50px;
}
.tpfooter__widget-newsletter form input::placeholder {
  color: #ACAFB7;
  font-size: 14px;
}
.tpfooter__widget-newsletter form span {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.tpfooter__widget-newsletter-submit {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
}
.tpfooter__widget-newsletter-check .form-check-label {
  font-size: 14px;
  color: var(--tp-common-white);
}
.tpfooter__widget-newsletter-check .form-check-input:checked {
  background-color: var(--tp-heading-secondary);
  border-color: transparent;
}
.tpfooter__widget-newsletter-check .form-check-input:focus {
  box-shadow: none;
}
.tpfooter__widget-newsletter-check .form-check-input.form-check-input[type=checkbox] {
  border-radius: 2px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tpfooter__copyright {
    text-align: center;
  }
}
@media (max-width: 767px), only screen and (min-width: 576px) and (max-width: 767px) {
  .tpfooter__copyright {
    margin-bottom: 20px;
  }
}
.tpfooter__copyright-text {
  font-size: 16px;
  color: var(--tp-grey-10);
}
.tpfooter__copyright-text a {
  color: var(--tp-heading-secondary);
}
@media (max-width: 767px), only screen and (min-width: 576px) and (max-width: 767px) {
  .tpfooter__copyright-thumb {
    text-align: center !important;
  }
}
.tpfooter__copyright-thumb img {
  max-width: 100%;
}
.tpfooter__phone-num {
  font-weight: 500;
  font-size: 30px;
  line-height: 43px;
  color: var(--tp-heading-secondary);
  line-height: 1;
}
.tpfooter__phone-num:hover {
  color: var(--tp-common-white);
}
.tpfooter__border {
  border-top: 3px solid var(--tp-heading-secondary);
}

.footer-col-2 {
  margin-left: -40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer-col-2 {
    margin-left: -15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px), only screen and (min-width: 576px) and (max-width: 767px) {
  .footer-col-2 {
    margin-left: 0px;
  }
}

.footer-col-3 {
  margin-left: -100px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer-col-3 {
    margin-left: -10px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px), only screen and (min-width: 576px) and (max-width: 767px) {
  .footer-col-3 {
    margin-left: 0px;
  }
}

.footer-col-4 {
  margin-left: 60px;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px), only screen and (min-width: 576px) and (max-width: 767px) {
  .footer-col-4 {
    margin-left: 0px;
  }
}
.footer-col-4::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 1px;
  background-color: #484492;
  left: -100px;
  top: 50%;
  transform: translateY(-50%);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px), only screen and (min-width: 576px) and (max-width: 767px) {
  .footer-col-4::before {
    display: none;
  }
}

.footer-border {
  border-top: 2px solid var(--tp-heading-secondary);
}

.product-installments {
    margin-top: 5px;
    color: #000000;  /* Customize the text color */
    font-size: 12px;  /* Adjust size if needed */
}

.product-installments img {
    margin-top: 5px;
}

.tpreview__star-icon .star {
    font-size: 24px;
    cursor: pointer;
    color: #ccc; /* default gray */
    transition: color 0.2s;
}

.tpreview__star-icon .star.filled {
    color: #FFD700; /* gold */
}

.tpreview__comment-star .filled-star {
    color: #FFD700; /* Dark color for filled stars */
}

.tpreview__comment-star .empty-star {
    color: #cccccc; /* Light grey for empty stars */
}

.reviews-list .review-item {
    background-color: #f9f9f9;
    transition: all 0.3s ease;
}

.reviews-list .review-item:hover {
    background-color: #f1f1f1;
}

.review-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.review-stars .filled-star {
    color: #FFD700; /* Dark filled stars */
}

.review-stars .empty-star {
    color: #cccccc; /* Light empty stars */
}

.review-author {
    font-weight: 600;
    font-size: 14px;
}

.review-message {
    font-size: 14px;
    line-height: 1.5;
}

.tpproduct {
  display: flex;
  flex-direction: column;
  /* height: 100%; */
}

.tpproduct__content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 180px; /* adjust if needed */
}

.tpproduct__title {
  min-height: 40px; /* keeps two-line space */
  line-height: 1.3em;
  overflow: hidden;
}

.tpproduct__price {
  min-height: 30px;
}

.product-installments {
  min-height: 40px; /* always reserves space */
  display: flex;
  align-items: center;
  gap: 5px;
}

.tpproduct__hover-btn {
  margin-top: auto; /* pushes button to bottom */
}

/* Desktop modal width */
.modal-dialog {
    max-width: 1000px !important; /* Increase width */
}

/* Mobile responsive */
@media (max-width: 768px) {
    .modal-dialog {
        max-width: 95% !important; /* Take almost full width on mobile */
        margin: 0 auto;
    }
}

/* Add styles for the user info section */
.user-info-container {
    position: relative;
}

/* Hover effect on the user icon */
.user-info-container:hover .user-dropdown {
    display: block;
}

/* Style the dropdown that appears when hovered */
.user-dropdown {
    display: none;
    position: absolute;
    top: 30px; /* Adjust based on your design */
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 200px;
    text-align: center;
    border-radius: 8px;
    z-index: 100;
}

/* Styling for the username text */
.username {
    font-weight: bold;
    margin-bottom: 10px;
}

/* Styling for the logout button */
.logout-btn {
    background-color: #ff4c4c; /* Red color for logout */
    color: #fff;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
}

.logout-btn:hover {
    background-color: #e63946; /* Darker red for hover effect */
}

/* Styling for the icon */
.user-icon i {
    font-size: 24px;
    cursor: pointer;
}


/* Styling for input fields */
.tptrack__input-field {
    width: 100%;
    padding: 12px 15px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    background-color: #f9f9f9;
    color: #333;
    transition: all 0.3s ease;
}

/* Input field focus effect */
.tptrack__input-field:focus {
    border-color: #6200ea; /* Change to desired border color */
    outline: none;
    box-shadow: 0 0 5px rgba(98, 0, 234, 0.5); /* Light shadow for focus */
}

/* Placeholder style */
.tptrack__input-field::placeholder {
    color: #aaa;
}

/* Input field icons */
.tptrack__id i, .tptrack__email i {
    color: #aaa;
    margin-right: 10px;
}

input.tptrack__input-field {
    padding-left: 58px;
   
}

/* Star icons */
/* Star icons */
.icon-star_outline1 {
    color: #ddd; /* Empty star (light grey) */
    font-size: 18px; /* Adjust the size as needed */
    transition: color 0.3s ease;
}

.icon-star_outline1.filled {
    color: rgb(255, 217, 0); /* Filled star (gold) */
}

.product-rating b {
    margin-left: 10px; /* Space between stars and review count */
    color: #333; /* Dark color for text */
    font-weight: 600;
}

.dropdown-item:hover {
    background-color: #e0e0e0 !important; /* Light gray on hover */
    color: #000 !important; /* Keep text black */
}

.product-share {
  position: relative;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  color: #333;
  text-transform: capitalize;
  font-weight: 500;
  transition: color 0.3s;
}

.share-btn i {
  margin-right: 6px;
  font-size: 16px;
}

.share-btn:hover {
  color: #74c043;
}

/* Popup container */
.share-popup {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  display: flex;
  background: #fff;
  border-radius: 50px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  padding: 8px 12px;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 50;
}

/* When active */
.share-popup.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Share buttons */
.share-popup a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
  transition: transform 0.2s, background-color 0.2s;
}

.share-popup a:hover {
  transform: scale(1.1);
}

/* Platform colors */
.share-facebook { background-color: #1877f2; }
.share-twitter { background-color: #000; }
.share-whatsapp { background-color: #25D366; }
.share-email { background-color: #ea4335; }
.share-native { background-color: #6c757d; }

/* Tooltip titles */
.share-popup a[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: -22px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
  transform: translateX(-25%);
}

.payment-methods {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: 1rem;
   margin-top: 1rem;
}

.payment-option {
   position: relative;
   display: block;
   cursor: pointer;
   border-radius: 12px;
   border: 2px solid #e5e7eb;
   background: #fff;
   text-align: center;
   transition: all 0.3s ease;
}

.payment-option input {
   display: none;
}

.payment-card {
   padding: 1rem 0.75rem;
   border-radius: 10px;
   transition: all 0.3s ease;
}

.payment-option:hover {
   border-color: #0ea5e9;
   box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
   transform: translateY(-3px);
}

.payment-option input:checked + .payment-card {
   background: #e0f7ff;
   border-color: #0284c7;
   box-shadow: 0 0 0 2px #0284c7 inset;
}

/* --- Consistent logo size --- */
.payment-logo {
   width: 90px;
   height: 50px;
   object-fit: contain;
   display: block;
   margin: 0 auto 10px auto;
   transition: transform 0.2s ease;
}

.payment-option:hover .payment-logo {
   transform: scale(1.05);
}

/* --- Payment name --- */
.payment-name {
   display: block;
   font-size: 15px;
   font-weight: 600;
   color: #111827;
}

/* --- Responsive adjustments --- */
@media (max-width: 768px) {
   .payment-card {
      padding: 0.75rem 0.5rem;
   }
   .payment-logo {
      width: 80px;
      height: 45px;
   }
   .payment-name {
      font-size: 14px;
   }
}
@media (max-width: 480px) {
   .payment-methods {
      grid-template-columns: repeat(2, 1fr);
   }
}


/* ========================================
   CART & WISHLIST SIDEBAR - ENHANCED
======================================== */
.tpcartinfo,
.tpwishlistinfo {
    position: fixed;
    right: -450px;
    top: 0;
    width: 420px;
    height: 100%;
    background: #ffffff;
    z-index: 9999;
    overflow-y: auto;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tpcartinfo.tp-sidebar-opened,
.tpwishlistinfo.tp-sidebar-opened {
    right: 0;
}

/* Close Button */
.tpcart__close,
.tpwishlist__close {
    position: absolute;
    top: 25px;
    right: 25px;
    background: #f3f4f6;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    color: #6b7280;
    z-index: 1;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tpcart__close:hover,
.tpwishlist__close:hover {
    background: #81b214;
    color: white;
    transform: rotate(90deg);
}

/* Cart/Wishlist Header */
.tpcart {
    padding: 30px 25px;
}

.tpcart__title {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f3f4f6;
}

/* Product List */
.tpcart__product-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tpcart__product-list ul li {
    margin-bottom: 20px;
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Cart Item */
.tpcart__item {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: #f9fafb;
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.tpcart__item:hover {
    background: #ffffff;
    border-color: #81b214;
    box-shadow: 0 4px 12px rgba(129, 178, 20, 0.1);
    transform: translateY(-2px);
}

/* Product Image */
.tpcart__img {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e7eb;
}

.tpcart__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.tpcart__item:hover .tpcart__img img {
    transform: scale(1.05);
}

/* Delete Button */
.tpcart__del {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ef4444;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.tpcart__item:hover .tpcart__del {
    opacity: 1;
}

.tpcart__del a {
    color: white;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tpcart__del:hover {
    background: #dc2626;
    transform: scale(1.1);
}

/* Product Content */
.tpcart__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tpcart__content-title a {
    color: #1f2937;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: block;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.tpcart__content-title a:hover {
    color: #81b214;
}

.tpcart__cart-price {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.tpcart__cart-price .quantity {
    color: #6b7280;
    font-weight: 500;
}

.tpcart__cart-price .new-price {
    color: #81b214;
    font-weight: 700;
    font-size: 16px;
}

/* Empty State */
.tpcart__item p {
    text-align: center;
    color: #9ca3af;
    font-size: 15px;
    padding: 40px 20px;
}

/* Checkout Section */
.tpcart__checkout {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 2px solid #f3f4f6;
}

.tpcart__total-price {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    padding: 18px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.tpcart__total-price span:first-child {
    color: #6b7280;
    font-size: 15px;
    font-weight: 600;
}

.tpcart__total-price .heilight-price {
    color: #81b214;
    font-size: 22px;
    font-weight: 700;
}

/* Checkout Buttons */
.tpcart__checkout-btn {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tpcart-btn,
.tpcheck-btn {
    display: block;
    text-align: center;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.tpcart-btn {
    background: #ffffff;
    color: #81b214;
    border: 2px solid #81b214;
}

.tpcart-btn:hover {
    background: #81b214;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(129, 178, 20, 0.3);
}

.tpcheck-btn {
    background: linear-gradient(135deg, #81b214 0%, #6a9611 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(129, 178, 20, 0.3);
}

.tpcheck-btn:hover {
    background: linear-gradient(135deg, #6a9611 0%, #5a8010 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(129, 178, 20, 0.4);
}

/* Free Shipping Banner */
.tpcart__free-shipping {
    margin-top: 20px;
    padding: 15px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 10px;
    border-left: 4px solid #f59e0b;
}

.tpcart__free-shipping span {
    color: #92400e;
    font-size: 13px;
    font-weight: 500;
}

.tpcart__free-shipping b {
    color: #78350f;
    font-weight: 700;
}

/* Overlay */
.cartbody-overlay,
.wishlistbody-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.cartbody-overlay.opened,
.wishlistbody-overlay.opened {
    opacity: 1;
    visibility: visible;
}

/* Mobile Responsive */
@media (max-width: 575.98px) {
    .tpcartinfo,
    .tpwishlistinfo {
        width: 100%;
        right: -100%;
    }
    
    .tpcart {
        padding: 25px 20px;
    }
    
    .tpcart__img {
        width: 70px;
        height: 70px;
    }
}


/* ========================================
   SCROLLBAR STYLING
======================================== */
.tpcartinfo::-webkit-scrollbar,
.tpwishlistinfo::-webkit-scrollbar {
    width: 8px;
}

.tpcartinfo::-webkit-scrollbar-track,
.tpwishlistinfo::-webkit-scrollbar-track {
    background: #f3f4f6;
}

.tpcartinfo::-webkit-scrollbar-thumb,
.tpwishlistinfo::-webkit-scrollbar-thumb {
    background: #81b214;
    border-radius: 10px;
}

.tpcartinfo::-webkit-scrollbar-thumb:hover,
.tpwishlistinfo::-webkit-scrollbar-thumb:hover {
    background: #6a9611;
}
/* ========================================
   MOBILE BOTTOM NAVIGATION - ENHANCED
======================================== */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 12px 8px 12px 8px;
    box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.1);
    z-index: 999;
    height: 70px;
    border-top: 1px solid #e5e7eb;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Alternative dark background (uncomment to use) */
/*
.mobile-bottom-nav {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
*/

/* Alternative green gradient background (uncomment to use) */
/*
.mobile-bottom-nav {
    background: linear-gradient(180deg, #81b214 0%, #6a9611 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.mobile-bottom-nav .nav-item {
    color: rgba(255, 255, 255, 0.7);
}
.mobile-bottom-nav .nav-item.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
}
*/

.mobile-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    text-decoration: none;
    flex: 1;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 8px 5px;
    border-radius: 12px;
    margin: 0 4px;
    min-height: 50px;
}

/* Icon Container - Ensures all icons are same size and aligned */
.mobile-bottom-nav .nav-item i,
.mobile-bottom-nav .nav-item i img {
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
    margin-bottom: 4px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Fix for Font Awesome icons specifically */
.mobile-bottom-nav .nav-item .fa-home,
.mobile-bottom-nav .nav-item .fa-search,
.mobile-bottom-nav .nav-item .fa-heart,
.mobile-bottom-nav .nav-item .fa-shopping-cart {
    font-size: 24px !important;
    line-height: 24px !important;
}

/* Text Label */
.mobile-bottom-nav .nav-item span:not(.badge) {
    font-size: 11px;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.8;
    margin-top: 2px;
    line-height: 1;
}

/* Active & Hover States */
.mobile-bottom-nav .nav-item.active {
    color: #81b214;
    background: rgba(129, 178, 20, 0.1);
}

.mobile-bottom-nav .nav-item.active i {
    transform: scale(1.15);
}

.mobile-bottom-nav .nav-item.active span:not(.badge) {
    opacity: 1;
    font-weight: 700;
}

.mobile-bottom-nav .nav-item:hover {
    color: #81b214;
    background: rgba(129, 178, 20, 0.06);
}

/* Badge Styling */
.mobile-bottom-nav .nav-item .badge {
    position: absolute;
    top: 4px;
    right: 20%;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border-radius: 20px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    border: 2px solid #ffffff;
    animation: pulse-badge 2s infinite;
    line-height: 1;
}

@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}

/* Active Indicator Dot */
.mobile-bottom-nav .nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: #81b214;
    border-radius: 50%;
}

/* Body Padding */
@media (max-width: 1199.98px) {
    body {
        padding-bottom: 80px;
    }
}

@media (min-width: 1200px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* Extra small devices */
@media (max-width: 374.98px) {
    .mobile-bottom-nav .nav-item {
        margin: 0 2px;
        padding: 8px 3px;
    }
    
    .mobile-bottom-nav .nav-item i {
        font-size: 22px !important;
    }
    
    .mobile-bottom-nav .nav-item span:not(.badge) {
        font-size: 10px;
    }
}

/* ========================================
   MODERN WISHLIST PAGE - COMPLETE DESIGN
======================================== */

:root {
    --primary-green: #81b214;
    --dark-green: #6a9611;
    --light-gray: #f8f9fa;
    --border-color: #e9ecef;
    --text-dark: #212529;
    --text-muted: #6c757d;
}

/* Page Background */
.wishlist-area {
    padding: 40px 0 80px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 60vh;
}

/* Breadcrumb */
.breadcrumb__area {
    background: white;
    padding: 20px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.tp-breadcrumb__list {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tp-breadcrumb__active a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s;
}

.tp-breadcrumb__active a:hover {
    color: var(--primary-green);
}

.tp-breadcrumb__list .dvdr {
    color: var(--border-color);
}

.tp-breadcrumb__list span:last-child {
    color: var(--primary-green);
    font-weight: 600;
    font-size: 14px;
}

/* ========================================
   ENHANCED WISHLIST HEADER
======================================== */

.wishlist-header-modern {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    border-radius: 20px;
    padding: 40px 45px;
    margin-bottom: 30px;
    box-shadow: 0 15px 50px rgba(129, 178, 20, 0.25);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Decorative Background Pattern */
.wishlist-header-modern::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    z-index: 0;
}

.wishlist-header-modern::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    z-index: 0;
}

/* Left Section */
.wishlist-header-left {
    display: flex;
    align-items: center;
    gap: 25px;
    position: relative;
    z-index: 1;
}

/* Icon Container */
.wishlist-header-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.wishlist-header-icon i {
    font-size: 36px;
    color: white;
    animation: heartBeat 1.5s infinite;
}

@keyframes heartBeat {
    0%, 100% {
        transform: scale(1);
    }
    10%, 30% {
        transform: scale(0.9);
    }
    20%, 40% {
        transform: scale(1.1);
    }
}

.wishlist-header-icon:hover {
    transform: rotate(10deg) scale(1.05);
    background: rgba(255, 255, 255, 0.3);
}

/* Title Section */
.wishlist-title-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wishlist-header-title {
    font-size: 32px;
    font-weight: 700;
    color: white;
    margin: 0;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.wishlist-header-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wishlist-count-badge {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.wishlist-count-badge i {
    font-size: 12px;
}

/* Right Section - Action Buttons */
.wishlist-header-actions {
    display: flex;
    gap: 12px;
    position: relative;
    z-index: 1;
}

/* Share Button */
.share-wishlist-btn {
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.share-wishlist-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.share-wishlist-btn i {
    font-size: 16px;
}

/* Clear All Button */
.clear-wishlist-btn {
    padding: 14px 24px;
    background: rgba(220, 53, 69, 0.95);
    backdrop-filter: blur(10px);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.clear-wishlist-btn:hover {
    background: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.5);
}

.clear-wishlist-btn i {
    font-size: 16px;
}

/* Stats Row */
.wishlist-stats-container {
    background: white;
    border-radius: 20px;
    padding: 30px 45px;
    margin-bottom: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

.wishlist-stats-row {
    display: flex;
    gap: 40px;
    justify-content: center;
}

.wishlist-stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.wishlist-stat-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    box-shadow: 0 4px 15px rgba(129, 178, 20, 0.3);
}

.wishlist-stat-info {
    display: flex;
    flex-direction: column;
}

.wishlist-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1;
    margin-bottom: 4px;
}

.wishlist-stat-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ========================================
   WISHLIST GRID
======================================== */

.wishlist-grid-container {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

/* Wishlist Card */
.wishlist-card {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.wishlist-card:hover {
    border-color: var(--primary-green);
    box-shadow: 0 10px 30px rgba(129, 178, 20, 0.15);
    transform: translateY(-5px);
}

/* Product Image */
.wishlist-card-image {
    position: relative;
    height: 280px;
    overflow: hidden;
    background: var(--light-gray);
}

.wishlist-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.wishlist-card:hover .wishlist-card-image img {
    transform: scale(1.1);
}

/* Remove Button */
.wishlist-remove-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    z-index: 2;
    opacity: 0;
}

.wishlist-card:hover .wishlist-remove-icon {
    opacity: 1;
}

.wishlist-remove-icon i {
    color: #dc3545;
    font-size: 16px;
}

.wishlist-remove-icon:hover {
    background: #dc3545;
    transform: rotate(90deg) scale(1.1);
}

.wishlist-remove-icon:hover i {
    color: white;
}

/* Stock Badge */
.stock-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--primary-green);
    color: white;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.stock-badge.out-of-stock {
    background: #dc3545;
}

/* Product Info */
.wishlist-card-body {
    padding: 20px;
}

.wishlist-product-category {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    font-weight: 600;
}

.wishlist-product-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 12px;
    line-height: 1.4;
    display: block;
    text-decoration: none;
    transition: color 0.3s;
    min-height: 44px;
}

.wishlist-product-name:hover {
    color: var(--primary-green);
}

/* Rating */
.wishlist-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 12px;
}

.wishlist-rating i {
    color: #ffc107;
    font-size: 14px;
}

.wishlist-rating i.empty {
    color: #dee2e6;
}

.wishlist-rating-count {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 5px;
}

/* Price */
.wishlist-price-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.wishlist-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-green);
}

.wishlist-price-original {
    font-size: 16px;
    color: var(--text-muted);
    text-decoration: line-through;
}

.wishlist-discount-badge {
    background: #dc3545;
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

/* Add to Cart Button */
.wishlist-add-cart-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
}

.wishlist-add-cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(129, 178, 20, 0.4);
}

.wishlist-add-cart-btn:active {
    transform: translateY(0);
}

.wishlist-add-cart-btn i {
    font-size: 16px;
}

/* Quick Actions */
.wishlist-quick-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.wishlist-view-btn {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-dark);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 13px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.wishlist-view-btn:hover {
    border-color: var(--primary-green);
    color: var(--primary-green);
    background: rgba(129, 178, 20, 0.05);
}

/* ========================================
   EMPTY WISHLIST STATE
======================================== */

.empty-wishlist-modern {
    text-align: center;
    padding: 100px 20px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

.empty-wishlist-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    color: #e91e63;
    animation: floatAnimation 3s ease-in-out infinite;
}

@keyframes floatAnimation {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.empty-wishlist-modern h3 {
    font-size: 28px;
    color: var(--text-dark);
    margin-bottom: 15px;
    font-weight: 700;
}

.empty-wishlist-modern p {
    font-size: 16px;
    color: var(--text-muted);
    margin-bottom: 35px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.browse-products-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 6px 20px rgba(129, 178, 20, 0.3);
}

.browse-products-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(129, 178, 20, 0.4);
    color: white;
}

/* ========================================
   LOADING & ANIMATIONS
======================================== */

.wishlist-card-loading {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

.wishlist-card-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-green);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* ========================================
   TOAST NOTIFICATION
======================================== */

.wishlist-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: white;
    padding: 20px 25px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 9999;
    animation: slideInRight 0.4s ease;
    min-width: 300px;
}

.wishlist-toast.success {
    border-left: 4px solid var(--primary-green);
}

.wishlist-toast.error {
    border-left: 4px solid #dc3545;
}

.wishlist-toast i {
    font-size: 24px;
}

.wishlist-toast.success i {
    color: var(--primary-green);
}

.wishlist-toast.error i {
    color: #dc3545;
}

.wishlist-toast-message {
    flex: 1;
    font-weight: 500;
    color: var(--text-dark);
}

.wishlist-toast-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    transition: color 0.3s;
}

.wishlist-toast-close:hover {
    color: var(--text-dark);
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ========================================
   RESPONSIVE DESIGN
======================================== */

/* Tablet */
@media (max-width: 991.98px) {
    .wishlist-area {
        padding: 30px 0 60px;
    }
    
    .wishlist-header-modern {
        flex-direction: column;
        gap: 25px;
        padding: 35px 30px;
    }
    
    .wishlist-header-left {
        width: 100%;
    }
    
    .wishlist-header-actions {
        width: 100%;
    }
    
    .share-wishlist-btn,
    .clear-wishlist-btn {
        flex: 1;
    }
    
    .wishlist-stats-container {
        padding: 25px 30px;
    }
    
    .wishlist-stats-row {
        gap: 30px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .wishlist-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 20px;
    }
    
    .wishlist-grid-container {
        padding: 30px;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .wishlist-area {
        padding: 20px 0 60px;
    }
    
    .wishlist-header-modern {
        padding: 25px 20px;
        border-radius: 16px;
        margin-bottom: 20px;
    }
    
    .wishlist-header-modern::before,
    .wishlist-header-modern::after {
        display: none;
    }
    
    .wishlist-header-left {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .wishlist-header-icon {
        width: 60px;
        height: 60px;
    }
    
    .wishlist-header-icon i {
        font-size: 30px;
    }
    
    .wishlist-header-title {
        font-size: 24px;
    }
    
    .wishlist-header-subtitle {
        font-size: 13px;
        flex-direction: column;
        gap: 8px;
    }
    
    .wishlist-count-badge {
        font-size: 12px;
        padding: 5px 14px;
    }
    
    .wishlist-header-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .share-wishlist-btn,
    .clear-wishlist-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        font-size: 13px;
    }
    
    .wishlist-stats-container {
        padding: 20px;
        border-radius: 16px;
        margin-bottom: 20px;
    }
    
    .wishlist-stats-row {
        flex-direction: column;
        gap: 20px;
    }
    
    .wishlist-stat-item {
        justify-content: center;
    }
    
    .wishlist-grid-container {
        padding: 20px;
        border-radius: 16px;
    }
    
    .wishlist-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 15px;
    }
    
    .wishlist-card-image {
        height: 200px;
    }
    
    .wishlist-card-body {
        padding: 15px;
    }
    
    .wishlist-product-name {
        font-size: 14px;
        min-height: auto;
    }
    
    .wishlist-price {
        font-size: 18px;
    }
    
    .wishlist-price-original {
        font-size: 14px;
    }
    
    .wishlist-add-cart-btn {
        padding: 12px;
        font-size: 13px;
    }
    
    .wishlist-view-btn {
        font-size: 12px;
        padding: 8px;
    }
    
    .empty-wishlist-modern {
        padding: 60px 20px;
    }
    
    .empty-wishlist-icon {
        width: 100px;
        height: 100px;
        font-size: 50px;
    }
    
    .empty-wishlist-modern h3 {
        font-size: 22px;
    }
    
    .empty-wishlist-modern p {
        font-size: 14px;
    }
    
    .wishlist-toast {
        bottom: 90px;
        left: 15px;
        right: 15px;
        min-width: auto;
    }
}

/* Small Mobile */
@media (max-width: 575.98px) {
    .wishlist-header-modern {
        padding: 20px 15px;
    }
    
    .wishlist-header-title {
        font-size: 20px;
    }
    
    .wishlist-grid {
        grid-template-columns: 1fr;
    }
    
    .wishlist-card-image {
        height: 250px;
    }
    
    .wishlist-quick-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .wishlist-stat-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
    
    .wishlist-stat-value {
        font-size: 20px;
    }
}

/* Landscape Mobile */
@media (max-width: 767.98px) and (orientation: landscape) {
    .wishlist-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    
    .wishlist-card-image {
        height: 180px;
    }
    
    .empty-wishlist-modern {
        padding: 40px 20px;
    }
}

/* ========================================
   MODERN CHECKOUT PAGE - COMPLETE DESIGN
======================================== */

:root {
    --primary-green: #81b214;
    --dark-green: #6a9611;
    --light-gray: #f8f9fa;
    --border-color: #e9ecef;
    --text-dark: #212529;
    --text-muted: #6c757d;
}

/* Page Background */
.checkout-area {
    padding: 40px 0 80px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 60vh;
}

/* Breadcrumb */
.breadcrumb__area {
    background: white;
    padding: 20px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.tp-breadcrumb__list {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tp-breadcrumb__active a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s;
}

.tp-breadcrumb__active a:hover {
    color: var(--primary-green);
}

.tp-breadcrumb__list .dvdr {
    color: var(--border-color);
}

.tp-breadcrumb__list span:last-child {
    color: var(--primary-green);
    font-weight: 600;
    font-size: 14px;
}

/* ========================================
   COUPON AREA - ENHANCED
======================================== */

.coupon-area {
    background: transparent;
}

.coupon-accordion {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}

.coupon-accordion:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.coupon-accordion h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
    cursor: pointer;
}

.coupon-accordion h3 span {
    color: var(--primary-green);
    text-decoration: underline;
    transition: color 0.3s;
}

.coupon-accordion h3 span:hover {
    color: var(--dark-green);
}

.coupon-content,
.coupon-checkout-content {
    display: none;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid var(--border-color);
}

.coupon-text {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.6;
}

.form-row-first,
.form-row-last,
.form-row {
    margin-bottom: 15px;
}

.form-row-first label,
.form-row-last label {
    display: block;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    font-size: 14px;
}

.required {
    color: #dc3545;
}

.form-row-first input,
.form-row-last input,
.checkout-coupon input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s;
}

.form-row-first input:focus,
.form-row-last input:focus,
.checkout-coupon input:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(129, 178, 20, 0.1);
}

.form-row {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.form-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
}

.form-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.lost-password {
    margin-top: 10px;
}

.lost-password a {
    color: var(--primary-green);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}

.lost-password a:hover {
    color: var(--dark-green);
    text-decoration: underline;
}

.checkout-coupon {
    display: flex;
    gap: 10px;
}

.checkout-coupon input {
    flex: 1;
}

.checkout-coupon button {
    white-space: nowrap;
}

/* ========================================
   BILLING DETAILS - MODERN CARD
======================================== */

.modern-billing-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    margin-bottom: 30px;
}

.modern-billing-card h3 {
    font-size: 24px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.modern-billing-card h3::before {
    content: '';
    width: 4px;
    height: 30px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    border-radius: 10px;
}

.form-label {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 14px;
    margin-bottom: 8px;
}

.form-control,
.form-select {
    padding: 12px 15px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s;
}

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(129, 178, 20, 0.1);
}

.custom-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2381b214' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 12px;
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

.form-check-input {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    cursor: pointer;
}

.form-check-input:checked {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
}

.form-check-label {
    font-size: 14px;
    color: var(--text-dark);
    cursor: pointer;
    margin-left: 5px;
}

/* ========================================
   ORDER SUMMARY - MODERN CARD
======================================== */

.modern-order-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    position: sticky;
    top: 100px;
}

.modern-order-card h3,
.modern-order-card h4 {
    font-size: 24px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.modern-order-card h3::before {
    content: '';
    width: 4px;
    height: 30px;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    border-radius: 10px;
}

/* Order Table */
.order-table {
    margin-bottom: 0;
}

.order-table thead {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.order-table thead th {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    padding: 15px;
    border: none;
}

.order-table tbody td {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}

.product-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid var(--border-color);
}

.order-table tfoot th,
.order-table tfoot td {
    padding: 15px;
    border-top: 2px solid var(--border-color);
}



/* ========================================
   PROGRESS STEPS (OPTIONAL)
======================================== */

.checkout-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

.checkout-step {
    flex: 1;
    text-align: center;
    position: relative;
}

.checkout-step::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    width: 100%;
    height: 3px;
    background: var(--border-color);
    z-index: 0;
}

.checkout-step:last-child::after {
    display: none;
}

.step-number {
    width: 40px;
    height: 40px;
    background: var(--border-color);
    color: var(--text-muted);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
}

.checkout-step.active .step-number {
    background: var(--primary-green);
    color: white;
}

.step-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
}

.checkout-step.active .step-title {
    color: var(--primary-green);
}

/* ========================================
   SECURITY BADGES
======================================== */

.security-badges {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 30px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
}

.security-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.security-badge i {
    color: var(--primary-green);
    font-size: 18px;
}

/* ========================================
   RESPONSIVE DESIGN
======================================== */

/* Tablet */
@media (max-width: 991.98px) {
    .checkout-area {
        padding: 30px 0 60px;
    }
    
    .modern-order-card {
        position: static;
        margin-top: 30px;
    }
    
    .coupon-accordion {
        margin-bottom: 20px;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .checkout-area {
        padding: 20px 0 60px;
    }
    
    .modern-billing-card,
    .modern-order-card {
        padding: 25px 20px;
        border-radius: 16px;
    }
    
    .modern-billing-card h3,
    .modern-order-card h3,
    .modern-order-card h4 {
        font-size: 20px;
    }
    
    .coupon-accordion {
        padding: 20px;
        border-radius: 12px;
    }
    
    .coupon-accordion h3 {
        font-size: 14px;
    }
    
    .checkout-coupon {
        flex-direction: column;
    }
    
    .checkout-coupon button {
        width: 100%;
    }
    
    .payment-methods {
        flex-direction: column;
    }
    
    .payment-option {
        min-width: 100%;
    }
    
    .product-thumb {
        width: 50px;
        height: 50px;
    }
    
    .order-table thead th,
    .order-table tbody td,
    .order-table tfoot th,
    .order-table tfoot td {
        padding: 10px;
        font-size: 13px;
    }
    
    .checkout-steps {
        padding: 20px 15px;
        border-radius: 16px;
    }
    
    .step-number {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    
    .step-title {
        font-size: 12px;
    }
    
    .security-badges {
        flex-direction: column;
        align-items: center;
    }
}

/* Small Mobile */
@media (max-width: 575.98px) {
    .modern-billing-card h3::before,
    .modern-order-card h3::before {
        height: 24px;
    }
    
    .form-control,
    .form-select {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .order-table {
        font-size: 12px;
    }
    
    .checkout-steps {
        overflow-x: auto;
    }
}

/* ========================================
   LOADING STATE
======================================== */

.checkout-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.checkout-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--primary-green);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   ANIMATIONS
======================================== */

.fade-in {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




/* ========================================
   MAIN SLIDER SECTION
======================================== */

.hero-slider-modern {
    position: relative;
    overflow: hidden;
    background: #000;
}

.hero-slider-container {
    position: relative;
}

/* Individual Slide */
.hero-slide {
    position: relative;
    min-height: 774px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover !important;
    background-repeat: no-repeat;
}

/* Overlay with Gradient */
.hero-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.6) 0%, 
        rgba(0, 0, 0, 0.3) 50%,
        rgba(129, 178, 20, 0.3) 100%);
    z-index: 1;
}

/* Decorative Animated Shapes */
.hero-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.hero-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(129, 178, 20, 0.1);
    backdrop-filter: blur(20px);
}

.hero-shape-1 {
    width: 400px;
    height: 400px;
    top: -100px;
    left: -100px;
    animation: float 20s ease-in-out infinite;
}

.hero-shape-2 {
    width: 300px;
    height: 300px;
    bottom: -80px;
    right: -80px;
    animation: float 15s ease-in-out infinite 5s;
}

.hero-shape-3 {
    width: 200px;
    height: 200px;
    top: 40%;
    right: 10%;
    animation: float 18s ease-in-out infinite 10s;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -30px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

/* ========================================
   HERO CONTENT
======================================== */

.hero-content-wrapper {
    position: relative;
    z-index: 2;
    padding: 80px 0;
    text-align: center;
}

/* Brand Logo */
.hero-brand {
    margin-bottom: 30px;
    animation: fadeInDown 1s ease 0.3s both;
}

.hero-brand-image {
    max-width: 180px;
    height: auto;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s;
}

.hero-brand-image:hover {
    transform: scale(1.05);
}

/* Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 25px;
    animation: fadeInDown 1s ease 0.5s both;
}

.hero-badge-icon {
    width: 24px;
    height: 24px;
    background: var(--primary-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
}

.hero-badge-text {
    font-size: 13px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Main Title */
.hero-title {
    font-size: 72px;
    font-weight: 700;
    color: white;
    line-height: 1.2;
    margin-bottom: 20px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    animation: fadeInUp 1s ease 0.7s both;
}

.hero-title-highlight {
    background: linear-gradient(135deg, var(--primary-green) 0%, #a8e054 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline-block;
}

/* Subtitle */
.hero-subtitle {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto 40px;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease 0.9s both;
}

/* Buttons */
.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease 1.1s both;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.hero-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    z-index: -1;
}

.hero-btn:hover::before {
    width: 400px;
    height: 400px;
}

.hero-btn-primary {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    color: white;
    box-shadow: 0 8px 30px rgba(129, 178, 20, 0.4);
}

.hero-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(129, 178, 20, 0.5);
    color: white;
}

.hero-btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.hero-btn-secondary:hover {
    background: white;
    color: var(--primary-green);
    border-color: white;
    transform: translateY(-3px);
}

.hero-btn i {
    font-size: 18px;
    transition: transform 0.3s;
}

.hero-btn:hover i {
    transform: translateX(5px);
}

/* Features List */
.hero-features {
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease 1.3s both;
}

.hero-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-feature-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-green);
    font-size: 22px;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.hero-feature-text {
    text-align: left;
}

.hero-feature-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.hero-feature-value {
    font-size: 16px;
    font-weight: 700;
    color: white;
}

/* ========================================
   SLIDER NAVIGATION
======================================== */

/* Arrows */
.hero-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
}

.hero-arrow {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}

.hero-arrow:hover {
    background: var(--primary-green);
    border-color: var(--primary-green);
    transform: scale(1.1);
}

.hero-arrow-prev {
    left: 40px;
}

.hero-arrow-next {
    right: 40px;
}

/* Pagination */
.hero-pagination {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    background: rgba(255, 255, 255, 0.4);
    opacity: 1;
    border-radius: 50%;
    transition: all 0.3s;
    cursor: pointer;
}

.swiper-pagination-bullet-active {
    width: 45px;
    border-radius: 10px;
    background: white;
}

/* ========================================
   SCROLL INDICATOR
======================================== */

.hero-scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    animation: bounce 2s infinite;
}

.scroll-mouse {
    width: 30px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-radius: 25px;
    position: relative;
}

.scroll-wheel {
    width: 6px;
    height: 10px;
    background: white;
    border-radius: 3px;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll 2s infinite;
}

@keyframes scroll {
    0% {
        top: 10px;
        opacity: 1;
    }
    100% {
        top: 30px;
        opacity: 0;
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* ========================================
   ANIMATIONS
======================================== */

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   RESPONSIVE DESIGN
======================================== */

/* Large Desktops */
@media (max-width: 1399.98px) {
    .hero-title {
        font-size: 64px;
    }
    
    .hero-slide {
        min-height: 650px;
    }
}

/* Desktops */
@media (max-width: 1199.98px) {
    .hero-title {
        font-size: 56px;
    }
    
    .hero-subtitle {
        font-size: 18px;
    }
    
    .hero-slide {
        min-height: 600px;
    }
    
    .hero-arrow {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    
    .hero-arrow-prev {
        left: 30px;
    }
    
    .hero-arrow-next {
        right: 30px;
    }
}

/* Tablets */
@media (max-width: 991.98px) {
    .hero-slide {
        min-height: 550px;
    }
    
    .hero-content-wrapper {
        padding: 60px 0;
    }
    
    .hero-title {
        font-size: 48px;
    }
    
    .hero-subtitle {
        font-size: 16px;
        max-width: 500px;
    }
    
    .hero-btn {
        padding: 16px 35px;
        font-size: 15px;
    }
    
    .hero-features {
        gap: 30px;
        margin-top: 40px;
    }
    
    .hero-arrow {
        display: none;
    }
    
    .hero-shape-1 {
        width: 300px;
        height: 300px;
    }
    
    .hero-shape-2 {
        width: 250px;
        height: 250px;
    }
    
    .hero-shape-3 {
        width: 150px;
        height: 150px;
    }
}

/* Mobile Landscape */
@media (max-width: 767.98px) {
    .hero-slide {
        min-height: 500px;
    }
    
    .hero-content-wrapper {
        padding: 50px 0;
    }
    
    .hero-brand-image {
        max-width: 140px;
    }
    
    .hero-badge {
        padding: 8px 20px;
        margin-bottom: 20px;
    }
    
    .hero-badge-text {
        font-size: 11px;
    }
    
    .hero-title {
        font-size: 36px;
        margin-bottom: 16px;
    }
    
    .hero-subtitle {
        font-size: 15px;
        max-width: 400px;
        margin-bottom: 30px;
    }
    
    .hero-buttons {
        gap: 15px;
    }
    
    .hero-btn {
        padding: 14px 30px;
        font-size: 14px;
    }
    
    .hero-features {
        flex-direction: column;
        gap: 20px;
        margin-top: 35px;
    }
    
    .hero-feature-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
    
    .hero-pagination {
        bottom: 25px;
    }
    
    .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
    }
    
    .swiper-pagination-bullet-active {
        width: 30px;
    }
    
    .hero-scroll-indicator {
        display: none;
    }
}

/* Mobile Portrait */
@media (max-width: 575.98px) {
    .hero-slide {
        min-height: 480px;
    }
    
    .hero-content-wrapper {
        padding: 70px 0;
    }
    
    .hero-brand-image {
        max-width: 120px;
    }
    
    .hero-badge {
        padding: 6px 18px;
        margin-bottom: 18px;
    }
    
    .hero-badge-icon {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }
    
    .hero-badge-text {
        font-size: 10px;
    }
    
    .hero-title {
        font-size: 32px;
        margin-bottom: 14px;
    }
    
    .hero-subtitle {
        font-size: 14px;
        max-width: 320px;
        margin-bottom: 28px;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }
    
    .hero-btn {
        padding: 13px 28px;
        font-size: 13px;
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .hero-feature-item {
        width: 100%;
        justify-content: center;
    }
    
    .hero-feature-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .hero-feature-label {
        font-size: 11px;
    }
    
    .hero-feature-value {
        font-size: 14px;
    }
    
    .hero-shapes {
        display: none;
    }
}

/* Extra Small Mobile */
@media (max-width: 400px) {
    .hero-slide {
        min-height: 450px;
    }
    
    .hero-title {
        font-size: 28px;
    }
    
    .hero-subtitle {
        font-size: 13px;
    }
    
    .hero-btn {
        padding: 12px 24px;
        font-size: 12px;
    }
}



/* ========================================
   MODERN LOGIN PAGE - BEST STYLES
======================================== */

/* Main Container */
.modern-auth-main {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.modern-auth-main::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(129, 196, 8, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Login Section */
.modern-login-section {
    position: relative;
    z-index: 1;
}

/* Login Wrapper - Two Column Layout */
.modern-login-wrapper {
    display: flex;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    min-height: 650px;
}

/* Left Side - Welcome Content */
.modern-login-left {
    flex: 1;
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    padding: 60px 50px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
    overflow: hidden;
}

/* Brand Logo */
.modern-login-brand {
    margin-bottom: 40px;
}

.modern-brand-logo {
    max-width: 180px;
    height: auto;
    filter: brightness(0) invert(1);
}

/* Welcome Content */
.modern-welcome-content {
    flex: 1;
}

.modern-welcome-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #ffffff;
    animation: fadeInUp 0.8s ease;
}

.modern-welcome-text {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 50px;
    opacity: 0.95;
    animation: fadeInUp 1s ease;
}

/* Features List */
.modern-features {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.modern-feature-item {
    display: flex;
    align-items: center;
    gap: 20px;
    animation: fadeInLeft 1.2s ease;
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.modern-feature-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(10px);
}

.modern-feature-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modern-feature-icon i {
    font-size: 28px;
    color: #ffffff;
}

.modern-feature-text h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #ffffff;
}

.modern-feature-text p {
    font-size: 14px;
    margin-bottom: 0;
    opacity: 0.9;
}

/* Decorative Circles */
.modern-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.modern-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 6s ease-in-out infinite;
}

.modern-circle-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

.modern-circle-2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
    animation-delay: 2s;
}

.modern-circle-3 {
    width: 150px;
    height: 150px;
    top: 50%;
    right: -75px;
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-20px) scale(1.05);
    }
}

/* Right Side - Login Form */
.modern-login-right {
    flex: 1;
    padding: 60px 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modern-login-card {
    width: 100%;
    max-width: 450px;
}

/* Card Header */
.modern-card-header {
    text-align: center;
    margin-bottom: 35px;
}

.modern-card-title {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.modern-card-subtitle {
    font-size: 15px;
    color: #666;
    margin-bottom: 0;
}

/* Alert Messages */
.modern-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 25px;
    font-size: 14px;
    animation: slideDown 0.5s ease;
}

.modern-alert i {
    font-size: 18px;
}

.modern-alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.modern-alert-danger {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form */
.modern-login-form {
    margin-top: 30px;
}

.modern-form-group {
    margin-bottom: 25px;
}

.modern-form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.modern-input-wrapper {
    position: relative;
}

.modern-form-input {
    width: 100%;
    height: 52px;
    padding: 0 50px 0 48px;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    font-size: 15px;
    color: #333;
    background: #f8f9fa;
    transition: all 0.3s ease;
}

.modern-form-input:focus {
    outline: none;
    border-color: #81c408;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(129, 196, 8, 0.1);
}

.modern-form-input::placeholder {
    color: #aaa;
}

.modern-input-error {
    border-color: #dc3545 !important;
}

.modern-input-error:focus {
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1) !important;
}

.modern-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 18px;
    pointer-events: none;
    transition: color 0.3s ease;
}

.modern-form-input:focus ~ .modern-input-icon {
    color: #81c408;
}

.modern-password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #aaa;
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s ease;
}

.modern-password-toggle:hover {
    color: #81c408;
}

.modern-error-message {
    display: block;
    font-size: 13px;
    color: #dc3545;
    margin-top: 8px;
    animation: shake 0.5s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Form Options */
.modern-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

/* Custom Checkbox */
.modern-checkbox {
    position: relative;
}

.modern-checkbox-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.modern-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.modern-checkbox-box {
    width: 20px;
    height: 20px;
    border: 2px solid #e8e8e8;
    border-radius: 5px;
    position: relative;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.modern-checkbox-input:checked ~ .modern-checkbox-label .modern-checkbox-box {
    background: #81c408;
    border-color: #81c408;
}

.modern-checkbox-input:checked ~ .modern-checkbox-label .modern-checkbox-box::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 11px;
}

.modern-checkbox-text {
    font-size: 14px;
    color: #666;
}

.modern-forgot-link {
    font-size: 14px;
    color: #81c408;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.modern-forgot-link:hover {
    color: #6da307;
    text-decoration: underline;
}

/* Submit Button */
.modern-submit-btn {
    width: 100%;
    height: 52px;
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(129, 196, 8, 0.3);
    position: relative;
    overflow: hidden;
}

.modern-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: left 0.5s ease;
}

.modern-submit-btn:hover::before {
    left: 100%;
}

.modern-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(129, 196, 8, 0.4);
}

.modern-submit-btn i {
    transition: transform 0.3s ease;
}

.modern-submit-btn:hover i {
    transform: translateX(5px);
}

/* Divider */
.modern-divider {
    position: relative;
    text-align: center;
    margin: 30px 0;
}

.modern-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e8e8e8;
}

.modern-divider span {
    position: relative;
    background: #ffffff;
    padding: 0 15px;
    font-size: 13px;
    color: #999;
    font-weight: 500;
}

/* Social Login */
.modern-social-login {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
}

.modern-social-btn {
    height: 48px;
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.modern-google-btn {
    color: #db4437;
}

.modern-google-btn:hover {
    background: #db4437;
    border-color: #db4437;
    color: #ffffff;
}

.modern-facebook-btn {
    color: #1877f2;
}

.modern-facebook-btn:hover {
    background: #1877f2;
    border-color: #1877f2;
    color: #ffffff;
}

.modern-social-btn i {
    font-size: 18px;
}

/* Sign Up Link */
.modern-signup-link {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #e8e8e8;
}

.modern-signup-link p {
    font-size: 14px;
    color: #666;
    margin-bottom: 0;
}

.modern-signup-link a {
    color: #81c408;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.modern-signup-link a:hover {
    color: #6da307;
    text-decoration: underline;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive Design */
@media (max-width: 991px) {
    .modern-login-wrapper {
        flex-direction: column;
        min-height: auto;
    }
    
    .modern-login-left {
        padding: 50px 40px;
    }
    
    .modern-welcome-title {
        font-size: 36px;
    }
    
    .modern-features {
        gap: 20px;
    }
    
    .modern-login-right {
        padding: 50px 40px;
    }
}

@media (max-width: 767px) {
    .modern-login-wrapper {
        border-radius: 16px;
        margin: 20px;
    }
    
    .modern-login-left {
        padding: 40px 30px;
    }
    
    .modern-welcome-title {
        font-size: 30px;
    }
    
    .modern-welcome-text {
        font-size: 15px;
        margin-bottom: 35px;
    }
    
    .modern-feature-item {
        padding: 15px;
    }
    
    .modern-feature-icon {
        width: 50px;
        height: 50px;
    }
    
    .modern-feature-icon i {
        font-size: 24px;
    }
    
    .modern-login-right {
        padding: 40px 30px;
    }
    
    .modern-card-title {
        font-size: 28px;
    }
    
    .modern-social-login {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .modern-login-left {
        padding: 30px 20px;
    }
    
    .modern-welcome-title {
        font-size: 26px;
    }
    
    .modern-login-right {
        padding: 30px 20px;
    }
    
    .modern-card-title {
        font-size: 24px;
    }
    
    .modern-form-input {
        height: 48px;
        padding: 0 45px 0 45px;
    }
    
    .modern-submit-btn {
        height: 48px;
    }
}

/* Loading State */
.modern-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.modern-submit-btn.loading {
    pointer-events: none;
}

.modern-submit-btn.loading span {
    opacity: 0;
}

.modern-submit-btn.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #ffffff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Mobile Responsive - Full Screen with 5px padding */

/* Tablet and below (991px) */
@media (max-width: 991px) {
    .modern-login-wrapper {
        flex-direction: column;
        min-height: auto;
    }
    
    .modern-login-left {
        padding: 50px 40px;
    }
    
    .modern-welcome-title {
        font-size: 36px;
    }
    
    .modern-features {
        gap: 20px;
    }
    
    .modern-login-right {
        padding: 50px 40px;
    }
}

/* Tablet (768px - 991px) */
@media (max-width: 767px) {
    /* Full Screen Setup with 5px padding */
    .modern-login-section {
        padding: 5px;
    }
    
    .modern-login-section .container {
        padding: 0;
        max-width: 100%;
    }
    
    .modern-login-section .row {
        margin: 0;
        min-height: calc(100vh - 10px);
    }
    
    .modern-login-section .col-lg-10,
    .modern-login-section .col-xl-9 {
        padding: 0;
        max-width: 100%;
    }
    
    .modern-login-wrapper {
        border-radius: 10px;
        margin: 0;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        min-height: calc(100vh - 10px);
        display: flex;
        flex-direction: column;
    }
    
    .modern-login-left {
        padding: 40px 25px;
        min-height: auto;
        border-radius: 10px 10px 0 0;
    }
    
    .modern-welcome-title {
        font-size: 28px;
    }
    
    .modern-welcome-text {
        font-size: 14px;
        margin-bottom: 30px;
    }
    
    .modern-feature-item {
        padding: 15px;
    }
    
    .modern-feature-icon {
        width: 50px;
        height: 50px;
    }
    
    .modern-feature-icon i {
        font-size: 22px;
    }
    
    .modern-feature-text h4 {
        font-size: 15px;
    }
    
    .modern-feature-text p {
        font-size: 13px;
    }
    
    .modern-login-right {
        padding: 40px 25px;
        flex: 1;
    }
    
    .modern-card-title {
        font-size: 26px;
    }
    
    .modern-card-subtitle {
        font-size: 14px;
    }
    
    .modern-social-login {
        grid-template-columns: 1fr;
    }
}

/* Mobile (575px and below) */
@media (max-width: 575px) {
    /* Full Screen Mobile with 5px padding */
    .modern-login-section {
        padding: 5px;
    }
    
    .modern-login-section .row {
        min-height: calc(100vh - 10px);
        padding: 0;
    }
    
    .modern-login-wrapper {
        border-radius: 10px;
        min-height: calc(100vh - 10px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    
    .modern-login-left {
        padding: 30px 20px;
        min-height: auto;
        border-radius: 10px 10px 0 0;
    }
    
    .modern-brand-logo {
        max-width: 140px;
    }
    
    .modern-welcome-title {
        font-size: 24px;
        margin-bottom: 15px;
    }
    
    .modern-welcome-text {
        font-size: 13px;
        margin-bottom: 25px;
    }
    
    .modern-features {
        gap: 15px;
    }
    
    .modern-feature-item {
        padding: 12px;
        border-radius: 10px;
    }
    
    .modern-feature-icon {
        width: 45px;
        height: 45px;
    }
    
    .modern-feature-icon i {
        font-size: 20px;
    }
    
    .modern-feature-text h4 {
        font-size: 14px;
        margin-bottom: 3px;
    }
    
    .modern-feature-text p {
        font-size: 12px;
    }
    
    .modern-login-right {
        padding: 30px 20px;
    }
    
    .modern-login-card {
        max-width: 100%;
    }
    
    .modern-card-header {
        margin-bottom: 25px;
    }
    
    .modern-card-title {
        font-size: 24px;
    }
    
    .modern-card-subtitle {
        font-size: 13px;
    }
    
    .modern-form-group {
        margin-bottom: 20px;
    }
    
    .modern-form-label {
        font-size: 13px;
        margin-bottom: 8px;
    }
    
    .modern-form-input {
        height: 48px;
        padding: 0 45px 0 45px;
        font-size: 14px;
    }
    
    .modern-input-icon {
        font-size: 16px;
        left: 14px;
    }
    
    .modern-password-toggle {
        right: 14px;
        font-size: 16px;
    }
    
    .modern-form-options {
        margin-bottom: 25px;
        gap: 12px;
    }
    
    .modern-checkbox-text {
        font-size: 13px;
    }
    
    .modern-forgot-link {
        font-size: 13px;
    }
    
    .modern-submit-btn {
        height: 48px;
        font-size: 15px;
    }
    
    .modern-divider {
        margin: 25px 0;
    }
    
    .modern-divider span {
        font-size: 12px;
    }
    
    .modern-social-btn {
        height: 46px;
        font-size: 13px;
    }
    
    .modern-signup-link {
        padding-top: 15px;
    }
    
    .modern-signup-link p {
        font-size: 13px;
    }
    
    /* Hide decoration on mobile */
    .modern-decoration {
        display: none;
    }
}

/* Extra Small Mobile (400px and below) */
@media (max-width: 400px) {
    .modern-login-left {
        padding: 25px 15px;
    }
    
    .modern-brand-logo {
        max-width: 120px;
    }
    
    .modern-welcome-title {
        font-size: 22px;
    }
    
    .modern-welcome-text {
        font-size: 12px;
    }
    
    .modern-login-right {
        padding: 25px 15px;
    }
    
    .modern-card-title {
        font-size: 22px;
    }
    
    .modern-form-input {
        height: 46px;
        padding: 0 42px 0 42px;
        font-size: 13px;
    }
    
    .modern-submit-btn {
        height: 46px;
        font-size: 14px;
    }
}

/* Feature Area Mobile */
@media (max-width: 767px) {
    .feature-area {
        padding-top: 30px !important;
        padding-bottom: 20px !important;
    }
    
    .mainfeature__border {
        padding-bottom: 10px !important;
    }
    
    .mainfeature__item {
        margin-bottom: 15px !important;
    }
    
    .mainfeature__icon img {
        max-width: 35px;
    }
    
    .mainfeature__title {
        font-size: 13px !important;
        margin-bottom: 3px;
    }
    
    .mainfeature__content p {
        font-size: 11px;
    }
}

@media (max-width: 575px) {    
    .mainfeature__item {
        padding: 10px;
        margin-bottom: 10px !important;
    }
}

/* Landscape Mobile Fix */
@media (max-width: 767px) and (orientation: landscape) {
    .modern-login-wrapper {
        min-height: auto;
    }
    
    .modern-login-section .row {
        min-height: auto;
    }
    
    .modern-login-left {
        padding: 25px 20px;
    }
    
    .modern-welcome-content {
        margin-bottom: 20px;
    }
    
    .modern-features {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .modern-feature-item {
        flex: 0 0 calc(50% - 5px);
        padding: 10px;
    }
}



/* ========================================
   MODERN REGISTER PAGE STYLES
======================================== */

/* Main Container */
.modern-auth-main {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.modern-auth-main::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(129, 196, 8, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Register Section */
.modern-register-section {
    position: relative;
    z-index: 1;
}

/* Register Wrapper - Two Column Layout */
.modern-register-wrapper {
    display: flex;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    min-height: 700px;
}

/* Left Side - Welcome Content */
.modern-register-left {
    flex: 1;
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    padding: 60px 50px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
    overflow: hidden;
}

/* Brand Logo */
.modern-register-brand {
    margin-bottom: 40px;
}

.modern-brand-logo {
    max-width: 180px;
    height: auto;
    filter: brightness(0) invert(1);
}

/* Welcome Content */
.modern-welcome-content {
    flex: 1;
}

.modern-welcome-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #ffffff;
    animation: fadeInUp 0.8s ease;
}

.modern-welcome-text {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 50px;
    opacity: 0.95;
    animation: fadeInUp 1s ease;
}

/* Benefits List */
.modern-benefits {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.modern-benefit-item {
    display: flex;
    align-items: center;
    gap: 20px;
    animation: fadeInLeft 1.2s ease;
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.modern-benefit-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(10px);
}

.modern-benefit-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modern-benefit-icon i {
    font-size: 28px;
    color: #ffffff;
}

.modern-benefit-text h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #ffffff;
}

.modern-benefit-text p {
    font-size: 14px;
    margin-bottom: 0;
    opacity: 0.9;
}

/* Decorative Circles */
.modern-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.modern-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 6s ease-in-out infinite;
}

.modern-circle-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

.modern-circle-2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
    animation-delay: 2s;
}

.modern-circle-3 {
    width: 150px;
    height: 150px;
    top: 50%;
    right: -75px;
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-20px) scale(1.05);
    }
}

/* Right Side - Register Form */
.modern-register-right {
    flex: 1;
    padding: 60px 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.modern-register-card {
    width: 100%;
    max-width: 450px;
}

/* Card Header */
.modern-card-header {
    text-align: center;
    margin-bottom: 30px;
}

.modern-card-title {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.modern-card-subtitle {
    font-size: 15px;
    color: #666;
    margin-bottom: 0;
}

/* Alert Messages */
.modern-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 25px;
    font-size: 14px;
    animation: slideDown 0.5s ease;
}

.modern-alert i {
    font-size: 18px;
    margin-top: 2px;
}

.modern-alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.modern-alert-danger {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.modern-alert ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.modern-alert li {
    margin-bottom: 3px;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form */
.modern-register-form {
    margin-top: 25px;
}

.modern-form-group {
    margin-bottom: 20px;
}

.modern-form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.modern-input-wrapper {
    position: relative;
}

.modern-form-input {
    width: 100%;
    height: 50px;
    padding: 0 50px 0 48px;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    font-size: 15px;
    color: #333;
    background: #f8f9fa;
    transition: all 0.3s ease;
}

.modern-form-input:focus {
    outline: none;
    border-color: #81c408;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(129, 196, 8, 0.1);
}

.modern-form-input::placeholder {
    color: #aaa;
}

.modern-input-error {
    border-color: #dc3545 !important;
}

.modern-input-error:focus {
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1) !important;
}

.modern-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 18px;
    pointer-events: none;
    transition: color 0.3s ease;
}

.modern-form-input:focus ~ .modern-input-icon {
    color: #81c408;
}

.modern-password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #aaa;
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s ease;
}

.modern-password-toggle:hover {
    color: #81c408;
}

.modern-error-message {
    display: block;
    font-size: 13px;
    color: #dc3545;
    margin-top: 8px;
    animation: shake 0.5s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Password Strength Indicator */
.password-strength {
    margin-top: 10px;
}

.strength-bar {
    height: 4px;
    background: #e8e8e8;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 5px;
}

.strength-bar-fill {
    height: 100%;
    width: 0%;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.strength-text {
    font-size: 12px;
    font-weight: 600;
    display: block;
}

.strength-weak .strength-bar-fill {
    width: 33%;
    background: #dc3545;
}

.strength-weak .strength-text {
    color: #dc3545;
}

.strength-medium .strength-bar-fill {
    width: 66%;
    background: #ffc107;
}

.strength-medium .strength-text {
    color: #ffc107;
}

.strength-strong .strength-bar-fill {
    width: 100%;
    background: #28a745;
}

.strength-strong .strength-text {
    color: #28a745;
}

/* Custom Checkbox */
.modern-checkbox {
    position: relative;
}

.modern-checkbox-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.modern-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.modern-checkbox-box {
    width: 20px;
    height: 20px;
    border: 2px solid #e8e8e8;
    border-radius: 5px;
    position: relative;
    transition: all 0.3s ease;
    background: #f8f9fa;
    flex-shrink: 0;
    margin-top: 2px;
}

.modern-checkbox-input:checked ~ .modern-checkbox-label .modern-checkbox-box {
    background: #81c408;
    border-color: #81c408;
}

.modern-checkbox-input:checked ~ .modern-checkbox-label .modern-checkbox-box::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 11px;
}

.modern-checkbox-text {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.terms-link {
    color: #81c408;
    text-decoration: none;
    font-weight: 600;
}

.terms-link:hover {
    text-decoration: underline;
}

/* Submit Button */
.modern-submit-btn {
    width: 100%;
    height: 52px;
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(129, 196, 8, 0.3);
    position: relative;
    overflow: hidden;
    margin-top: 25px;
}

.modern-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: left 0.5s ease;
}

.modern-submit-btn:hover::before {
    left: 100%;
}

.modern-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(129, 196, 8, 0.4);
}

.modern-submit-btn i {
    transition: transform 0.3s ease;
}

.modern-submit-btn:hover i {
    transform: translateX(5px);
}

/* Divider */
.modern-divider {
    position: relative;
    text-align: center;
    margin: 25px 0;
}

.modern-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e8e8e8;
}

.modern-divider span {
    position: relative;
    background: #ffffff;
    padding: 0 15px;
    font-size: 13px;
    color: #999;
    font-weight: 500;
}

/* Social Register */
.modern-social-register {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.modern-social-btn {
    height: 48px;
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.modern-google-btn {
    color: #db4437;
}

.modern-google-btn:hover {
    background: #db4437;
    border-color: #db4437;
    color: #ffffff;
}

.modern-facebook-btn {
    color: #1877f2;
}

.modern-facebook-btn:hover {
    background: #1877f2;
    border-color: #1877f2;
    color: #ffffff;
}

.modern-social-btn i {
    font-size: 18px;
}

/* Login Link */
.modern-login-link {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #e8e8e8;
}

.modern-login-link p {
    font-size: 14px;
    color: #666;
    margin-bottom: 0;
}

.modern-login-link a {
    color: #81c408;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.modern-login-link a:hover {
    color: #6da307;
    text-decoration: underline;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========================================
   REGISTER PAGE - MOBILE RESPONSIVE
   Full Screen with 5px Padding
======================================== */

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    .modern-register-wrapper {
        flex-direction: column;
        min-height: auto;
    }
    
    .modern-register-left,
    .modern-register-right {
        width: 100%;
        flex: none;
    }
}

/* Mobile Full Screen (767px and below) */
@media (max-width: 767px) {
    /* Remove default padding and set 5px */
    .modern-register-section {
        padding: 5px !important;
    }
    
    .modern-register-section .container {
        padding: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    .modern-register-section .row {
        margin: 0 !important;
        min-height: calc(100vh - 10px) !important;
        padding: 0 !important;
    }
    
    .modern-register-section .col-lg-10,
    .modern-register-section .col-xl-9 {
        padding: 0 !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* Wrapper - Full Screen */
    .modern-register-wrapper {
        border-radius: 10px !important;
        margin: 0 !important;
        min-height: calc(100vh - 10px) !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Left Side */
    .modern-register-left {
        padding: 35px 20px !important;
        border-radius: 10px 10px 0 0 !important;
        min-height: auto !important;
    }
    
    .modern-register-brand {
        margin-bottom: 25px !important;
    }
    
    .modern-brand-logo {
        max-width: 130px !important;
    }
    
    .modern-welcome-title {
        font-size: 26px !important;
        margin-bottom: 12px !important;
    }
    
    .modern-welcome-text {
        font-size: 14px !important;
        margin-bottom: 25px !important;
    }
    
    .modern-benefits {
        gap: 12px !important;
    }
    
    .modern-benefit-item {
        padding: 12px !important;
        border-radius: 8px !important;
    }
    
    .modern-benefit-icon {
        width: 45px !important;
        height: 45px !important;
    }
    
    .modern-benefit-icon i {
        font-size: 20px !important;
    }
    
    .modern-benefit-text h4 {
        font-size: 14px !important;
        margin-bottom: 2px !important;
    }
    
    .modern-benefit-text p {
        font-size: 12px !important;
    }
    
    /* Right Side - Form Area */
    .modern-register-right {
        padding: 30px 20px 20px 20px !important;
        overflow-y: auto !important;
        flex: 1 !important;
        border-radius: 0 0 10px 10px !important;
    }
    
    .modern-register-card {
        max-width: 100% !important;
    }
    
    .modern-card-header {
        margin-bottom: 20px !important;
        text-align: center !important;
    }
    
    .modern-card-title {
        font-size: 24px !important;
    }
    
    .modern-card-subtitle {
        font-size: 13px !important;
    }
    
    /* Form Elements */
    .modern-register-form {
        margin-top: 20px !important;
    }
    
    .modern-form-group {
        margin-bottom: 16px !important;
    }
    
    .modern-form-label {
        font-size: 13px !important;
        margin-bottom: 7px !important;
    }
    
    .modern-form-input {
        height: 46px !important;
        padding: 0 44px 0 44px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }
    
    .modern-input-icon {
        font-size: 16px !important;
        left: 13px !important;
    }
    
    .modern-password-toggle {
        right: 13px !important;
        font-size: 16px !important;
    }
    
    /* Alert Messages */
    .modern-alert {
        padding: 10px 14px !important;
        font-size: 12px !important;
        margin-bottom: 18px !important;
        border-radius: 8px !important;
    }
    
    .modern-alert i {
        font-size: 15px !important;
    }
    
    .modern-alert ul {
        padding-left: 15px !important;
        margin-top: 5px !important;
    }
    
    .modern-alert li {
        font-size: 11px !important;
    }
    
    /* Error Messages */
    .modern-error-message {
        font-size: 11px !important;
        margin-top: 5px !important;
    }
    
    /* Password Strength */
    .password-strength {
        margin-top: 7px !important;
    }
    
    .strength-bar {
        height: 3px !important;
        margin-bottom: 4px !important;
    }
    
    .strength-text {
        font-size: 11px !important;
    }
    
    /* Checkbox */
    .modern-checkbox-box {
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0 !important;
    }
    
    .modern-checkbox-text {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    
    .terms-link {
        font-size: 12px !important;
    }
    
    /* Submit Button */
    .modern-submit-btn {
        height: 46px !important;
        font-size: 14px !important;
        margin-top: 18px !important;
        border-radius: 10px !important;
    }
    
    /* Divider */
    .modern-divider {
        margin: 18px 0 !important;
    }
    
    .modern-divider span {
        font-size: 11px !important;
        padding: 0 12px !important;
    }
    
    /* Social Buttons */
    .modern-social-register {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-bottom: 18px !important;
    }
    
    .modern-social-btn {
        height: 44px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }
    
    .modern-social-btn i {
        font-size: 16px !important;
    }
    
    /* Login Link */
    .modern-login-link {
        padding-top: 15px !important;
        margin-top: 10px !important;
    }
    
    .modern-login-link p {
        font-size: 13px !important;
    }
    
    /* Hide Decorations */
    .modern-decoration {
        display: none !important;
    }
    
    /* Custom Scrollbar for Form Area */
    .modern-register-right::-webkit-scrollbar {
        width: 4px;
    }
    
    .modern-register-right::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    
    .modern-register-right::-webkit-scrollbar-thumb {
        background: #81c408;
        border-radius: 10px;
    }
    
    .modern-register-right::-webkit-scrollbar-thumb:hover {
        background: #6da307;
    }
}

/* Small Mobile (575px and below) */
@media (max-width: 575px) {
    .modern-register-left {
        padding: 30px 18px !important;
    }
    
    .modern-brand-logo {
        max-width: 120px !important;
    }
    
    .modern-welcome-title {
        font-size: 24px !important;
    }
    
    .modern-welcome-text {
        font-size: 13px !important;
        margin-bottom: 20px !important;
    }
    
    .modern-benefits {
        gap: 10px !important;
    }
    
    .modern-benefit-item {
        padding: 10px !important;
    }
    
    .modern-benefit-icon {
        width: 40px !important;
        height: 40px !important;
    }
    
    .modern-benefit-icon i {
        font-size: 18px !important;
    }
    
    .modern-benefit-text h4 {
        font-size: 13px !important;
    }
    
    .modern-benefit-text p {
        font-size: 11px !important;
    }
    
    .modern-register-right {
        padding: 25px 18px 18px 18px !important;
    }
    
    .modern-card-title {
        font-size: 22px !important;
    }
    
    .modern-form-group {
        margin-bottom: 14px !important;
    }
    
    .modern-form-input {
        height: 44px !important;
        padding: 0 42px 0 42px !important;
        font-size: 13px !important;
    }
    
    .modern-input-icon {
        left: 12px !important;
        font-size: 15px !important;
    }
    
    .modern-password-toggle {
        right: 12px !important;
        font-size: 15px !important;
    }
}

/* Extra Small Mobile (400px and below) */
@media (max-width: 400px) {
    .modern-register-left {
        padding: 25px 15px !important;
    }
    
    .modern-brand-logo {
        max-width: 110px !important;
    }
    
    .modern-welcome-title {
        font-size: 22px !important;
    }
    
    .modern-welcome-text {
        font-size: 12px !important;
    }
    
    .modern-register-right {
        padding: 20px 15px 15px 15px !important;
    }
    
    .modern-card-title {
        font-size: 20px !important;
    }
    
    .modern-card-subtitle {
        font-size: 12px !important;
    }
    
    .modern-form-label {
        font-size: 12px !important;
    }
    
    .modern-form-input {
        height: 42px !important;
        font-size: 12px !important;
    }
    
    .modern-checkbox-text {
        font-size: 11px !important;
    }
    
    .modern-submit-btn {
        height: 44px !important;
        font-size: 13px !important;
    }
}

/* Landscape Orientation Fix */
@media (max-width: 767px) and (orientation: landscape) {
    .modern-register-section .row {
        min-height: auto !important;
    }
    
    .modern-register-wrapper {
        min-height: auto !important;
    }
    
    .modern-register-left {
        padding: 20px 18px !important;
    }
    
    .modern-register-brand {
        margin-bottom: 15px !important;
    }
    
    .modern-welcome-title {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }
    
    .modern-welcome-text {
        font-size: 12px !important;
        margin-bottom: 15px !important;
    }
    
    .modern-benefits {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    
    .modern-benefit-item {
        padding: 8px !important;
    }
    
    .modern-benefit-icon {
        width: 35px !important;
        height: 35px !important;
    }
    
    .modern-benefit-icon i {
        font-size: 16px !important;
    }
    
    .modern-benefit-text h4 {
        font-size: 12px !important;
    }
    
    .modern-benefit-text p {
        font-size: 10px !important;
    }
    
    .modern-register-right {
        padding: 20px 18px !important;
    }
    
    .modern-form-group {
        margin-bottom: 12px !important;
    }
}

@media (max-width: 767px) {
    /* Reverse Order - Form First */
    .modern-register-wrapper {
        border-radius: 10px !important;
        margin: 0 !important;
        min-height: calc(100vh - 10px) !important;
        display: flex !important;
        flex-direction: column-reverse !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Right Side (Form) - Now appears FIRST */
    .modern-register-right {
        padding: 30px 20px 20px 20px !important;
        overflow-y: auto !important;
        flex: 1 !important;
        border-radius: 10px 10px 0 0 !important; /* Top corners rounded */
        order: 1 !important;
    }
    
    /* Left Side (Welcome) - Now appears SECOND */
    .modern-register-left {
        padding: 35px 20px !important;
        border-radius: 0 0 10px 10px !important; /* Bottom corners rounded */
        min-height: auto !important;
        order: 2 !important;
    }
}
/* Display Form First on Mobile - Using Order Property */
@media (max-width: 767px) {
    .modern-register-wrapper {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .modern-register-left {
        order: 2 !important;
        border-radius: 0 0 10px 10px !important;
    }
    
    .modern-register-right {
        order: 1 !important;
        border-radius: 10px 10px 0 0 !important;
    }
}

/* Mobile Full Screen (767px and below) */
@media (max-width: 767px) {
    /* Full Screen Setup with 5px padding */
    .modern-login-section {
        padding: 5px !important;
    }
    
    .modern-login-section .container {
        padding: 0 !important;
        max-width: 100% !important;
    }
    
    .modern-login-section .row {
        margin: 0 !important;
        min-height: calc(100vh - 10px) !important;
    }
    
    .modern-login-section .col-lg-10,
    .modern-login-section .col-xl-9 {
        padding: 0 !important;
        max-width: 100% !important;
    }
    
    /* Wrapper - Reverse Order */
    .modern-login-wrapper {
        border-radius: 10px !important;
        margin: 0 !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
        min-height: calc(100vh - 10px) !important;
        display: flex !important;
        flex-direction: column-reverse !important; /* THIS REVERSES THE ORDER */
    }
    
    /* Right Side (Form) - Now appears FIRST */
    .modern-login-right {
        padding: 40px 25px !important;
        flex: 1 !important;
        border-radius: 10px 10px 0 0 !important; /* Top corners rounded */
    }
    
    /* Left Side (Welcome) - Now appears SECOND */
    .modern-login-left {
        padding: 40px 25px !important;
        min-height: auto !important;
        border-radius: 0 0 10px 10px !important; /* Bottom corners rounded */
    }
    
    .modern-welcome-title {
        font-size: 28px !important;
    }
    
    .modern-welcome-text {
        font-size: 14px !important;
        margin-bottom: 30px !important;
    }
    
    .modern-feature-item {
        padding: 15px !important;
    }
    
    .modern-feature-icon {
        width: 50px !important;
        height: 50px !important;
    }
    
    .modern-feature-icon i {
        font-size: 22px !important;
    }
    
    .modern-feature-text h4 {
        font-size: 15px !important;
    }
    
    .modern-feature-text p {
        font-size: 13px !important;
    }
    
    .modern-card-title {
        font-size: 26px !important;
    }
    
    .modern-card-subtitle {
        font-size: 14px !important;
    }
    
    .modern-social-login {
        grid-template-columns: 1fr !important;
    }
    
    .modern-decoration {
        display: none !important;
    }
}


/* Responsive Design */
@media (max-width: 991px) {
    .modern-register-wrapper {
        flex-direction: column;
        min-height: auto;
    }
    
    .modern-register-left {
        padding: 50px 40px;
    }
    
    .modern-welcome-title {
        font-size: 36px;
    }
    
    .modern-benefits {
        gap: 20px;
    }
    
    .modern-register-right {
        padding: 50px 40px;
    }
}

@media (max-width: 767px) {
    .modern-register-wrapper {
        border-radius: 16px;
        margin: 20px;
    }
    
    .modern-register-left {
        padding: 40px 30px;
    }
    
    .modern-welcome-title {
        font-size: 30px;
    }
    
    .modern-welcome-text {
        font-size: 15px;
        margin-bottom: 35px;
    }
    
    .modern-benefit-item {
        padding: 15px;
    }
    
    .modern-benefit-icon {
        width: 50px;
        height: 50px;
    }
    
    .modern-benefit-icon i {
        font-size: 24px;
    }
    
    .modern-register-right {
        padding: 40px 30px;
    }
    
    .modern-card-title {
        font-size: 28px;
    }
    
    .modern-social-register {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .modern-register-left {
        padding: 30px 20px;
    }
    
    .modern-welcome-title {
        font-size: 26px;
    }
    
    .modern-register-right {
        padding: 30px 20px;
    }
    
    .modern-card-title {
        font-size: 24px;
    }
    
    .modern-form-input {
        height: 48px;
        padding: 0 45px 0 45px;
    }
    
    .modern-submit-btn {
        height: 48px;
    }
}

/* Loading State */
.modern-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.modern-submit-btn.loading {
    pointer-events: none;
}

.modern-submit-btn.loading span {
    opacity: 0;
}

.modern-submit-btn.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #ffffff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   5 ITEMS PER ROW CUSTOM GRID
======================================== */

/* Custom Row for 5 Items */
.premium-product-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
}

/* Custom Column for 5 Items Per Row */
.premium-col-5 {
    flex: 0 0 20%;
    max-width: 20%;
    padding: 0 12px;
    margin-bottom: 24px;
}

/* ========================================
   PREMIUM PRODUCT GRID SECTION
======================================== */

/* Section */
.premium-product-grid-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
    position: relative;
}

/* Section Header */
.premium-grid-header {
    margin-bottom: 60px;
}

.premium-badge-wrapper {
    margin-bottom: 20px;
}

.premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 32px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    color: #ffffff;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
    animation: fadeInDown 0.6s ease;
}

.premium-badge i {
    font-size: 16px;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.premium-title {
    font-size: 48px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 15px;
    letter-spacing: -1px;
    animation: fadeInUp 0.8s ease;
}

.premium-subtitle {
    font-size: 18px;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    animation: fadeIn 1s ease;
}

/* Product Card */
.premium-product-card {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
}

.premium-product-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
    border-color: #81c408;
}

/* Product Image */
.premium-product-image-wrapper {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    aspect-ratio: 1 / 1;
    border-radius: 24px 24px 0 0;
}

.premium-image-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.premium-img-main,
.premium-img-hover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-img-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.premium-product-card:hover .premium-img-main {
    opacity: 0;
    transform: scale(1.2) rotate(5deg);
}

.premium-product-card:hover .premium-img-hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Badges */
.premium-badges {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.premium-badge-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 12px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    animation: slideInLeft 0.6s ease;
}

.badge-discount {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);
    color: #ffffff;
    flex-direction: column;
    gap: 0;
    line-height: 1.2;
    padding: 10px 14px;
}

.badge-percent {
    font-size: 18px;
    font-weight: 800;
}

.badge-text {
    font-size: 10px;
    letter-spacing: 1px;
}

.badge-hot {
    background: linear-gradient(135deg, #ffa500 0%, #ff6347 100%);
    color: #ffffff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    padding: 0;
}

.badge-hot i {
    font-size: 20px;
    animation: fire 1s infinite;
}

@keyframes fire {
    0%, 100% { transform: rotate(-10deg) scale(1); }
    50% { transform: rotate(10deg) scale(1.1); }
}

@keyframes slideInLeft {
    0% { transform: translateX(-30px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

/* Quick Actions */
.premium-quick-actions {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.5s ease;
    z-index: 10;
}

.premium-product-card:hover .premium-quick-actions {
    opacity: 1;
    transform: translateX(0);
}

.premium-icon-btn {
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    color: #333;
    font-size: 18px;
    text-decoration: none;
}

.premium-icon-btn:hover {
    background: #81c408;
    color: #ffffff;
    transform: scale(1.2) rotate(10deg);
    box-shadow: 0 8px 25px rgba(129, 196, 8, 0.4);
}

/* Product Content */
.premium-product-content {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Category Tag */
.premium-category-tag {
    margin-bottom: 12px;
}

.premium-category-tag a {
    display: inline-block;
    padding: 6px 14px;
    background: linear-gradient(135deg, #f0f7e6 0%, #e8f5d5 100%);
    color: #81c408;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.premium-category-tag a:hover {
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(129, 196, 8, 0.3);
}

/* Product Title */
.premium-product-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.4;
    min-height: 44px;
}

.premium-product-title a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.premium-product-title a:hover {
    color: #81c408;
}

/* Rating */
.premium-rating-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

.premium-stars {
    display: flex;
    gap: 3px;
}

.premium-stars i {
    font-size: 14px;
    color: #ffc107;
}

.premium-stars .far {
    color: #ddd;
}

.premium-rating-count {
    font-size: 12px;
    color: #999;
    font-weight: 500;
}

/* Price Section */
.premium-price-section {
    margin-bottom: 16px;
}

.premium-price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.premium-current-price {
    font-size: 24px;
    font-weight: 800;
    color: #81c408;
    line-height: 1;
}

.premium-old-price {
    font-size: 16px;
    color: #999;
    text-decoration: line-through;
    font-weight: 500;
}

.premium-save-tag {
    display: inline-block;
    padding: 4px 10px;
    background: linear-gradient(135deg, #fff5e6 0%, #ffe6cc 100%);
    color: #ff6b6b;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
}

/* Add to Cart Button */
.premium-cart-section {
    margin-bottom: 12px;
}

.premium-add-cart-btn {
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 20px rgba(129, 196, 8, 0.3);
    position: relative;
    overflow: hidden;
}

.premium-add-cart-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.premium-add-cart-btn:hover::before {
    left: 100%;
}

.premium-add-cart-btn:hover {
    background: linear-gradient(135deg, #6da307 0%, #81c408 100%);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(129, 196, 8, 0.5);
}

.premium-add-cart-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(129, 196, 8, 0.4);
}

.premium-add-cart-btn .btn-icon {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.premium-add-cart-btn:hover .btn-icon {
    transform: scale(1.2) rotate(10deg);
}

.premium-add-cart-btn .btn-text {
    position: relative;
}

/* Installment Bar */
.premium-installment-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    margin-top: auto;
}

.premium-installment-bar i {
    color: #81c408;
    font-size: 14px;
}

.premium-installment-bar span {
    font-size: 11px;
    color: #666;
    font-weight: 600;
}

.premium-installment-bar img {
    height: 15px;
    width: auto;
}

/* Animations */
@keyframes fadeInDown {
    0% { opacity: 0; transform: translateY(-30px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

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

/* Responsive Design - 5 Items Per Row */
@media (max-width: 1399px) {
    .premium-title {
        font-size: 42px;
    }
}

@media (max-width: 1199px) {
    /* 4 items per row on large tablets/laptops */
    .premium-col-5 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    .premium-title {
        font-size: 38px;
    }
    
    .premium-product-title {
        font-size: 15px;
        min-height: 42px;
    }
    
    .premium-current-price {
        font-size: 22px;
    }
    
    .premium-add-cart-btn {
        padding: 12px 18px;
        font-size: 13px;
    }
}

@media (max-width: 991px) {
    /* 3 items per row on tablets */
    .premium-col-5 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    
    .premium-product-grid-section {
        padding: 80px 0;
    }
    
    .premium-title {
        font-size: 34px;
    }
}

@media (max-width: 767px) {
    /* 2 items per row on small tablets */
    .premium-col-5 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .premium-product-grid-section {
        padding: 60px 0;
    }
    
    .premium-title {
        font-size: 30px;
    }
    
    .premium-product-content {
        padding: 20px;
    }
}

@media (max-width: 575px) {
    /* 1 item per row on mobile phones */
    .premium-col-5 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .premium-product-grid-section {
        padding: 50px 0;
    }
    
    .premium-title {
        font-size: 26px;
    }
    
    .premium-product-card {
        border-radius: 20px;
    }
    
    .premium-product-image-wrapper {
        border-radius: 20px 20px 0 0;
    }
    
    .premium-product-content {
        padding: 18px;
    }
    
    .premium-product-title {
        font-size: 14px;
        min-height: 40px;
    }
    
    .premium-current-price {
        font-size: 20px;
    }
    
    .premium-add-cart-btn {
        padding: 12px 16px;
        font-size: 12px;
    }
    
    .premium-quick-actions {
        flex-direction: row;
        top: auto;
        bottom: 80px;
        left: 50%;
        right: auto;
        transform: translate(-50%, 20px);
        opacity: 0;
    }
    
    .premium-product-card:hover .premium-quick-actions {
        transform: translate(-50%, 0);
        opacity: 1;
    }
    
    .premium-icon-btn {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }
}


/* ========================================
   MODERN PRODUCT BANNERS SECTION
======================================== */

/* Section Container */
.modern-product-banners-section {
    padding: 100px 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Section Header */
.modern-banners-header {
    margin-bottom: 50px;
}

.banners-section-title {
    font-size: 42px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 12px;
    letter-spacing: -1px;
}

.banners-section-subtitle {
    font-size: 17px;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Banners Grid */
.modern-banners-grid {
    margin: 0 -12px;
}

.modern-banners-grid > div {
    padding: 0 12px;
    margin-bottom: 24px;
}

/* Banner Item */
.modern-banner-item {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
}

.modern-banner-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* Banner Link */
.modern-banner-link {
    display: block;
    text-decoration: none;
    position: relative;
}

/* Banner Wrapper */
.modern-banner-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

/* Banner Image */
.modern-banner-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-banner-item:hover .modern-banner-img {
    transform: scale(1.08);
}

/* Banner Overlay */
.modern-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.02) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 20px;
}

.modern-banner-item:hover .modern-banner-overlay {
    opacity: 1;
}

/* Shine Effect */
.modern-banner-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.7s ease;
}

.modern-banner-item:hover .modern-banner-wrapper::after {
    left: 150%;
}

/* Border Glow on Hover */
.modern-banner-item::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    border-radius: 23px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.modern-banner-item:hover::before {
    opacity: 1;
}

/* Large Banner Variation */
.modern-banner-large {
    /* Additional styling for larger banners if needed */
}

/* Responsive Design */

/* Extra Large Screens (1400px and up) */
@media (min-width: 1400px) {
    .modern-product-banners-section {
        padding: 120px 0;
    }
}

/* Large Screens (1200px - 1399px) */
@media (max-width: 1399px) {
    .banners-section-title {
        font-size: 38px;
    }
}

/* Medium Screens (992px - 1199px) */
@media (max-width: 1199px) {
    .modern-product-banners-section {
        padding: 80px 0;
    }
    
    .banners-section-title {
        font-size: 36px;
    }
}

/* Tablets (768px - 991px) */
@media (max-width: 991px) {
    .modern-product-banners-section {
        padding: 70px 0;
    }
    
    .banners-section-title {
        font-size: 32px;
    }
    
    .modern-banners-grid {
        margin: 0 -10px;
    }
    
    .modern-banners-grid > div {
        padding: 0 10px;
        margin-bottom: 20px;
    }
}

/* Small Tablets (576px - 767px) */
@media (max-width: 767px) {
    .modern-product-banners-section {
        padding: 60px 0;
    }
    
    .banners-section-title {
        font-size: 28px;
    }
    
    .banners-section-subtitle {
        font-size: 15px;
    }
    
    .modern-banners-grid > div {
        margin-bottom: 16px;
    }
}

/* Mobile Phones (up to 575px) */
@media (max-width: 575px) {
    .modern-product-banners-section {
        padding: 50px 0;
    }
    
    .modern-banners-header {
        margin-bottom: 35px;
    }
    
    .banners-section-title {
        font-size: 24px;
    }
    
    .banners-section-subtitle {
        font-size: 14px;
    }
    
    .modern-banners-grid {
        margin: 0 -8px;
    }
    
    .modern-banners-grid > div {
        padding: 0 8px;
        margin-bottom: 16px;
    }
    
    .modern-banner-item {
        border-radius: 16px;
    }
    
    .modern-banner-wrapper {
        border-radius: 16px;
    }
    
    .modern-banner-overlay {
        border-radius: 16px;
    }
    
    .modern-banner-item::before {
        border-radius: 19px;
    }
}

/* Extra Small Screens (up to 400px) */
@media (max-width: 400px) {
    .modern-product-banners-section {
        padding: 40px 0;
    }
    
    .banners-section-title {
        font-size: 22px;
    }
}

/* Print Styles */
@media print {
    .modern-product-banners-section {
        padding: 20px 0;
    }
    
    .modern-banner-item {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ========================================
   MODERN MIXED BANNER SECTION
======================================== */

/* Section Container */
.modern-mixed-banner-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

/* Background Decoration */
.modern-mixed-banner-section::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(129, 196, 8, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    animation: floatBg 8s ease-in-out infinite;
}

@keyframes floatBg {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(20px, 20px); }
}

/* Section Header */
.mixed-banner-header {
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.mixed-badge-wrapper {
    margin-bottom: 20px;
}

.mixed-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 32px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    color: #ffffff;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
    animation: fadeInDown 0.6s ease;
}

.mixed-badge i {
    font-size: 16px;
    animation: pulseFire 1.5s infinite;
}

@keyframes pulseFire {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.mixed-main-title {
    font-size: 48px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 15px;
    letter-spacing: -1px;
    animation: fadeInUp 0.8s ease;
}

.mixed-main-subtitle {
    font-size: 18px;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    animation: fadeIn 1s ease;
}

/* Mixed Banner Grid */
.mixed-banner-grid {
    position: relative;
    z-index: 1;
}

/* ========================================
   LARGE BANNER (LEFT SIDE)
======================================== */

.large-banner-wrapper {
    height: 100%;
    padding-right: 15px;
}

.large-banner-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    min-height: 600px;
    background: #ffffff;
}

.large-banner-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
}

.large-banner-link {
    display: block;
    height: 100%;
    text-decoration: none;
}

.large-banner-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 24px;
}

.large-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.large-banner-card:hover .large-banner-img {
    transform: scale(1.1);
}

/* Large Banner Overlay */
.large-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.85) 100%
    );
    display: flex;
    align-items: flex-end;
    padding: 50px;
}

.large-banner-content {
    width: 100%;
}

.large-banner-badge {
    display: inline-block;
    padding: 8px 20px;
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 50px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(129, 196, 8, 0.4);
}

.large-banner-title {
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 15px;
    line-height: 1.2;
    transition: transform 0.3s ease;
}

.large-banner-card:hover .large-banner-title {
    transform: translateY(-5px);
}

.large-banner-description {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
    line-height: 1.5;
}

/* Large Banner Button */
.large-banner-btn-wrapper {
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.large-banner-card:hover .large-banner-btn-wrapper {
    transform: translateY(0);
    opacity: 1;
}

.large-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 40px;
    background: #ffffff;
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}

.large-banner-btn:hover {
    background: #81c408;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(129, 196, 8, 0.5);
}

.large-banner-btn i {
    transition: transform 0.3s ease;
}

.large-banner-btn:hover i {
    transform: translateX(5px);
}

/* Border Glow */
.large-banner-card::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 27px;
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.large-banner-card:hover::before {
    opacity: 1;
}

/* ========================================
   SMALL BANNERS (RIGHT SIDE)
======================================== */

.small-banners-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.small-banner-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
    margin-bottom: 20px;
}

.small-banner-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

.small-banner-link {
    display: block;
    text-decoration: none;
}

.small-banner-image {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

/* Medium Banner */
.medium-banner .small-banner-image {
    height: 280px;
}

/* Small Banners */
.small-banner-card:not(.medium-banner) .small-banner-image {
    height: 280px;
}

.small-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.small-banner-card:hover .small-banner-img {
    transform: scale(1.15);
}

/* Small Banner Overlay */
.small-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.5) 60%,
        rgba(0, 0, 0, 0.85) 100%
    );
    display: flex;
    align-items: flex-end;
    padding: 30px;
}

.small-banner-content {
    width: 100%;
}

.small-banner-badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-radius: 50px;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(129, 196, 8, 0.4);
}

.small-banner-title {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    line-height: 1.2;
    transition: transform 0.3s ease;
}

.small-banner-card:hover .small-banner-title {
    transform: translateY(-3px);
}

.small-banner-description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
}

/* Border Effect */
.small-banner-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 22px;
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.small-banner-card:hover::before {
    opacity: 1;
}

/* Animations */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========================================
   RESPONSIVE DESIGN
======================================== */

/* Large Devices (1200px to 1399px) */
@media (max-width: 1399px) {
    .mixed-main-title {
        font-size: 44px;
    }
    
    .large-banner-title {
        font-size: 38px;
    }
}

/* Medium Devices (992px to 1199px) */
@media (max-width: 1199px) {
    .modern-mixed-banner-section {
        padding: 80px 0;
    }
    
    .mixed-main-title {
        font-size: 40px;
    }
    
    .large-banner-title {
        font-size: 36px;
    }
    
    .large-banner-card {
        min-height: 550px;
    }
}

/* Tablets (768px to 991px) */
@media (max-width: 991px) {
    .modern-mixed-banner-section {
        padding: 70px 0;
    }
    
    .mixed-main-title {
        font-size: 36px;
    }
    
    .large-banner-wrapper {
        padding-right: 0;
        margin-bottom: 20px;
    }
    
    .large-banner-card {
        min-height: 450px;
    }
    
    .large-banner-title {
        font-size: 32px;
    }
    
    .large-banner-overlay {
        padding: 40px;
    }
    
    .small-banner-title {
        font-size: 22px;
    }
}

/* Small Tablets (576px to 767px) */
@media (max-width: 767px) {
    .modern-mixed-banner-section {
        padding: 60px 0;
    }
    
    .mixed-main-title {
        font-size: 32px;
    }
    
    .mixed-main-subtitle {
        font-size: 16px;
    }
    
    .large-banner-card {
        min-height: 400px;
        border-radius: 20px;
    }
    
    .large-banner-image {
        border-radius: 20px;
    }
    
    .large-banner-title {
        font-size: 28px;
    }
    
    .large-banner-description {
        font-size: 16px;
    }
    
    .large-banner-overlay {
        padding: 30px;
    }
    
    .medium-banner .small-banner-image {
        height: 250px;
    }
    
    .small-banner-card:not(.medium-banner) .small-banner-image {
        height: 250px;
    }
    
    .small-banner-card {
        margin-bottom: 15px;
    }
}

/* Mobile Devices (up to 575px) */
@media (max-width: 575px) {
    .modern-mixed-banner-section {
        padding: 50px 0;
    }
    
    .mixed-banner-header {
        margin-bottom: 40px;
    }
    
    .mixed-badge {
        padding: 10px 24px;
        font-size: 12px;
    }
    
    .mixed-main-title {
        font-size: 28px;
    }
    
    .mixed-main-subtitle {
        font-size: 14px;
        padding: 0 15px;
    }
    
    .large-banner-card {
        min-height: 350px;
        border-radius: 18px;
    }
    
    .large-banner-image {
        border-radius: 18px;
    }
    
    .large-banner-title {
        font-size: 24px;
    }
    
    .large-banner-description {
        font-size: 14px;
        margin-bottom: 20px;
    }
    
    .large-banner-overlay {
        padding: 25px;
    }
    
    .large-banner-btn {
        padding: 12px 28px;
        font-size: 14px;
    }
    
    .small-banner-card {
        border-radius: 16px;
        margin-bottom: 12px;
    }
    
    .small-banner-image {
        border-radius: 16px;
    }
    
    .medium-banner .small-banner-image {
        height: 220px;
    }
    
    .small-banner-card:not(.medium-banner) .small-banner-image {
        height: 200px;
    }
    
    .small-banner-title {
        font-size: 20px;
    }
    
    .small-banner-description {
        font-size: 13px;
    }
    
    .small-banner-overlay {
        padding: 20px;
    }
    
    .small-banners-wrapper {
        gap: 0;
    }
}

/* Very Small Devices (up to 400px) */
@media (max-width: 400px) {
    .mixed-main-title {
        font-size: 24px;
    }
    
    .large-banner-title {
        font-size: 22px;
    }
    
    .small-banner-title {
        font-size: 18px;
    }
}

/* Ensure proper spacing */
.mixed-banner-grid > [class*="col-"] {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .mixed-banner-grid > [class*="col-"]:first-child {
        margin-bottom: 20px;
    }
}

/* ========================================
   UNIFIED SECTION HEADERS
======================================== */

.unified-section-header {
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.section-badge-wrapper {
    margin-bottom: 20px;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 32px;
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    color: #ffffff;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: 0 8px 25px rgba(129, 196, 8, 0.4);
    animation: fadeInDown 0.6s ease;
    transition: all 0.3s ease;
}

.section-badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(129, 196, 8, 0.5);
}

.section-badge i {
    font-size: 16px;
    animation: badgeIconRotate 3s ease-in-out infinite;
}

@keyframes badgeIconRotate {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(10deg); }
}

.section-badge-light {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.section-main-title {
    font-size: 48px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 15px;
    letter-spacing: -1px;
    line-height: 1.2;
    animation: fadeInUp 0.8s ease;
}

.section-main-title-light {
    color: #ffffff;
}

.section-main-subtitle {
    font-size: 18px;
    color: #666;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    animation: fadeIn 1s ease;
}

.section-main-subtitle-light {
    color: rgba(255, 255, 255, 0.9);
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========================================
   SECTION SPACING - NO GAPS
======================================== */

main > section {
    margin: 0 !important;
    padding-bottom: 80px;
}

.hero-slider-modern {
    padding-top: 0;
    padding-bottom: 0;
}

.grey-bg {
    background: #f8f9fa;
}

.modern-product-banners-section {
    background: #ffffff;
}

/* Responsive */
@media (max-width: 1199px) {
    .section-main-title {
        font-size: 42px;
    }
}

@media (max-width: 991px) {
    .unified-section-header {
        margin-bottom: 50px;
    }
    .section-main-title {
        font-size: 36px;
    }
    .section-main-subtitle {
        font-size: 16px;
    }
    main > section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

@media (max-width: 767px) {
    .unified-section-header {
        margin-bottom: 40px;
    }
    .section-badge {
        padding: 10px 24px;
        font-size: 12px;
    }
    .section-main-title {
        font-size: 32px;
    }
    .section-main-subtitle {
        font-size: 15px;
        padding: 0 15px;
    }
    main > section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

.swiper-wrapper
 {
    margin-bottom: -128px;
}

@media (max-width: 575px) {
    .section-badge {
        padding: 8px 20px;
        font-size: 11px;
    }
    .section-main-title {
        font-size: 28px;
    }
    .section-main-subtitle {
        font-size: 14px;
    }
    main > section {
        padding-top: 0px;
        padding-bottom: 40px;
    }
}


/* ========================================
   USER PROFILE DROPDOWN - HEADER
======================================== */

/* User Profile Wrapper */
.user-profile-wrapper {
    position: relative;
    display: inline-block;
}

/* User Profile Icon */
.user-profile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #1a1a1a;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 50%;
}

.user-profile-icon:hover {
    color: #81c408;
    background: rgba(129, 196, 8, 0.1);
    transform: scale(1.1);
}

/* Guest Login Icon */
.user-login-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #1a1a1a;
    font-size: 20px;
    transition: all 0.3s ease;
    border-radius: 50%;
}

.user-login-icon:hover {
    color: #81c408;
    background: rgba(129, 196, 8, 0.1);
    transform: scale(1.1);
}

/* Profile Dropdown */
.user-profile-dropdown {
    position: absolute;
    top: calc(100% + 15px);
    right: 0;
    width: 280px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
    overflow: hidden;
}

/* Show dropdown on hover */
.user-profile-wrapper:hover .user-profile-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Arrow indicator */
.user-profile-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 15px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #ffffff;
}

/* Profile Header */
.user-profile-header {
    padding: 20px;
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Avatar Circle */
.user-avatar-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

/* Profile Info */
.user-profile-info {
    flex: 1;
    min-width: 0;
}

.user-profile-name {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-profile-email {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Divider */
.user-profile-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 0;
}

/* Profile Actions */
.user-profile-actions {
    padding: 8px 0;
}

.profile-action-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
}

.profile-action-link:hover {
    background: #f8f9fa;
    color: #81c408;
    padding-left: 25px;
}

.profile-action-link i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    color: #666;
    transition: color 0.3s ease;
}

.profile-action-link:hover i {
    color: #81c408;
}

/* Logout Section */
.user-profile-logout {
    padding: 12px 20px;
    background: #f8f9fa;
}

.logout-form {
    margin: 0;
}

.profile-logout-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.profile-logout-btn:hover {
    background: linear-gradient(135deg, #ee5a6f 0%, #ff6b6b 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}

.profile-logout-btn i {
    font-size: 16px;
}

/* Animation for dropdown items */
.user-profile-wrapper:hover .profile-action-link {
    animation: slideInLeft 0.3s ease forwards;
    opacity: 0;
}

.user-profile-wrapper:hover .profile-action-link:nth-child(1) {
    animation-delay: 0.05s;
}

.user-profile-wrapper:hover .profile-action-link:nth-child(2) {
    animation-delay: 0.1s;
}

.user-profile-wrapper:hover .profile-action-link:nth-child(3) {
    animation-delay: 0.15s;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========================================
   MOBILE USER SECTION
======================================== */

.mobile-user-section {
    padding: 20px;
}

.mobile-user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    border-radius: 12px;
    color: #ffffff;
}

.mobile-user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
}

.mobile-user-details strong {
    font-size: 16px;
    display: block;
    margin-bottom: 4px;
}

.mobile-user-details small {
    font-size: 12px;
    opacity: 0.9;
}

.mobile-user-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-user-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: #f8f9fa;
    border-radius: 8px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
}

.mobile-user-link:hover {
    background: #81c408;
    color: #ffffff;
}

.mobile-user-link i {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.mobile-logout-form {
    margin-top: 15px;
}

.mobile-logout-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mobile-logout-btn:hover {
    background: linear-gradient(135deg, #ee5a6f 0%, #ff6b6b 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}

.mobile-logout-btn i {
    font-size: 16px;
}

/* Responsive Design */
@media (max-width: 1199px) {
    .user-profile-dropdown {
        width: 260px;
    }
}

@media (max-width: 767px) {
    .user-profile-dropdown {
        width: 240px;
        right: -10px;
    }
    
    .user-profile-header {
        padding: 15px;
    }
    
    .user-avatar-circle {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .user-profile-name {
        font-size: 14px;
    }
    
    .user-profile-email {
        font-size: 11px;
    }
    
    .profile-action-link {
        padding: 8px 15px;
        font-size: 13px;
    }
    
    .user-profile-logout {
        padding: 10px 15px;
    }
    
    .profile-logout-btn {
        padding: 8px 16px;
        font-size: 13px;
    }
}


/* ========================================
   CART & WISHLIST SIDEBAR - BEAUTIFUL SCROLLER
======================================== */

/* Sidebar Container Layout */
.tpcart {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: calc(100vh - 60px);
}

/* Title with Count Badge */
.tpcart__title {
    flex-shrink: 0;
    padding: 25px 30px;
    margin: 0;
    border-bottom: 2px solid #f0f0f0;
    position: relative;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
}

.tpcart__count-badge {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    min-width: 24px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(129, 196, 8, 0.3);
}

/* Product Container */
.tpcart__product {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 20px 30px 0;
}

/* Scrollable Area */
.tpcart__scrollable {
    flex: 1;
    max-height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 15px;
    margin-bottom: 20px;
    position: relative;
}

/* Custom Scrollbar - Webkit */
.tpcart__scrollable::-webkit-scrollbar {
    width: 6px;
}

.tpcart__scrollable::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
    margin: 10px 0;
}

.tpcart__scrollable::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.tpcart__scrollable::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #6da307 0%, #5a8c06 100%);
    box-shadow: 0 0 8px rgba(129, 196, 8, 0.5);
}

/* Firefox Scrollbar */
.tpcart__scrollable {
    scrollbar-width: thin;
    scrollbar-color: #81c408 #f1f1f1;
    scroll-behavior: smooth;
}

/* Fade Effects */
.tpcart__scrollable::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 15px;
    height: 30px;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tpcart__scrollable::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 15px;
    height: 30px;
    background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tpcart__scrollable.has-scroll-top::before {
    opacity: 1;
}

.tpcart__scrollable.has-scroll-bottom::after {
    opacity: 1;
}

/* Items */
.tpcart__scrollable ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tpcart__scrollable ul li {
    margin-bottom: 20px;
    animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tpcart__item {
    display: flex;
    gap: 15px;
    padding: 10px;
    border-radius: 12px;
    transition: all 0.3s ease;
    background: #ffffff;
}

.tpcart__item:hover {
    background: #f8f9fa;
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Checkout Section */
.tpcart__checkout {
    flex-shrink: 0;
    margin-top: auto;
    border-top: 2px solid #f0f0f0;
    padding-top: 20px;
    background: #ffffff;
}

/* Free Shipping */
.tpcart__free-shipping {
    flex-shrink: 0;
    margin-top: 15px;
    padding: 15px;
    background: #f0f7e6;
    border-radius: 8px;
    border: 1px dashed #81c408;
}

/* Empty State */
.tpcart__empty {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px !important;
    background: #f8f9fa !important;
    border-radius: 12px;
    min-height: 300px;
}

.tpcart__empty .empty-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.tpcart__empty .empty-icon i {
    font-size: 36px;
    color: #ffffff;
}

.tpcart__empty p {
    margin: 0 0 20px 0;
    color: #999;
    font-size: 16px;
}

.empty-shop-btn {
    display: inline-block;
    padding: 10px 24px;
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    color: #ffffff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.empty-shop-btn:hover {
    background: linear-gradient(135deg, #6da307 0%, #5a8c06 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(129, 196, 8, 0.3);
    color: #ffffff;
}

/* Delete Button */
.tpcart__del a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.tpcart__del a:hover {
    background: #ff6b6b;
    transform: rotate(90deg) scale(1.1);
}

.tpcart__del a:hover i {
    color: #ffffff;
}

/* Pulse Animation */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(129, 196, 8, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(129, 196, 8, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(129, 196, 8, 0);
    }
}

.tpcart__count-badge.pulse,
.wishlist-count.pulse {
    animation: pulse 1s;
}

/* Responsive */
@media (max-width: 767px) {
    .tpcart__title {
        padding: 20px;
        font-size: 18px;
    }
    
    .tpcart__product {
        padding: 15px 20px 0;
    }
    
    .tpcart__scrollable {
        max-height: 300px;
        padding-right: 10px;
    }
    
    .tpcart__scrollable::-webkit-scrollbar {
        width: 4px;
    }
    
    .tpcart__empty {
        padding: 40px 15px !important;
        min-height: 250px;
    }
}
.tpsideinfo__account-link a,
.sidebar-user-logout-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #ffffff;
    font-size: 15px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.tpsideinfo__account-link a:hover,
.sidebar-user-logout-btn:hover {
    color: #ffcc00;
}

.sidebar-user-logout-btn i,
.tpsideinfo__account-link a i {
    font-size: 16px;
}

/* Hide logout text by default, show username */
.sidebar-user-logout-btn .logout-text {
    display: none;
}

.sidebar-user-logout-btn .username-text {
    display: inline;
}

/* On hover, hide username and show logout */
.sidebar-user-logout-btn:hover .logout-text {
    display: inline;
}

.sidebar-user-logout-btn:hover .username-text {
    display: none;
}



/* Checkout Styles */
.toggle-link {
    color: #81c408;
    cursor: pointer;
    text-decoration: underline;
    transition: all 0.3s ease;
}

.toggle-link:hover {
    color: #6da307;
}

.coupon-content {
    margin-top: 15px;
    display: none;
}

.product-thumb {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

/* Checkout Steps */
.checkout-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.checkout-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
}

.checkout-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 100%;
    width: 60px;
    height: 2px;
    background: #e0e0e0;
}

.checkout-step.active:not(:last-child)::after,
.checkout-step.completed:not(:last-child)::after {
    background: #81c408;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    transition: all 0.3s ease;
}

.checkout-step.active .step-number {
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(129, 196, 8, 0.3);
}

.checkout-step.completed .step-number {
    background: #28a745;
    color: #ffffff;
}

.step-title {
    font-size: 13px;
    color: #666;
    font-weight: 600;
}

.checkout-step.active .step-title {
    color: #81c408;
}

/* Loading Overlay */
.checkout-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.checkout-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top: 4px solid #81c408;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 991px) {
    .checkout-steps {
        padding: 15px;
        gap: 15px;
    }
    
    .checkout-step:not(:last-child)::after {
        width: 30px;
    }
}

@media (max-width: 767px) {
    .checkout-step {
        font-size: 11px;
    }
    
    .step-number {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
}


/* Modern Banner Content Overlay */
.modern-banner-content {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    text-align: left;
    z-index: 2;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.modern-banner-item:hover .modern-banner-content {
    opacity: 1;
    transform: translateY(0);
}

.modern-banner-title {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.modern-banner-subtitle {
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 15px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.modern-banner-btn {
    display: inline-block;
    padding: 8px 20px;
    background: #81c408;
    color: #ffffff;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.modern-banner-btn i {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.modern-banner-item:hover .modern-banner-btn i {
    transform: translateX(5px);
}

/* Hero Section */
.service-hero-section {
    position: relative;
    padding: 120px 0 80px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    overflow: hidden;
}

.hero-decorative {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
}

.hero-decorative-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    top: -100px;
    left: -100px;
}

.hero-decorative-2 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    bottom: -50px;
    right: -50px;
}

.service-hero-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.service-hero-title {
    font-size: 56px;
    font-weight: 700;
    color: #333;
    margin-bottom: 25px;
    line-height: 1.2;
}

.service-hero-subtitle {
    font-size: 18px;
    color: #666;
    margin-bottom: 35px;
    line-height: 1.8;
}

.service-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 40px;
    background: #81c408;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.service-hero-btn:hover {
    background: #6da307;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(129, 196, 8, 0.3);
    color: #fff;
}

/* Services Main Section */
.services-main-section {
    padding: 80px 0;
    background: #fff;
}

.service-main-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.service-main-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}

.service-main-card.active {
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
}

.service-main-card.active * {
    color: #fff !important;
}

.service-main-icon {
    width: 80px;
    height: 80px;
    background: rgba(129, 196, 8, 0.1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.service-main-card.active .service-main-icon {
    background: rgba(255, 255, 255, 0.2);
}

.service-main-icon i {
    font-size: 36px;
    color: #81c408;
}

.service-main-card.active .service-main-icon i {
    color: #fff;
}

.service-main-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.service-main-description {
    font-size: 15px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 25px;
}

.service-main-features {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.service-main-features li {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 15px;
    color: #555;
}

.service-main-features li i {
    color: #81c408;
    margin-right: 10px;
    font-size: 18px;
}

.service-main-card.active .service-main-features li i {
    color: #fff;
}

.service-main-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 30px;
    background: #81c408;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.service-main-card.active .service-main-btn {
    background: #fff;
    color: #81c408;
}

.service-main-btn:hover {
    transform: translateX(5px);
    color: #fff;
}

.service-card-bg {
    position: absolute;
    right: -50px;
    bottom: -50px;
    font-size: 200px;
    color: rgba(129, 196, 8, 0.03);
}

.service-main-card.active .service-card-bg {
    color: rgba(255, 255, 255, 0.1);
}

/* Why Service Section */
.why-service-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-subtitle {
    display: inline-block;
    padding: 6px 20px;
    background: rgba(129, 196, 8, 0.1);
    color: #81c408;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}

.section-title {
    font-size: 42px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.choose-card {
    background: #fff;
    border-radius: 20px;
    padding: 35px 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
}

.choose-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.choose-icon {
    margin-bottom: 20px;
}

.choose-icon img {
    width: 60px;
    height: 60px;
}

.choose-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
}

.choose-description {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 15px;
}

.choose-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #81c408;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.choose-link:hover {
    gap: 10px;
    color: #6da307;
}

.help-center-banner {
    background: #81c408;
    color: #fff;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    margin-top: 40px;
    font-size: 16px;
}

.help-center-banner a {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
    margin-left: 10px;
}

.help-center-banner a:hover {
    text-decoration: none;
}

/* Stats Section */
.service-stats-section {
    padding: 80px 0;
    background: #fff;
}

.stat-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 20px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.stat-icon {
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.stat-icon i {
    font-size: 36px;
    color: #81c408;
}

.stat-number {
    font-size: 48px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.stat-label {
    font-size: 16px;
    color: #666;
}

/* Contact Form Section */
.service-contact-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.contact-form-card {
    background: #fff;
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 0;
}

.form-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    display: block;
}

.form-control {
    padding: 12px 20px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: #81c408;
    box-shadow: 0 0 0 0.2rem rgba(129, 196, 8, 0.1);
}

.submit-btn-primary {
    width: 100%;
    padding: 15px 30px;
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.submit-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(129, 196, 8, 0.3);
}

/* Animation Classes */
.fade-in,
.slide-in-left,
.slide-in-right {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.slide-in-left {
    transform: translateX(-50px);
}

.slide-in-right {
    transform: translateX(50px);
}

/* Responsive */
@media (max-width: 768px) {
    .service-hero-title {
        font-size: 36px;
    }

    .service-hero-subtitle {
        font-size: 16px;
    }

    .service-main-card {
        margin-bottom: 30px;
    }

    .section-title {
        font-size: 32px;
    }

    .contact-form-card {
        padding: 30px 20px;
    }

    .stat-number {
        font-size: 36px;
    }
}

/* ==========================================
   CERTIFICATES SECTION
========================================== */
.certificates-section {
    padding: 80px 0;
    background: #fff;
}

.certificate-card {
    transition: all 0.3s ease;
}

.certificate-card:hover {
    transform: translateY(-10px);
}

.certificate-image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.certificate-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.certificate-card:hover .certificate-image {
    transform: scale(1.1);
}

.certificate-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(129, 196, 8, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.certificate-card:hover .certificate-overlay {
    opacity: 1;
}

.certificate-view-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    border: none;
    color: #81c408;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.certificate-view-btn:hover {
    transform: scale(1.1);
}

.certificate-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
    text-align: center;
}

.certificate-description {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin: 0;
}

/* ==========================================
   YOUTUBE SECTION
========================================== */
.youtube-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.youtube-video-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    height: 100%;
}

.youtube-video-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}

.youtube-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.youtube-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.youtube-video-content {
    padding: 25px;
}

.youtube-video-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
    line-height: 1.4;
}

.youtube-video-meta {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.youtube-video-meta i {
    color: #81c408;
    margin-right: 5px;
}

.youtube-channel-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 40px;
    background: #FF0000;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
}

.youtube-channel-btn:hover {
    background: #CC0000;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 0, 0, 0.3);
    color: #fff;
}

.youtube-channel-btn i {
    font-size: 24px;
}

/* Section Subtitle with Icon */
.section-subtitle i {
    margin-right: 8px;
    font-size: 18px;
}

/* Modal Styles */
.modal-content {
    border-radius: 15px;
}

.modal-header {
    background: linear-gradient(135deg, #81c408 0%, #6da307 100%);
    color: #fff;
    border-radius: 15px 15px 0 0;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
}

.modal-body {
    padding: 30px;
}

.modal-body img {
    border-radius: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .certificate-image {
        height: 250px;
    }

    .youtube-video-title {
        font-size: 16px;
    }

    .youtube-channel-btn {
        font-size: 14px;
        padding: 12px 30px;
    }
}



/* ============================================
   GREEN GRADIENT FOOTER
   Using your brand colors
   ============================================ */

/* Make sure these variables exist in your main CSS */
:root {
    
    /* Text colors for green background */
    --footer-text-white: #ffffff;
    --footer-text-light: rgba(255, 255, 255, 0.95);
    --footer-text-muted: rgba(255, 255, 255, 0.75);
    --footer-text-gray: rgba(255, 255, 255, 0.6);
}

/* ============================================
   FOOTER MAIN SECTION
   ============================================ */

.site-footer {
    position: relative;
    overflow: hidden;
}

.footer-main {
    /* ⭐ YOUR GREEN GRADIENT */
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
    padding: 80px 0 40px;
    position: relative;
    color: var(--footer-text-white);
}

/* Decorative overlay for depth */
.footer-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* Subtle leaf pattern (optional) */
.footer-main::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;utf8,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><path d="M30 25c-5 0-10 5-10 10s5 10 10 10 10-5 10-10-5-10-10-10z" fill="rgba(255,255,255,0.02)"/></svg>');
    opacity: 0.3;
    pointer-events: none;
}

/* ============================================
   FOOTER WIDGETS
   ============================================ */

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

/* Footer Logo */
.footer-brand {
    margin-bottom: 20px;
}

.footer-logo {
    max-width: 160px;
    height: auto;
    filter: brightness(0) invert(1);
    transition: transform 0.3s ease;
}

.footer-logo:hover {
    transform: scale(1.05);
}

/* About Text */
.footer-about {
    color: var(--footer-text-muted);
    line-height: 1.8;
    font-size: 15px;
    margin-bottom: 0;
}

/* Widget Titles */
.widget-title {
    color: var(--footer-text-white);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.widget-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background: var(--footer-text-white);
    border-radius: 2px;
}

/* ============================================
   SOCIAL MEDIA
   ============================================ */

.footer-social {
    margin-top: 25px;
}

.social-title {
    color: var(--footer-text-white);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 15px;
}

.social-icons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.social-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--footer-text-white);
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-icon:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    color: var(--footer-text-white);
    background: rgba(255, 255, 255, 0.25);
}

/* Social Brand Colors on Hover */
.social-icon.facebook:hover { 
    background: #1877f2; 
    border-color: #1877f2;
}
.social-icon.instagram:hover { 
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-color: transparent;
}
.social-icon.twitter:hover { 
    background: #1da1f2;
    border-color: #1da1f2;
}
.social-icon.youtube:hover { 
    background: #ff0000;
    border-color: #ff0000;
}
.social-icon.whatsapp:hover { 
    background: #25d366;
    border-color: #25d366;
}

/* ============================================
   FOOTER MENU
   ============================================ */

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 12px;
}

.footer-menu li a {
    color: var(--footer-text-muted);
    text-decoration: none;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    position: relative;
}

.footer-menu li a i {
    font-size: 10px;
    opacity: 0.8;
    transition: transform 0.3s ease;
}

.footer-menu li a:hover {
    color: var(--footer-text-white);
    padding-left: 8px;
}

.footer-menu li a:hover i {
    transform: translateX(3px);
}

/* ============================================
   CONTACT INFO
   ============================================ */

.contact-info {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-info li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--footer-text-muted);
    font-size: 14px;
    line-height: 1.7;
}

.contact-info li i {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--footer-text-white);
    font-size: 14px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-info li a {
    color: var(--footer-text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info li a:hover {
    color: var(--footer-text-white);
}

/* ============================================
   NEWSLETTER
   ============================================ */

.newsletter-box {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
}

.newsletter-title {
    color: var(--footer-text-white);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.newsletter-text {
    color: var(--footer-text-muted);
    font-size: 13px;
    margin-bottom: 15px;
}

.newsletter-form .input-wrapper {
    position: relative;
    display: flex;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.newsletter-form .input-wrapper:focus-within {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.2);
}

.newsletter-form input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 13px 15px;
    color: var(--footer-text-white);
    font-size: 14px;
    outline: none;
}

.newsletter-form input::placeholder {
    color: var(--footer-text-gray);
}

.newsletter-form .submit-btn {
    background: var(--footer-text-white);
    border: none;
    padding: 13px 20px;
    color: var(--primary-green);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.newsletter-form .submit-btn:hover {
    background: var(--footer-text-light);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.newsletter-form .submit-btn i {
    font-size: 16px;
}

/* ============================================
   FOOTER BOTTOM
   ============================================ */

.footer-bottom {
    background: rgba(0, 0, 0, 0.25);
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright {
    color: var(--footer-text-muted);
    font-size: 14px;
    margin: 0;
}

.copyright strong {
    color: var(--footer-text-white);
    font-weight: 600;
}

.copyright i {
    color: #ff6b6b;
    animation: heartbeat 1.5s infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Payment Methods */
.payment-methods {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.payment-methods span {
    color: var(--footer-text-muted);
    font-size: 13px;
    margin-right: 5px;
}

.payment-methods img {
    height: 26px;
    width: auto;
    opacity: 0.8;
    transition: all 0.3s ease;
    filter: brightness(0) invert(1);
}

.payment-methods img:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/* ============================================
   SCROLL TO TOP BUTTON
   ============================================ */

.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--primary-green);
    color: var(--footer-text-white);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.scroll-top.show {
    opacity: 1;
    visibility: visible;
}

.scroll-top:hover {
    background: var(--dark-green);
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.5);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 991px) {
    .footer-main {
        padding: 60px 0 30px;
    }
    
    .footer-widget {
        margin-bottom: 40px;
    }
}

@media (max-width: 767px) {
    .footer-main {
        padding: 40px 0 20px;
    }
    
    .footer-widget {
        text-align: center;
    }
    
    .widget-title {
        text-align: center;
    }
    
    .widget-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-menu {
        text-align: center;
    }
    
    .footer-menu li a {
        justify-content: center;
    }
    
    .contact-info li {
        justify-content: center;
        text-align: left;
    }
    
    .social-icons {
        justify-content: center;
    }
    
    .payment-methods {
        justify-content: center;
        margin-top: 15px;
    }
    
    .scroll-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
}

@media (max-width: 575px) {
    .newsletter-form .input-wrapper {
        flex-direction: column;
    }
    
    .newsletter-form .submit-btn {
        width: 100%;
        padding: 12px;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */

.footer-widget {
    animation: fadeInUp 0.6s ease-out backwards;
}

.footer-widget:nth-child(1) { animation-delay: 0.1s; }
.footer-widget:nth-child(2) { animation-delay: 0.2s; }
.footer-widget:nth-child(3) { animation-delay: 0.3s; }
.footer-widget:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover glow effect for interactive elements */
.social-icon:hover,
.footer-menu li a:hover,
.newsletter-form .submit-btn:hover {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

/* Category icon */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.icon-item {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.icon-item i {
    font-size: 28px;
    color: #333;
    transition: all 0.3s ease;
}

.icon-item:hover {
    border-color: #2d7a3e;
    background: #f8f9fa;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(45, 122, 62, 0.2);
}

.icon-item:hover i {
    color: #2d7a3e;
    transform: scale(1.1);
}

.icon-item.selected {
    border-color: #2d7a3e;
    background: linear-gradient(135deg, #2d7a3e 0%, #1a4d2e 100%);
    box-shadow: 0 4px 15px rgba(45, 122, 62, 0.3);
}

.icon-item.selected i {
    color: white;
}

.icon-item.hidden {
    display: none;
}

.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 10px; max-height: 400px; overflow-y: auto; }
.icon-item { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border: 2px solid #e0e0e0; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; background: white; }
.icon-item i { font-size: 28px; color: #333; transition: all 0.3s ease; }
.icon-item:hover { border-color: #2d7a3e; background: #f8f9fa; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(45, 122, 62, 0.2); }
.icon-item:hover i { color: #2d7a3e; transform: scale(1.1); }
.icon-item.selected { border-color: #2d7a3e; background: linear-gradient(135deg, #2d7a3e 0%, #1a4d2e 100%); box-shadow: 0 4px 15px rgba(45, 122, 62, 0.3); }
.icon-item.selected i { color: white; }
.icon-item.hidden { display: none; }


.category-icon-display {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.category-icon-display i {
    font-size: 22px;
    color: #2d7a3e;
}

.category-icon-style {
    transition: all 0.3s ease;
    cursor: pointer;
}

.category__icon-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.category__icon-wrapper a {
    text-decoration: none;
    display: block;
}

.category__icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.category__icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #2d7a3e 0%, #1a4d2e 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 50%;
}

.category__icon i {
    font-size: 32px;
    color: #2d7a3e;
    position: relative;
    z-index: 1;
    transition: all 0.4s ease;
}

/* Hover Effects */
.category-icon-style:hover .category__icon {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 12px 30px rgba(45, 122, 62, 0.25);
}

.category-icon-style:hover .category__icon::before {
    opacity: 1;
}

.category-icon-style:hover .category__icon i {
    color: #ffffff;
    transform: scale(1.1) rotate(5deg);
}

/* Category Content */
.category__content {
    transition: all 0.3s ease;
}

.category__title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

.category__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.category-icon-style:hover .category__title,
.category-icon-style:hover .category__title a {
    color: #2d7a3e;
}

.category__count {
    font-size: 13px;
    color: #6c757d;
    font-weight: 500;
}

/* Active State */
.category-icon-style.active .category__icon {
    background: linear-gradient(135deg, #2d7a3e 0%, #1a4d2e 100%);
    box-shadow: 0 8px 25px rgba(45, 122, 62, 0.3);
}

.category-icon-style.active .category__icon::before {
    opacity: 1;
}

.category-icon-style.active .category__icon i {
    color: #ffffff;
}

.category-icon-style.active .category__title,
.category-icon-style.active .category__title a {
    color: #2d7a3e;
    font-weight: 700;
}

/* Responsive */
@media (max-width: 575px) {
    .category__icon {
        width: 65px;
        height: 65px;
    }
    
    .category__icon i {
        font-size: 28px;
    }
    
    .category__title {
        font-size: 14px;
    }
    
    .category__count {
        font-size: 12px;
    }
}


/* ============================================
   QUANTITY DISCOUNT STYLES
   ============================================ */

/* Discount Info Box */
.discount-info-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #dee2e6;
}

.discount-info-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #2d7a3e;
    margin-bottom: 12px;
    font-size: 14px;
}

.discount-info-header i {
    font-size: 16px;
}

.discount-tiers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.discount-tier {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 8px;
    font-size: 13px;
    color: #6c757d;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.discount-tier i {
    font-size: 14px;
    opacity: 0.3;
}

.discount-tier.active {
    background: linear-gradient(135deg, #2d7a3e 0%, #1a4d2e 100%);
    color: white;
    border-color: #2d7a3e;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(45, 122, 62, 0.2);
}

.discount-tier.active i {
    opacity: 1;
    animation: checkPulse 0.6s ease;
}

@keyframes checkPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Discount Row in Summary */
.discount-row {
    background: #fff3cd;
    border-radius: 8px;
    padding: 12px !important;
    border: 1px solid #ffc107;
}

.discount-row span {
    color: #856404 !important;
    font-weight: 600;
}

.discount-amount {
    color: #d63384 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

/* Savings Badge */
.savings-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    margin: 15px 0;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    animation: savingsPulse 2s infinite;
}

.savings-badge i {
    font-size: 18px;
}

@keyframes savingsPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
    }
}

/* Summary Row Styles */
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.summary-row span:first-child {
    color: #6c757d;
    font-size: 14px;
}

.summary-amount {
    font-weight: 600;
    color: #212529;
    font-size: 15px;
}

.summary-row-total {
    border-bottom: none;
    border-top: 2px solid #2d7a3e;
    margin-top: 10px;
    padding-top: 15px;
}

.summary-row-total span:first-child {
    font-size: 16px;
    font-weight: 700;
    color: #212529;
}

.summary-amount-total {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #2d7a3e !important;
}

/* Responsive */
@media (max-width: 991px) {
    .discount-info-box {
        padding: 12px;
    }
    
    .discount-tier {
        font-size: 12px;
        padding: 6px 10px;
    }
    
    .savings-badge {
        font-size: 13px;
        padding: 10px 16px;
    }
}

@media (max-width: 575px) {
    .discount-info-header {
        font-size: 13px;
    }
    
    .discount-tier {
        font-size: 11px;
    }
    
    .savings-badge {
        font-size: 12px;
        padding: 8px 12px;
    }
    
    .summary-amount-total {
        font-size: 20px !important;
    }
}

.nav-link .badge {
    font-size: 9px;
    padding: 2px 6px;
    font-weight: 600;
}

.nav-link.active {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    font-weight: 600;
}

.menu-label .badge {
    font-size: 10px;
    padding: 3px 8px;
}

/* ============================================
   STORY SECTION CERTIFICATES (INSIDE)
   ============================================ */

.story-certificates-wrapper {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 24px;
    padding: 50px 30px;
    position: relative;
    overflow: hidden;
}

.story-certificates-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 30%, rgba(45, 122, 62, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

.certificates-header {
    position: relative;
    z-index: 2;
}

.certificates-title {
    font-size: 32px;
    font-weight: 700;
    color: #2d7a3e;
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
}

.certificates-title::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #2d7a3e 0%, #1a4d2e 100%);
    border-radius: 2px;
}

.certificates-subtitle {
    font-size: 16px;
    color: #6c757d;
    margin: 0;
}

.certificates-slider-container {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 50px;
}

.certificates-carousel {
    overflow: hidden;
    padding: 20px 5px;
}

/* Certificate Card */
.certificate-card {
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

.certificate-image {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    background: #fff;
    padding: 15px;
    transition: all 0.4s ease;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.certificate-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    transition: all 0.4s ease;
}

/* Overlay */
.certificate-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(45, 122, 62, 0.95) 0%, rgba(26, 77, 46, 0.95) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s ease;
    border-radius: 16px;
}

.certificate-overlay i {
    font-size: 48px;
    color: white;
    margin-bottom: 15px;
    transform: scale(0.5);
    transition: all 0.4s ease;
}

.certificate-overlay span {
    color: white;
    font-size: 16px;
    font-weight: 600;
    transform: translateY(20px);
    transition: all 0.4s ease;
    opacity: 0;
}

/* Hover Effects */
.certificate-card:hover .certificate-image {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(45, 122, 62, 0.25);
}

.certificate-card:hover .certificate-overlay {
    opacity: 1;
}

.certificate-card:hover .certificate-overlay i {
    transform: scale(1);
}

.certificate-card:hover .certificate-overlay span {
    transform: translateY(0);
    opacity: 1;
}

.certificate-card:hover .certificate-image img {
    transform: scale(1.05);
}

/* Navigation Buttons */
.cert-button-next,
.cert-button-prev {
    width: 45px;
    height: 45px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    color: #2d7a3e;
    transition: all 0.3s ease;
}

.cert-button-next:hover,
.cert-button-prev:hover {
    background: linear-gradient(135deg, #2d7a3e 0%, #1a4d2e 100%);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(45, 122, 62, 0.3);
}

.cert-button-next::after,
.cert-button-prev::after {
    font-size: 18px;
    font-weight: bold;
}

/* Active Slide Enhancement */
.certificates-carousel .swiper-slide-active .certificate-card {
    transform: scale(1.02);
}

/* Responsive */
@media (max-width: 991px) {
    .story-certificates-wrapper {
        padding: 40px 20px;
    }

    .certificate-image {
        height: 240px;
    }
    
    .certificates-slider-container {
        padding: 20px 35px;
    }

    .certificates-title {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .story-certificates-wrapper {
        padding: 30px 15px;
        border-radius: 16px;
    }

    .certificates-title {
        font-size: 24px;
    }

    .certificates-subtitle {
        font-size: 14px;
    }
    
    .certificate-image {
        height: 220px;
        padding: 10px;
    }
    
    .certificate-overlay i {
        font-size: 36px;
    }
    
    .certificate-overlay span {
        font-size: 14px;
    }
    
    .cert-button-next,
    .cert-button-prev {
        width: 35px;
        height: 35px;
    }

    .cert-button-next::after,
    .cert-button-prev::after {
        font-size: 14px;
    }

    .certificates-slider-container {
        padding: 20px 25px;
    }
}

@media (max-width: 575px) {
    .certificate-image {
        height: 200px;
    }

    .certificates-header {
        margin-bottom: 20px !important;
    }

    .certificates-slider-container {
        padding: 10px 20px;
    }
}

/* Make sure story section has proper spacing */
.story-section {
    padding: 80px 0;
    position: relative;
}


/* ============================================
   ENHANCED NEWSLETTER POPUP STYLES
   ============================================ */

.enhanced-newsletter-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.8);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 99999;
   opacity: 0;
   visibility: hidden;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.enhanced-newsletter-overlay.active {
   opacity: 1;
   visibility: visible;
}

.enhanced-newsletter-container {
   position: relative;
   max-width: 950px;
   width: 95%;
   background: #fff;
   border-radius: 25px;
   overflow: hidden;
   box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
   transform: scale(0.8);
   transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.enhanced-newsletter-overlay.active .enhanced-newsletter-container {
   transform: scale(1);
}

/* Close Button */
.enhanced-close-btn {
   position: absolute;
   top: 20px;
   right: 20px;
   width: 45px;
   height: 45px;
   background: rgba(255, 255, 255, 0.95);
   border: none;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 10;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
   transition: all 0.3s ease;
}

.enhanced-close-btn:hover {
   background: #ff6b6b;
   color: #fff;
   transform: rotate(90deg) scale(1.1);
}

.enhanced-close-btn i {
   font-size: 20px;
}

/* Newsletter Wrapper */
.enhanced-newsletter-wrapper {
   display: flex;
   min-height: 600px;
}

/* Left Section - Branding */
.enhanced-left-section {
   flex: 0 0 45%;
   background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 40px;
}

/* Brand Logo */
.enhanced-brand-logo {
   position: relative;
   z-index: 3;
   margin-bottom: 30px;
   animation: logoFloat 3s ease-in-out infinite;
}

.enhanced-brand-logo .logo-image {
   max-width: 200px;
   height: auto;
   filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
}

@keyframes logoFloat {
   0%, 100% {
      transform: translateY(0);
   }
   50% {
      transform: translateY(-10px);
   }
}

/* Hero Image */
.enhanced-hero-image {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
   opacity: 0.2;
}

.enhanced-hero-image .hero-bg-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* Organic Badge */
.enhanced-organic-badge {
   position: relative;
   z-index: 3;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 12px 25px;
   background: rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(10px);
   border: 2px solid rgba(255, 255, 255, 0.3);
   border-radius: 50px;
   color: #fff;
   font-size: 14px;
   font-weight: 600;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.enhanced-organic-badge i {
   font-size: 18px;
}

/* Decorative Shapes */
.enhanced-shapes {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 2;
}

.enhanced-shapes .shape {
   position: absolute;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.1);
   animation: shapeFloat 15s infinite ease-in-out;
}

.enhanced-shapes .shape-1 {
   width: 300px;
   height: 300px;
   top: -100px;
   left: -100px;
   animation-delay: 0s;
}

.enhanced-shapes .shape-2 {
   width: 200px;
   height: 200px;
   bottom: -50px;
   right: -50px;
   animation-delay: 3s;
}

.enhanced-shapes .shape-3 {
   width: 150px;
   height: 150px;
   top: 50%;
   left: 50%;
   animation-delay: 6s;
}

@keyframes shapeFloat {
   0%, 100% {
      transform: translate(0, 0) rotate(0deg);
   }
   33% {
      transform: translate(30px, -30px) rotate(120deg);
   }
   66% {
      transform: translate(-20px, 20px) rotate(240deg);
   }
}

/* Right Section - Form */
.enhanced-right-section {
   flex: 1;
   padding: 50px 45px;
   display: flex;
   flex-direction: column;
   background: #fff;
   overflow-y: auto;
   max-height: 600px;
}

/* Language Selector */
.enhanced-language-selector {
   margin-bottom: 30px;
}

.language-label {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   font-weight: 600;
   color: #666;
   margin-bottom: 12px;
}

.language-label i {
   color: var(--primary-green);
}

.language-buttons {
   display: flex;
   gap: 12px;
}

.lang-btn {
   flex: 1;
   padding: 12px 20px;
   background: #f8f9fa;
   border: 2px solid #e0e0e0;
   border-radius: 12px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   font-size: 14px;
   font-weight: 600;
   color: #333;
   transition: all 0.3s ease;
}

.lang-btn:hover {
   background: #f0f0f0;
   border-color: var(--primary-green);
}

.lang-btn.active {
   background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
   border-color: var(--primary-green);
   color: #fff;
}

.lang-btn .flag {
   font-size: 20px;
}

/* Newsletter Icon */
.enhanced-newsletter-icon {
   width: 80px;
   height: 80px;
   background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 25px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.enhanced-newsletter-icon i {
   font-size: 36px;
   color: #fff;
}

/* Dynamic Content */
.enhanced-content {
   text-align: center;
   margin-bottom: 30px;
}

.enhanced-content > div {
   display: none;
}

.enhanced-content > div.active-content {
   display: block;
   animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(10px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.enhanced-title {
   font-size: 28px;
   font-weight: 800;
   color: #333;
   margin-bottom: 12px;
   line-height: 1.3;
}

.enhanced-description {
   font-size: 15px;
   color: #666;
   line-height: 1.6;
   margin: 0;
}

/* Form */
.enhanced-form {
   margin-bottom: 25px;
}

.enhanced-input-group {
   position: relative;
   margin-bottom: 20px;
}

.input-icon-wrapper {
   position: absolute;
   left: 20px;
   top: 50%;
   transform: translateY(-50%);
   color: #999;
   font-size: 18px;
}

.enhanced-email-input {
   width: 100%;
   padding: 18px 20px 18px 55px;
   border: 2px solid #e0e0e0;
   border-radius: 12px;
   font-size: 15px;
   color: #333;
   transition: all 0.3s ease;
}

.enhanced-email-input:focus {
   outline: none;
   border-color: var(--primary-green);
   box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.1);
}

.enhanced-subscribe-btn {
   width: 100%;
   padding: 18px 30px;
   background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
   border: none;
   border-radius: 12px;
   color: #fff;
   font-size: 16px;
   font-weight: 700;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   transition: all 0.3s ease;
   box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3);
}

.enhanced-subscribe-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 12px 30px rgba(76, 175, 80, 0.4);
}

.enhanced-subscribe-btn i {
   font-size: 18px;
}

/* WhatsApp Button */
.enhanced-whatsapp-btn {
   display: flex;
   align-items: center;
   gap: 15px;
   padding: 18px 25px;
   background: linear-gradient(135deg, #25D366, #128C7E);
   border-radius: 12px;
   text-decoration: none;
   color: #fff;
   margin-bottom: 25px;
   transition: all 0.3s ease;
   box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}

.enhanced-whatsapp-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4);
   color: #fff;
}

.whatsapp-icon {
   width: 50px;
   height: 50px;
   background: rgba(255, 255, 255, 0.2);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.whatsapp-icon i {
   font-size: 26px;
}

.whatsapp-text {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.whatsapp-title {
   font-size: 16px;
   font-weight: 700;
}

.whatsapp-subtitle {
   font-size: 13px;
   opacity: 0.9;
}

/* Benefits */
.enhanced-benefits {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-bottom: 20px;
}

.benefit-item {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 14px;
   color: #666;
}

.benefit-item i {
   color: var(--primary-green);
   font-size: 18px;
}

/* Privacy Notice */
.enhanced-privacy {
   text-align: center;
   font-size: 13px;
   color: #999;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
}

.enhanced-privacy i {
   color: var(--primary-green);
}

/* Success Message */
.enhanced-success {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: #fff;
   padding: 40px;
   border-radius: 20px;
   text-align: center;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
   z-index: 100;
}

.enhanced-success i {
   font-size: 60px;
   color: var(--primary-green);
   margin-bottom: 20px;
}

.enhanced-success h4 {
   font-size: 24px;
   font-weight: 800;
   color: #333;
   margin-bottom: 10px;
}

.enhanced-success p {
   font-size: 15px;
   color: #666;
   margin: 0;
}

/* Responsive Styles */
@media (max-width: 768px) {
   .enhanced-newsletter-wrapper {
      flex-direction: column;
   }

   .enhanced-left-section {
      flex: 0 0 250px;
      padding: 30px 20px;
   }

   .enhanced-brand-logo .logo-image {
      max-width: 150px;
   }

   .enhanced-right-section {
      padding: 35px 25px;
      max-height: 500px;
   }

   .enhanced-title {
      font-size: 22px;
   }

   .enhanced-description {
      font-size: 14px;
   }

   .language-buttons {
      flex-direction: column;
   }

   .whatsapp-title {
      font-size: 14px;
   }

   .whatsapp-subtitle {
      font-size: 12px;
   }
}

@media (max-width: 576px) {
   .enhanced-newsletter-container {
      width: 98%;
      border-radius: 15px;
   }

   .enhanced-left-section {
      flex: 0 0 200px;
   }

   .enhanced-brand-logo .logo-image {
      max-width: 120px;
   }

   .enhanced-right-section {
      padding: 25px 20px;
   }

   .enhanced-title {
      font-size: 20px;
   }

   .enhanced-close-btn {
      width: 40px;
      height: 40px;
      top: 15px;
      right: 15px;
   }
}


/* ============================================
   SIMPLE POPUP STYLES
   ============================================ */

.simple-popup-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.85);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 99999;
   opacity: 0;
   visibility: hidden;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.simple-popup-overlay.active {
   opacity: 1;
   visibility: visible;
   display: flex; 
}

.simple-popup-container {
   position: relative;
   max-width: 1000px;
   width: 95%;
   background: #fff;
   border-radius: 30px;
   overflow: hidden;
   box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
   transform: scale(0.8);
   transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.simple-popup-overlay.active .simple-popup-container {
   transform: scale(1);
}

/* Close Button */
.simple-close-btn {
   position: absolute;
   top: 25px;
   right: 25px;
   width: 50px;
   height: 50px;
   background: rgba(255, 255, 255, 0.95);
   border: none;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 10;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
   transition: all 0.3s ease;
}

.simple-close-btn:hover {
   background: #ff6b6b;
   color: #fff;
   transform: rotate(90deg) scale(1.1);
}

.simple-close-btn i {
   font-size: 22px;
}

/* Popup Wrapper */
.simple-popup-wrapper {
   display: flex;
   min-height: 550px;
}

/* ============================================
   LEFT SECTION - LOGO & WHATSAPP
   ============================================ */

.simple-left-section {
   flex: 0 0 45%;
   background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 50px 40px;
   gap: 40px;
}

/* Brand Logo */
.simple-brand-logo {
   position: relative;
   z-index: 3;
   animation: logoFloat 3s ease-in-out infinite;
}

.simple-brand-logo .logo-img {
   max-width: 250px;
   height: auto;
   filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.3));
}

@keyframes logoFloat {
   0%, 100% {
      transform: translateY(0);
   }
   50% {
      transform: translateY(-15px);
   }
}

/* WhatsApp Group Button */
.simple-whatsapp-group-btn {
   position: relative;
   z-index: 3;
   width: 100%;
   max-width: 400px;
   padding: 25px 30px;
   background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
   border-radius: 20px;
   text-decoration: none;
   color: #fff;
   display: flex;
   align-items: center;
   gap: 20px;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 15px 40px rgba(37, 211, 102, 0.4);
}

.simple-whatsapp-group-btn:hover {
   transform: translateY(-5px);
   box-shadow: 0 20px 50px rgba(37, 211, 102, 0.5);
   color: #fff;
}

.whatsapp-icon-large {
   width: 65px;
   height: 65px;
   background: rgba(255, 255, 255, 0.2);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   animation: pulse 2s infinite;
}

@keyframes pulse {
   0%, 100% {
      transform: scale(1);
   }
   50% {
      transform: scale(1.05);
   }
}

.whatsapp-icon-large i {
   font-size: 35px;
}

.whatsapp-content {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.whatsapp-title {
   font-size: 18px;
   font-weight: 800;
   line-height: 1.3;
}

.whatsapp-subtitle {
   font-size: 14px;
   opacity: 0.95;
   font-weight: 500;
}

.whatsapp-arrow {
   width: 40px;
   height: 40px;
   background: rgba(255, 255, 255, 0.2);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: transform 0.3s ease;
}

.simple-whatsapp-group-btn:hover .whatsapp-arrow {
   transform: translateX(5px);
}

.whatsapp-arrow i {
   font-size: 18px;
}

/* Background Image */
.simple-bg-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
   opacity: 0.15;
}

.simple-bg-overlay .bg-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* Decorative Shapes */
.simple-shapes {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 2;
   pointer-events: none;
}

.simple-shapes .shape {
   position: absolute;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.08);
   animation: shapeFloat 20s infinite ease-in-out;
}

.simple-shapes .shape-1 {
   width: 350px;
   height: 350px;
   top: -150px;
   left: -150px;
   animation-delay: 0s;
}

.simple-shapes .shape-2 {
   width: 250px;
   height: 250px;
   bottom: -80px;
   right: -80px;
   animation-delay: 4s;
}

.simple-shapes .shape-3 {
   width: 180px;
   height: 180px;
   top: 50%;
   right: -50px;
   animation-delay: 8s;
}

@keyframes shapeFloat {
   0%, 100% {
      transform: translate(0, 0) rotate(0deg);
   }
   33% {
      transform: translate(40px, -40px) rotate(120deg);
   }
   66% {
      transform: translate(-30px, 30px) rotate(240deg);
   }
}

/* ============================================
   RIGHT SECTION - LANGUAGE SELECTION
   ============================================ */

.simple-right-section {
   flex: 1;
   padding: 60px 50px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background: #fff;
}

/* Main Heading */
.simple-main-heading {
   text-align: center;
   margin-bottom: 50px;
}

.simple-main-heading h2 {
   font-size: 42px;
   font-weight: 900;
   color: #333;
   margin-bottom: 10px;
   line-height: 1.2;
}

.simple-main-heading p {
   font-size: 32px;
   font-weight: 700;
   color: #666;
   margin: 0;
}

/* Language Grid */
.simple-language-grid {
   display: flex;
   gap: 25px;
   margin-bottom: 40px;
   width: 100%;
   max-width: 500px;
}

/* Language Card */
.simple-lang-card {
   flex: 1;
   padding: 30px 25px;
   background: #f8f9fa;
   border: 3px solid #e0e0e0;
   border-radius: 20px;
   cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   overflow: hidden;
}

.simple-lang-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
   opacity: 0;
   transition: opacity 0.3s ease;
}

.simple-lang-card:hover {
   border-color: var(--primary-green);
   transform: translateY(-5px);
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.simple-lang-card.active {
   background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
   border-color: var(--primary-green);
   color: #fff;
   transform: scale(1.05);
   box-shadow: 0 20px 50px rgba(76, 175, 80, 0.3);
}

.simple-lang-card > * {
   position: relative;
   z-index: 1;
}

.lang-flag {
   width: 80px;
   height: 80px;
   background: rgba(255, 255, 255, 0.2);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 5px;
}

.simple-lang-card.active .lang-flag {
   background: rgba(255, 255, 255, 0.25);
}

.flag-emoji {
   font-size: 45px;
}

.lang-name {
   font-size: 26px;
   font-weight: 800;
   margin-bottom: 2px;
}

.lang-english {
   font-size: 14px;
   opacity: 0.7;
   font-weight: 600;
}

.simple-lang-card.active .lang-english {
   opacity: 0.9;
}

.lang-check {
   position: absolute;
   top: 15px;
   right: 15px;
   width: 35px;
   height: 35px;
   background: #fff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transform: scale(0);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.simple-lang-card.active .lang-check {
   opacity: 1;
   transform: scale(1);
}

.lang-check i {
   color: var(--primary-green);
   font-size: 20px;
}

/* Confirm Button */
.simple-confirm-btn {
   width: 100%;
   max-width: 500px;
   padding: 22px 40px;
   background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
   border: none;
   border-radius: 15px;
   color: #fff;
   font-size: 20px;
   font-weight: 800;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 15px;
   transition: all 0.3s ease;
   box-shadow: 0 10px 30px rgba(76, 175, 80, 0.3);
}

.simple-confirm-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 15px 40px rgba(76, 175, 80, 0.4);
}

.simple-confirm-btn i {
   font-size: 22px;
   transition: transform 0.3s ease;
}

.simple-confirm-btn:hover i {
   transform: translateX(5px);
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

/* Tablet Landscape */
@media (max-width: 1024px) {
   .simple-popup-container {
      max-width: 900px;
   }

   .simple-left-section {
      padding: 45px 35px;
      gap: 35px;
   }

   .simple-brand-logo .logo-img {
      max-width: 220px;
   }

   .simple-right-section {
      padding: 55px 45px;
   }

   .simple-main-heading h2 {
      font-size: 38px;
   }

   .simple-main-heading p {
      font-size: 28px;
   }
}

/* Tablet Portrait & Below - Vertical Layout */
@media (max-width: 768px) {
   .simple-popup-overlay {
      padding: 20px;
      align-items: center;
   }

   .simple-popup-container {
      width: 100%;
      max-width: 500px;
      border-radius: 25px;
      max-height: none;
      overflow: visible;
   }

   .simple-popup-wrapper {
      flex-direction: column;
      min-height: auto;
   }

   /* Left Section - Compact Top Section */
   .simple-left-section {
      flex: 0 0 auto;
      padding: 35px 25px 30px;
      gap: 20px;
      min-height: auto;
   }

   .simple-brand-logo .logo-img {
      max-width: 160px;
   }

   .simple-whatsapp-group-btn {
      max-width: 100%;
      padding: 18px 20px;
      gap: 12px;
   }

   .whatsapp-icon-large {
      width: 55px;
      height: 55px;
   }

   .whatsapp-icon-large i {
      font-size: 30px;
   }

   .whatsapp-title {
      font-size: 15px;
   }

   .whatsapp-subtitle {
      font-size: 12px;
   }

   .whatsapp-arrow {
      width: 36px;
      height: 36px;
   }

   .whatsapp-arrow i {
      font-size: 16px;
   }

   /* Right Section - Expanded */
   .simple-right-section {
      padding: 35px 25px 40px;
   }

   .simple-main-heading {
      margin-bottom: 30px;
   }

   .simple-main-heading h2 {
      font-size: 28px;
   }

   .simple-main-heading p {
      font-size: 22px;
   }

   /* KEEP LANGUAGE CARDS SIDE BY SIDE */
   .simple-language-grid {
      flex-direction: row;
      gap: 15px;
      margin-bottom: 30px;
   }

   .simple-lang-card {
      padding: 25px 20px;
      flex: 1;
   }

   .lang-flag {
      width: 70px;
      height: 70px;
   }

   .flag-emoji {
      font-size: 38px;
   }

   .lang-name {
      font-size: 22px;
   }

   .lang-english {
      font-size: 13px;
   }

   .simple-confirm-btn {
      padding: 18px 35px;
      font-size: 18px;
   }

   /* Close button */
   .simple-close-btn {
      width: 46px;
      height: 46px;
      top: 20px;
      right: 20px;
   }

   .simple-close-btn i {
      font-size: 20px;
   }

   /* Decorative shapes - reduce size */
   .simple-shapes .shape-1 {
      width: 250px;
      height: 250px;
      top: -100px;
      left: -100px;
   }

   .simple-shapes .shape-2 {
      width: 180px;
      height: 180px;
      bottom: -60px;
      right: -60px;
   }

   .simple-shapes .shape-3 {
      width: 130px;
      height: 130px;
   }
}

/* Mobile Landscape */
@media (max-width: 640px) {
   .simple-popup-container {
      max-width: 480px;
   }

   .simple-left-section {
      padding: 30px 22px 28px;
      gap: 18px;
   }

   .simple-brand-logo .logo-img {
      max-width: 150px;
   }

   .simple-whatsapp-group-btn {
      padding: 16px 18px;
      gap: 12px;
      border-radius: 18px;
   }

   .whatsapp-icon-large {
      width: 52px;
      height: 52px;
   }

   .whatsapp-icon-large i {
      font-size: 28px;
   }

   .whatsapp-title {
      font-size: 14px;
   }

   .whatsapp-subtitle {
      font-size: 11px;
   }

   .simple-right-section {
      padding: 32px 22px 35px;
   }

   .simple-main-heading {
      margin-bottom: 28px;
   }

   .simple-main-heading h2 {
      font-size: 26px;
   }

   .simple-main-heading p {
      font-size: 20px;
   }

   /* KEEP SIDE BY SIDE */
   .simple-language-grid {
      flex-direction: row;
      gap: 12px;
      margin-bottom: 28px;
   }

   .simple-lang-card {
      padding: 22px 18px;
   }

   .lang-flag {
      width: 65px;
      height: 65px;
   }

   .flag-emoji {
      font-size: 36px;
   }

   .lang-name {
      font-size: 20px;
   }

   .simple-confirm-btn {
      padding: 17px 32px;
      font-size: 17px;
   }
}

/* Mobile Portrait - Small Screens */
@media (max-width: 480px) {
   .simple-popup-overlay {
      padding: 15px;
   }

   .simple-popup-container {
      max-width: 100%;
      border-radius: 20px;
   }

   .simple-left-section {
      padding: 28px 20px 25px;
      gap: 18px;
   }

   .simple-brand-logo .logo-img {
      max-width: 140px;
   }

   .simple-whatsapp-group-btn {
      padding: 15px 18px;
      gap: 10px;
      border-radius: 16px;
   }

   .whatsapp-icon-large {
      width: 50px;
      height: 50px;
   }

   .whatsapp-icon-large i {
      font-size: 26px;
   }

   .whatsapp-title {
      font-size: 13px;
      line-height: 1.4;
   }

   .whatsapp-subtitle {
      font-size: 10px;
   }

   .whatsapp-arrow {
      width: 34px;
      height: 34px;
   }

   .whatsapp-arrow i {
      font-size: 14px;
   }

   .simple-right-section {
      padding: 28px 20px 32px;
   }

   .simple-main-heading {
      margin-bottom: 25px;
   }

   .simple-main-heading h2 {
      font-size: 24px;
   }

   .simple-main-heading p {
      font-size: 19px;
   }

   /* KEEP SIDE BY SIDE */
   .simple-language-grid {
      flex-direction: row;
      gap: 10px;
      margin-bottom: 25px;
   }

   .simple-lang-card {
      padding: 20px 16px;
      border-radius: 16px;
      flex: 1;
   }

   .lang-flag {
      width: 62px;
      height: 62px;
   }

   .flag-emoji {
      font-size: 34px;
   }

   .lang-name {
      font-size: 19px;
   }

   .lang-english {
      font-size: 12px;
   }

   .lang-check {
      width: 30px;
      height: 30px;
      top: 10px;
      right: 10px;
   }

   .lang-check i {
      font-size: 17px;
   }

   .simple-confirm-btn {
      padding: 16px 30px;
      font-size: 16px;
      border-radius: 13px;
   }

   .simple-close-btn {
      width: 42px;
      height: 42px;
      top: 16px;
      right: 16px;
   }

   .simple-close-btn i {
      font-size: 18px;
   }
}

/* Very Small Mobile Devices */
@media (max-width: 360px) {
   .simple-popup-overlay {
      padding: 10px;
   }

   .simple-popup-container {
      border-radius: 18px;
   }

   .simple-left-section {
      padding: 25px 18px 22px;
      gap: 16px;
   }

   .simple-brand-logo .logo-img {
      max-width: 130px;
   }

   .simple-whatsapp-group-btn {
      padding: 14px 16px;
      gap: 10px;
      border-radius: 14px;
   }

   .whatsapp-icon-large {
      width: 48px;
      height: 48px;
   }

   .whatsapp-icon-large i {
      font-size: 24px;
   }

   .whatsapp-title {
      font-size: 12px;
   }

   .whatsapp-subtitle {
      font-size: 9px;
   }

   .whatsapp-arrow {
      width: 32px;
      height: 32px;
   }

   .simple-right-section {
      padding: 25px 18px 28px;
   }

   .simple-main-heading {
      margin-bottom: 22px;
   }

   .simple-main-heading h2 {
      font-size: 22px;
   }

   .simple-main-heading p {
      font-size: 17px;
   }

   /* KEEP SIDE BY SIDE EVEN ON VERY SMALL SCREENS */
   .simple-language-grid {
      flex-direction: row;
      gap: 8px;
      margin-bottom: 22px;
   }

   .simple-lang-card {
      padding: 18px 14px;
      border-radius: 14px;
      flex: 1;
   }

   .lang-flag {
      width: 58px;
      height: 58px;
   }

   .flag-emoji {
      font-size: 32px;
   }

   .lang-name {
      font-size: 18px;
   }

   .lang-english {
      font-size: 11px;
   }

   .lang-check {
      width: 28px;
      height: 28px;
      top: 8px;
      right: 8px;
   }

   .lang-check i {
      font-size: 15px;
   }

   .simple-confirm-btn {
      padding: 15px 28px;
      font-size: 15px;
      border-radius: 12px;
   }

   .simple-close-btn {
      width: 40px;
      height: 40px;
      top: 14px;
      right: 14px;
   }

   .simple-close-btn i {
      font-size: 17px;
   }

   /* Reduce decorative shapes further */
   .simple-shapes .shape-1 {
      width: 200px;
      height: 200px;
   }

   .simple-shapes .shape-2 {
      width: 150px;
      height: 150px;
   }

   .simple-shapes .shape-3 {
      width: 100px;
      height: 100px;
   }
}

/* Landscape Orientation Fix for Mobile */
@media (max-height: 500px) and (orientation: landscape) {
   .simple-popup-container {
      max-height: 95vh;
   }

   .simple-left-section {
      padding: 25px 20px;
      gap: 15px;
   }

   .simple-brand-logo .logo-img {
      max-width: 100px;
   }

   .simple-whatsapp-group-btn {
      padding: 12px 15px;
   }

   .whatsapp-icon-large {
      width: 45px;
      height: 45px;
   }

   .whatsapp-icon-large i {
      font-size: 24px;
   }

   .simple-right-section {
      padding: 25px 20px;
   }

   .simple-main-heading {
      margin-bottom: 20px;
   }

   .simple-main-heading h2 {
      font-size: 22px;
   }

   .simple-main-heading p {
      font-size: 18px;
   }

   .simple-language-grid {
      margin-bottom: 20px;
   }

   .simple-lang-card {
      padding: 18px 16px;
   }

   .lang-flag {
      width: 50px;
      height: 50px;
   }

   .flag-emoji {
      font-size: 28px;
   }

   .lang-name {
      font-size: 18px;
   }

   .simple-confirm-btn {
      padding: 14px 28px;
      font-size: 15px;
   }
}
/* ============================================ 
    PREMIUM PARTNERS SLIDER SECTION - UPDATED
=============================================== */

.premium-partners-slider-section {
    padding: 100px 0;
    background: linear-gradient(to bottom, #ffffff, #f9fbf9);
    position: relative;
    overflow: hidden;
}

/* Header Styles */
.premium-partners-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.premium-partners-header .section-subtitle {
    color: var(--primary-green);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.premium-partners-header .section-title {
    font-size: 42px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 20px;
}

/* Partner Card Design - Image එක ලොකුවට පෙන්වීමට උස වැඩි කළා */
.premium-partner-card {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    height: 180px; /* උස 140 සිට 180 දක්වා වැඩි කළා */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

/* Logo Image එක පැහැදිලිව පෙන්වීමට */
.premium-partner-card img {
    max-width: 90%; /* Logo එක Card එකේ පළලින් 90% ක් ගන්නවා */
    max-height: 110px; /* Logo එකේ උස වැඩි කළා */
    object-fit: contain;
    filter: none !important; /* කළු-සුදු ගතිය සම්පූර්ණයෙන්ම ඉවත් කළා */
    opacity: 1 !important;   /* අඳුරු ගතිය ඉවත් කර සම්පූර්ණ පැහැදිලි බව ලබා දුන්නා */
    transition: all 0.4s ease;
}

/* Hover Effect - මෘදු Glow එකක් සහ Zoom එකක් */
.premium-partner-slide:hover .premium-partner-card {
    border-color: var(--primary-green);
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 128, 0, 0.08);
    background: #fff;
}

.premium-partner-slide:hover .premium-partner-card img {
    transform: scale(1.1); /* Hover කරද්දී Logo එක තවත් ලොකු වෙනවා */
}


/* Mobile Responsive - Mobile එකේදීත් Image එක පැහැදිලිව පෙනීමට */
@media (max-width: 768px) {
    .premium-partner-card {
        height: 140px;
        padding: 15px;
    }
    .premium-partner-card img {
        max-height: 80px;
    }
}

/* ============================================
   ELEGANT TESTIMONIALS SECTION
   ============================================ */

.elegant-testimonials-section {
   padding: 100px 0;
   background: #ffffff;
   position: relative;
   overflow: hidden;
}

/* Background Decorations */
.testimonials-bg-shape {
   position: absolute;
   width: 500px;
   height: 500px;
   border-radius: 50%;
   background: linear-gradient(135deg, rgba(76, 175, 80, 0.03), rgba(46, 125, 50, 0.05));
   pointer-events: none;
   z-index: 0;
}

.testimonials-shape-1 {
   top: -250px;
   left: -200px;
}

.testimonials-shape-2 {
   bottom: -250px;
   right: -200px;
}

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

.elegant-testimonials-slider-wrapper {
   position: relative;
   max-width: 1200px;
   margin: 0 auto;
   z-index: 1;
}

.elegant-testimonials-swiper {
   padding: 40px 80px 80px;
}

/* ============================================
   TESTIMONIAL CARD
   ============================================ */

.elegant-testimonial-card {
   background: linear-gradient(135deg, #f8fdf9, #ffffff);
   border: 2px solid #e8e8e8;
   border-radius: 24px;
   padding: 50px 40px;
   text-align: center;
   position: relative;
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
   min-height: 480px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.elegant-testimonial-card:hover {
   border-color: var(--primary-green);
   transform: translateY(-10px);
   box-shadow: 
      0 25px 60px rgba(76, 175, 80, 0.12),
      0 10px 25px rgba(0, 0, 0, 0.08);
}

/* Quote Icon */
.testimonial-quote-icon {
   position: absolute;
   top: 30px;
   right: 30px;
   width: 60px;
   height: 60px;
   background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(46, 125, 50, 0.15));
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0.4;
}

.testimonial-quote-icon i {
   font-size: 28px;
   color: var(--primary-green);
}

/* ============================================
   CUSTOMER IMAGE
   ============================================ */

.testimonial-image-wrapper {
   margin-bottom: 25px;
}

.testimonial-image-border {
   width: 120px;
   height: 120px;
   margin: 0 auto;
   background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
   border-radius: 50%;
   padding: 4px;
   position: relative;
   animation: pulseRing 2s infinite;
}

@keyframes pulseRing {
   0%, 100% {
      box-shadow: 
         0 0 0 0 rgba(76, 175, 80, 0.4),
         0 0 0 8px rgba(76, 175, 80, 0.1);
   }
   50% {
      box-shadow: 
         0 0 0 8px rgba(76, 175, 80, 0.2),
         0 0 0 16px rgba(76, 175, 80, 0.05);
   }
}

.testimonial-image-inner {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   overflow: hidden;
   border: 4px solid #fff;
}

.testimonial-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.4s ease;
}

.elegant-testimonial-card:hover .testimonial-img {
   transform: scale(1.1);
}

/* ============================================
   RATING STARS
   ============================================ */

.testimonial-rating {
   margin-bottom: 25px;
}

.testimonial-rating i {
   font-size: 18px;
   color: #ffc107;
   margin: 0 3px;
}

.testimonial-rating i.far {
   color: #ddd;
}

/* ============================================
   COMMENT TEXT
   ============================================ */

.testimonial-comment {
   margin-bottom: 30px;
   flex: 1;
   display: flex;
   align-items: center;
}

.testimonial-comment p {
   font-size: 16px;
   line-height: 1.8;
   color: #555;
   font-style: italic;
   margin: 0;
}

/* ============================================
   CUSTOMER INFO
   ============================================ */

.testimonial-customer-info {
   margin-bottom: 20px;
}

.testimonial-customer-name {
   font-size: 20px;
   font-weight: 800;
   color: #1a1a1a;
   margin-bottom: 8px;
}

.testimonial-customer-location {
   font-size: 14px;
   color: #888;
   margin: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
}

.testimonial-customer-location i {
   color: var(--primary-green);
   font-size: 12px;
}

/* ============================================
   DECORATIVE ELEMENT
   ============================================ */

.testimonial-decoration {
   width: 60px;
   height: 4px;
   background: linear-gradient(to right, var(--primary-green), var(--dark-green));
   margin: 0 auto;
   border-radius: 2px;
}

/* ============================================
   NAVIGATION ARROWS
   ============================================ */

.testimonials-arrow-next,
.testimonials-arrow-prev {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 55px;
   height: 55px;
   background: #ffffff;
   border: 2px solid #e8e8e8;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.3s ease;
   z-index: 10;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.testimonials-arrow-next {
   right: 10px;
}

.testimonials-arrow-prev {
   left: 10px;
}

.testimonials-arrow-next i,
.testimonials-arrow-prev i {
   font-size: 18px;
   color: #333;
   transition: color 0.3s ease;
}

.testimonials-arrow-next:hover,
.testimonials-arrow-prev:hover {
   background: var(--primary-green);
   border-color: var(--primary-green);
   transform: translateY(-50%) scale(1.1);
   box-shadow: 
      0 12px 30px rgba(76, 175, 80, 0.25),
      0 5px 15px rgba(0, 0, 0, 0.1);
}

.testimonials-arrow-next:hover i,
.testimonials-arrow-prev:hover i {
   color: #fff;
}

/* ============================================
   PAGINATION DOTS
   ============================================ */

.testimonials-pagination {
   text-align: center;
   margin-top: 40px;
}

.testimonials-pagination .swiper-pagination-bullet {
   width: 12px;
   height: 12px;
   background: #d0d0d0;
   opacity: 1;
   margin: 0 6px;
   transition: all 0.3s ease;
}

.testimonials-pagination .swiper-pagination-bullet-active {
   background: var(--primary-green);
   width: 35px;
   border-radius: 6px;
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

@media (max-width: 1199px) {
   .elegant-testimonials-swiper {
      padding: 30px 70px 70px;
   }

   .elegant-testimonial-card {
      padding: 45px 35px;
      min-height: 450px;
   }

   .testimonials-arrow-next,
   .testimonials-arrow-prev {
      width: 50px;
      height: 50px;
   }
}

@media (max-width: 991px) {
   .elegant-testimonials-section {
      padding: 80px 0;
   }

   .elegant-testimonials-swiper {
      padding: 25px 60px 60px;
   }

   .elegant-testimonial-card {
      padding: 40px 30px;
      min-height: 420px;
   }

   .testimonial-image-border {
      width: 110px;
      height: 110px;
   }

   .testimonial-comment p {
      font-size: 15px;
   }
}

@media (max-width: 767px) {
   .elegant-testimonials-section {
      padding: 70px 0;
   }

   .elegant-testimonials-swiper {
      padding: 20px 50px 55px;
   }

   .elegant-testimonial-card {
      padding: 35px 25px;
      min-height: 400px;
      border-radius: 20px;
   }

   .testimonial-quote-icon {
      width: 50px;
      height: 50px;
      top: 20px;
      right: 20px;
   }

   .testimonial-quote-icon i {
      font-size: 24px;
   }

   .testimonial-image-border {
      width: 100px;
      height: 100px;
   }

   .testimonial-rating i {
      font-size: 16px;
   }

   .testimonial-comment p {
      font-size: 14px;
   }

   .testimonial-customer-name {
      font-size: 18px;
   }

   .testimonials-arrow-next,
   .testimonials-arrow-prev {
      width: 45px;
      height: 45px;
   }

   .testimonials-arrow-next i,
   .testimonials-arrow-prev i {
      font-size: 16px;
   }
}

@media (max-width: 575px) {
   .elegant-testimonials-section {
      padding: 60px 0;
   }

   .elegant-testimonials-swiper {
      padding: 15px 40px 50px;
   }

   .elegant-testimonial-card {
      padding: 30px 20px;
      min-height: 380px;
   }

   .testimonial-image-border {
      width: 90px;
      height: 90px;
   }

   .testimonials-arrow-next {
      right: 0;
   }

   .testimonials-arrow-prev {
      left: 0;
   }
}

@media (max-width: 400px) {
   .elegant-testimonials-swiper {
      padding: 12px 35px 45px;
   }

   .elegant-testimonial-card {
      padding: 25px 18px;
      min-height: 360px;
   }
}

/* Animation */
.unified-section-header.fade-in {
   animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}


/* ============================================
   MODERN BLOG SECTION
   ============================================ */

.modern-blog-section {
   padding: 100px 0;
   background: #f8f9fa;
   position: relative;
}

/* ============================================
   BLOG GRID
   ============================================ */

.modern-blog-grid {
   --bs-gutter-x: 2rem;
   --bs-gutter-y: 2rem;
}

/* ============================================
   BLOG CARD
   ============================================ */

.modern-blog-card {
   background: #ffffff;
   border-radius: 20px;
   overflow: hidden;
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   position: relative;
   height: 100%;
   display: flex;
   flex-direction: column;
}

.modern-blog-card:hover {
   transform: translateY(-12px);
   box-shadow: 
      0 20px 50px rgba(76, 175, 80, 0.15),
      0 10px 25px rgba(0, 0, 0, 0.1);
}

/* ============================================
   BLOG IMAGE
   ============================================ */

.modern-blog-image {
   position: relative;
   width: 100%;
   height: 260px;
   overflow: hidden;
}

.blog-image-link {
   display: block;
   width: 100%;
   height: 100%;
}

.blog-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   transition: transform 0.6s ease;
}

.modern-blog-card:hover .blog-img {
   transform: scale(1.1);
}

/* Category Badge */
.blog-category-badge {
   position: absolute;
   top: 20px;
   left: 20px;
   background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
   color: #fff;
   padding: 8px 18px;
   border-radius: 50px;
   font-size: 13px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   display: flex;
   align-items: center;
   gap: 6px;
   box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
   z-index: 2;
}

.blog-category-badge i {
   font-size: 11px;
}

/* ============================================
   BLOG CONTENT
   ============================================ */

.modern-blog-content {
   padding: 30px 25px;
   flex: 1;
   display: flex;
   flex-direction: column;
}

/* Meta Info */
.blog-meta-info {
   display: flex;
   align-items: center;
   gap: 20px;
   margin-bottom: 18px;
   flex-wrap: wrap;
}

.blog-meta-item {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 13px;
   color: #888;
}

.blog-meta-item i {
   color: var(--primary-green);
   font-size: 12px;
}

/* Blog Title */
.modern-blog-title {
   margin-bottom: 15px;
}

.modern-blog-title a {
   font-size: 20px;
   font-weight: 800;
   color: #1a1a1a;
   text-decoration: none;
   line-height: 1.4;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   transition: color 0.3s ease;
}

.modern-blog-title a:hover {
   color: var(--primary-green);
}

/* Blog Excerpt */
.modern-blog-excerpt {
   font-size: 15px;
   line-height: 1.7;
   color: #666;
   margin-bottom: 20px;
   flex: 1;
}

/* ============================================
   BLOG FOOTER
   ============================================ */

.modern-blog-footer {
   margin-top: auto;
}

.modern-read-more-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 12px 28px;
   background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
   color: #fff;
   border-radius: 50px;
   text-decoration: none;
   font-weight: 700;
   font-size: 14px;
   transition: all 0.3s ease;
   box-shadow: 0 4px 15px rgba(76, 175, 80, 0.25);
}

.modern-read-more-btn i {
   font-size: 12px;
   transition: transform 0.3s ease;
}

.modern-read-more-btn:hover {
   background: linear-gradient(135deg, var(--dark-green), var(--primary-green));
   transform: translateX(5px);
   box-shadow: 0 6px 20px rgba(76, 175, 80, 0.35);
}

.modern-read-more-btn:hover i {
   transform: translateX(5px);
}

/* ============================================
   HOVER OVERLAY
   ============================================ */

.blog-hover-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, rgba(76, 175, 80, 0.05), rgba(46, 125, 50, 0.08));
   opacity: 0;
   transition: opacity 0.4s ease;
   pointer-events: none;
}

.modern-blog-card:hover .blog-hover-overlay {
   opacity: 1;
}

/* ============================================
   VIEW ALL BUTTON
   ============================================ */

.modern-view-all-btn {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   padding: 16px 40px;
   background: #ffffff;
   border: 2px solid var(--primary-green);
   color: var(--primary-green);
   border-radius: 50px;
   text-decoration: none;
   font-weight: 800;
   font-size: 16px;
   transition: all 0.4s ease;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.modern-view-all-btn i {
   font-size: 14px;
   transition: transform 0.3s ease;
}

.modern-view-all-btn:hover {
   background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
   color: #fff;
   border-color: transparent;
   transform: translateY(-3px);
   box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);
}

.modern-view-all-btn:hover i {
   transform: translateX(5px);
}

/* ============================================
   NO BLOGS MESSAGE
   ============================================ */

.no-blogs-message {
   text-align: center;
   padding: 80px 20px;
   background: #ffffff;
   border-radius: 20px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.no-blogs-icon {
   width: 100px;
   height: 100px;
   margin: 0 auto 25px;
   background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(46, 125, 50, 0.15));
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.no-blogs-icon i {
   font-size: 50px;
   color: var(--primary-green);
   opacity: 0.5;
}

.no-blogs-message h4 {
   font-size: 28px;
   font-weight: 800;
   color: #1a1a1a;
   margin-bottom: 12px;
}

.no-blogs-message p {
   font-size: 16px;
   color: #666;
   margin: 0;
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

@media (max-width: 1199px) {
   .modern-blog-image {
      height: 240px;
   }

   .modern-blog-title a {
      font-size: 19px;
   }
}

@media (max-width: 991px) {
   .modern-blog-section {
      padding: 80px 0;
   }

   .modern-blog-grid {
      --bs-gutter-x: 1.5rem;
      --bs-gutter-y: 1.5rem;
   }

   .modern-blog-image {
      height: 220px;
   }

   .modern-blog-content {
      padding: 25px 22px;
   }

   .modern-blog-title a {
      font-size: 18px;
   }

   .modern-blog-excerpt {
      font-size: 14px;
   }
}

@media (max-width: 767px) {
   .modern-blog-section {
      padding: 70px 0;
   }

   .modern-blog-grid {
      --bs-gutter-x: 1.2rem;
      --bs-gutter-y: 1.2rem;
   }

   .modern-blog-image {
      height: 200px;
   }

   .modern-blog-content {
      padding: 22px 20px;
   }

   .blog-category-badge {
      padding: 7px 16px;
      font-size: 12px;
      top: 15px;
      left: 15px;
   }

   .modern-blog-title a {
      font-size: 17px;
   }

   .modern-read-more-btn {
      padding: 10px 24px;
      font-size: 13px;
   }

   .modern-view-all-btn {
      padding: 14px 35px;
      font-size: 15px;
   }
}

@media (max-width: 575px) {
   .modern-blog-section {
      padding: 60px 0;
   }

   .modern-blog-image {
      height: 180px;
   }

   .modern-blog-content {
      padding: 20px 18px;
   }

   .blog-meta-info {
      gap: 15px;
   }

   .blog-meta-item {
      font-size: 12px;
   }

   .modern-blog-title a {
      font-size: 16px;
   }

   .modern-blog-excerpt {
      font-size: 13px;
      margin-bottom: 18px;
   }

   .modern-view-all-btn {
      padding: 12px 30px;
      font-size: 14px;
   }

   .no-blogs-message {
      padding: 60px 20px;
   }

   .no-blogs-icon {
      width: 80px;
      height: 80px;
   }

   .no-blogs-icon i {
      font-size: 40px;
   }

   .no-blogs-message h4 {
      font-size: 24px;
   }

   .no-blogs-message p {
      font-size: 14px;
   }
}

/* Animation */
.unified-section-header.fade-in,
.modern-blog-card.fade-in,
.modern-view-all-btn.fade-in {
   animation: fadeInUp 0.6s ease-out forwards;
}

.modern-blog-card.fade-in:nth-child(1) { animation-delay: 0.1s; }
.modern-blog-card.fade-in:nth-child(2) { animation-delay: 0.2s; }
.modern-blog-card.fade-in:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}
/* ============================================
   ANIMATED PRODUCT SECTION - WHITE BACKGROUND
   ============================================ */

.animated-product-section {
   padding: 100px 0;
   background: #ffffff;
   position: relative;
   overflow: hidden;
}

/* ============================================
   ANIMATED BACKGROUND SHAPES - WHITE/LIGHT
   ============================================ */

.animated-bg-shapes {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   pointer-events: none;
   z-index: 0;
}

.bg-shape {
   position: absolute;
   border-radius: 50%;
   background: linear-gradient(135deg, rgba(76, 175, 80, 0.05), rgba(46, 125, 50, 0.08));
   animation: floatShape 20s infinite ease-in-out;
}

.bg-shape-1 {
   width: 300px;
   height: 300px;
   top: -150px;
   left: -100px;
   animation-delay: 0s;
   animation-duration: 25s;
}

.bg-shape-2 {
   width: 200px;
   height: 200px;
   top: 50%;
   right: -80px;
   animation-delay: 2s;
   animation-duration: 20s;
}

.bg-shape-3 {
   width: 250px;
   height: 250px;
   bottom: -100px;
   left: 20%;
   animation-delay: 4s;
   animation-duration: 30s;
}

.bg-shape-4 {
   width: 150px;
   height: 150px;
   top: 30%;
   left: 50%;
   animation-delay: 1s;
   animation-duration: 22s;
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(76, 175, 80, 0.05));
}

.bg-shape-5 {
   width: 180px;
   height: 180px;
   bottom: 30%;
   right: 15%;
   animation-delay: 3s;
   animation-duration: 28s;
}

/* Floating Animation for Shapes */
@keyframes floatShape {
   0%, 100% {
      transform: translate(0, 0) rotate(0deg) scale(1);
   }
   25% {
      transform: translate(30px, -40px) rotate(90deg) scale(1.1);
   }
   50% {
      transform: translate(-20px, -60px) rotate(180deg) scale(0.9);
   }
   75% {
      transform: translate(-40px, -30px) rotate(270deg) scale(1.05);
   }
}

/* ============================================
   SECTION HEADER ANIMATIONS
   ============================================ */

.unified-section-header {
   position: relative;
   z-index: 1;
}

.section-badge {
   position: relative;
   overflow: hidden;
}

.section-badge::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
   );
   animation: shimmer 3s infinite;
}

@keyframes shimmer {
   0% {
      left: -100%;
   }
   100% {
      left: 100%;
   }
}

/* Pulse Animation for Badge */
.pulse {
   animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
   0%, 100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
   }
   50% {
      transform: scale(1.05);
      box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
   }
}

/* ============================================
   PRODUCT CARD ANIMATIONS
   ============================================ */

.product-card-animated {
   position: relative;
   z-index: 1;
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.product-card-animated:hover {
   transform: translateY(-12px) scale(1.02);
   box-shadow: 
      0 20px 50px rgba(76, 175, 80, 0.15),
      0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Card Glow Effect */
.product-card-animated::before {
   content: '';
   position: absolute;
   top: -2px;
   left: -2px;
   right: -2px;
   bottom: -2px;
   background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
   border-radius: inherit;
   opacity: 0;
   z-index: -1;
   transition: opacity 0.4s ease;
}

.product-card-animated:hover::before {
   opacity: 0.1;
}

/* ============================================
   BADGE ANIMATIONS
   ============================================ */

.animated-badge {
   animation: bounceIn 0.8s ease-out;
   background: linear-gradient(135deg, #ff4444, #ff6b6b);
}

.animated-hot-badge {
   animation: pulseGlow 2s infinite;
   background: linear-gradient(135deg, #ff9800, #f44336);
}

@keyframes bounceIn {
   0% {
      transform: scale(0);
      opacity: 0;
   }
   50% {
      transform: scale(1.2);
   }
   100% {
      transform: scale(1);
      opacity: 1;
   }
}

@keyframes pulseGlow {
   0%, 100% {
      box-shadow: 0 0 10px rgba(255, 152, 0, 0.5);
   }
   50% {
      box-shadow: 0 0 20px rgba(255, 152, 0, 0.8);
   }
}

/* ============================================
   IMAGE ANIMATIONS
   ============================================ */

.tpproduct__thumb img {
   transition: transform 0.6s ease;
}

.product-card-animated:hover .tpproduct__thumb img {
   transform: scale(1.1) rotate(2deg);
}

/* ============================================
   WISHLIST & QUICK VIEW BUTTONS
   ============================================ */

.tpproduct__shopping a {
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
}

.tpproduct__shopping a::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 0;
   height: 0;
   border-radius: 50%;
   background: rgba(76, 175, 80, 0.3);
   transform: translate(-50%, -50%);
   transition: width 0.4s ease, height 0.4s ease;
}

.tpproduct__shopping a:hover::before {
   width: 200px;
   height: 200px;
}

.tpproduct__shopping a:hover {
   transform: scale(1.1) rotate(5deg);
}

/* ============================================
   ADD TO CART BUTTON ANIMATION
   ============================================ */

.tp-btn-2 {
   position: relative;
   overflow: hidden;
   transition: all 0.3s ease;
}

.tp-btn-2::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 0;
   height: 0;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.3);
   transform: translate(-50%, -50%);
   transition: width 0.6s ease, height 0.6s ease;
}

.tp-btn-2:hover::after {
   width: 300px;
   height: 300px;
}

.tp-btn-2:hover {
   transform: scale(1.05);
   box-shadow: 0 5px 20px rgba(76, 175, 80, 0.4);
}

/* ============================================
   PRICE ANIMATION
   ============================================ */

.tpproduct__price span {
   display: inline-block;
   transition: all 0.3s ease;
}

.product-card-animated:hover .tpproduct__price span {
   color: var(--primary-green);
   transform: scale(1.1);
}

/* ============================================
   SOLD BADGE ANIMATION
   ============================================ */

.sold-badge {
   transition: all 0.3s ease;
}

.product-card-animated:hover .sold-badge {
   transform: translateX(5px);
}

.sold-badge i {
   animation: checkPulse 2s infinite;
}

@keyframes checkPulse {
   0%, 100% {
      transform: scale(1);
   }
   50% {
      transform: scale(1.2);
   }
}

/* ============================================
   CATEGORY TAG ANIMATION
   ============================================ */

.tpproduct__content-weight a {
   position: relative;
   transition: color 0.3s ease;
}

.tpproduct__content-weight a::after {
   content: '';
   position: absolute;
   bottom: -2px;
   left: 0;
   width: 0;
   height: 2px;
   background: var(--primary-green);
   transition: width 0.3s ease;
}

.product-card-animated:hover .tpproduct__content-weight a::after {
   width: 100%;
}

/* ============================================
   STAGGER ANIMATION FOR SLIDER ITEMS
   ============================================ */

.swiper-slide {
   opacity: 0;
   transform: translateY(30px);
   animation: slideIn 0.6s ease-out forwards;
}

.swiper-slide:nth-child(1) { animation-delay: 0.1s; }
.swiper-slide:nth-child(2) { animation-delay: 0.2s; }
.swiper-slide:nth-child(3) { animation-delay: 0.3s; }
.swiper-slide:nth-child(4) { animation-delay: 0.4s; }
.swiper-slide:nth-child(5) { animation-delay: 0.5s; }
.swiper-slide:nth-child(6) { animation-delay: 0.6s; }

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

/* ============================================
   NAVIGATION ARROWS ANIMATION
   ============================================ */

.tpprduct-arrow a {
   transition: all 0.3s ease;
}

.tpprduct-arrow a:hover {
   transform: scale(1.2);
   box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}

/* ============================================
   RESPONSIVE ANIMATIONS
   ============================================ */

@media (max-width: 768px) {
   .animated-bg-shapes {
      opacity: 0.5;
   }

   .bg-shape {
      animation-duration: 15s !important;
   }

   .product-card-animated:hover {
      transform: translateY(-8px) scale(1.01);
   }
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
   .bg-shape,
   .pulse,
   .animated-badge,
   .animated-hot-badge,
   .swiper-slide {
      animation: none !important;
   }

   .product-card-animated,
   .tpproduct__thumb img,
   .tp-btn-2 {
      transition: none !important;
   }
}

/* ========================================
   CHARITY HERO SECTION - ENHANCED
======================================== */

.about-hero-section {
    position: relative;
    min-height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.charity-hero-gradient {
    background: linear-gradient(135deg, rgba(129, 178, 20, 0.95) 0%, rgba(106, 150, 17, 0.95) 100%),
                url('../img/banner/charity-hero-bg.jpg') center/cover no-repeat;
}

.about-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.about-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 100px 20px;
    animation: fadeInUp 0.8s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.charity-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 20px;
    border-radius: 50px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
    animation: badgePulse 2s ease infinite;
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.charity-badge i {
    margin-right: 8px;
}

.about-hero-title {
    font-size: 56px;
    font-weight: 700;
    color: white;
    margin-bottom: 25px;
    line-height: 1.2;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.about-hero-subtitle {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

.hero-buttons-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
}

.about-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 45px;
    background: white;
    color: var(--primary-green);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.about-hero-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    color: var(--dark-green);
}

.about-hero-btn i {
    transition: transform 0.3s ease;
}

.about-hero-btn:hover i {
    transform: translateX(5px);
}

.btn-outline {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
}

.btn-outline:hover {
    background: #fff;
    color: var(--primary-green);
}

/* Decorative Elements */
.hero-decorative {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 6s ease-in-out infinite;
}

.hero-decorative-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

.hero-decorative-2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
    animation-delay: 2s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-20px) scale(1.05);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .about-hero-title {
        font-size: 42px;
    }

    .about-hero-subtitle {
        font-size: 18px;
    }

    .about-hero-btn {
        padding: 15px 35px;
        font-size: 15px;
    }

    .hero-decorative-1 {
        width: 200px;
        height: 200px;
    }

    .hero-decorative-2 {
        width: 150px;
        height: 150px;
    }
}

/* ============================================
   OUR COMPANY DONATIONS SECTION
   ============================================ */

.company-donations-section {
    padding: 100px 0;
    background: #fff;
}

.company-donations-wrapper {
    margin-top: 50px;
}

.company-donations-swiper {
    padding: 0 50px 50px;
}

/* Company Donation Card */
.company-donation-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.company-donation-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(76, 175, 80, 0.15);
}

/* Donation Image */
.donation-img-wrapper {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.donation-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.company-donation-card:hover .donation-img {
    transform: scale(1.1);
}

/* Date Badge */
.donation-date-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
    color: #fff;
    padding: 10px 15px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}

.date-day {
    display: block;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

.date-month {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Card Content */
.donation-card-content {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.donation-card-title {
    font-size: 20px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 15px;
    line-height: 1.3;
}

.donation-card-description {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 20px;
    flex: 1;
}

/* Donation Meta */
.donation-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}

.donation-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
}

.donation-meta-item i {
    color: var(--primary-green);
    font-size: 14px;
}

/* Navigation Arrows */
.company-donations-next,
.company-donations-prev {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: #fff;
    border: 2px solid var(--primary-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.company-donations-next {
    right: 0;
}

.company-donations-prev {
    left: 0;
}

.company-donations-next i,
.company-donations-prev i {
    font-size: 18px;
    color: var(--primary-green);
    transition: color 0.3s ease;
}

.company-donations-next:hover,
.company-donations-prev:hover {
    background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
    border-color: transparent;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);
}

.company-donations-next:hover i,
.company-donations-prev:hover i {
    color: #fff;
}

/* Pagination */
.company-donations-pagination {
    text-align: center;
    margin-top: 30px;
}

.company-donations-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #d0d0d0;
    opacity: 1;
    margin: 0 5px;
    transition: all 0.3s ease;
}

.company-donations-pagination .swiper-pagination-bullet-active {
    background: var(--primary-green);
    width: 30px;
    border-radius: 5px;
}

/* Responsive */
@media (max-width: 991px) {
    .company-donations-section {
        padding: 80px 0;
    }

    .company-donations-swiper {
        padding: 0 45px 45px;
    }

    .donation-img-wrapper {
        height: 220px;
    }

    .donation-card-title {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .company-donations-section {
        padding: 70px 0;
    }

    .company-donations-swiper {
        padding: 0 40px 40px;
    }

    .donation-img-wrapper {
        height: 200px;
    }

    .donation-card-content {
        padding: 20px;
    }

    .donation-card-title {
        font-size: 17px;
    }

    .donation-card-description {
        font-size: 13px;
    }

    .company-donations-next,
    .company-donations-prev {
        width: 45px;
        height: 45px;
    }
}

@media (max-width: 575px) {
    .company-donations-swiper {
        padding: 0 35px 35px;
    }

    .company-donations-next {
        right: -5px;
    }

    .company-donations-prev {
        left: -5px;
    }
}

/* Consultant Cards */
.consultant-card {
    text-align: center;
    padding: 30px 20px;
    transition: all 0.3s ease;
}

.consultant-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(76, 175, 80, 0.15);
}

.consultant-icon-wrapper {
    margin-bottom: 20px;
}

.consultant-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #fff;
    transition: transform 0.3s ease;
}

.consultant-card:hover .consultant-icon {
    transform: scale(1.1);
}

.zoom-icon {
    background: linear-gradient(135deg, #2196F3, #1976D2);
}

.youtube-icon {
    background: linear-gradient(135deg, #FF0000, #CC0000);
}

.whatsapp-icon {
    background: linear-gradient(135deg, #25D366, #128C7E);
}

.consultant-description {
    font-size: 14px;
    color: #666;
    margin: 15px 0;
    line-height: 1.6;
}

.consultant-features {
    margin: 20px 0;
    text-align: left;
}

.consultant-feature-item {
    padding: 8px 0;
    font-size: 14px;
    color: #555;
}

.consultant-feature-item i {
    color: var(--primary-green);
    margin-right: 8px;
}


/* ============================================
   ENHANCED OFFERS SECTION - STYLES
   ============================================ */

.enhanced-offers-section {
   position: relative;
   margin: 60px 0;
   overflow: hidden;
}

/* --- Flash Sale Card Unique Styles --- */

/* 1. Main Container Reset */
.flash-card-unique {
    padding: 0 !important;
    background: #fff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
}

/* 2. Image Padding Remove */
.flash-card-unique .tpproduct__thumb {
    padding: 0 !important; /* main.css eke thiyena 20px padding eka remove kala */
    margin: 0 !important;
    border-radius: 0 !important;
}

.flash-img-full {
    width: 100% !important;
    height: 250px !important;
    object-fit: cover !important;
    display: block;
}

/* 3. Disable Hover Image Swap (if any) */
.flash-card-unique:hover .tpproduct__thumb-img {
    display: none !important;
}

/* 4. Content Area Highlight */
.flash-content-unique {
    background-color: #fff !important;
    padding: 15px 10px 20px 10px !important;
}

.flash-title-bold a {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #222 !important;
}

/* 5. Price & Sold Badge */
.flash-price-container {
    margin: 8px 0;
}

.flash-new-price {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #d35400 !important;
}

.flash-sold-count {
    font-size: 12px;
    font-weight: 700;
    color: #e74c3c;
    background: #fff1f0;
    padding: 2px 10px;
    border-radius: 20px;
    display: inline-block;
}

.flash-payzy-tag {
    font-size: 11px;
    margin-top: 5px;
    color: #666;
}

.flash-payzy-tag img {
    width: 35px;
    vertical-align: middle;
}


/* 6. Side Actions Slide-in */
.flash-actions-wrapper {
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 5;
}

.flash-actions-wrapper a {
    width: 35px;
    height: 35px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    color: #333;
}
/* Product Card Layout Fix */
.custom-product-card {
    background: #fff;
    border-radius: 15px;
    padding: 15px;
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
    height: 100%;
}

.custom-product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* Image Highlight */
.product-main-img {
    width: 100%;
    height: 220px; /* Resize images to be uniform */
    object-fit: contain; /* Image eka cut wenne nathiwa box ekata fit wenna */
    transition: transform 0.5s ease;
}

.custom-product-card:hover .product-main-img {
    transform: scale(1.08);
}

/* Title Highlight */
.highlight-title a {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    line-height: 1.4;
    margin-top: 10px;
    display: block;
    transition: color 0.3s;
}

.highlight-title a:hover {
    color: var(--primary-green);
}

/* Price Highlight */
.highlight-price {
    margin-top: 8px;
}

.new-price {
    font-size: 20px;
    font-weight: 800;
    color: #e67e22; /* High contrast orange or red */
}

.old-price {
    font-size: 14px;
    margin-left: 8px;
    color: #999;
}

/* Sold Badge styling */
.sold-badge-v2 {
    background: #fdf2f2;
    color: #e74c3c;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
}

/* Side Buttons (Icons) */
.tpproduct__shopping-custom {
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transition: 0.3s;
    z-index: 5;
}

.custom-product-card:hover .tpproduct__shopping-custom {
    opacity: 1;
}

.tpproduct__shopping-custom a {
    width: 35px;
    height: 35px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    color: #333;
}

.tpproduct__shopping-custom a:hover {
    background: var(--primary-green);
    color: #fff;
}
/* --- Flash Sale Card Unique Styles (Strict Zero Padding) --- */

.flash-card-unique {
    padding: 0 !important; /* Card eke athule kisima padding ekak thiyanna epa */
    background: #fff !important;
    border-radius: 12px !important;
    overflow: hidden !important; /* Border walin eliyata yana kotas cut wenna */
    border: 1px solid rgba(0,0,0,0.08) !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Image Thumb Container */
.flash-card-unique .tpproduct__thumb {
    padding: 0 !important; /* Strict Zero Padding */
    margin: 0 !important;
    position: relative;
    width: 100%;
    height: 320px; /* Desktop height eka */
    overflow: hidden;
}

/* IMAGE FIX: Card eke size ekata hariyatama fit wenna */
.flash-img-full {
    width: 100% !important;
    height: 100% !important; /* Thumb container eke height ekama gannawa */
    object-fit: cover !important; /* Meeka thamaa image eka padding nathuwa fit karanne */
    display: block;
    padding: 0 !important; /* Image ekata padding add wela thiyenawa nam eka ain kala */
}

/* Content Area */
.flash-content-unique {
    background-color: #fff !important;
    padding: 20px 15px !important;
    flex-grow: 1;
    border-top: 1px solid #f0f0f0; /* Image eka saha content eka wen karanna podi border ekak */
}


/* Enhanced Background Wrapper - Green Theme */
.enhanced-offers-wrapper {
   position: relative;
   background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
   padding: 60px 0;
   overflow: hidden;
}

/* --- Flash Sale Card Unique Hover Effects --- */
/* --- Payzy Box Modern Style --- */

.flash-payzy-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f0fdf4; /* Very light green background */
    border: 1px dashed var(--primary-green); /* Dashed border ekak */
    padding: 5px 12px;
    border-radius: 8px;
    margin-top: 8px;
    transition: all 0.3s ease;
}

/* Mouse eka hover weddi background eka change wenna */
.flash-card-unique:hover .flash-payzy-tag {
    background: #dcfce7;
    transform: translateY(-2px);
}

.flash-payzy-tag span, 
.flash-payzy-tag small {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #166534 !important; /* Dark green text */
}

.flash-payzy-tag img {
    width: 40px !important;
    height: auto;
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.1));
}
/* --- Floating Actions Modern Hover --- */

.flash-actions-wrapper a {
    width: 40px;
    height: 40px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    color: #333;
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bounce effect එකක් සඳහා */
    position: relative;
}

/* Mouse එක icon එක උඩට ගෙනියන විට */
.flash-actions-wrapper a:hover {
    background-color: var(--primary-green) !important;
    color: #ffffff !important;
    transform: scale(1.2); /* Icon එක පොඩ්ඩක් ලොකු වෙනවා */
}

/* Tooltip එකක් වැනි කුඩා පණිවිඩයක් (Optional) */
.flash-actions-wrapper a::before {
    content: attr(aria-label); /* aria-label එකක් තිබේ නම් එය පෙන්වයි */
    position: absolute;
    right: 50px;
    background: #333;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}

.flash-actions-wrapper a:hover::before {
    opacity: 1;
    right: 45px;
}


/* Mobile වලදී icons වල size එක පොඩ්ඩක් අඩු කිරීම */
@media (max-width: 767px) {
    .flash-actions-wrapper a {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
}
/* Mobile adjustments */
@media (max-width: 767px) {
    .flash-payzy-tag {
        padding: 4px 8px;
        width: 90%; /* Mobile ekedi card eke width eken 90% k ganna */
    }
    
    .flash-payzy-tag span {
        font-size: 10px !important;
    }
}
/* Name eka hover weddi */
.flash-card-unique:hover .flash-title-bold a {
    color: var(--primary-green) !important;
    transition: all 0.3s ease;
}

/* Price eka hover weddi */
.flash-card-unique .flash-new-price {
    display: inline-block; /* Scale effect eka weda karanna meka oni */
    transition: all 0.3s ease;
}

.flash-card-unique:hover .flash-new-price {
    color: var(--primary-green) !important; /* Price ekath green wenwa */
    transform: scale(1.1); /* Poddak loku wenawa highlight wenna */
    text-shadow: 0px 2px 10px rgba(0, 255, 0, 0.2); /* Podi glow ekak */
}

/* Old Price eka hover weddi (Optional - meka thawa fade wenna) */
.flash-card-unique:hover .flash-old-price {
    opacity: 0.6;
    transition: all 0.3s ease;
}

/* 2. Image Zoom Effect (Padding nathuwa) */
.flash-card-unique .tpproduct__thumb {
    overflow: hidden; /* Zoom weddi image eka card eken eliyata yanne na */
}

.flash-img-full {
    transition: transform 0.8s ease-in-out !important; /* Zoom wenna yana kalaya */
}

.flash-card-unique:hover .flash-img-full {
    transform: scale(1.1); /* Image eka 10% loku wenawa */
}

/* 3. Floating Actions Smooth Slide-in */
.flash-actions-wrapper {
    opacity: 0;
    transform: translateX(20px); /* Arambe thiyenne dathayen eliye */
    transition: all 0.3s ease;
}

.flash-card-unique:hover .flash-actions-wrapper {
    opacity: 1;
    transform: translateX(0); /* Mouse eka thibbama athulata slide wenawa */
}

/* 4. Content Area Color change (Optional) */
.flash-card-unique:hover .flash-title-bold a {
    color: var(--primary-green) !important; /* Name eka primary color ekata mru wenawa */
}

/* Floating Background Shapes */
.floating-bg-shapes {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 1;
}

.bg-shape-item {
   position: absolute;
   background: rgba(255, 255, 255, 0.15);
   border-radius: 50%;
   animation: float-shape 12s infinite ease-in-out;
}

.shape-1 {
   width: 100px;
   height: 100px;
   top: 10%;
   left: 5%;
   animation-delay: 0s;
}

.shape-2 {
   width: 150px;
   height: 150px;
   top: 60%;
   right: 10%;
   animation-delay: 3s;
}

.shape-3 {
   width: 80px;
   height: 80px;
   bottom: 20%;
   left: 15%;
   animation-delay: 6s;
}

.shape-4 {
   width: 120px;
   height: 120px;
   top: 30%;
   right: 20%;
   animation-delay: 9s;
}

@keyframes float-shape {
   0%, 100% {
      transform: translate(0, 0) rotate(0deg);
      opacity: 0.3;
   }
   50% {
      transform: translate(20px, -20px) rotate(180deg);
      opacity: 0.6;
   }
}

/* Product Card Layout Fix */
.custom-product-card {
    background: #fff;
    border-radius: 15px;
    padding: 15px;
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
    height: 100%;
}

.custom-product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* Image Highlight */
.product-main-img {
    width: 100%;
    height: 220px; /* Resize images to be uniform */
    object-fit: contain; /* Image eka cut wenne nathiwa box ekata fit wenna */
    transition: transform 0.5s ease;
}

.custom-product-card:hover .product-main-img {
    transform: scale(1.08);
}

/* Title Highlight */
.highlight-title a {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    line-height: 1.4;
    margin-top: 10px;
    display: block;
    transition: color 0.3s;
}

.highlight-title a:hover {
    color: var(--primary-green);
}

/* Price Highlight */
.highlight-price {
    margin-top: 8px;
}

.new-price {
    font-size: 20px;
    font-weight: 800;
    color: #e67e22; /* High contrast orange or red */
}

.old-price {
    font-size: 14px;
    margin-left: 8px;
    color: #999;
}

/* Sold Badge styling */
.sold-badge-v2 {
    background: #fdf2f2;
    color: #e74c3c;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
}

/* Side Buttons (Icons) */
.tpproduct__shopping-custom {
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transition: 0.3s;
    z-index: 5;
}

.custom-product-card:hover .tpproduct__shopping-custom {
    opacity: 1;
}

.tpproduct__shopping-custom a {
    width: 35px;
    height: 35px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    color: #333;
}

.tpproduct__shopping-custom a:hover {
    background: var(--primary-green);
    color: #fff;
}

/* Flash Sale Badge */
.flash-badge-container {
   margin-bottom: 20px;
   position: relative;
   z-index: 2;
}

.flash-sale-badge {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: linear-gradient(135deg, #FF0000, #FF6B00);
   padding: 10px 30px;
   border-radius: 50px;
   box-shadow: 0 8px 25px rgba(255, 0, 0, 0.4);
   animation: badge-pulse 2s infinite;
}

@keyframes badge-pulse {
   0%, 100% {
      transform: scale(1);
   }
   50% {
      transform: scale(1.05);
   }
}

.flash-icon {
   font-size: 20px;
   color: #FFEB3B;
   animation: flash-blink 1s infinite;
}

@keyframes flash-blink {
   0%, 100% {
      opacity: 1;
   }
   50% {
      opacity: 0.5;
   }
}

.flash-text {
   font-size: 16px;
   font-weight: 900;
   color: #fff;
   letter-spacing: 2px;
   text-transform: uppercase;
}

/* Enhanced Header Content */
.enhanced-header-content {
   margin-bottom: 25px;
   position: relative;
   z-index: 2;
}

.enhanced-main-title {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 5px;
   margin-bottom: 15px;
}

.title-line-1 {
   font-size: 38px;
   font-weight: 900;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: 2px;
   text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.title-highlight {
   font-size: 44px;
   font-weight: 900;
   background: linear-gradient(90deg, #FFEB3B, #FFC107);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   text-transform: uppercase;
   letter-spacing: 2px;
   animation: title-shimmer 2s infinite;
}

@keyframes title-shimmer {
   0% {
      background-position: 0% 50%;
   }
   100% {
      background-position: 100% 50%;
   }
}

.enhanced-subtitle {
   font-size: 16px;
   color: rgba(255, 255, 255, 0.95);
   font-weight: 500;
   max-width: 600px;
   margin: 0 auto;
}

/* Countdown Timer */
.countdown-timer-wrapper {
   margin-bottom: 35px;
   position: relative;
   z-index: 2;
}

.countdown-label-text {
   font-size: 15px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 12px;
}

.countdown-label-text i {
   margin-right: 6px;
   animation: clock-tick 1s infinite;
}

@keyframes clock-tick {
   0%, 100% {
      transform: rotate(0deg);
   }
   50% {
      transform: rotate(10deg);
   }
}

.countdown-display {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: rgba(255, 255, 255, 0.2);
   padding: 15px 30px;
   border-radius: 15px;
   backdrop-filter: blur(10px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.countdown-box {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.countdown-num {
   font-size: 36px;
   font-weight: 900;
   color: #FFEB3B;
   line-height: 1;
   min-width: 55px;
   text-align: center;
   text-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.countdown-text {
   font-size: 10px;
   color: #fff;
   text-transform: uppercase;
   font-weight: 600;
   margin-top: 4px;
}

.countdown-sep {
   font-size: 32px;
   font-weight: 900;
   color: #fff;
   opacity: 0.7;
}

/* Responsive */
@media (max-width: 991px) {
   .title-line-1 {
      font-size: 32px;
   }

   .title-highlight {
      font-size: 36px;
   }

   .countdown-num {
      font-size: 30px;
      min-width: 50px;
   }
}

@media (max-width: 767px) {
   .enhanced-offers-wrapper {
      padding: 50px 0;
   }

   .flash-text {
      font-size: 14px;
   }

   .title-line-1 {
      font-size: 26px;
   }

   .title-highlight {
      font-size: 30px;
   }

   .enhanced-subtitle {
      font-size: 14px;
   }

   .countdown-display {
      gap: 8px;
      padding: 12px 20px;
   }

   .countdown-num {
      font-size: 24px;
      min-width: 40px;
   }

   .countdown-text {
      font-size: 9px;
   }

   .countdown-sep {
      font-size: 24px;
   }
}

/* Bottom section spacing remove */
.enhanced-offers-section {
   margin-bottom: 0 !important;
   padding-bottom: 0 !important;
}

.enhanced-offers-wrapper {
   padding-bottom: 147px !important;
   margin-bottom: 0 !important;
}

/* Top section spacing remove */
.product-coundown-area {
   margin-top: 0 !important;
   padding-top: 25px !important;
}

/* ============================================
   NAVIGATION ACTIVE STATES - FIXED VERSION
   NO INTERFERENCE WITH BLOG SECTION
   ============================================ */

/* Desktop Navigation Active Styles - SPECIFIC SELECTORS */
.header__menu.main-menu nav ul li {
    position: relative;
    margin: 0 20px;
    transition: all 0.3s ease;
}

.header__menu.main-menu nav ul li a {
    display: inline-block;
    padding: 30px 0;
    color: #333;
    font-weight: 600;
    font-size: 16px;
    position: relative;
    transition: all 0.3s ease;
}

/* Active State - Underline Animation */
.header__menu.main-menu nav ul li.active > a {
    color: var(--primary-green);
    font-weight: 700;
}

.header__menu.main-menu nav ul li.active > a::after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-green), var(--dark-green));
    border-radius: 2px;
    animation: navSlideIn 0.3s ease;
}

@keyframes navSlideIn {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 100%;
        opacity: 1;
    }
}

/* Hover State - Underline Preview */
.header__menu.main-menu nav ul li > a::before {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(129, 178, 20, 0.5), rgba(106, 150, 17, 0.5));
    border-radius: 2px;
    transition: width 0.3s ease;
}

.header__menu.main-menu nav ul li:hover:not(.active) > a::before {
    width: 100%;
}

.header__menu.main-menu nav ul li:hover:not(.active) > a {
    color: var(--primary-green);
}

/* Prevent ::before and ::after affecting blog sections */
.modern-blog-section *::before,
.modern-blog-section *::after,
.blog-section *::before,
.blog-section *::after,
.youtube-section *::before,
.youtube-section *::after {
    /* Blog section styles remain untouched */
}
/* ==========================================
   WISHLIST & CART COUNT BADGES
   ========================================== */

/* Wishlist Icon Container */
.header__info-wishlist {
    position: relative;
}

.header__info-wishlist button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Wishlist Count Badge */
.wishlist-count {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    background: #81b214 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    min-width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    padding: 0 5px !important;
    line-height: 1 !important;
    z-index: 1 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Hide when empty or zero */
.wishlist-count:empty {
    display: none !important;
}

/* Cart Count Badge (ensure same style) */
#cartCount {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #81b214;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0 5px;
    line-height: 1;
    z-index: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header__info-cart button {
    position: relative;
}

/* Mobile Bottom Nav Badges */
.mobile-bottom-nav .tp-wishlist-toggle,
.mobile-bottom-nav .tp-cart-toggle {
    position: relative;
}

.mobile-bottom-nav .badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #81b214;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0 4px;
    z-index: 1;
}

/* Hover effect */
.header__info-wishlist:hover .wishlist-count {
    transform: scale(1.1);
}

/* Pulse animation */
@keyframes wishlist-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.wishlist-count.pulse {
    animation: wishlist-pulse 0.5s ease;
}


/* ============================================
   PAYMENT SECTION - PREMIUM DESIGN
   ============================================ */

.payment-section-wrapper {
    background: #f8fafb;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #e8ecef;
}

/* Header */
.payment-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 2px dashed #e0e6ea;
}

.payment-header-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #81b214, #5a8a0a);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    flex-shrink: 0;
}

.payment-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a2332;
    margin: 0 0 2px 0;
}

.payment-section-sub {
    font-size: 11px;
    color: #7a8b9a;
    margin: 0;
}

/* Payment Cards Grid */
.payment-methods-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.payment-method-card {
    cursor: pointer;
    margin: 0;
    display: block;
}

.payment-method-card input[type="radio"] {
    display: none;
}

.payment-card-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border: 2px solid #e8ecef;
    border-radius: 12px;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.payment-card-inner::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(135deg, #81b214, #5a8a0a);
    transition: width 0.25s ease;
    border-radius: 0 0 0 0;
}

.payment-method-card:hover .payment-card-inner {
    border-color: #81b214;
    box-shadow: 0 4px 16px rgba(129, 178, 20, 0.15);
    transform: translateY(-1px);
}

.payment-method-card input:checked + .payment-card-inner {
    border-color: #81b214;
    background: linear-gradient(135deg, #f7fce8 0%, #eef7d0 100%);
    box-shadow: 0 4px 20px rgba(129, 178, 20, 0.2);
}

.payment-method-card input:checked + .payment-card-inner::before {
    width: 4px;
}

/* Radio Dot */
.payment-radio-dot {
    width: 20px;
    height: 20px;
    border: 2px solid #c8d4dd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.radio-inner {
    width: 10px;
    height: 10px;
    background: #81b214;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.2s ease;
}

.payment-method-card input:checked + .payment-card-inner .payment-radio-dot {
    border-color: #81b214;
}

.payment-method-card input:checked + .payment-card-inner .radio-inner {
    transform: scale(1);
}

/* Logo */
.payment-logo-wrap {
    width: 70px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 8px;
    border: 1px solid #eef0f3;
    padding: 4px 8px;
    flex-shrink: 0;
}

.payment-gateway-logo {
    max-width: 100%;
    max-height: 28px;
    object-fit: contain;
}

.payment-logo-fallback {
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* Info */
.payment-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.payment-name {
    font-size: 14px;
    font-weight: 700;
    color: #1a2332;
}

.payment-desc {
    font-size: 11px;
    color: #7a8b9a;
}

/* Badges */
.payment-badges {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.pay-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    background: #f0f4f8;
    color: #5a6a7a;
    letter-spacing: 0.3px;
}

.pay-badge-green {
    background: #e8f5e9;
    color: #2e7d32;
}

.pay-badge-purple {
    background: #ede7f6;
    color: #6a1b9a;
}

/* Check icon */
.payment-selected-check {
    color: #81b214;
    font-size: 18px;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.payment-method-card input:checked + .payment-card-inner .payment-selected-check {
    opacity: 1;
    transform: scale(1);
}

/* Accepted Cards */
.accepted-cards-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0 0;
    flex-wrap: wrap;
}

.accepted-label {
    font-size: 11px;
    color: #9aa5b0;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.card-icons-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.card-icon-img {
    height: 20px;
    width: auto;
    object-fit: contain;
    filter: grayscale(30%);
    opacity: 0.8;
    transition: all 0.2s;
}

.card-icon-img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.ssl-badge {
    margin-left: auto;
    font-size: 11px;
    color: #2e7d32;
    background: #e8f5e9;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
}

.ssl-badge i {
    font-size: 10px;
    margin-right: 3px;
}

/* Trust Bar */
.security-trust-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: white;
    border: 1px solid #e8ecef;
    border-radius: 12px;
    padding: 12px 16px;
    overflow: hidden;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
}

.trust-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #81b214, #5a8a0a);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 13px;
    flex-shrink: 0;
}

.trust-icon-blue {
    background: linear-gradient(135deg, #1976d2, #0d47a1);
}

.trust-icon-orange {
    background: linear-gradient(135deg, #f57c00, #e65100);
}

.trust-text {
    display: flex;
    flex-direction: column;
}

.trust-title {
    font-size: 12px;
    font-weight: 700;
    color: #1a2332;
    line-height: 1.2;
}

.trust-sub {
    font-size: 10px;
    color: #7a8b9a;
}

.trust-divider {
    width: 1px;
    height: 36px;
    background: #e8ecef;
    margin: 0 12px;
    flex-shrink: 0;
}

/* Place Order Button */
.place-order-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #81b214 0%, #5a8a0a 100%);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(129, 178, 20, 0.35);
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}

.place-order-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.5s ease;
}

.place-order-btn:hover::before {
    left: 100%;
}

.place-order-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(129, 178, 20, 0.45);
}

.place-order-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(129, 178, 20, 0.3);
}

.order-btn-icon {
    font-size: 14px;
    opacity: 0.9;
}

.order-btn-text {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.order-btn-arrow {
    font-size: 13px;
    margin-left: 4px;
    transition: transform 0.3s ease;
}

.place-order-btn:hover .order-btn-arrow {
    transform: translateX(4px);
}

.order-terms-text {
    text-align: center;
    font-size: 11px;
    color: #9aa5b0;
    margin: 8px 0 0 0;
}

.order-terms-text a {
    color: #81b214;
    text-decoration: none;
    font-weight: 600;
}

.order-terms-text a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 575px) {
    .payment-badges {
        display: none;
    }
    
    .trust-item {
        flex-direction: column;
        text-align: center;
        gap: 4px;
    }
    
    .trust-divider {
        height: 1px;
        width: 40px;
        margin: 0 4px;
    }
    
    .accepted-cards-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .ssl-badge {
        margin-left: 0;
    }
}


/* Society Tabs Wrapper */
.society-tabs-wrapper {
    margin-bottom: 50px;
}

.society-tabs {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Society Tab Button */
.society-tab-btn {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    padding: 25px 30px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.society-tab-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border-color: var(--primary-green);
}

.society-tab-btn.active {
    background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
    border-color: var(--primary-green);
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(129, 178, 20, 0.3);
}

/* Society Tab Icon */
.society-tab-icon {
    width: 60px;
    height: 60px;
    background: rgba(129, 178, 20, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.society-tab-btn.active .society-tab-icon {
    background: rgba(255, 255, 255, 0.2);
}

.society-tab-icon i {
    font-size: 28px;
    color: var(--primary-green);
    transition: all 0.3s ease;
}

.society-tab-btn.active .society-tab-icon i {
    color: #fff;
    transform: scale(1.1);
}

/* Society Tab Content */
.society-tab-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
}

.society-tab-number {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary-green);
    letter-spacing: 0.5px;
}

.society-tab-btn.active .society-tab-number {
    color: rgba(255, 255, 255, 0.9);
}

.society-tab-name {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

.society-tab-btn.active .society-tab-name {
    color: #fff;
}

/* Society Content */
.society-content {
    display: none;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

.society-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .society-tabs {
        flex-direction: column;
        gap: 15px;
    }

    .society-tab-btn {
        max-width: 100%;
    }

    .society-tab-icon {
        width: 50px;
        height: 50px;
    }

    .society-tab-icon i {
        font-size: 24px;
    }

    .society-tab-name {
        font-size: 15px;
    }
}

/* ============================================
   Z-INDEX HIERARCHY FIX
   ============================================ */

/* Mobile Header - Lower Priority */
#header-sticky-2,
.tpmobile-menu {
    z-index: 998 !important;
}

/* Cart Sidebar - Higher Priority */
.tpcartinfo,
.tp-cart-info-area {
    z-index: 9999 !important;
}

/* Wishlist Sidebar - Higher Priority */
.tpwishlistinfo,
.tp-wishlist-info-area {
    z-index: 9999 !important;
}

/* Search Sidebar - Higher Priority */
.tpsearchbar,
.tp-sidebar-area {
    z-index: 9999 !important;
}

/* Sidebar Overlays - Just Below Sidebars */
.cartbody-overlay,
.wishlistbody-overlay,
.search-body-overlay,
.body-overlay {
    z-index: 9998 !important;
}

/* Sidebar Menu (Hamburger Menu) - Medium Priority */
.tpsideinfo {
    z-index: 9997 !important;
}

/* Mobile Bottom Nav - Low Priority */
.mobile-bottom-nav {
    z-index: 999 !important;
}

/* Ensure sidebars stay on top when opened */
.tp-sidebar-opened,
.sidebar-opened {
    z-index: 9999 !important;
}


/* ============================================
   MOBILE SIDEBAR MENU - GREEN ACTIVE STATE
   ============================================ */

.tpsideinfo .mobile-menu ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.tpsideinfo .mobile-menu ul li a {
    display: block;
    padding: 15px 20px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

/* Active State - Green + White Background */
.tpsideinfo .mobile-menu ul li.active {
    background: linear-gradient(90deg, 
        rgba(129, 178, 20, 0.3) 0%, 
        rgba(255, 255, 255, 0.1) 100%);
    border-left: 4px solid var(--primary-green);
}

.tpsideinfo .mobile-menu ul li.active a {
    color: #fff;
    font-weight: 700;
    padding-left: 16px;
}

/* Active Indicator */
.tpsideinfo .mobile-menu ul li.active::after {
    content: '●';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-green);
    font-size: 20px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translateY(-50%) scale(1.2);
    }
}

/* Hover State */
.tpsideinfo .mobile-menu ul li:hover {
    background: rgba(255, 255, 255, 0.05);
}

.tpsideinfo .mobile-menu ul li:hover a {
    color: #fff;
    padding-left: 25px;
}

/* ============================================
   MOBILE HEADER WITHOUT LOGO
   ============================================ */

#header-sticky-2,
.tpmobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    z-index: 998;
    transition: all 0.3s ease;
}

/* Compact Container */
#header-sticky-2 .container-fluid {
    padding: 0 15px;
}

/* Reduced Row Height */
#header-sticky-2 .row {
    margin: 0;
    padding: 10px 0;
}


/* ============================================
   LEFT - HAMBURGER MENU (50% WIDTH)
   ============================================ */

#header-sticky-2 .col-3:first-child,
#header-sticky-2 .col-sm-3 {
    flex: 0 0 50%;
    max-width: 50%;
}

.mobile-menu-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.tp-menu-toggle {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(129, 178, 20, 0.3);
}

.tp-menu-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(129, 178, 20, 0.4);
}

.tp-menu-toggle:active {
    transform: scale(0.95);
}

.tp-menu-toggle i {
    font-size: 22px;
    color: #fff;
}

/* ============================================
   RIGHT - ICONS (50% WIDTH)
   ============================================ */

#header-sticky-2 .col-3:last-child,
#header-sticky-2 .col-sm-5 {
    flex: 0 0 50%;
    max-width: 50%;
}

#header-sticky-2 .header__info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

#header-sticky-2 .header__info-search,
#header-sticky-2 .header__info-user {
    margin-left: 0 !important;
}

#header-sticky-2 .header__info button,
#header-sticky-2 .header__info a {
    width: 45px;
    height: 45px;
    background: #f8f9fa;
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

#header-sticky-2 .header__info button:hover,
#header-sticky-2 .header__info a:hover {
    background: var(--primary-green);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(129, 178, 20, 0.3);
}

#header-sticky-2 .header__info button:hover i,
#header-sticky-2 .header__info a:hover i {
    color: #fff;
}

#header-sticky-2 .header__info i {
    font-size: 20px;
    color: #333;
    transition: color 0.3s ease;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 575px) {
    #header-sticky-2 .row {
        padding: 8px 0;
    }
    
    .tp-menu-toggle {
        width: 42px;
        height: 42px;
    }
    
    .tp-menu-toggle i {
        font-size: 20px;
    }
    
    #header-sticky-2 .header__info button,
    #header-sticky-2 .header__info a {
        width: 42px;
        height: 42px;
    }
    
    #header-sticky-2 .header__info i {
        font-size: 18px;
    }
    
    #header-sticky-2 .header__info {
        gap: 8px;
    }
}

@media (max-width: 374px) {
    #header-sticky-2 .container-fluid {
        padding: 0 10px;
    }
    
    .tp-menu-toggle {
        width: 40px;
        height: 40px;
    }
    
    #header-sticky-2 .header__info button,
    #header-sticky-2 .header__info a {
        width: 40px;
        height: 40px;
    }
    
    #header-sticky-2 .header__info {
        gap: 6px;
    }
}
/* ============================================
   HERO SECTIONS - MOBILE HEADER SPACING
   ============================================ */

/* Add padding for fixed mobile header */
@media (max-width: 1199px) {
    /* About Us Style Hero Sections */
    .about-hero-section {
        padding-top: 130px !important; /* Header height + spacing */
    }
    
    /* Home Hero Slider */
    .slider-area {
        padding-top: 70px !important;
    }
    
    /* Blog Hero */
    .blog-hero,
    .faq-hero {
        padding-top: 130px !important;
    }
    
    /* Charity Hero */
    .charity-hero-section {
        padding-top: 130px !important;
    }
}
/* ============================================
   MOBILE HEADER SPACING - COMPLETE FIX
   ============================================ */

/* Ensure mobile header stays on top */
#header-sticky-2 {
    position: fixed;
    top: 0;
    z-index: 998;
}

/* Push all content below mobile header */
@media (max-width: 1199px) {
    /* Global body padding */
    body {
        padding-top: 70px !important;
        padding-bottom: 75px !important;
    }
    
    /* All hero sections */
    .about-hero-section,
    .blog-hero,
    .faq-hero,
    .charity-hero-section,
    .slider-area {
        margin-top: 0 !important;
    }
    
    /* Remove any conflicting padding */
    main {
        padding-top: 0 !important;
    }
}

/* Fine-tune for different screen sizes */
@media (min-width: 768px) and (max-width: 1199px) {
    body {
        padding-top: 75px !important;
    }
}

@media (max-width: 575px) {
    body {
        padding-top: 65px !important;
    }
}

@media (max-width: 374px) {
    body {
        padding-top: 60px !important;
    }
}

/* Desktop - Remove mobile spacing */
@media (min-width: 1200px) {
    body {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* ============================================
   SIDEBAR PROFILE TAB STYLES
   ============================================ */

/* Logged In User Profile */
.sidebar-user-profile {
    padding: 20px;
}

.sidebar-profile-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.sidebar-avatar-circle {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 4px 15px rgba(129, 178, 20, 0.3);
}

.sidebar-profile-info {
    flex: 1;
}

.sidebar-profile-name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 5px 0;
}

.sidebar-profile-email {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.sidebar-profile-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 20px 0;
}

.sidebar-profile-menu {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sidebar-profile-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.sidebar-profile-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    padding-left: 20px;
}

.sidebar-profile-link i {
    font-size: 18px;
    width: 20px;
    color: var(--primary-green);
}

.sidebar-profile-link span {
    font-size: 15px;
    font-weight: 500;
}

.sidebar-logout-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    background: rgba(255, 59, 48, 0.2);
    border: 2px solid rgba(255, 59, 48, 0.5);
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sidebar-logout-btn:hover {
    background: rgba(255, 59, 48, 0.3);
    border-color: #ff3b30;
    transform: translateY(-2px);
}

.sidebar-logout-btn i {
    font-size: 18px;
}

/* ============================================
   NOT LOGGED IN - AUTH SECTION
   ============================================ */

.sidebar-auth-section {
    padding: 30px 20px;
    text-align: center;
}

.sidebar-auth-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.sidebar-auth-icon i {
    font-size: 40px;
    color: rgba(255, 255, 255, 0.6);
}

.sidebar-auth-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px 0;
}

.sidebar-auth-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 25px 0;
}

.sidebar-auth-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

.sidebar-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.sidebar-auth-btn.login-btn {
    background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
    color: #fff;
    border: none;
    box-shadow: 0 4px 15px rgba(129, 178, 20, 0.3);
}

.sidebar-auth-btn.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(129, 178, 20, 0.4);
}

.sidebar-auth-btn.register-btn {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.sidebar-auth-btn.register-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

.sidebar-auth-btn i {
    font-size: 18px;
}

.sidebar-auth-benefits {
    text-align: left;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.sidebar-auth-benefits h5 {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 15px 0;
}

.sidebar-auth-benefits ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-auth-benefits li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.sidebar-auth-benefits li i {
    color: var(--primary-green);
    font-size: 16px;
}

/* ============================================
   MOBILE HEADER - MENU LEFT, LOGO RIGHT
   ============================================ */

#header-sticky-2,
.tpmobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    z-index: 998;
    transition: all 0.3s ease;
}

/* Container */
#header-sticky-2 .container-fluid {
    padding: 0 15px;
}

#header-sticky-2 .row {
    margin: 0;
    padding: 12px 0;
}

/* ============================================
   LEFT SIDE - HAMBURGER MENU ICON
   ============================================ */

.mobile-menu-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.tp-menu-toggle {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #81b214, #6a9611);
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(129, 178, 20, 0.3);
}

.tp-menu-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(129, 178, 20, 0.4);
}

.tp-menu-toggle:active {
    transform: scale(0.95);
}

.tp-menu-toggle i {
    font-size: 22px;
    color: #fff;
}

/* ============================================
   RIGHT SIDE - LOGO
   ============================================ */

.mobile-header-logo {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.mobile-header-logo a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    background: #fff;
    border: 2px solid #81b214;
    border-radius: 12px;
    padding: 6px;
    transition: all 0.3s ease;
}

.mobile-header-logo a:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(129, 178, 20, 0.2);
}

.mobile-header-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    #header-sticky-2 .row {
        padding: 14px 0;
    }
    
    .tp-menu-toggle,
    .mobile-header-logo a {
        width: 52px;
        height: 52px;
    }
}

/* Large phones (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    #header-sticky-2 .row {
        padding: 12px 0;
    }
    
    .tp-menu-toggle,
    .mobile-header-logo a {
        width: 50px;
        height: 50px;
    }
}

/* Small phones (below 576px) */
@media (max-width: 575px) {
    #header-sticky-2 .row {
        padding: 10px 0;
    }
    
    .tp-menu-toggle,
    .mobile-header-logo a {
        width: 46px;
        height: 46px;
    }
    
    .tp-menu-toggle i {
        font-size: 20px;
    }
}

/* Very small phones (below 375px) */
@media (max-width: 374px) {
    #header-sticky-2 .container-fluid {
        padding: 0 10px;
    }
    
    #header-sticky-2 .row {
        padding: 8px 0;
    }
    
    .tp-menu-toggle,
    .mobile-header-logo a {
        width: 42px;
        height: 42px;
    }
    
    .tp-menu-toggle i {
        font-size: 18px;
    }
}

/* Hide on desktop */
@media (min-width: 1200px) {
    #header-sticky-2 {
        display: none !important;
    }
}

/* ============================================
   ENHANCED SHIPPING ROW STYLES
   ============================================ */

#shippingRow {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-left: 4px solid #81b214 !important;
}

#shippingRow th {
    padding: 20px 15px !important;
    vertical-align: top !important;
}

#shippingRow td {
    padding: 20px 15px !important;
    vertical-align: top !important;
}

/* Shipping Header */
.shipping-header-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.shipping-header-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #81b214, #6a9611);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(129, 178, 20, 0.35);
}

.shipping-header-icon i {
    color: white !important;
    font-size: 20px;
}

.shipping-header-title {
    font-size: 17px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
}

/* Shipping Details Grid */
.shipping-details-grid {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.shipping-detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: white;
    border-radius: 10px;
    border-left: 3px solid #81b214;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    opacity: 0;
    animation: slideInRight 0.4s ease forwards;
}

.shipping-detail-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(129, 178, 20, 0.15);
}

.shipping-detail-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(129, 178, 20, 0.12), rgba(129, 178, 20, 0.06));
    border-radius: 8px;
    flex-shrink: 0;
}

.shipping-detail-icon i {
    color: #81b214;
    font-size: 14px;
}

.shipping-detail-text {
    font-size: 14px;
    color: #666;
    font-weight: 500;
    line-height: 1.5;
    flex: 1;
}

.shipping-detail-text strong {
    color: #2c3e50;
    font-weight: 700;
}

/* Shipping Cost Display */
.shipping-cost-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

.shipping-cost-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(129, 178, 20, 0.35);
    transition: all 0.3s ease;
    min-width: 140px;
}

.shipping-cost-badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(129, 178, 20, 0.45);
}

.shipping-cost-badge i {
    font-size: 18px;
}

.shipping-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.shipping-status-badge i {
    font-size: 11px;
}

.shipping-status-badge.pending {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    color: white;
}

.shipping-status-badge.calculated {
    background: linear-gradient(135deg, #27ae60, #229954);
    color: white;
}

.shipping-status-badge.error {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}

/* Shipping Loader */
.shipping-loader-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 15px;
}

.shipping-loader-text {
    font-size: 13px;
    color: #81b214;
    font-weight: 600;
}

/* Delivery Time Badge */
.delivery-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 8px;
    box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3);
}

.delivery-time-badge.express {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    box-shadow: 0 2px 6px rgba(243, 156, 18, 0.3);
}

.delivery-time-badge i {
    font-size: 10px;
}

/* Animations */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-15px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.shipping-detail-item:nth-child(1) { animation-delay: 0.1s; }
.shipping-detail-item:nth-child(2) { animation-delay: 0.2s; }
.shipping-detail-item:nth-child(3) { animation-delay: 0.3s; }

/* Responsive */
@media (max-width: 768px) {
    .shipping-cost-badge {
        font-size: 18px;
        padding: 12px 20px;
        min-width: 120px;
    }
    
    .shipping-detail-item {
        padding: 8px 12px;
    }
    
    .shipping-detail-text {
        font-size: 13px;
    }
    
    .shipping-header-title {
        font-size: 16px;
    }
}