@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Quicksand:wght@300..700&display=swap');
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

   body{
    font-family: "Quicksand", sans-serif;
   }
   
   
   
   
 /* 🔹 Topbar */
.topbar {
  background: #b62554;
  color: #fff;
  font-size: 14px;
  padding: 10px 0;
  z-index: 1110;
  position: relative;
}

.topbar a {
  color: #fff;
  text-decoration: none;
  margin-right: 15px;
}

/* 🔹 Topbar Responsive */
@media (max-width: 767px) {
  .topbar {
    display: none; /* Hide topbar on mobile */
  }
}


    /* 🔹 Navbar */
    .navbar {

      z-index: 1100;
      padding: 0.8rem 0;
      position: absolute;
      top: 50px; /* topbar height */
      width: 100%;
    }
    .navbar .nav-link {
      color: #fff !important;
      font-weight: 500;
      margin-left: 15px;
    }
    .navbar .navbar-brand {
      color: #fff !important;
      font-weight: 700;
      display: flex;
      align-items: center;
    }
    .navbar .btn-custom {
      background: linear-gradient(45deg, #83438A, #E22131,#FA8F36);
      border: none;
      color: #fff;
      padding: 8px 20px;
      font-weight: 600;
      border-radius: 30px;
    }
    .logo {
  height: 50px;   /* fix height */
  width: auto;    /* maintain aspect ratio */
  max-width: 150px; /* optional limit */
}


    /* Navbar on scroll */
    .navbar.scrolled {
      background: #fff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    .navbar.scrolled .nav-link {
      color: #000 !important;
    }
    .navbar.scrolled .navbar-brand {
      color: #000 !important;
    }

    /* 🔹 Hero Section */
    .hero {
      background: linear-gradient(rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.652)),
                  url('../image/banner-front-page.png') no-repeat center center/cover;
      color: #fff;
      padding: 180px 0 100px;
      min-height: 100vh;
      display: flex;
      align-items: center;
      position: relative;
    }
    .hero h1 {
      font-weight: 700;
      font-size: 42px;
    }
    .hero p {
      font-size: 16px;
      line-height: 1.7;
      margin-bottom: 20px;
    }
    .hero .btn-custom-lg {
     background: linear-gradient(45deg, #83438A, #E22131,#FA8F36);
      border: none;
      color: #fff;
      padding: 12px 30px;
      font-weight: 600;
      border-radius: 30px;
    }
    .hero img {
      max-width: 100%;
      border-radius: 15px;
    }

    /* 🔹 Offcanvas Fix */
    .offcanvas {
      z-index: 1200; /* above topbar + navbar */
    }
    .hero1 {
      background: linear-gradient(rgba(0, 0, 0, 0.734), rgba(0, 0, 0, 0.734)),
                  url('../image/banner-front-page.png') no-repeat center center/cover;
      color: #fff;
      padding: 220px 0 100px;
      display: flex;
      align-items: center;
      position: relative;
      object-fit: fill;
    }
     
/* 🔹 Center + Larger/Heavier Breadcrumb */
.hero-breadcrumb {
  text-align: center;
}

.hero-breadcrumb .breadcrumb {
  display: inline-flex;
  background: transparent;
  padding: 0;
  margin: 0 auto;
}

.hero-breadcrumb .breadcrumb-item a
 {
  font-size: 1rem;     /* ≈20 px; adjust to taste */
  font-weight: 600;       /* semi-bold, can use 700 for bold */
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}

.hero-breadcrumb .breadcrumb-item.active{
  color: #d38312;
  font-size: 1rem;     /* ≈20 px; adjust to taste */
  font-weight: 600;       /* semi-bold, can use 700 for bold */
}

.hero-breadcrumb .breadcrumb-item a:hover {
  color: #FA8F36;         /* brand accent on hover */
}

.hero-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: #fff;
  font-size: 1rem;     /* match the text size */
}

.navbar-nav .dropdown-arrow {
  transition: transform 0.3s ease;
  font-size: 12px;
}

