:root{
  /* Brand palette */
  --brand-red: #c62828;        /* strong red */
  --brand-dark: #0961f8;       /* dark blue */
  --brand-light: #95c9fe;      /* light blue */

  /* Semantic colors */
  --primary: var(--brand-dark);
  --accent: var(--brand-light);
  --cta: var(--brand-red);
}

/* Global box-sizing and overflow guard to prevent horizontal scroll */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; }

/* Make the page use flex so footer can stick to bottom */
html, body {
  height: 100%;
}
body{
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  margin: 0;
}

main{ flex: 1 0 auto; }

/* Hero */
.hero{
  background-image: var(--hero-bg, linear-gradient(90deg,var(--primary),var(--accent)));
  background-size: cover;
  background-position: center;
  position: relative;
  color: #fff;
}
.hero::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.12));
  pointer-events: none;
}

/* Footer always at bottom */
footer{
  font-size:0.9rem;
  flex-shrink: 0;
}

/* Site footer style (light blue background, dark blue text) */
.site-footer{
  background: var(--brand-light);
  color: var(--brand-dark);
}
.site-footer a{color:var(--brand-dark); text-decoration:underline}

/* General card image sizing */
.card-img-top{height:400px;object-fit:cover}

/* Contact page styles */
.contact-details{
  background: #fff;
  border-left: 6px solid var(--brand-dark);
  border-radius: 8px;
  padding: 1.6rem;
  box-shadow: 0 6px 18px rgba(11,61,145,0.06);
}
.contact-details h3{color:var(--brand-dark); font-weight:600}
.contact-details a{color:var(--brand-dark); text-decoration:none}
.contact-details li{line-height:1.6; margin-bottom:8px}
.contact-accent{display:inline-block; height:4px; width:60px; background:var(--cta); margin-top:6px; margin-bottom:14px}

.contact-card{border-radius:10px}
.contact-card .card-body{padding:1.8rem}
.contact-card{transition:transform .36s cubic-bezier(.2,.9,.2,1), box-shadow .36s}
.contact-card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(11,61,145,0.12)}

.btn-outline-primary,
.btn-outline-secondary{
  border-color: var(--brand-dark);
  color: var(--brand-dark);
  background-color: transparent;
}

.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-secondary:hover, .btn-outline-secondary:focus{
  color: var(--brand-red);
  border-color: var(--brand-red);
  background-color: transparent !important;
}

/* Primary CTA uses brand red to stand out */
.btn-primary{
  background: var(--cta);
  border-color: #b71c1c; /* slightly darker red */
  color: #fff;
  font-weight:600;
}
.btn-primary:hover{filter:brightness(.95); transform:translateY(-1px)}

/* Input focus styles */
input.form-control:focus, textarea.form-control:focus{
  box-shadow: 0 0 0 0.2rem rgba(25,118,210,0.12);
  border-color: var(--brand-light);
}

.form-control {
  border: 2px solid #ced4da; /* visible light gray */
  background-color: #fff;
}

/* Small reveal animation */
.animate-up{opacity:0; transform:translateY(12px); transition:opacity .6s ease-out, transform .6s ease-out}
.in-view{opacity:1; transform:translateY(0)}

/* Utility tweaks for better spacing */
.card-title{margin-bottom:.25rem}

@media (max-width: 767px){
  .contact-details{margin-bottom:1rem}
}

/* Products search bar */
.search-bar .form-control{border-left:0}
.search-bar .input-group-text{background:transparent; border-right:0}
.product-item{transition:opacity .25s ease, transform .25s ease}
.product-item.hidden{opacity:0; transform:scale(.98); display:none}

/* Header logo and name sizing */
.navbar-brand.d-flex.align-items-center .site-logo{height:54px; width:auto; display:inline-block}
.navbar-brand.d-flex.align-items-center .site-name{height:70px; width:auto; display:inline-block}

@media (max-width:767px){
  .navbar-brand.d-flex.align-items-center .site-logo{height:40px}
  .navbar-brand.d-flex.align-items-center .site-name{height:28px}
}

/* Navbar link hover/focus color: use brand red for better visibility */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--cta) !important;
}

/* Optionally make the active nav link red as well */
.navbar-nav .nav-link.active {
  color: var(--cta) !important;
}

/* Chemical detail page specific styling */
.chem-detail table th{width:35%; min-width:160px}
.chem-detail table td{vertical-align:middle}
.chem-detail .card-img-top{height:auto; object-fit:contain}
.chem-detail p{margin-bottom:0}

