:root {
         --primary-color: #020233;

         --secondary-color: orange;
         /* --primary-color: navy; */
         /* --primary-color: #352b67; */
         --secondary-blue: #2E3A59;
         /* --secondary-color: orange; */
         --accent-hover: #E6A500;
         --bg-light: #F5F6FA;
         --white: #FFFFFF;
         --text-dark: #222222;
         --text-gray: #6B7280;
         --metallic: #A6A6A6;
     }

     /* ========================================
   CRITICAL: Add to top of CSS file
   ======================================== */

     /* Prevent horizontal scroll on all devices */
     html {
         overflow-x: hidden;
         width: 100%;
     }

     body {
         overflow-x: hidden;
         width: 100%;
         position: relative;
     }

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

     body {
         font-family: 'Inter', sans-serif;
         color: var(--text-dark);
         line-height: 1.7;
         overflow-x: hidden;
         background: var(--white);
     }

     h1, h2, h3, h4, h5, h6 {
         font-family: 'Poppins', sans-serif;
         font-weight: 700;
         line-height: 1.2;
     }

     p {

         font-size: 15px;
     }

     .btn-outline-warning {
         --bs-btn-color: var(--secondary-color);
         --bs-btn-border-color: var(--secondary-color);
         --bs-btn-hover-color: #000;
         --bs-btn-hover-bg: var(--secondary-color);
         --bs-btn-hover-border-color: var(--secondary-color);
         --bs-btn-focus-shadow-rgb: 255, 193, 7;
         --bs-btn-active-color: #000;
         --bs-btn-active-bg: var(--secondary-color);
         --bs-btn-active-border-color: var(--secondary-color);
         --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
         --bs-btn-disabled-color: var(--secondary-color);
         --bs-btn-disabled-bg: transparent;
         --bs-btn-disabled-border-color: var(--secondary-color);
         --bs-gradient: none;
     }

     .bi-whatsapp {
         color: #25D366;
     }

     /* Navbar */
     .bi-whatsapp:hover {
         color: #fff;
     }

     /* Navbar */
     .navbar-toggler{
    color: var(--primary-color);
    border: 1px dashed var(--primary-color);
     }
     .navbar {
         background: #fff !important;
         /* backdrop-filter: blur(15px); */
         /* padding: 1.2rem 0; */
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     }

     .navbar.scrolled {
         padding: 0.8rem 0;
         background: #fff;
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
     }

     .navbar-brand {
         font-family: "Lilita One", sans-serif;
         /* font-family: 'Poppins', sans-serif; */
         font-weight: 800;
         font-size: 1.5rem;
         color: var(--secondary-color) !important;
         letter-spacing: 2px;
         text-transform: uppercase;
     }

     .navbar-brand:hover {
         transform: scale(1.05);
     }

     .nav-link {
         color: var(--primary-color) !important;
         /* color: rgba(255, 255, 255, 0.9) !important; */
         font-weight: 500;
         font-size: 0.95rem;
         margin: 0 0.8rem;
         padding: 0.5rem 0 !important;
         position: relative;
         transition: color 0.3s ease;
     }

     .nav-link::before {
         content: '';
         position: absolute;
         bottom: 0;
         left: 50%;
         width: 0;
         height: 2px;
         background: var(--secondary-color);
         transition: all 0.3s ease;
         transform: translateX(-50%);
     }

     .nav-link:hover::before,
     .nav-link.active::before {
         width: 100%;
     }

     .nav-link:hover,
     .nav-link.active {
         color: var(--secondary-color) !important;
     }

     .btn-cta {
         background: var(--secondary-color);
         color: var(--primary-color);
         font-weight: 700;
         padding: 0.75rem 2rem;
         border-radius: 50px;
         border: none;
         font-size: 0.95rem;
         transition: all 0.3s ease;
         box-shadow: 0 4px 15px rgba(255, 180, 0, 0.3);
     }

     .btn-cta:hover {
         background: var(--accent-hover);
         transform: translateY(-2px) scale(1.05);
         box-shadow: 0 6px 25px rgba(255, 180, 0, 0.4);
         color: var(--primary-color);
     }

     /* Hero Section */
     .hero-section {
         position: relative;
         min-height: 100vh;
         display: flex;
         align-items: center;
         background: linear-gradient(135deg, rgba(28, 28, 30, 0.9), rgba(46, 58, 89, 0.85)),
             url('https://images.unsplash.com/photo-1587293852726-70cdb56c2866?w=1920&q=80') center/cover fixed;
         color: var(--white);
         padding: 8rem 0 5rem;
         overflow: hidden;
     }

     .hero-section::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: radial-gradient(circle at 30% 50%, rgba(255, 180, 0, 0.08), transparent 60%);
         pointer-events: none;
     }

     .hero-content {
         position: relative;
         z-index: 2;
     }

     .hero-badge {
         display: inline-block;
         background: rgba(255, 180, 0, 0.15);
         border: 1px solid var(--secondary-color);
         color: var(--secondary-color);
         padding: 0.5rem 1.5rem;
         border-radius: 50px;
         font-size: 0.9rem;
         font-weight: 600;
         margin-bottom: 1.5rem;
         backdrop-filter: blur(10px);
     }

     .hero-title {
         font-size: 3rem;
         font-weight: 800;
         margin-bottom: 1.5rem;
         line-height: 1.1;
         letter-spacing: 1px;
     }

     .hero-subtitle {
         font-size: 1rem;
         font-weight: 400;
         margin-bottom: 2rem;
         opacity: 0.9;
         max-width: 700px;
     }

     .btn-hero {
         background: var(--secondary-color);
         color: var(--primary-color);
         font-weight: 500;
         padding: 1rem 1rem;
         border-radius: 50px;
         border: none;
         font-size: 1rem;
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         box-shadow: 0 10px 30px rgba(255, 180, 0, 0.4);
         margin-right: 1rem;
     }

     .btn-hero:hover {
         transform: translateY(-5px);
         box-shadow: 0 15px 40px rgba(255, 180, 0, 0.5);
         background: var(--accent-hover);
     }

     .btn-hero-outline {
         background: var(--primary-color);
         color: var(--white);
         font-weight: 500;
         padding: 1rem 1rem;
         border-radius: 50px;
         /* border: 2px solid var(--white); */
         font-size: 1rem;
         transition: all 0.3s ease;
     }

     .btn-hero-outline:hover {
         background: var(--white);
         color: var(--primary-color);
     }

     /* Sections */
     section {
         padding: 6rem 0;
         position: relative;
     }

     .section-header {
         text-align: center;
         margin-bottom: 4rem;
     }

     .section-badge {
         display: inline-block;
         background: rgba(255, 180, 0, 0.1);
         color: var(--secondary-color);
         padding: 0.4rem 1.2rem;
         border-radius: 50px;
         font-size: 0.85rem;
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: 1px;
         margin-bottom: 1rem;
     }

     .section-title {
         font-size: 2rem;
         font-weight: 600;
         color: var(--secondary-blue);
         margin-bottom: 1rem;
         letter-spacing: 0px;
     }

     .section-subtitle {
         font-size: 1rem;
         color: var(--text-gray);
         max-width: 700px;
         margin: 0 auto;
     }

     /* About Section */
     .about-section {
         background: var(--bg-light);
     }

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

     .about-image-wrapper img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.6s ease;
     }

     .about-image-wrapper:hover img {
         transform: scale(1.05);
     }

     .about-content h2 {
         font-size: 2.5rem;
         color: var(--secondary-blue);
         margin-bottom: 1.5rem;
     }

     .about-content p {
         font-size: 1.05rem;
         line-height: 1.8;
         color: var(--text-gray);
         margin-bottom: 1.5rem;
     }

     .stat-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 2rem;
         margin-top: 2.5rem;
     }

     .stat-item {
         text-align: center;
         padding: 1.5rem;
         background: var(--white);
         border-radius: 15px;
         box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
         transition: all 0.3s ease;
     }

     .stat-item:hover {
         transform: translateY(-5px);
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     }

     .stat-number {
         font-size: 2.5rem;
         font-weight: 800;
         color: var(--secondary-color);
         line-height: 1;
     }

     .stat-label {
         font-size: 0.95rem;
         color: var(--text-gray);
         margin-top: 0.5rem;
     }

     /* Product Categories */
     .categories-section {
         background: var(--white);
     }

     .category-card {
         background: var(--white);
         border-radius: 20px;
         padding: 3rem 2rem;
         text-align: center;
         box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         border: 1px solid rgba(0, 0, 0, 0.05);
         height: 100%;
         cursor: pointer;
     }

     .category-card:hover {
         transform: translateY(-10px) scale(1.02);
         box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
         border-color: var(--secondary-color);
     }

     .category-icon {
         width: 80px;
         height: 80px;
         margin: 0 auto 1.5rem;
         background: linear-gradient(135deg, rgba(255, 180, 0, 0.1), rgba(255, 180, 0, 0.05));
         border-radius: 20px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 2.5rem;
         color: var(--secondary-blue);
         transition: all 0.4s ease;
     }

     .category-card:hover .category-icon {
         background: var(--secondary-color);
         color: var(--white);
         transform: scale(1.1) rotate(5deg);
     }

     .category-title {
         font-size: 1.3rem;
         color: var(--text-dark);
         margin-bottom: 0.8rem;
         font-weight: 700;
     }

     .category-desc {
         font-size: 0.95rem;
         color: var(--text-gray);
         line-height: 1.6;
     }

     /* Featured Products */
     .products-section {
         /* background: var(--bg-light); */
     }

     .section-header-wrapper {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 50px;
         gap: 20px;
         flex-wrap: wrap;
     }

     .section-header-content {
         flex: 1;
         text-align: left;
         min-width: 280px;
     }

     .view-all-btn {
         position: relative;
         padding: 5px 20px;
         font-size: 0.8rem;
         font-weight: 600;
         color: white;
         background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-blue) 100%);
         border: none;
         border-radius: 50px;
         cursor: pointer;
         overflow: hidden;
         transition: all 0.3s ease;
         box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
         display: flex;
         align-items: center;
         gap: 10px;
         text-decoration: none;
         white-space: nowrap;
     }

     .view-all-btn::before {
         content: '';
         position: absolute;
         top: 0;
         left: -100%;
         width: 100%;
         height: 100%;
         background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-hover) 100%);
         transition: left 0.3s ease;
         z-index: 0;
     }

     .view-all-btn:hover::before {
         left: 0;
     }

     .view-all-btn span {
         position: relative;
         z-index: 1;
     }

     .view-all-btn:hover {
         transform: translateY(-2px);
         box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
     }

     .view-all-btn:active {
         transform: translateY(0);
     }

     .arrow {
         position: relative;
         z-index: 1;
         transition: transform 0.3s ease;
         font-size: 1.2rem;
     }

     .view-all-btn:hover .arrow {
         transform: translateX(4px);
     }

     .product-card {
         background: var(--white);
         border-radius: 20px;
         overflow: hidden;
         box-shadow: 0 5px 25px rgba(0, 0, 0, 0.06);
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         height: 100%;
         border: 1px solid rgba(0, 0, 0, 0.05);
     }

     .product-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
     }

     .product-image {
         position: relative;
         /* height: 280px; */
         overflow: hidden;
         background: var(--bg-light);
     }

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

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

     .product-badge {
         position: absolute;
         top: 20px;
         right: 20px;
         background: var(--secondary-color);
         color: var(--primary-color);
         padding: 0.5rem 1.2rem;
         border-radius: 50px;
         font-size: 0.8rem;
         font-weight: 700;
         text-transform: uppercase;
         box-shadow: 0 5px 15px rgba(255, 180, 0, 0.4);
     }

     .product-content {
         padding: 1rem 1rem 1rem 15px;
         height: calc(100% - 200px);
     }

     .product-title {
         font-size: 0.9rem;
         color: var(--text-dark);
         margin-bottom: 0.8rem;
         font-weight: 300;
         letter-spacing: 0px;

         height: calc(100% - 90px);
     }

     .product-desc {
         font-size: 0.95rem;
         color: var(--text-gray);
         line-height: 1.6;
         margin-bottom: 1.5rem;
     }

     .btn-product {
         width: 100%;
         background: var(--primary-color);
         color: var(--white);
         padding: 0.9rem;
         border-radius: 50px;
         border: none;
         font-weight: 600;
         font-size: 0.95rem;
         transition: all 0.3s ease;
     }

     .btn-product:hover {
         background: var(--secondary-color);
         transform: translateY(-2px);
         color: whitesmoke;
     }

     /* Why Choose Us */
     .features-section {
         background: var(--white);
     }

     .feature-card {
         background: var(--white);
         border-radius: 20px;
         padding: 2.5rem 2rem;
         text-align: center;
         box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
         transition: all 0.4s ease;
         height: 100%;
         border: 1px solid rgba(0, 0, 0, 0.05);
     }

     .feature-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
         border-color: var(--secondary-color);
     }

     .feature-icon {
         width: 90px;
         height: 90px;
         margin: 0 auto 1.5rem;
         background: linear-gradient(135deg, var(--secondary-color), var(--accent-hover));
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 2.5rem;
         color: var(--white);
         transition: all 0.4s ease;
     }

     .feature-card:hover .feature-icon {
         transform: scale(1.1) rotate(10deg);
     }

     .feature-title {
         font-size: 1rem;
         color: var(--text-dark);
         margin-bottom: 1rem;
         font-weight: 500;
     }

     .feature-desc {
         font-size: 0.95rem;
         color: var(--text-gray);
         line-height: 1.6;
     }

     /* Inquiry Form */
     .inquiry-section {
         background: var(--bg-light);
     }

     .inquiry-card {
         background: var(--white);
         border-radius: 25px;
         padding: 3rem;
         box-shadow: 0 10px 50px rgba(0, 0, 0, 0.08);
     }

     .form-label {
         font-weight: 600;
         color: var(--text-dark);
         margin-bottom: 0.6rem;
         font-size: 0.95rem;
     }

     .form-control,
     .form-select {
         padding: 0.9rem 1.2rem;
         border: 2px solid #E5E7EB;
         border-radius: 12px;
         font-size: 0.95rem;
         transition: all 0.3s ease;
         background: var(--white);
     }

     .form-control:focus,
     .form-select:focus {
         border-color: var(--secondary-color);
         box-shadow: 0 0 0 4px rgba(255, 180, 0, 0.1);
         outline: none;
     }

     .btn-submit {
         width: 100%;
         background: var(--secondary-color);
         color: var(--primary-color);
         padding: 1.2rem;
         border-radius: 50px;
         border: none;
         font-weight: 700;
         font-size: 1.1rem;
         transition: all 0.3s ease;
         margin-top: 1rem;
         box-shadow: 0 8px 25px rgba(255, 180, 0, 0.3);
     }

     .btn-submit:hover {
         background: var(--accent-hover);
         transform: translateY(-3px);
         box-shadow: 0 12px 35px rgba(255, 180, 0, 0.4);
     }

     .inquiry-info {
         background: linear-gradient(135deg, var(--secondary-blue), var(--primary-color));
         border-radius: 25px;
         padding: 3rem;
         color: var(--white);
         height: 100%;
     }

     .inquiry-info h4 {
         font-size: 1.8rem;
         margin-bottom: 1.5rem;
     }

     .contact-item {
         display: flex;
         align-items: flex-start;
         gap: 1.2rem;
         margin-bottom: 2rem;
         padding: 1.5rem;
         background: rgba(255, 255, 255, 0.1);
         border-radius: 15px;
         backdrop-filter: blur(10px);
         transition: all 0.3s ease;
     }

     .contact-item:hover {
         background: rgba(255, 255, 255, 0.15);
         transform: translateX(5px);
     }

     .contact-icon {
         width: 50px;
         height: 50px;
         background: var(--secondary-color);
         color: var(--primary-color);
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 1.5rem;
         flex-shrink: 0;
     }

     /* Contact Section */
     .contact-section {
         background: var(--white);
     }

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

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

     .contact-card {
         background: var(--white);
         border-radius: 20px;
         padding: 10px 0 10px 20px;
         margin-bottom: 1.5rem;
         box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
         border-left: 4px solid var(--secondary-color);
         transition: all 0.3s ease;
     }

     .contact-card:hover {
         transform: translateX(8px);
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     }

     .contact-card h5 {
         font-size: 1rem;
         color: var(--text-dark);
         margin-bottom: 1rem;
         display: flex;
         align-items: center;
         gap: 0.8rem;
         font-weight: 100;
     }

     .contact-card i {
         color: var(--secondary-color);
         font-size: 1rem;
     }

     .btn-whatsapp {
         width: 100%;
         background: #25D366;
         color: var(--white);
         padding: 1.2rem;
         border-radius: 50px;
         border: none;
         font-weight: 700;
         font-size: 1.1rem;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 0.8rem;
         transition: all 0.3s ease;
         box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
     }

     .btn-whatsapp:hover {
         background: #1ebe57;
         transform: translateY(-3px);
         box-shadow: 0 12px 35px rgba(37, 211, 102, 0.4);
     }

     /* Footer */
     .footer {
         background: var(--primary-color);
         color: var(--white);
         padding: 1rem 0 1px 0;
         /* padding: 4rem 0 2rem; */
     }

     .footer h5 {
         color: var(--secondary-color);
         font-size: 1.2rem;
         margin-bottom: 1.5rem;
     }

     .footer-links {
         list-style: none;
         padding: 0;
     }

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

     .footer-links a {
         color: rgba(255, 255, 255, 0.7);
         text-decoration: none;
         transition: all 0.3s ease;
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;

         font-size: 14px;
     }

     .footer-links a:hover {
         color: var(--secondary-color);
         padding-left: 8px;
     }

     .footer-logo {
         font-family: "Lilita One", sans-serif;
         text-transform: uppercase;
         letter-spacing: 2px;
     }

     .social-icons {
         display: flex;
         gap: 1rem;
         margin-top: 1.5rem;
     }

     .social-icon {
         width: 45px;
         height: 45px;
         background: rgba(255, 180, 0, 0.1);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         color: var(--secondary-color);
         font-size: 1.2rem;
         transition: all 0.3s ease;
         text-decoration: none;
     }

     .social-icon:hover {
         background: var(--secondary-color);
         color: var(--primary-color);
         transform: translateY(-5px) rotate(5deg);
     }

     .footer-bottom {
         border-top: 1px solid rgba(255, 255, 255, 0.1);
         margin-top: 0rem;
         padding-top: 15px;
         text-align: center;
         color: rgba(255, 255, 255, 0.6);
         font-size: 0.9rem;
     }

     /* Responsive */
     @media (max-width: 991px) {
         .hero-title {
             font-size: 3rem;
         }

         .section-title {
             font-size: 2.2rem;
         }

         .about-image-wrapper {
             height: 400px;
             margin-bottom: 2rem;
         }

         .stat-grid {
             grid-template-columns: repeat(3, 1fr);
             gap: 1rem;
         }

         .product-title {

             height: calc(100% - 90px);
         }
     }

     @media (max-width: 767px) {
         .hero-title {
             font-size: 2.2rem;
         }

         .hero-subtitle {
             font-size: 1.1rem;
         }

         .btn-hero,
         .btn-hero-outline {
             width: 100%;
             margin-bottom: 1rem;
         }

         .stat-grid {
             grid-template-columns: 1fr;
         }

         .inquiry-card,
         .inquiry-info {
             padding: 2rem;
         }

         section {
             padding: 4rem 0;
         }

         .navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {
             display: flex;
             align-items: center;
             justify-content: center;
             flex-direction: row;
         }

     }


     /* Trusted Partners Section */
     .partners-section {
         background: var(--bg-light);
         padding: 5rem 0;
     }

     .partners-carousel {
         position: relative;
         padding: 2rem 0;
     }

     .partner-logo {
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 1.5rem;
         background: var(--white);
         border-radius: 15px;
         height: 120px;
         transition: all 0.3s ease;
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
         cursor: pointer;
     }

     .partner-logo:hover {
         transform: translateY(-5px);
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     }

     .partner-logo img {
         max-width: 100%;
         max-height: 80px;
         object-fit: contain;
         /* filter: grayscale(100%); */
         /* opacity: 0.7; */
         transition: all 0.3s ease;
     }

     .partner-logo:hover img {
         filter: grayscale(0%);
         opacity: 1;
     }

     .swiper-pagination-bullet {
         background: var(--text-gray);
         opacity: 0.5;
     }

     .swiper-pagination-bullet-active {
         background: var(--secondary-color);
         opacity: 1;
     }


     /* SINGLE VIEW  */
     /* Breadcrumb */
     .breadcrumb-wrapper {
         background-color: var(--white);
         padding: 1rem 0;
         margin-top: 7rem;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
     }

     .breadcrumb {
         margin: 0;
         background: transparent;
     }

     .breadcrumb-item a {
         color: var(--secondary-blue);
         text-decoration: none;
         transition: color 0.3s ease;
     }

     .breadcrumb-item a:hover {
         color: var(--secondary-color);
     }

     .breadcrumb-item.active {
         color: var(--text-gray);
     }

     /* Product Section */
     .product-section {
         padding: 2rem 0 3rem;
     }

     /* Image Gallery */
     .image-gallery {
         background-color: var(--white);
         border-radius: 12px;
         padding: 2rem;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
         position: sticky;
         top: 20px;
     }

     .main-image-container {
         position: relative;
         overflow: hidden;
         border-radius: 12px;
         background-color: var(--light-bg);
         margin-bottom: 1.5rem;
         height: 500px;
         cursor: crosshair;
     }

     .main-image {
         width: 100%;
         height: 100%;
         object-fit: fill;
         transition: opacity 0.3s ease;
     }

     .custome_ul li {
         color: var(--text-gray);
         font-size: 15px;
         font-weight: 400;
     }

     .zoom-overlay {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-size: 250%;
         background-repeat: no-repeat;
         opacity: 0;
         transition: opacity 0.3s ease;
         pointer-events: none;
         border-radius: 12px;
     }

     .main-image-container:hover .zoom-overlay {
         opacity: 1;
     }

     .main-image-container:hover .main-image {
         opacity: 0;
     }

     .zoom-hint {
         position: absolute;
         bottom: 1rem;
         right: 1rem;
         background-color: rgba(28, 28, 30, 0.8);
         color: var(--white);
         padding: 0.5rem 1rem;
         border-radius: 8px;
         font-size: 0.85rem;
         display: flex;
         align-items: center;
         gap: 0.5rem;
         pointer-events: none;
     }

     @media (max-width: 991px) {
         .main-image-container {
             cursor: pointer;
         }

         .zoom-overlay {
             display: none;
         }

         .zoom-hint {
             display: flex;
         }

         .zoom-hint i:before {
             content: "\f00e";
         }
     }

     /* Mobile Zoom Modal */
     .mobile-zoom-modal {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.95);
         z-index: 9999;
         overflow: hidden;
     }

     .mobile-zoom-modal.active {
         display: block;
     }

     .mobile-zoom-content {
         width: 100%;
         height: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
         overflow: auto;
         -webkit-overflow-scrolling: touch;
     }

     .mobile-zoom-image {
         max-width: none;
         min-width: 100%;
         min-height: 100%;
         object-fit: contain;
         touch-action: pan-x pan-y pinch-zoom;
     }

     .mobile-zoom-close {
         position: fixed;
         top: 1rem;
         right: 1rem;
         background-color: var(--white);
         color: var(--primary-color);
         width: 50px;
         height: 50px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 1.5rem;
         cursor: pointer;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
         z-index: 10000;
         border: none;
     }

     .mobile-zoom-hint-text {
         position: fixed;
         bottom: 2rem;
         left: 50%;
         transform: translateX(-50%);
         background-color: rgba(255, 255, 255, 0.9);
         color: var(--primary-color);
         padding: 0.75rem 1.5rem;
         border-radius: 25px;
         font-size: 0.9rem;
         z-index: 10000;
         animation: fadeInOut 3s ease-in-out;
     }

     @keyframes fadeInOut {
         0%, 100% {
             opacity: 0;
         }

         10%, 90% {
             opacity: 1;
         }
     }

     .thumbnails-container {
         display: flex;
         gap: 1rem;
         overflow-x: auto;
         padding: 0.5rem 0;
     }

     .thumbnail {
         flex-shrink: 0;
         width: 100px;
         height: 100px;
         border-radius: 8px;
         overflow: hidden;
         cursor: pointer;
         border: 3px solid transparent;
         transition: all 0.3s ease;
     }

     .thumbnail:hover {
         border-color: var(--secondary-color);
         transform: translateY(-3px);
     }

     .thumbnail.active {
         border-color: var(--secondary-blue);
     }

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

     /* Product Details */
     .product-details {
         background-color: var(--white);
         border-radius: 12px;
         padding: 2.5rem;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     }

     .bulk-badge {
         display: inline-block;
         background-color: var(--secondary-color);
         color: var(--primary-color);
         padding: 0.5rem 1.25rem;
         border-radius: 25px;
         font-size: 0.85rem;
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         margin-bottom: 1rem;
     }


     .product-description {
         color: var(--text-gray);
         font-size: 1.1rem;
         margin-bottom: 2rem;
         line-height: 1.8;
     }

     .price-section {
         background-color: #f0f0f0;
         padding: 1.5rem;
         border-radius: 10px;
         margin-bottom: 2rem;
         text-align: center;
     }

     .price {
         font-size: 2rem;
         font-weight: 700;
         color: var(--secondary-blue);
     }

     .price-note {
         font-size: 0.9rem;
         color: var(--text-gray);
         margin-top: 0.5rem;
     }

     /* Specifications */
     .specifications {
         margin-bottom: 2rem;
     }

     .spec-title {
         font-size: 1.25rem;
         font-weight: 700;
         color: var(--primary-color);
         margin-bottom: 1rem;
         border-bottom: 2px solid var(--secondary-color);
         padding-bottom: 0.5rem;
     }

     .spec-list {
         list-style: none;
         padding: 0;
     }

     .spec-item {
         display: flex;
         padding: 0.75rem 0;
         border-bottom: 1px solid #E5E7EB;

         justify-content: space-between;
     }

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

     .spec-label {
         font-weight: 600;
         color: var(--secondary-blue);
         min-width: 140px;
     }

     .spec-value {
         color: var(--text-gray);
     }

     /* Quantity Selector */
     .quantity-section {
         margin-bottom: 2rem;
     }

     .quantity-label {
         font-weight: 600;
         color: var(--primary-color);
         margin-bottom: 0.75rem;
         display: block;
     }

     .quantity-selector {
         display: flex;
         align-items: center;
         gap: 1rem;
     }

     .qty-btn {
         width: 45px;
         height: 45px;
         border: 2px solid var(--secondary-blue);
         background-color: var(--white);
         color: var(--secondary-blue);
         border-radius: 8px;
         font-size: 1.25rem;
         cursor: pointer;
         transition: all 0.3s ease;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .qty-btn:hover {
         background-color: var(--secondary-blue);
         color: var(--white);
     }

     .qty-input {
         width: 80px;
         height: 45px;
         text-align: center;
         border: 2px solid #E5E7EB;
         border-radius: 8px;
         font-size: 1.1rem;
         font-weight: 600;
     }

     /* Buttons */
     .action-buttons {
         display: flex;
         gap: 1rem;
         margin-bottom: 2rem;
     }

     .btn-primary-custom {
         flex: 1;
         background-color: var(--primary-color);
         color: var(--white);
         border: none;
         padding: 1rem 2rem;
         border-radius: 10px;
         font-weight: 600;
         font-size: 1.1rem;
         transition: all 0.3s ease;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 0.5rem;
     }

     .btn-primary-custom:hover {
         background-color: var(--secondary-color);
         color: var(--primary-color);
         transform: translateY(-2px);
         box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
     }

     .btn-secondary-custom {
         flex: 1;
         background-color: var(--light-bg);
         color: var(--text-dark);
         border: 2px solid var(--secondary-color);
         padding: 0.5rem 0.5rem;
         border-radius: 10px;
         font-weight: 500;
         font-size: 0.9rem;
         transition: all 0.3s ease;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 0.5rem;
         text-decoration: unset;
         width: 30%;
     }

     .btn-secondary-custom:hover {
         background-color: var(--secondary-color);
         color: var(--white);
         transform: translateY(-2px);
     }

     /* Related Products */
     .related-section {
         padding: 3rem 0;
         background-color: var(--white);
         margin-top: 3rem;
     }

     .section-title {
         font-size: 2rem;
         font-weight: 700;
         color: var(--primary-color);
         margin-bottom: 10px;
         text-align: center;
     }

     .related-products {
         display: flex;
         gap: 1.5rem;
         overflow-x: auto;
         padding: 1rem 0;
     }

     .related-product-card {
         flex-shrink: 0;
         width: 280px;
         background-color: var(--light-bg);
         border-radius: 12px;
         overflow: hidden;
         transition: all 0.3s ease;
         cursor: pointer;
     }

     .related-product-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
     }

     .related-product-image {
         width: 100%;
         height: 200px;
         object-fit: cover;
     }

     .related-product-body {
         padding: 1.25rem;
     }

     .related-product-name {
         font-size: 1.1rem;
         font-weight: 600;
         color: var(--primary-color);
         margin-bottom: 0.5rem;
     }

     .related-product-price {
         font-size: 1.25rem;
         font-weight: 700;
         color: var(--secondary-blue);
     }

     /* Additional Info */
     .additional-info {
         background-color: var(--light-bg);
         padding: 1.5rem;
         border-radius: 10px;
         border-left: 4px solid var(--secondary-color);
     }

     .additional-info h6 {
         font-weight: 700;
         color: var(--primary-color);
         margin-bottom: 0.75rem;
     }

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

     .additional-info li {
         color: var(--text-gray);
         padding: 0.5rem 0;
         padding-left: 1.5rem;
         position: relative;
     }

     .additional-info li:before {
         content: "✓";
         position: absolute;
         left: 0;
         color: var(--secondary-color);
         font-weight: 700;
     }

     /* Responsive */
     @media (max-width: 991px) {
         .image-gallery {
             position: static;
             margin-bottom: 2rem;
         }

         .main-image-container {
             height: 400px;
         }



         .action-buttons {
             flex-direction: column;
         }
     }

     @media (max-width: 768px) {
         .main-image-container {
             height: 300px;
         }

         .thumbnail {
             width: 80px;
             height: 80px;
         }

         .product-details {
             padding: 1.5rem;
         }



         .price {
             font-size: 1.5rem;
         }

         .btn-whatsapp {

             padding: 10px 10px !important;
             font-size: 0.9rem !important;
         }

         .btn-whatsapp i {
             font-size: 1rem !important;
         }
     }

     /* Smooth Scrollbar */
     .thumbnails-container::-webkit-scrollbar,
     .related-products::-webkit-scrollbar {
         height: 8px;
     }

     .thumbnails-container::-webkit-scrollbar-track,
     .related-products::-webkit-scrollbar-track {
         background: var(--light-bg);
         border-radius: 10px;
     }

     .thumbnails-container::-webkit-scrollbar-thumb,
     .related-products::-webkit-scrollbar-thumb {
         background: var(--metallic);
         border-radius: 10px;
     }

     .thumbnails-container::-webkit-scrollbar-thumb:hover,
     .related-products::-webkit-scrollbar-thumb:hover {
         background: var(--secondary-blue);
     }


     /* Products List  */


     .product-card {
         background-color: var(--white);
         border-radius: 12px;
         overflow: hidden;
         transition: all 0.3s ease;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
         height: 100%;
         display: flex;
         flex-direction: column;
         cursor: pointer;
     }

     .product-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
     }

     /* 
        .product-image {
            width: 100%;
            height: 250px;
            object-fit: cover;
            background-color: var(--light-bg);
        } */

     .product-body {
         padding: 1.5rem;
         flex-grow: 1;
         display: flex;
         flex-direction: column;
     }

     .bulk-badge {
         display: inline-block;
         background-color: var(--secondary-color);
         color: var(--primary-color);
         padding: 0.25rem 0.75rem;
         border-radius: 20px;
         font-size: 0.75rem;
         font-weight: 600;
         margin-bottom: 0.75rem;
     }

     .product-name {
         font-size: 1.1rem;
         font-weight: 600;
         color: var(--primary-color);
         margin-bottom: 0.5rem;
     }

     .all-product-title {
         font-size: 0.9rem;
         color: var(--text-dark);
         margin-bottom: 0.8rem;
         font-weight: 300;
         letter-spacing: 0px;
     }

     .product-description {
         color: var(--text-gray);
         font-size: 0.9rem;
         margin-bottom: 1rem;
         flex-grow: 1;

         height: calc(100%);
     }

     .btn-view {
         background-color: var(--secondary-blue);
         color: var(--white);
         border: none;
         padding: 0.75rem 1.5rem;
         border-radius: 8px;
         font-weight: 500;
         transition: all 0.3s ease;
         width: 100%;
     }

     .btn-view:hover {
         background-color: var(--secondary-color);
         color: var(--primary-color);
         transform: scale(1.02);
     }

     .pagination {
         margin-top: 3rem;
         justify-content: center;
     }

     .page-link {
         color: var(--secondary-blue);
         border: 1px solid #E5E7EB;
         margin: 0 0.25rem;
         border-radius: 8px;
         padding: 0.75rem 1rem;
         transition: all 0.3s ease;
     }

     .page-link:hover {
         background-color: var(--secondary-color);
         color: var(--primary-color);
         border-color: var(--secondary-color);
     }

     .page-item.active .page-link {
         background-color: var(--secondary-blue);
         border-color: var(--secondary-blue);
     }

     /* Quick View Modal */
     .modal-content {
         border-radius: 12px;
         border: none;
     }

     .modal-header {
         background-color: var(--primary-color);
         color: var(--white);
         border-radius: 12px 12px 0 0;
     }

     .modal-body {
         padding: 2rem;
     }

     .quick-view-image {
         width: 100%;
         border-radius: 8px;
         margin-bottom: 1.5rem;
     }

     .product-item {
         transition: opacity 0.3s ease, transform 0.3s ease;
     }

     .product-item.hidden {
         display: none;
     }

     /* Responsive */
     @media (max-width: 991px) {
         .mobile-filter-toggle {
             display: block;
         }

         .filter-sidebar {
             position: fixed;
             left: -100%;
             top: 0;
             height: 100vh;
             width: 300px;
             z-index: 1050;
             transition: left 0.3s ease;
             overflow-y: auto;
             border-radius: 0;
         }

         .filter-sidebar.show {
             left: 0;
         }

         .filter-overlay {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             background-color: rgba(0, 0, 0, 0.5);
             z-index: 1040;
             display: none;
         }

         .filter-overlay.show {
             display: block;
         }

         .navbar-collapse {

             margin-top: 20px;
             border-top: 1px solid gray;
         }
     }


     @media (max-width: 768px) {
         .page-header h1 {
             font-size: 2rem;
         }

         .product-image {
             height: 200px;
         }

     }

     @media (max-width: 567px) {
         .navbar-brand {
             font-size: 1rem;
             margin-right: 0;
         }

         .footer h5 {
             font-size: 1rem;
         }
     }

     @media (max-width: 350px) {
         .navbar-brand {
             font-size: 0.8rem;
             margin-right: 0;
         }

     }

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

     @keyframes fadeIn {
         from {
             opacity: 0;
             transform: translateY(20px);
         }

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

     .hero-section {
         position: relative;
         min-height: 50vh;
         display: flex;
         align-items: center;
         background: linear-gradient(135deg, rgba(28, 28, 30, 0.9), rgba(46, 58, 89, 0.85)), url(../images/slider.jpg) center / cover fixed;
         color: var(--white);
         padding: 8rem 0 5rem;
         overflow: hidden;
         margin-bottom: 40px;
     }


     /* SINGLE PRODUCT VIEW SECTION  */

     .whatsapp-price-section {
         /* background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); */
         background-color: #f0f0f0;
         border-radius: 16px;
         padding: 24px;
         margin: 24px 0;
         text-align: center;
         box-shadow: 0 8px 24px rgba(37, 211, 102, 0.2);
     }

     .whatsapp-price-section h3 {
         color: #7a7a7a;
         font-size: 1.4rem;
         font-weight: 600;
         margin-bottom: 12px;
     }

     .whatsapp-price-section p {
         color: #7a7a7a;
         margin-bottom: 20px;
         font-size: 0.95rem;
     }

     .btn-whatsapp {
         background: white;
         color: #25D366;
         border: none;
         padding: 16px 32px;
         border-radius: 50px;
         font-size: 1.1rem;
         font-weight: 600;
         display: inline-flex;
         align-items: center;
         gap: 12px;
         transition: all 0.3s ease;
         text-decoration: none;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     }

     .btn-whatsapp:hover {
         transform: translateY(-2px);
         box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
         color: white;
     }

     .btn-whatsapp i {
         font-size: 1.4rem;
     }

     .contact-info {
         background: rgba(255, 255, 255, 0.15);
         border-radius: 8px;
         padding: 12px;
         margin-top: 16px;
         color: #7a7a7a;
         font-size: 0.9rem;
     }

     .w-15 {
         width: 15%;
     }

     #backToTop {
         position: fixed;
         bottom: 25px;
         right: 5px;
         width: 40px;
         height: 40px;
         background: linear-gradient(180deg, #2E3A59, #020233);
         color: #fff;
         border: none;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 15px;
         cursor: pointer;
         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
         transition: all 0.3s ease;
         opacity: 0;
         visibility: hidden;
         z-index: 999;
     }

     #backToTop:hover {
         transform: translateY(-5px);
         box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
     }

     /* Show button when scrolling */
     #backToTop.show {
         opacity: 1;
         visibility: visible;
     }

     /* Toast notification styles */
     .toast {
         visibility: hidden;
         min-width: 250px;
         margin-left: -125px;
         background-color: #333;
         color: #fff;
         text-align: center;
         border-radius: 8px;
         padding: 16px;
         position: fixed;
         z-index: 1000;
         left: 50%;
         top: 30px;
         font-size: 16px;
         opacity: 0;
         transition: opacity 0.5s, top 0.5s;
     }

     .toast.show {
         visibility: visible;
         opacity: 1;
         top: 50px;
     }

     .toast.success {
         background-color: #4CAF50;
     }

     .toast.error {
         background-color: #f44336;
     }