/* Dropdown items */
.navbar-nav .dropdown-menu.dropdown-card .dropdown-item {
  border-bottom: 1px solid #ccc;
  padding: 10px 20px;
  color: #333;
  font-weight: 600; /* 🔹 Increased font weight */
  transition: background-color 0.3s, color 0.3s;
}

.navbar-nav .dropdown-menu.dropdown-card .dropdown-item:last-child {
  border-bottom: none;
}

.navbar-nav .dropdown-menu.dropdown-card .dropdown-item:hover {
  background-color: #FA8F36;
  color: #fff;
}
.main-heading{
  font-size: 34px !important;
}
.main-para{
  font-size: 14px !important;
}
/* Show dropdown on hover for large screens */
@media (min-width: 992px) {
  .navbar-nav .dropdown {
    position: relative;
  }
  



  /* Hover to show dropdown */
  .navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Dropdown card styling */
  .navbar-nav .dropdown-menu.dropdown-card {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    position: absolute;
    top: 120%;
    left: 25px; /* 🔹 Shift left so it aligns under "Products" */
    border: 1px solid #ddd;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 0;
    min-width: 200px;
    background-color: #fff;
    z-index: 999;
  }

  /* Dropdown items */
  .navbar-nav .dropdown-menu.dropdown-card .dropdown-item {
    border-bottom: 1px solid #ccc;
    padding: 10px 20px;
    color: #333;
    transition: background-color 0.3s, color 0.3s;
  }

  .navbar-nav .dropdown-menu.dropdown-card .dropdown-item:last-child {
    border-bottom: none;
  }

  .navbar-nav .dropdown-menu.dropdown-card .dropdown-item:hover {
    background-color: #FA8F36;
    color: #fff;
  }

}


/* Tablet (≤ 992px) */
@media (max-width: 992px) {
  .hero-breadcrumb .breadcrumb-item a,
  .hero-breadcrumb .breadcrumb-item.active {
    font-size: 1.125rem;   /* 18px */
  }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
  .hero-breadcrumb .breadcrumb-item a,
  .hero-breadcrumb .breadcrumb-item.active {
    font-size: 1rem;       /* 16px */
  }
}

/* Small Mobile (≤ 480px) */
@media (max-width: 480px) {
  .hero-breadcrumb .breadcrumb-item a,
  .hero-breadcrumb .breadcrumb-item.active {
    font-size: 0.85rem;     /* 14px */
  }
}





/* Offcanvas dropdown items spacing */
.offcanvas .dropdown-item {
  color: #fff;
  padding: 10px 20px;
  margin-bottom: 5px; /* gap between items */
  border-radius: 4px;  /* optional: slightly rounded corners */
  transition: background-color 0.3s, color 0.3s;
}

/* Remove margin from last item */
.offcanvas .dropdown-item:last-child {
  margin-bottom: 0;
}

/* Hover effect */
.offcanvas .dropdown-item:hover {
  background-color: #FA8F36;
  color: #fff;
}


/* Arrow rotation on collapse open */
.offcanvas .dropdown-arrow {
  transition: transform 0.3s ease;
}

/* Rotate arrow when collapse is shown */
.offcanvas .collapse.show ~ .dropdown-arrow,
.offcanvas .nav-link[aria-expanded="true"] .dropdown-arrow {
  transform: rotate(180deg); /* arrow points up */
}



    /* Mobile screen fix */