/* About + Contact section styling */
.about-contact-section{background:linear-gradient(180deg, rgba(245,247,250,0.6), rgba(255,255,255,0.8));}
.about-card, .contact-card{
  border-left: 6px solid var(--brand-dark);
}
.about-card h3, .contact-card h3{color:var(--brand-dark); margin-bottom:0.75rem}
.about-card p{color:#333; line-height:1.6}
.contact-list li{line-height:1.6}
.contact-list a{color:var(--brand-dark); text-decoration:none}
.contact-card .btn-outline-primary,
.contact-card .btn-outline-secondary{
  border-color: var(--brand-dark);
  color: var(--brand-dark);
  background-color: transparent;
}

.contact-card .btn-outline-primary:hover,
.contact-card .btn-outline-secondary:hover{
  color: var(--brand-red);
  border-color: var(--brand-red);
  background-color: transparent !important;
}
.about-contact-section .shadow-sm{box-shadow:0 10px 30px rgba(9,97,248,0.06)}

@media (max-width:767px){
  .about-contact-section{padding-left:1rem;padding-right:1rem}
}

/* Catalogue update note */
.catalogue-note {
  margin: 40px auto 10px;
  padding: 20px 25px;
  max-width: 900px;
  background: #f8f9fa;
  border-left: 5px solid #0d6efd;
  border-radius: 6px;
  text-align: center;
}

.catalogue-note h5 {
  margin-bottom: 10px;
  font-weight: 600;
  color: #0d6efd;
}

.catalogue-note p {
  margin: 0;
  color: #555;
  font-size: 15px;
}



/* home page products */
/* Chemical products (formula-style layout) */
.chemical-products {
  margin-top: 30px;
}

.chemical-card {
  padding: 10px;
  transition: transform 0.3s ease;
}

.chemical-card:hover {
  transform: translateY(-6px);
}

.chemical-img {
  max-height: 120px;
  /* max-width: 100px; */
  object-fit: contain;
  margin-bottom: 10px;
}

.chemical-name {
  font-weight: 600;
  color: #333;
  font-size: 15px;
  margin: 0;
}

.chemical-name:hover {
  color: var(--brand-dark);
  /* text-decoration: underline; */
}


.btn-primary {
  border-radius: 30px;
  letter-spacing: 0.5px;
}


/* Industries Served Section  */

/* Industries Served Section */
.industries-section {
  background: #f8f9fa;
}

.industry-card {
  position: relative;
  height: 240px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.industry-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.15);
}

.industry-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.6)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.industry-overlay h4 {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.6px;
  margin: 0;
  padding: 0 10px;
}

@media (max-width: 767px) {
  .industry-card {
    height: 200px;
  }
}


/* home page bg image */
/* Full screen hero (no scroll on load) */
.hero {
  min-height: calc(100vh - 76px); /* subtract navbar height */
  display: flex;
  align-items: center;
}
/* home page bg image css for mobile  */
@media (max-width: 767px) {
  .hero {
    min-height: calc(100svh - 64px);
  }
}

/* home page image text */
.hero {
  min-height: calc(100vh - 76px);
  display: flex;
  align-items: center;
}

.hero .row {
  /* removed translateY which caused layout shifts on small viewports */
  transform: none;
  margin-top: 0;
}

/* style of beside image in about us page */

.why-choose-us {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Text section */
.why-text {
    flex: 1;
}

.why-text ul {
    padding-left: 20px;
}

.why-text li {
    margin-bottom: 10px;
    font-weight: 600;
}

/* Image section */
.why-image {
    flex: 1;
}

.why-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Responsive for mobile */
@media (max-width: 768px) {
    .why-choose-us {
        flex-direction: column;
        text-align: left;
    }
}


/* css style for the indiamart trustseal icon */

.site-footer img {
  transition: transform 0.3s ease;
}

.site-footer img:hover {
  transform: scale(1.05);
}

/* contect us page header text */

.contact-hero {
  position: relative;
  min-height: 300px; /* adjust as needed */
  background: url("images/contact-bg.jpg") center/cover no-repeat;
}

/* Responsive map wrapper: larger on tablet/laptop */
.map-responsive{position:relative; width:100%; padding-bottom:56.25%; height:0; overflow:hidden}
.map-responsive iframe, .map-responsive embed, .map-responsive object{position:absolute; top:0; left:0; width:100%; height:100%; border:0}

@media (min-width: 768px){
  .map-responsive{padding-bottom:42%} /* taller on tablets */
}

@media (min-width: 1024px){
  .map-responsive{padding-bottom:0; height:420px} /* fixed larger height on laptop/desktop */
  .map-responsive iframe, .map-responsive embed, .map-responsive object{position:relative; height:100%}
}

.text-overlay {
  position: relative;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  transform: translateY(19vh); /* responsive vertical shift */
  /* background: rgba(0, 0, 0, 0.4); optional overlay */
}

/* Make overlay text sit lower on larger viewports so it doesn't overlap important image areas
   but remain centered on small screens for readability. Also constrain width and add text-shadow. */
.text-overlay .hero-content{width:90%; max-width:980px; margin:0 auto; padding:0 1rem}
.text-overlay{justify-content:flex-end; padding-bottom:clamp(1rem,6vh,4rem)}
.text-overlay h1, .text-overlay .display-5{margin:0 0 .5rem; text-shadow:0 2px 6px rgba(0,0,0,0.5)}
.text-overlay p, .text-overlay .lead{margin:0; text-shadow:0 1px 4px rgba(0,0,0,0.45)}

@media (max-width: 767px){
  .text-overlay{justify-content:center; padding-bottom:0}
  .text-overlay .hero-content{width:95%; padding:0 0.75rem}
  .text-overlay h1, .text-overlay .display-5{font-size:clamp(1.4rem,4.2vw,2rem)}
  .text-overlay p, .text-overlay .lead{font-size:clamp(.95rem,2.6vw,1.05rem)}
}

@media (max-width: 767px) {
  .contact-hero {
    min-height: 220px;
  }

  .display-5 {
    font-size: 1.8rem;
  }
}