body {
  font-family: 'Segoe UI', Arial, sans-serif;
  color: #29304d;
  margin: 0;
  background: #fff;
}

html {
  scroll-behavior: smooth;
}

nav {
/*   background: linear-gradient(90deg, #F5C542 60%, #12213a 100%); */
  background: linear-gradient(90deg, #ffffff 60%, #d2d2d2 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 2em;
  z-index: 100;
  position: relative;
}

.logo {
  width: 150px;
  height: auto;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1.5em;
  margin: 0;
  padding: 0;
}

nav a {
  text-decoration: none;
  color: #12213a;
  font-weight: bold;
  transition: color 0.2s;
}

nav a:hover {
  color: #f26500;
}

.cta-btn {
  padding: .7em 2em;
  background: #F5C542;
  color: #12213a;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  transition: box-shadow .3s;
  border: none;
  cursor: pointer;
}

.cta-btn:hover {
  box-shadow: 0 0 10px #FBE06C;
}

section {
  margin: 2em 4vw;
  position: relative;
  z-index: 0;
}

.hero {
  color: #fff;
  padding: 6em 2em 3em;
  background-size: cover;
  background-position: center;
}

/* --- Hero Slideshow --- */
.slideshow-container {
  position: relative;
  max-width: 100%;
  height: 440px;
  overflow: hidden;
  border-radius: 1.5em;
  margin-bottom: 2em;
  background: #000;
}

.slide {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  animation: fadeIn 1s;
}

.slide.active {
  display: block;
  z-index: 1;
}

.slide img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: 1.5em;
  display: block;
}

.slideshow-controls {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .6em;
  z-index: 2;
}

.slideshow-btn {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: #fff7c0;
  margin: 0;
  cursor: pointer;
  transition: background 0.25s;
  opacity: 0.7;
  outline: none;
}

.slideshow-btn.active {
  background: #f5c542;
  opacity: 1;
}

/* --- Carousel --- */
.carousel-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f7f8fa;
  border-radius: 1em;
  margin-bottom: 1.8em;
  overflow: hidden;
  min-height: 260px;
}