@media (max-width: 768px) {
  .navbar {
     /* flows normally */
    top: 2px;             /* reset */
  }
}




 .about-section {
      padding: 60px 0;
      background: #fdfdfd;
    }
    .about-badge {
      background: linear-gradient(135deg, #ff6a00, #d6249f);
      color: #fff;
      padding: 19px;
      border-radius: 12px;
      font-weight: bold;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }
    .about-badge h3 {
      font-size: 62px;
      margin: 0;
    }
    .about-text h2 {
      font-weight: 700;
      font-size: 38px;
      color: #FA8F36;
      margin-bottom: 20px;
    }
    .about-icons {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin: 25px 0;
    }
    .about-icons div {
      flex: 1 1 45%;
      display: flex;
      align-items: center;
      font-weight: 600;
    }
    .about-icons img {
      font-size: 22px;
      margin-right: 10px;
      color: #f15a24;
      font-weight: 600;
    }
    .btn-explore {
     background: linear-gradient(45deg, #83438A, #E22131, #FA8F36);
    border: none;
    color: #fff;
    padding: 12px 30px;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    }
    .btn-explore:hover {
      background: #c4410e;
    }
   
    .about-img {
      position: relative;
    }
    .about-img img {
      border-radius: 12px;
      width: 80%;
      height: auto;
      object-fit: cover;
    }




     .product-section {
  position: relative;
  padding: 70px 0;
  color: #fff;
  background: 
    linear-gradient(rgba(0, 0, 0, 0.823), rgba(0, 0, 0, 0.703)), /* gradient overlay */
    url('../image/probuct-banner.png') no-repeat center center;
  background-size: cover; /* ensure image covers entire section */
}

    .product-section .container {
      position: relative;
      z-index: 2;
    }
    .product-section h3 {
      color: #ff6a00;
      font-weight: 700;
      margin-bottom: 15px;
    }
 .product-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 320px; /* fixed height for all cards */
}

.product-card img {
  width: 100%;
  height: 100%;  /* fill the fixed card height */
  object-fit: cover; /* ensures image covers without distortion */
  display: block;
}

.product-card .card-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60%;
  background: rgb(255, 106, 0);
  color: #fff;
  font-weight: 600;
  padding: 15px 0;
  text-align: center;
  border-radius: 0 0 0px 8px;
}
.card-footer a {
  color: #fff;
  text-decoration: none;
  display: block; /* make entire footer area clickable */
  font-weight: 600;
  transition: color 0.3s ease;
}

.card-footer a:hover {
  color: #ffe6eb; /* hover color */
}





 .applications-section {
      padding: 60px 8%;
    }
    .applications-section h2 {
      color: #f17325;
      font-weight: 700;
      margin-bottom: 10px;
    }
    .applications-section p {
      color: #333;
      max-width: 650px;
      margin-bottom: 0;
    }
    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px;
      margin-bottom: 40px;
    }
    .explore-btn {
      background: linear-gradient(90deg, #c63d99, #f17325);
      color: #fff;
      font-weight: 600;
      border: none;
      border-radius: 8px;
      padding: 10px 20px;
      cursor: pointer;
      transition: 0.3s;
    }
    .explore-btn:hover {
      opacity: 0.9;
    }

    /* ==== GRID ==== */
  .app-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 260px;
  gap: 20px;
}

    .app-card {
      border-radius: 12px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      transition: transform 0.3s;
    }
    .app-card:hover {
      transform: translateY(-5px);
    }
    .app-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .app-card-title {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 22px;
      text-align: center;
      font-weight: 600;
      font-size: 15px;
      color: #fff;
      background: linear-gradient(90deg, #f17325, #c63d99);
    }

    /* ==== GRID ITEM SIZES ==== */
    .app1 { grid-column: span 1; grid-row: span 1; } /* Agriculture */
    .app2 { grid-column: span 1; grid-row: span 1; } /* Injection Moulding */
    .app3 { grid-column: span 1; grid-row: span 2; } /* Household tall */
    .app4 { grid-column: span 2; grid-row: span 1; } /* Blow Moulding */
    .app5 { grid-column: span 1; grid-row: span 1; } /* Electricals */
    .app6 { grid-column: span 2; grid-row: span 1; } /* Pipe */
    .app7 { grid-column: span 2; grid-row: span 1; } /* Packaging wide */
    .app8 { grid-column: span 1; grid-row: span 1; } /* Toys */

 /* Tablet: 2 columns */
@media(max-width: 992px) {
  .app-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 240px;
  }
  .app3 { grid-row: span 2; } /* keep taller item */
  .app7 { grid-column: span 2; } /* keep wide item */
}

