.hero-slider {
   width: 100%;
   height: 550px;
   overflow: hidden;
 }

 .hero-slider .slide {
   position: relative;
   height: 550px;
   background-size: cover;
   background-position: center;
   display: flex !important;
   align-items: center;
 }

 .slide::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
   z-index: 1;
 }

 .content {
   position: relative;
   z-index: 2;
   color: #fff;
   max-width: 550px;
   text-align: left;
 }

 .content h1 {
   font-size: 3rem;
   font-weight: 700;
   margin-bottom: 20px;
   text-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
 }

 .content p {
   font-size: 1.25rem;
   margin-bottom: 30px;
   color: #f1f1f1;
   line-height: 1.6;
 }

 .content .btn {
   background-color: #ff3d00;
   border: none;
   color: #fff;
   font-size: 1rem;
   padding: 12px 30px;
   border-radius: 30px;
   transition: all 0.3s ease;
 }

 .content .btn:hover {
   background-color: #fff;
   color: #ff3d00;
   transform: scale(1.05);
 }

 /* Slick Dots & Arrows Customization */
 .slick-dots li button:before {
   font-size: 12px;
   color: #fff;
   opacity: 0.6;
 }

 .slick-dots li.slick-active button:before {
   color: #ff3d00;
   opacity: 1;
 }

 .slick-prev:before,
 .slick-next:before {
   color: #fff;
   font-size: 25px;
   opacity: 0.8;
 }

 @media (max-width: 768px) {

   .hero-slider,
   .slide {
     height: 450px;
   }

   .content h1 {
     font-size: 2rem;
   }

   .content p {
     font-size: 1rem;
   }
 }

 .services-section {
   padding: 50px 0;
 }

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

 .section-title h2 {
   font-weight: 700;
   font-size: 2.3rem;
   color: #222;
 }

 .service-card {
   background: #fff;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
   transition: all 0.4s ease;
   text-align: center;
   height: 100%;
   position: relative;
 }

 .service-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 }

 .service-card img {
   width: 100%;
   height: 230px;
   object-fit: cover;
   transition: 0.4s ease;
 }

 .service-card:hover img {
   transform: scale(1.05);
 }

 .service-card .card-body {
   padding: 25px 20px;
   transition: 0.4s;
 }

 .service-card h5 {
   font-weight: 700;
   margin-bottom: 15px;
   color: #222;
   text-transform: uppercase;
   font-size: 1.1rem;
 }

 .service-card p {
   color: #666;
   font-size: 0.95rem;
   line-height: 1.6;
 }

 .service-card::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 5px;
   background: linear-gradient(90deg, #ff3d00, #ff9100);
   opacity: 0;
   transition: opacity 0.4s;
 }

 .service-card:hover::after {
   opacity: 1;
 }

 .slick-dotted.slick-slider {
   margin-bottom: 0 !important;
 }

 .repair-glass-section {
   background: linear-gradient(135deg, #004e92, #000428);
   padding: 60px 0;
   position: relative;
   overflow: hidden;
 }

 .repair-glass-section::before {
   content: "";
   position: absolute;
   top: -50px;
   left: -50px;
   width: 300px;
   height: 300px;
   background: rgba(255, 255, 255, 0.1);
   filter: blur(100px);
   border-radius: 50%;
 }

 .repair-glass-section .section-title {
   text-align: center;
   margin-bottom: 40px;
   color: #fff;
 }

 .repair-glass-section .section-title h2 {
   font-size: 32px;
   font-weight: 700;
   margin-bottom: 10px;
 }

 .repair-glass-section .section-title p {
   font-size: 16px;
   color: rgba(255, 255, 255, 0.8);
 }

 /* ======= GLASS CARDS ======= */
 .categories {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 25px;
   width: 90%;
   margin: auto;
 }

 .card {
   background: rgba(255, 255, 255, 0.15);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 20px;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
   display: flex;
   align-items: center;
   transition: all 0.4s ease;
   overflow: hidden;
 }

 .card:hover {
   transform: translateY(-10px);
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
   border-color: rgba(255, 255, 255, 0.5);
 }

 .icon-box {
   width: 100px;
   color: #fff;
   font-size: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(255, 255, 255, 0.1);
   height: 100%;
   transition: 0.3s;
   margin-top: 20px;
   padding: 25px;
   border-radius: 50%;
 }

 .card:hover .icon-box {
   background: rgba(255, 255, 255, 0.25);
 }

 .card-content {
   padding: 20px;
 }

 .card-content h3 {
   margin: 0 0 10px;
   font-size: 20px;
   color: #fff;
   font-weight: 600;
 }

 .card-content p {
   margin: 0;
   color: rgba(255, 255, 255, 0.8);
   font-size: 15px;
   line-height: 1.5;
 }

 .repair-glass-section h2,
 .repair-glass-section .section-title p {
   color: #fff !important;
 }

 .about-choose-section {
   background: linear-gradient(135deg, #e3f2fd, #f8faff);
   padding: 60px 0;
 }

 .about-choose-section .container {
   max-width: 1200px;
   margin: auto;
   padding: 0 15px;
 }

 .about-left h2,
 .choose-right h2 {
   font-size: 30px;
   font-weight: 700;
   color: #1a1a1a;
   margin-bottom: 25px;
   position: relative;
 }

 .about-left h2::after,
 .choose-right h2::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -8px;
   width: 50px;
   height: 3px;
   background: #007bff;
   border-radius: 5px;
 }

 /* ===== About Section ===== */
 .about-gallery {
   display: flex;
   gap: 10px;
   margin-bottom: 20px;
 }

 .about-gallery img {
   width: 32%;
   height: 160px;
   object-fit: cover;
   border-radius: 10px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease;
 }

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

 .about-left p {
   font-size: 16px;
   color: #555;
   line-height: 1.7;
   margin-bottom: 15px;
 }

 .about-left .highlight {
   font-size: 17px;
   color: #007bff;
   font-weight: 500;
 }

 /* ===== Choose Us Section ===== */
 .choose-item {
   display: flex;
   align-items: flex-start;
   gap: 15px;
   margin-bottom: 25px;
   background: rgba(255, 255, 255, 0.7);
   border-radius: 12px;
   padding: 15px;
   min-height: 110px;
   backdrop-filter: blur(8px);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
   transition: all 0.3s ease;
 }

 .choose-item:hover {
   transform: translateY(-5px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
 }

 .choose-item .icon {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: #007bff;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 22px;
   flex-shrink: 0;
 }

 .choose-item h5 {
   margin: 0;
   font-size: 18px;
   font-weight: 600;
   color: #222;
 }

 .choose-item p {
   margin: 5px 0 0;
   color: #555;
   font-size: 15px;
 }

 .stats-glass-section {
   background: linear-gradient(135deg, #e3f2fd, #f9f9fb);
   padding: 60px 0;
   text-align: center;
 }

 .stats-wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 25px;
 }

 .stat-card {
   background: rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(10px);
   border-radius: 15px;
   padding: 40px 20px;
   box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease;
 }

 .stat-card:hover {
   transform: translateY(-5px);
 }

 .stat-card h3 {
   font-size: 2.2rem;
   color: #0d1b3b;
   font-weight: 700;
   margin-bottom: 8px;
 }

 .stat-card p {
   font-size: 1rem;
   color: #333;
   font-weight: 500;
 }

 .all-brands-section {
   /* background: linear-gradient(135deg, #000428, #004e92); */
   color: #000428;
   padding: 60px 0;
   position: relative;
   overflow: hidden;
 }

 .all-brands-section::before {
   content: "";
   position: absolute;
   top: -80px;
   right: -80px;
   width: 250px;
   height: 250px;
   background: rgba(255, 255, 255, 0.1);
   filter: blur(80px);
   border-radius: 50%;
 }

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

 .section-title h2 {
   font-size: 32px;
   font-weight: 700;
   color: #000428;
   margin-bottom: 10px;
 }

 .section-title p {
   color: #000428;
   font-size: 16px;
   margin: 0 auto;
   max-width: 600px;
 }

 /* ===== Brand Cards ===== */
 .brands-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 25px;
   width: 90%;
   max-width: 1100px;
   margin: auto;
 }

 .brand-card {
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(12px);
   border-radius: 15px;
   text-align: center;
   padding: 25px 15px;
   border: 1px solid rgba(255, 255, 255, 0.15);
   transition: all 0.3s ease;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
 }

 .brand-card:hover {
   transform: translateY(-8px);
   border-color: rgba(255, 255, 255, 0.4);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
 }

 .brand-card img {
   width: 70px;
   height: 70px;
   object-fit: contain;
   margin-bottom: 15px;
 }

 .brand-card h4 {
   font-size: 18px;
   font-weight: 600;
   color: #000428;
   margin-bottom: 8px;
 }

 .brand-card p {
   font-size: 14px;
   color: #000428;
   line-height: 1.5;
 }

 .product-section {
   color: #000 !important;
   padding: 70px 0;
 }

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

 .section-title h2 {
   font-size: 32px;
   font-weight: 700;
   margin-bottom: 10px;
 }

 .section-title p {
   color: #000428;
   font-size: 16px;
 }

 /* ===== Product Grid ===== */
 .product-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 25px;
   /* width: 90%; */
   /* max-width: 1100px;. */
   margin: auto;
 }

 .product-card {
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 15px;
   text-align: center;
   padding: 25px 15px;
   transition: all 0.3s ease;
   box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
 }

 .product-card:hover {
   transform: translateY(-8px);
   border-color: rgba(255, 255, 255, 0.4);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
 }

 .product-card img {
   width: 100%;
   height: 180px;
   object-fit: cover;
   border-radius: 10px;
   margin-bottom: 15px;
 }

 .product-card h4 {
   font-size: 18px;
   font-weight: 600;
   color: #000428;
   margin-bottom: 5px;
 }

 .price {
   color: #00e6ff;
   font-weight: 600;
   margin-bottom: 15px;
   font-size: 26px;
 }

 .enq-btn {
   display: inline-block;
   background: #00e676;
   border: 2px solid transparent;
   color: #000;
   font-weight: 600;
   padding: 10px 20px;
   border-radius: 25px;
   text-decoration: none;
   transition: all 0.3s ease;
 }

 .enq-btn:hover {
   background: transparent;
   border: 2px solid #00e676;
   color: #0d1b3b;
 }

 .toast-container {
  z-index: 9999;
}

.toast {
  border-radius: 10px;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}


 @media (max-width: 768px) {
   .product-card img {
     height: 160px;
   }
 }


 @media (max-width: 768px) {
   .brand-card {
     padding: 20px 10px;
   }

   .brand-card img {
     width: 60px;
     height: 60px;
   }
 }


 @media (max-width: 768px) {
   .stat-card {
     padding: 30px 10px;
   }

   .stat-card h3 {
     font-size: 1.8rem;
   }
 }


 /* ===== Responsive ===== */

 @media (max-width: 992px) {
   /* .row {
     display: flex;
     flex-direction: column;
     gap: 40px;
   } */

   .about-gallery img {
     height: 140px;
   }
 }

 @media (max-width: 768px) {
   .card {
     flex-direction: column;
     text-align: center;
   }

   .icon-box {
     width: 100%;
     padding: 20px 0;
   }
 }

 @media (max-width: 992px) {
   .service-card img {
     height: 200px;
   }
 }

 @media (max-width: 768px) {
   .service-card img {
     height: 180px;
   }
 }

 .h-90{height: 90px !important;}