.carousel-item {
  display: flex;
  align-items: stretch;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity .5s, transform .5s;
  background: #f7f8fa;
  border-radius: 1em;
  min-height: 260px;
}
.carousel-item.active {
  opacity: 1;
  position: relative;
  z-index: 2;
  transform: scale(1.04);
}
.carousel-image {
  width: 40%;
  height: 100%;
  object-fit: cover;
  border-radius: 1em 0 0 1em;
}
.carousel-content {
  padding: 1.5em 2em;
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.carousel-product-name {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 0.6em;
}
.carousel-product-desc {
  color: #555;
  margin-bottom: 1em;
  line-height: 1.3;
}
.carousel-specs {
  font-size: 1em;
  color: #333;
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.carousel-specs li {
  margin-bottom: 0.4em;
}
.carousel-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.3em;
  gap: 0.8em;
  position: static;
}
.carousel-prev,
.carousel-next {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8em;
  background: #F5C542;
  color: #12213a;
  border: none;
  box-shadow: 0 2px 8px #29304d33;
  margin: 0 10px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, box-shadow 0.25s;
}
.carousel-prev:focus,
.carousel-next:focus {
  outline: 2px solid #F5C542;
}
.carousel-prev:hover,
.carousel-next:hover {
  background: #12213a;
  color: #F5C542;
}
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
/* --- Product cards (list view) --- */
.product-card, .product {
  background: #fff;
  border-radius: 1.5em;
  box-shadow: 0 4px 20px #29304d12;
  padding: 1em;
  margin: .7em;
  transition: transform .2s;
}
.product-card img, .product img {
  height: 110px;
  width: auto;
  border-radius: 1em;
}
.product-card.pop {
  transform: scale(1.08);
}
.animated-entry { animation: slideUp .6s cubic-bezier(.23,1.02,.66,1) both;}
@keyframes slideUp { from { opacity: 0; transform: translateY(40px);} to { opacity: 1; transform: none;} }
.fade-in { animation: fadeIn 1.2s both;}
/* --- Footer --- */
footer {
  display: flex;
  align-items: center;
  gap: 1em;
  justify-content: center;
  background: #12213a;
  color: #fff;
  padding: 2em 0;
  position: relative;
  z-index: 20;
}
footer img {height: 32px; margin: 0 10px;}
/* --- Contact Page --- */
.contact-page {
  max-width: 650px;
  margin: 3em auto 2em;
  background: #fff;
  border-radius: 1.5em;
  box-shadow: 0 4px 30px #29304d1a;
  padding: 2.5em 2em 2em;
  position: relative;
}
.contact-tabs { display: flex; gap: 1em; margin-bottom: 1.5em; }
.tab-btn {
  background: #f5c542;
  color: #12213a;
  border: none;
  padding: 0.7em 2em;
  border-radius: 25px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.tab-btn.active { background: #12213a; color: #f5c542; }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.7s; }
.contact-form { display: flex; flex-direction: column; gap: 1em; }
.contact-form input, .contact-form textarea {
  background: #f9fafb;
  border: 2px solid #F5C542;
  border-radius: 10px;
  padding: 1em;
  font-size: 1.1em;
  outline: none;
  transition: border 0.2s, box-shadow 0.2s;
}
.contact-form input:focus, .contact-form textarea:focus {
  border: 2px solid #12213a;
  box-shadow: 0 2px 12px #12213a33;
}
.contact-form textarea { resize: vertical; min-height: 100px; }
.contact-form button {
  background: linear-gradient(90deg, #F5C542 70%, #e9a81a 100%);
  color: #12213a;
  border: none;
  border-radius: 25px;
  padding: 0.9em 0;
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.contact-form button:hover {
  box-shadow: 0 4px 18px #F5C54252;
}
.contact-socials {
  display: flex; justify-content: center; align-items: center; gap: 2.5em; margin: 2em auto 1em;
}
.social-icon {
  display: inline-block; width: 56px; height: 56px; border-radius: 50%;
  background: #fff; box-shadow: 0 4px 16px #29304d22;
  transition: background 0.25s, transform 0.25s;
  background-repeat: no-repeat; background-size: 65% 65%; background-position: center;
}
.social-icon:hover { background-color: #F5C54211; transform: scale(1.10); }
.whatsapp-icon { background-image: url('/images/whatsapp.png'); border: 2.5px solid #25d366; }
.facebook-icon { background-image: url('/images/facebook.png'); border: 2.5px solid #1877f3; }
.contact-info { margin: 2em 0 1em; font-size: 1.05em; }
.contact-info b { color: #29304d; }
.map { margin: 1.5em 0 0; border-radius: 12px; overflow: hidden; }
/* --- About & Process Page Images --- */
.about-img {
  max-width: 40%;
  min-width: 180px;
  height: 220px;
  object-fit: cover;
  margin: 1em 2em 1.5em 0;
  border-radius: 12px;
  float: left;
  box-shadow: 0 2px 18px #3b38562a;
}
.about-section:after { content: ""; display: table; clear: both; }
.certificates {
  display: flex; flex-wrap: wrap; gap: 1.5em 2.2em; align-items: center; }
.certificates div {
  display: flex; flex-direction: column; align-items: center; width: fit-content;
}
.certificates img { max-height: 80px; width: auto; border-radius: 8px; margin-bottom: 0.3em; }
.process-steps li img {
  max-width: 150px; height: auto; margin-bottom: 0.8em; border-radius: 12px;
  display: block; float: left; margin-right: 1em;
}
.process-steps li {
  overflow: hidden; padding: 1em 0; border-bottom: 1px solid #ddd;
  display: flex; align-items: center;
}
.process-steps li:last-child { border-bottom: none; }
.process-steps li div { flex: 1; }
/* --- Responsive --- */
@media (max-width: 850px) {
  .carousel-item { flex-direction: column; }
  .carousel-image { width: 100%; height: 200px; border-radius: 1em 1em 0 0; }
  .carousel-content { width: 100%; padding: 1em; }
}
@media (max-width: 700px) {
  .about-img {
    float: none; display: block; max-width: 100%; height: 140px; margin: 0.8em auto 1.6em auto;
  }
  .certificates {
    flex-direction: column; align-items: flex-start; gap: 0.8em 0;
  }
  .process-steps li { flex-direction: column; align-items: flex-start; }
  .process-steps li img {
    float: none; margin-right: 0; margin-bottom: 1em;
    width: 100%; max-width: 100%; height: 120px;
  }
  .slideshow-container, .slide img { height: 220px; }
}
@media (max-width: 600px) {
  nav ul { flex-direction: column; gap: 0.5em; }
  section { margin: 1em; }
  .contact-page { padding: 1.2em 0.3em; }
  .contact-tabs { gap: 0.3em; }
}

/* About page images alternate float, are sized and spaced elegantly */
.about-section {
  overflow: visible;
  margin-bottom: 2em;
}
.about-img {
  max-width: 38%;
  min-width: 180px;
  height: 220px;
  object-fit: cover;
  margin: 1em 2em 1.5em 0;
  border-radius: 12px;
  box-shadow: 0 2px 18px #3b38562a;
}
.about-img-left {
  float: left;
  margin-right: 2em;
  margin-left: 0;
}
.about-img-right {
  float: right;
  margin-left: 2em;
  margin-right: 0;
}

/* Clear floats after about-section so no overlap with further sections */
.about-section::after {
  content: "";
  display: table;
  clear: both;
}

/* Hide testimonials anywhere */
.testimonials {
  display: none !important;
}

/* Responsive: Stack images and clear floats on small screens */
@media (max-width: 800px) {
  .about-section img {
    float: none !important;
    display: block;
    max-width: 100%;
    height: 120px;
    margin: 0.7em auto 1.2em auto;
  }
}

@media (max-width: 700px) {
  .about-section {
    margin-bottom: 1em;
  }
  .about-section img {
    height: 110px;
    margin: 0.5em auto 1em auto;
  }
}

.goog-te-combo {
    height: 35px !important;
    border-radius: 6px !important;
    font-family: 'Segoe UI', Arial, sans-serif !important;
}

/* New License & Certification cards */
.license-card {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 1.5em;
  margin: 1em 0;
  box-shadow: 0 3px 15px #00000011;
  text-align: center;
}
.license-card img {
  max-height: 120px;
  margin-bottom: 1em;
}
.license-card a {
  display: inline-block;
  margin-top: 10px;
  color: #f5c542;
  font-weight: 600;
  text-decoration: underline;
}

/* Local roots / Why Bangalore section */
.local-roots {
  background: #f5f3e5;
  padding: 1em 2em;
  border-radius: 12px;
  margin-top: 2em;
}

/* Export destinations & logistics */
.export-destinations ul,
.order-workflow ol {
  margin-left: 1.5em;
}
.export-destinations ul li,
.order-workflow ol li {
  margin: 0.6em 0;
}

/* FAQ Section */
.faq {
  margin-top: 3em;
}
.faq p {
  margin-bottom: 1em;
}
.faq p strong {
  color: #12213a;
}

/* Product sample request CTA */
.sample-request-cta {
  text-align: center;
  margin: 3em 0 2em;
}
.sample-request-cta .cta-btn {
  font-size: 1.2em;
  padding: 0.8em 3em;
}

/* Footer legal text tweak */
footer span {
  font-size: 0.85em;
  color: #ececec;
  margin-left: 1em;
}


/* Licenses & Certifications cards styling */
.license-card {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 1.5em;
  margin: 1em 0;
  box-shadow: 0 3px 15px rgba(0,0,0,0.1);
  text-align: center;
}
.license-card img {
  max-height: 120px;
  margin-bottom: 1em;
}
.license-card a {
  display: inline-block;
  margin-top: 0.5em;
  color: #f5c542;
  font-weight: 600;
  text-decoration: underline;
}

/* Local Roots section styling */
.local-roots {
  background-color: #f5f3e5;
  padding: 1em 2em;
  border-radius: 12px;
  margin-top: 2em;
  font-style: italic;
  color: #4a4a4a;
}

/* Export destinations, order workflow, FAQ styling */
.export-destinations ul,
.order-workflow ol {
  margin-left: 1.5em;
  color: #29304d;
}
.export-destinations ul li,
.order-workflow ol li {
  margin: 0.6em 0;
}
.faq p {
  margin-bottom: 1em;
}
.faq p strong {
  color: #12213a;
}

/* Sample request call to action */
.sample-request-cta {
  text-align: center;
  margin: 3em 0;
}
.sample-request-cta a.cta-btn {
  font-size: 1.25em;
  padding: 0.8em 3em;
  background: #F5C542;
  border-radius: 25px;
  color: #12213a;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 4px 18px #F5C54288;
}

/* Improve focus outline for accessibility */
a:focus, button:focus, input:focus, textarea:focus {
  outline: 3px solid #f5c542;
  outline-offset: 2px;
}


#content {
  padding: 0 20px; /* 20px padding left and right */
  box-sizing: border-box; /* ensures padding doesn’t cause horizontal overflow */
  max-width: 1200px; /* optional: max width for better readability on large screens */
  margin: 0 auto; /* center horizontally when max-width is reached */
}

@media (max-width: 600px) {
  #content {
    padding: 0 12px;
  }
}


footer a {
    display: inline-block;
    color: #f5c542;
    font-size: 16px;
    text-decoration: none;
    padding: 5px;
    margin-right: 20px;
}

.legal-section {
  padding: 2em 1.5em;
  background: #f5f5f5;
  border-radius: 10px;
  margin: 2em 0;
  font-size: 1.08em;
}
.legal-section h3 {
  margin-top: 1.5em;
  font-size: 1.07em;
  color: #29304d;
}
.legal-section ul {
  margin-left: 1.5em;
  margin-bottom: 1em;
  list-style: disc;
}