/* Mobile: 1 column */
@media(max-width: 576px) {
  .app-grid {
    
    grid-auto-rows: 220px;
  }
  .app3, .app7 { grid-column: span 1; grid-row: span 1; } /* normalize items */
}




.counter-section {
      background: linear-gradient(
          rgba(20, 20, 20, 0.685),
          rgba(20, 20, 20, 0.804)
        ),
        url("../image/counter-banner.png") center/cover no-repeat;
      
      color: #fff;
      position: relative;
    }

    .counter-box {
      text-align: center;
      padding: 20px;
      position: relative;
    }

    .counter-box:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 15%;
      right: 0;
      height: 70%;
      width: 1px;
      background: rgba(255, 255, 255, 0.5);
    }

    .counter-icon img {
      width: 50px;   /* adjust image size */
      height: 50px;
      margin-bottom: 15px;
    }

    .counter-number {
      font-size: 42px;
      font-weight: 700;
    }

    .counter-text {
      font-size: 16px;
      opacity: 0.9;
    }

    @media (max-width: 768px) {
      .counter-box:not(:last-child)::after {
        display: none;
      }
    }





     .testimonial-section {
      padding: 60px 20px;
      display: flex;
      justify-content:space-between;
      align-items: flex-start;
      gap: 50px;
      flex-wrap: wrap;
    }

    .testimonial-left {
      max-width: 400px;
    }

    

    .testimonial-left p {
      margin-top: 15px;
      color: #333;
    }

    .testimonial-nav {
      margin-top: 20px;
      display: flex;
      gap: 10px;
    }

    .testimonial-nav button {
      background: #d36b8a;
      border: none;
      color: #fff;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .testimonial-cards {
      display: flex;
      gap: 20px;
      overflow: hidden;
      scroll-behavior: smooth;
      max-width: 640px;
    }

    .testimonial-card {
      flex: 0 0 300px;
      min-width: 300px;
      background: #d36b8a;
      color: #fff;
      padding: 20px;
      border-radius: 10px;
      position: relative;
      transition: transform 0.3s;
    }

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

    .testimonial-card .stars {
      color: #ffc107;
      margin-bottom: 10px;
    }

    .testimonial-card .client-info {
      display: flex;
      align-items: center;
      margin-top: 15px;
      gap: 10px;
    }

    .testimonial-card .client-info img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
    }

    @media (max-width: 768px) {
      .testimonial-section {
        flex-direction: column;
        align-items: center;
      }

      .testimonial-cards {
        max-width: 100%;
      }

      .testimonial-card {
        flex: 0 0 90%;
      }
    }






       /* Footer Styling */
    .custom-footer {
      background-color: #111;      /* main dark background */
      color: #ccc;
      padding: 60px 0;
      position: relative;
    }
    .custom-footer h5 {
      color: #fff;
      font-weight: 600;
      margin-bottom: 20px;
    }
    .custom-footer p {
      font-size: 15px;
      line-height: 1.6;
    }
    .footer-social a {
      color: #fff;
      font-size: 18px;
      margin-right: 15px;
      transition: color 0.3s;
    }
    .footer-social a:hover {
      color: #f05454;
    }
    .footer-links a {
      display: block;
      color: #ccc;
      text-decoration: none;
      margin-bottom: 10px;
      transition: color 0.3s;
    }
    .footer-links a:hover {
      color: #f05454;
    }
    .footer-contact li {
  display: flex;                /* line up icon + text */
  align-items: flex-start;      /* top-align icon */
  gap: 10px;                    /* space between icon & text */
  margin-bottom: 12px;
  color: #ccc;
}

