/* Product Page Specific Styles */
 .products-hero {
     background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('images/About-us-banner.png');
     background-size: cover;
     background-position: center;
     padding: 120px 0 60px;
     text-align: center;
     color: #ffffff;
 }

 .products-hero h1 {
     color: #ffffff;
     font-size: 3.6rem;
     margin-bottom: 1.5rem;
     font-family: "montserrat-bold", sans-serif;
 }

 .products-hero p {
     max-width: 800px;
     margin: 0 auto;
     font-size: 1.8rem;
     line-height: 1.7;
 }

 .product-categories {
     padding: 80px 0;
     background: #f5f5f5;
 }

 .category-tabs {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     margin-bottom: 40px;
 }

 .category-tab {
     padding: 12px 24px;
     margin: 0 8px 16px;
     background: #ffffff;
     border: 2px solid #39b54a;
     color: #39b54a;
     border-radius: 30px;
     cursor: pointer;
     transition: all 0.3s ease;
     font-weight: bold;
 }

 .category-tab:hover, .category-tab.active {
     background: #39b54a;
     color: #ffffff;
 }

 .product-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 30px;
     margin-top: 40px;
 }

 .product-card {
     background: #ffffff;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     position: relative;
 }

 .product-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
 }

 .product-image {
     height: 250px;
     overflow: hidden;
     position: relative;
 }

 .product-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }

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

 .product-badge {
     position: absolute;
     top: 15px;
     right: 15px;
     background: #39b54a;
     color: white;
     padding: 5px 10px;
     border-radius: 20px;
     font-size: 1.2rem;
     z-index: 1;
 }

 .product-info {
     padding: 20px;
 }

 .product-title {
     font-size: 1.8rem;
     margin-bottom: 10px;
     color: #151515;
     font-weight: bold;
 }

 .product-description {
     color: #767676;
     margin-bottom: 15px;
     font-size: 1.4rem;
     line-height: 1.6;
 }

 .product-features {
     display: flex;
     flex-wrap: wrap;
     margin-bottom: 15px;
 }

 .feature {
     background: #f5f5f5;
     padding: 5px 10px;
     margin: 0 5px 5px 0;
     border-radius: 4px;
     font-size: 1.2rem;
     color: #555;
 }

 .product-action {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .product-action .button {
     outline: none;
     cursor: pointer;
     border: none;
     padding: 0.5rem 2.5rem;
     margin: 0;
     font-family: inherit;
     position: relative;
     display: inline-block;
     letter-spacing: 0.05rem;
     font-weight: 700;
     font-size: 15px;
     border-radius: 500px;
     overflow: hidden;
     background: #66ff66;
     color: ghostwhite;
 }

 .product-action .button span {
     position: relative;
     z-index: 10;
     transition: color 0.4s;
 }

 .product-action .button:hover span {
     color: black;
 }

 .product-action .button::before,
 .product-action .button::after {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
 }

 .product-action .button::before {
     content: "";
     background: #096413b0;
     width: 120%;
     left: -10%;
     transform: skew(30deg);
     transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
 }

 .product-action .button:hover::before {
     transform: translate3d(100%, 0, 0);
 }
  

 /* Product Details Section */
 .product-details {
     padding: 80px 0;
     background: #ffffff;
 }

 .detail-tabs {
     display: flex;
     border-bottom: 1px solid #ddd;
     margin-bottom: 30px;
 }

 .detail-tab {
     padding: 15px 30px;
     cursor: pointer;
     font-weight: bold;
     color: #767676;
     position: relative;
 }

 .detail-tab.active {
     color: #39b54a;
 }

 .detail-tab.active::after {
     content: '';
     position: absolute;
     bottom: -1px;
     left: 0;
     width: 100%;
     height: 3px;
     background: #39b54a;
 }

 .detail-content {
     display: none;
 }

 .detail-content.active {
     display: block;
 }

 /* Testimonials Section */
 .testimonials {
     padding: 80px 0;
     background: #f9f9f9;
 }

 .swiper {
     width: 100%;
     padding: 40px 20px;
 }

 .testimonial-card {
     background: #ffffff;
     padding: 30px;
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }

 .testimonial-text {
     font-style: italic;
     margin-bottom: 20px;
     color: #555;
 }

 .testimonial-author {
     display: flex;
     align-items: center;
 }

 .author-image {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     overflow: hidden;
     margin-right: 15px;
 }

 .author-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .author-info h5 {
     margin-bottom: 5px;
     color: #151515;
 }

 .author-info p {
     color: #767676;
     font-size: 1.3rem;
 }

 /* FAQ Section */
 .faq-section {
     padding: 80px 0;
     background: #ffffff;
 }

 .accordion {
     margin-top: 40px;
 }

 .accordion-item {
     border-bottom: 1px solid #ddd;
 }

 .accordion-header {
     padding: 20px 0;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .accordion-header h4 {
     margin: 0;
     font-size: 1.8rem;
     color: #151515;
 }

 .accordion-icon {
     width: 24px;
     height: 24px;
     position: relative;
     transition: transform 0.3s ease;
 }

 .accordion-icon::before,
 .accordion-icon::after {
     content: '';
     position: absolute;
     background: #39b54a;
     transition: all 0.3s ease;
 }

 .accordion-icon::before {
     width: 2px;
     height: 100%;
     left: 50%;
     transform: translateX(-50%);
 }

 .accordion-icon::after {
     width: 100%;
     height: 2px;
     top: 50%;
     transform: translateY(-50%);
 }

 .accordion-item.active .accordion-icon::before {
     transform: translateX(-50%) rotate(90deg);
     opacity: 0;
 }

 .accordion-content {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease;
 }

 .accordion-item.active .accordion-content {
     max-height: 500px;
 }

 .accordion-body {
     padding: 0 0 20px;
     color: #767676;
 }

 /* CTA Section */
 .cta-section {
     padding: 100px 0;
     background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('images/About-us-banner.png');
     background-size: cover;
     background-position: center;
     text-align: center;
     color: #ffffff;
 }

 .cta-content h2 {
     color: #ffffff;
     font-size: 3.6rem;
     margin-bottom: 20px;
 }

 .cta-content p {
     max-width: 700px;
     margin: 0 auto 30px;
     font-size: 1.8rem;
 }

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

 /* Responsive Adjustments */
 @media only screen and (max-width: 768px) {
     .product-grid {
         grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     }

     .detail-tabs {
         flex-wrap: wrap;
     }

     .detail-tab {
         padding: 10px 20px;
     }

     .products-hero h1 {
         font-size: 3rem;
     }
 }

 @media only screen and (max-width: 600px) {
     .product-grid {
         grid-template-columns: 1fr;
     }

     .products-hero h1 {
         font-size: 2.6rem;
     }

     .products-hero p {
         font-size: 1.6rem;
     }
 }

 /* Animation Classes */
 .fade-up {
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 0.6s ease, transform 0.6s ease;
 }

 .fade-up.active {
     opacity: 1;
     transform: translateY(0);
 }

 .stagger-item {
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 0.3s ease, transform 0.3s ease;
 }

 .stagger-item.active {
     opacity: 1;
     transform: translateY(0);
 }