/*=============== ABOUT PAGE SPECIFIC STYLES ===============*/

 /* About Banner */
 .about-banner {
     background: linear-gradient(135deg, var(--first-color) 0%, var(--first-color-alt) 100%);
     color: white;
     padding: 6rem 0 3rem;
     text-align: center;
     margin-top: var(--header-height);
 }

 .about-banner h1 {
     font-size: var(--big-font-size);
     margin-bottom: var(--mb-1);
     color: white;
 }

 .about-banner p {
     font-size: var(--h3-font-size);
     color: rgba(255, 255, 255, 0.9);
 }

 /* Product Banner */
 .product-banner-list {
     padding: 3rem 0;
 }

 .product-banner-item {
     background-color: var(--container-color);
     border-radius: 1rem;
     overflow: hidden;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
 }

 .product-banner-item:hover {
     transform: translateY(-5px);
 }

 .product-banner-item img {
     width: 100%;
     height: 300px;
     object-fit: cover;
 }

 .product-banner-content {
     padding: 2rem;
     text-align: center;
 }

 .product-banner-content h3 {
     font-size: var(--h2-font-size);
     color: var(--title-color);
     margin-bottom: var(--mb-1-5);
 }

 .product-banner-btn {
     display: inline-block;
     background-color: var(--first-color);
     color: white;
     padding: 0.75rem 2rem;
     border-radius: 0.5rem;
     font-weight: var(--font-medium);
     transition: background-color 0.3s ease;
 }

 .product-banner-btn:hover {
     background-color: var(--first-color-alt);
 }

 /* About Sections */
 .about-section {
     padding: 5rem 0;
     background-color: var(--body-color);
 }

 .about-section:nth-child(even) {
     background-color: var(--first-color-lighten);
 }

 .about-section h2 {
     text-align: center;
     color: var(--title-color);
     margin-bottom: var(--mb-2);
     font-size: var(--h1-font-size);
 }

 .about-section p {
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
     line-height: 1.8;
     color: var(--text-color);
     font-size: var(--normal-font-size);
 }

 /* Trust List */
 .trust-list {
     max-width: 600px;
     margin: 2rem auto 0;
     list-style: none;
 }

 .trust-list li {
     padding: 0.75rem 0;
     color: var(--text-color);
     font-size: var(--normal-font-size);
     border-bottom: 1px solid var(--first-color-lighten);
 }

 .trust-list li:last-child {
     border-bottom: none;
 }

 .trust-list li:before {
     content: "✓";
     color: var(--first-color);
     font-weight: bold;
     margin-right: 10px;
 }

 /* Info Cards */
 .info-section {
     padding: 5rem 0;
     background-color: var(--body-color);
 }

 .card-wrapper {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
 }

 .info-card {
     background-color: var(--container-color);
     border-radius: 1rem;
     padding: 2rem;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
     position: relative;
 }

 .info-card:hover {
     transform: translateY(-10px);
 }

 .card-number {
     position: absolute;
     top: -20px;
     left: 20px;
     background-color: var(--first-color);
     color: white;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: var(--font-semi-bold);
     font-size: var(--h3-font-size);
 }

 .info-card h3 {
     color: var(--title-color);
     margin-bottom: var(--mb-1);
     font-size: var(--h2-font-size);
 }

 .info-card p {
     color: var(--text-color);
     line-height: 1.6;
     text-align: left;
 }

 /* Footer Styles */
 .footer {
     background: linear-gradient(135deg, #1a3c27 0%, #2d5d3b 100%);
     color: white;
     padding: 4rem 0 2rem;
     position: relative;
 }

 .footer:before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: linear-gradient(90deg, #4CAF50, #8BC34A, #CDDC39);
 }

 .footer-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 1.5rem;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 3rem;
 }

 .footer-col {
     padding: 0 1rem;
 }

 .footer-title {
     font-size: 1.8rem;
     font-weight: 700;
     color: white;
     margin-bottom: 1.5rem;
     letter-spacing: -0.5px;
 }

 .footer-heading {
     font-size: 1.3rem;
     font-weight: 600;
     color: white;
     margin-bottom: 1.5rem;
     position: relative;
     padding-bottom: 0.75rem;
 }

 .footer-heading:after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 40px;
     height: 3px;
     background: linear-gradient(90deg, #4CAF50, #8BC34A);
 }

 .footer-col p {
     color: rgba(255, 255, 255, 0.8);
     line-height: 1.7;
     margin-bottom: 1rem;
 }

 .footer-col ul {
     list-style: none;
 }

 .footer-col ul li {
     margin-bottom: 0.8rem;
 }

 .footer-col ul li a {
     color: rgba(255, 255, 255, 0.8);
     transition: all 0.3s ease;
     display: inline-block;
 }

 .footer-col ul li a:hover {
     color: #4CAF50;
     transform: translateX(5px);
 }

 .footer-col strong {
     color: white;
 }

 /* Dark Theme Support */
 .dark-theme .about-banner {
     background: linear-gradient(135deg, var(--first-color-dark) 0%, hsl(var(--hue), 8%, 25%) 100%);
 }

 .dark-theme .product-banner-item {
     background-color: var(--container-color);
 }

 .dark-theme .about-section:nth-child(even) {
     background-color: hsl(var(--hue), 8%, 18%);
 }

 .dark-theme .info-card {
     background-color: var(--container-color);
 }

 .dark-theme .trust-list li {
     border-bottom-color: hsl(var(--hue), 8%, 25%);
 }

 .dark-theme .footer {
     background: linear-gradient(135deg, #0f2416 0%, #1a3c27 100%);
 }

 /* Animations */
 .fade-in {
     animation: fadeIn 1s ease-in;
 }

 .slide-up {
     animation: slideUp 0.8s ease-out;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes slideUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

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

 /* Responsive Design */
 @media screen and (max-width: 768px) {
     .about-banner {
         padding: 4rem 0 2rem;
     }

     .about-banner h1 {
         font-size: var(--h1-font-size);
     }

     .product-banner-content {
         padding: 1.5rem;
     }

     .card-wrapper {
         grid-template-columns: 1fr;
     }

     .footer-container {
         grid-template-columns: 1fr;
         text-align: center;
     }

     .footer-heading:after {
         left: 50%;
         transform: translateX(-50%);
     }

     .footer-col ul li a {
         display: inline-block;
         padding: 0.25rem 0;
     }
 }

 @media screen and (max-width: 480px) {
     .about-banner {
         padding: 3rem 0 1.5rem;
     }

     .about-section {
         padding: 3rem 0;
     }

     .info-section {
         padding: 3rem 0;
     }

     .info-card {
         padding: 1.5rem;
     }
 }

 /* Navigation Styles */
 .nav__toggle {
     display: none;
 }

 @media screen and (max-width: 767px) {
     .nav__toggle {
         display: inline-flex;
         font-size: 1.25rem;
         cursor: pointer;
         color: var(--title-color);
     }

     .nav__menu {
         position: fixed;
         background-color: var(--container-color);
         width: 80%;
         height: 100%;
         top: 0;
         right: -100%;
         box-shadow: -2px 0 4px hsla(var(--hue), 24%, 15%, .1);
         padding: 4rem 0 0 3rem;
         border-radius: 1rem 0 0 1rem;
         transition: .3s;
         z-index: var(--z-fixed);
     }

     .nav__close {
         font-size: 1.5rem;
         position: absolute;
         top: 1rem;
         right: 1.25rem;
         cursor: pointer;
         color: var(--title-color);
     }

     .show-menu {
         right: 0;
     }

     .dark-theme .nav__menu {
         background-color: var(--container-color);
     }
 }