.footer-contact i {
  flex-shrink: 0;               /* prevent icon from shrinking */
  color: #f05454;
  margin-top: 2px;              /* small visual adjust */
}

  .footer-pattern {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 35%;                          /* how wide the pattern appears */
  background: url("assets/image/footer-pattern.png") no-repeat center right;
  background-size: cover;               /* scale to fill */
  opacity: 0.08;                        /* faint, adjust as needed */
  pointer-events: none;   
  z-index: 9999;              /* don’t block clicks */
}



/* 🔹 Section with Linear Gradient Overlay + BG Image */
.why-choose {
  background:
    linear-gradient(
      rgba(0, 0, 0, 0.841),  /* top dark overlay */
      rgba(0, 0, 0, 0.916)   /* bottom dark overlay */
    ),
    url('../image/why-choose-banner.png') center/cover no-repeat;
  padding: 80px 0;
  color: #fff;
}

/* Heading + Paragraph in one line */
.why-title {
  font-weight: 700;
  font-size: 36px;
  color: #f2a52b;
  margin-bottom: 0;       /* no extra space */
  display: inline-block;
}

.why-desc {
  font-size: 16px;
  line-height: 1.7;
  display: inline-block;
  margin-left: 20px;      /* spacing between heading and paragraph */
  color: #fff;
}
.why-desc-list {
  list-style: none; /* remove default bullets */
  padding: 0;
  margin: 0 auto;
  max-width: 800px;
  color: #fff;
  font-size: 16px;
  line-height: 1.8;
}

.why-desc-list li {
  margin-bottom: 10px; /* spacing between each point */
  position: relative;
  padding-left: 20px;
}

.why-desc-list li::before {
  content: "•";       /* custom bullet */
  position: absolute;
  left: 0;
  color: #f2a52b;     /* golden bullet color */
  font-weight: bold;
}

/* Responsive stacking for smaller screens */
@media (max-width: 991px) {
  .why-desc {
    display: block;
    margin-left: 0;
    margin-top: 15px;
  }
}

/* Cards */
.choose-card {
  background: linear-gradient(135deg, rgba(255,132,0,0.7), rgba(150,0,100,0.7));
  border-radius: 16px;
  padding: 40px 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 250px; /* ensures equal height */
}

.choose-card h5 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 20px;
  color: #fff;
}

/* Round icon holder */
.icon-round {
  width: 90px;
  height: 90px;
  margin: 0 auto;
  border: 2px solid rgba(255,255,255,0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.15);
}

.icon-round img {
  width: 45px;
  height: 45px;
}

/* Hover effect on card */
.choose-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .why-title {
    font-size: 28px;
  }
  .why-desc {
    font-size: 14px;
  }
  .choose-card {
    padding: 30px 15px;
    min-height: auto;
  }
  .icon-round {
    width: 70px;
    height: 70px;
  }
  .icon-round img {
    width: 35px;
    height: 35px;
  }
}




.vision-mission {
  background-color: #ffe6eb; /* light pink background */
  color: #333;
}

.vm-title {
  font-weight: 700;
  color: #ff8c42; /* orange heading */
  font-size: 28px;
}

.vm-desc {
  font-size: 16px;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.7;
  color: #333;
}

/* Card */
.vm-card {
  overflow: hidden;
  border-radius: 8px;
  position: relative;
}

/* Image inside card */
.vm-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Overlay box on image - centered */
.vm-overlay {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* center both vertically and horizontally */
  width: 60%; 
  height: 100%;/* adjust width as needed */
  background-color: rgba(193, 39, 87, 0.85); /* semi-transparent pink/magenta */
  color: #fff;
  text-align: center;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.vm-overlay h4 {
  font-weight: 700;
  font-size: 40px;
  margin-bottom: 10px;
}

.vm-overlay p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 0;
  color: #fff;
}

/* Responsive */
@media (max-width: 767px) {
  .vm-overlay {
    width: 95%;
    padding: 15px;
  }

  .vm-overlay h4 {
    font-size: 18px;
  }

  .vm-overlay p {
    font-size: 13px;
  }
}







   .master-section-page
    {
  

  background: 
    linear-gradient(rgba(11, 9, 9, 0.882), rgba(0, 0, 0, 0.91)), 
    url('../image/master-batch-banner.png') no-repeat center center / cover;
  position: relative;
  color: #fff;
  overflow-x: hidden;
}

    
 
    .masterbatch-section {
      position: relative;
      z-index: 1;
      padding: 80px 0;
      
    }
    /* ✅ Paragraph and List Style Update */
.masterbatch-section p {
  color: #f5f5f5;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 15px;
}

.masterbatch-section ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 20px;
}
.masterbatch-section ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  color: #e8e8e8;
  font-size: 15px;
  line-height: 1.7;
}

/* Gradient bullet */
.masterbatch-section ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(90deg, #FA8F36, #FF4C4C);
  box-shadow: 0 0 6px rgba(250, 143, 54, 0.6);
}


    .masterbatch-title {
      font-weight: 700;
      color: #FA8F36;
      margin-bottom: 20px;
    }

    .masterbatch-text {
      max-width: 500px;
      color: #ddd;
      margin-bottom: 30px;
      line-height: 1.7;
    }

    .btn-explore {
      background: linear-gradient(90deg, #FA8F36, #FF4C4C);
      border: none;
      color: #fff;
      font-weight: 600;
      padding: 10px 25px;
      border-radius: 6px;
      transition: all 0.3s ease;
    }

    .btn-explore:hover {
      opacity: 0.9;
      transform: translateY(-2px);
    }
.masterbatch-card {
  background: #fff;
  border-radius: 10px;
  overflow: visible; /* allow label to go outside the card */
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  position: relative;
  width: 300px;
  height: 300px;
  transition: transform 0.3s ease;
}

.masterbatch-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  
}

.card-label {
  position: absolute;
  bottom: -12px; /* hang below the image */
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #FA8F36, #AF1849);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 10px;
  border-radius: 6px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

  white-space: nowrap; /* prevent wrapping */
  overflow: hidden;    /* hide overflow if too long */
  text-overflow: ellipsis; /* add ... for overflow */
}






    /* ✅ Zig-Zag Pattern */
    .zigzag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 65px;
      justify-content: center;
    }

    .zigzag-row .masterbatch-card:nth-child(odd) {
      margin-top: 0;
    }

    .zigzag-row .masterbatch-card:nth-child(even) {
      margin-top: 40px; /* Zigzag offset */
    }

    @media (max-width: 992px) {
      .masterbatch-section {
        text-align: center;
      }

      .masterbatch-text {
        margin: 0 auto 20px;
      }

      .zigzag-row {
        justify-content: center;
      }

      .zigzag-row .masterbatch-card {
        width: 100%;
        max-width: 320px;
        margin-top: 0;
      }
    }






      .mb-section {
      padding: 50px 20px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .mb-item {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 30px;
      margin-bottom: 60px;
    }

    .mb-item:nth-child(even) {
      flex-direction: row-reverse;
    }

    .mb-item img {
      width: 100%;
      max-width: 400px;
      border-radius: 10px;
      object-fit: cover;
    }

    .mb-details {
      flex: 1;
      min-width: 250px;
    }

    .mb-title {
      color: #FA8F36;
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 15px;
    }

    .mb-desc {
      line-height: 1.7;
      margin-bottom: 15px;
    }

    .mb-industries {
      font-weight: 600;
    }

    .mb-industries ul {
      padding-left: 0;
      margin: 5px 0 0 0;
      list-style: none;
    }

    .mb-industries li {
      margin-bottom: 5px;
      display: flex;
      align-items: center;
    }

    .mb-industries li i {
      color: #28a745;
      margin-right: 8px;
    }

  /* Mobile Styles */
@media (max-width: 768px) {

    .mb-item {
        flex-direction: column !important;
        text-align: center;
    }

    .mb-item img {
        width: 300px;      /* <<< Reduce Image Size Here */
        height: auto;
        margin: 0 auto;
        display: block;
    }
}






    /* Container */
.tab-container {
  display: flex;
  min-height: 100vh;
  flex-wrap: nowrap;
}

/* Left Tab Menu */
.tab-sidebar {
  width: 250px;
  height: 100%;
  background: linear-gradient(to bottom, #a83279, #d38312);
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  transition: all 0.3s ease;
}

/* Tab Buttons */
.tab-button {
  display: block;
  width: 100%;
  background: transparent;
  color: #fff;
  border: none;
  text-align: left;
  padding: 10px 0;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s;
}

/* Hover effect */
.tab-button:hover {
  background-color: #fff;
  color: #d38312;
  text-align: center;
}

/* Active state */
.tab-button.active {
  font-weight: bold;
  background-color: white; /* no background color */
  color: #d38312; /* keep highlight color if needed */
  text-decoration: none; /* remove underline */
  text-align: center;
}



/* Content Area */
.tab-content-area {
  flex: 1;
  padding: 30px;
  display: none;
}

.tab-content-area.active {
  display: block;
}

/* 3 Column Grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Card Styling */
.card {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
}

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

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

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  text-align: center;
  padding: 10px;
}

.card:hover .overlay {
  opacity: 1;
}

.overlay h2 {
  margin: 0 0 5px;
  font-size: 16px;
}

.overlay p {
  font-size: 12px;
  line-height: 1.3;
}

/* Responsive */

/* Tablet */
@media (max-width: 900px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tab-container {
    flex-wrap: wrap;
  }

  .tab-sidebar {
    width: 100%;
    height: auto;
    flex-direction: row;
    overflow-x: auto;
    gap: 5px;
    padding: 10px;
  }

  .tab-button {
    flex: 1 0 auto;
    text-align: center;
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 13px;
    padding: 8px 5px;
  }

  .tab-button:last-child {
    border-right: none;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  .tab-sidebar {
    flex-direction: column;
    width: 100%;
    padding: 5px;
  }

  .tab-button {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-right: none;
    font-size: 12px;
    padding: 6px 0;
  }

  .tab-button:last-child {
    border-bottom: none;
  }
}







        /* Tab Header */
    .custom-tab-header {
      display: flex;
      justify-content: center;
      border-bottom: 2px solid #eee;
      margin-bottom: 20px;
    }

    .custom-tab-btn {
      padding: 10px 20px;
      cursor: pointer;
      font-weight: 600;
      color: #555;
      position: relative;
      transition: color 0.3s;
    }

    .custom-tab-btn.active {
      color: #d8416c;
    }

    .custom-tab-btn.active::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -2px;
      height: 2px;
      background: #d8416c;
    }

    /* Tab Panels */
    .custom-tab-panel {
      display: none;
    }

    .custom-tab-panel.active {
      display: block;
    }

    /* Image Grid */
    .custom-tab-gallery img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      border-radius: 8px;
    }





/* ---------------------------------
   Page Header
--------------------------------- */
.gallery-header {
  text-align: center;
  padding: 60px 20px 30px;
  color: #2b2b2b;
}

.gallery-header h2 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #d63a6b;
  letter-spacing: 1px;
}

.gallery-header p {
  color: #777;
  font-size: 16px;
}

/* ---------------------------------
   Custom Tabs
--------------------------------- */
.tab-switcher {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.tab-switch-btn {
  padding: 12px 25px;
  font-weight: 600;
  color: #555;
  background: #fff;
  border-radius: 30px;
  border: 2px solid transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-switch-btn:hover {
  color: #d8416c;
  border-color: #f5c4d2;
  background-color: #fff5f8;
  transform: translateY(-2px);
}

.tab-switch-btn.active {
  color: #fff;
  background: linear-gradient(45deg, #d8416c, #e36b8e);
  border: none;
  box-shadow: 0 4px 15px rgba(216, 65, 108, 0.3);
  transform: translateY(-2px);
}

/* ---------------------------------
   Masonry Grid
--------------------------------- */
.tab-section {
  display: none;
}

.tab-section.active {
  display: block;
}

.masonry-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.masonry-item {
  width: 33.333%;
  position: relative;
  overflow: hidden;
}

/* ✅ All images same height & responsive */
.masonry-item img {
  width: 100%;
  height: 280px; /* uniform height */
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, filter 0.3s ease;
}

.masonry-item:hover img {
  transform: scale(1.08);
  filter: brightness(90%);
}

/* ---------------------------------
   Overlay Caption
--------------------------------- */
.masonry-item::after {
  content: attr(data-caption);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 15px;
  padding: 8px 10px;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.4s ease;
  text-align: center;
}

.masonry-item:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------
   Responsive
--------------------------------- */
@media (max-width: 900px) {
  .masonry-item {
    width: 50%;
  }
  .masonry-item img {
    height: 220px; /* tablet view */
  }
}

@media (max-width: 600px) {
  .masonry-item {
    width: 100%;
  }
  .masonry-item img {
    height: 200px; /* mobile view */
  }
  .gallery-header h2 {
    font-size: 1.7rem;
  }
}




















      .contact-section {
    
      padding: 60px 20px;
      max-width: 1000px;
      margin: 60px auto;
      border-radius: 8px;
 
    }

    .contact-title {
      text-align: center;
      color: #f57c00;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .contact-description {
      text-align: center;
      max-width: 700px;
      margin: 0 auto 40px;
      color: #333;
      
      padding: 8px;
      font-size: 15px;
    }

    .contact-info-card {
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 25px;
      height: 100%;
    }

    .contact-form-card {
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 25px;
      height: 100%;
    }

   .contact-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b0418c, #f26822);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  margin-right: 15px;
  flex-shrink: 0;        /* prevents icon from stretching */
  align-self: flex-start; /* icon always stays top aligned */
}
    .contact-label {
      font-weight: 700;
      color: #f57c00;
    }

   .contact-item {
  display: flex;
  align-items: center;
  gap: 18px;          /* spacing between icon & text */
  margin-bottom: 112px; /* equal gap between each contact block */
}

.contact-item:last-child {
  margin-bottom: 0;  /* removes extra gap below the last item */
}


    .btn-submit {
      background: linear-gradient(90deg, #8b3d9c, #f26822);
      color: #fff;
      font-weight: 600;
      border: none;
      width: 100%;
      border-radius: 6px;
      height: 45px;
      transition: 0.3s;
    }

    .btn-submit:hover {
      opacity: 0.9;
    }

    @media (max-width: 768px) {
      .contact-section {
        margin: 20px;
        padding: 30px 15px;
      }
    }






    /* Floating WhatsApp button */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25D366;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 1000;
  transform-origin: 40% 20%;
  animation: wave 2s infinite;
  overflow: visible;
}

/* WhatsApp icon */
.whatsapp-float i {
  display: inline-block;
  z-index: 2;
  position: relative;
}

/* Hover effect: stop waving */
.whatsapp-float:hover {
  background-color: #1ebea5;
  animation: none;
}

/* Ripple waves */
.ripple {
  position: absolute;
  width: 60px;
  height: 60px;
  background-color:  rgba(37, 211, 101, 0.5);
  border-radius: 50%;
  top: 0;
  left: 0;
  z-index: 0;
  animation: ripple 2s infinite;
}

.ripple:nth-child(2) {
  animation-delay: 0.4s;
}

.ripple:nth-child(3) {
  animation-delay: 0.8s;
}


/* Ripple ring animation */
@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}






/* Tablet (≤ 992px) */
@media (max-width: 992px) {
    .about-text h2 {
        font-size: 32px;
    }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
    .about-text h2 {
        font-size: 28px;
    }
}

/* Small Mobile (≤ 480px) */
@media (max-width: 480px) {
    .about-text h2 {
        font-size: 24px;
    }
}




/* Mobile only (≤ 768px) */
@media (max-width: 768px) {
  .masterbatch-section ul li {
    text-align: left;       /* left-align text on mobile only */
  }
}