/* =========================================================
   Rudra Global Foods — Inner Page Stylesheet
   Loads AFTER styles.css — reuses its variables & base rules.
   Shared by about.php, export.php, contact.php and quality.php:
   page banner, About-only sections (vision/mission/commitment),
   and the Quality & Certifications page sections.
   ========================================================= */

/* ---------- Inner page banner (all inner pages) ---------- */
.page-banner{
  position: relative;
  background: linear-gradient(100deg, rgba(6,28,24,0.95) 0%, rgba(20,48,45,0.9) 45%, rgba(35,58,55,0.68) 100%),
              linear-gradient(120deg, #31515E 0%, #23322E 55%, #1B2622 100%);
  color: #fff;
  overflow: hidden;
}
.page-banner-inner{ padding: 56px 0 64px; position: relative; z-index: 2; }
.breadcrumb{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #C9CFCB;
  margin-bottom: 18px;
  letter-spacing: 0.3px;
}
.breadcrumb a{ color: #C9CFCB; transition: color .15s ease; }
.breadcrumb a:hover{ color: var(--gold); }
.breadcrumb span.sep{ opacity: 0.6; }
.breadcrumb span.current{ color: var(--gold); font-weight: 600; }

.page-banner h1{ font-size: 42px; font-weight: 600; color: #fff; margin-bottom: 14px; letter-spacing: -0.5px; }
.page-banner p{ font-size: 16px; color: #D9DEDB; max-width: 560px; }

.page-banner-map{
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background-image:
    radial-gradient(circle at 82% 30%, rgba(224,165,38,0.9) 0, rgba(224,165,38,0.5) 6px, transparent 7px),
    repeating-linear-gradient(115deg, transparent 0 40px, rgba(255,255,255,0.05) 40px 41px);
}

/* ---------- Our Vision (about.php) ---------- */
.vision{ background: var(--white); padding: 92px 0; }
.vision-grid{ 
	display: grid;
	/* grid-template-columns: 1fr 0.8fr;  */
	gap: 60px;
	align-items: center;
}
.vision-text h2{ font-size: 32px; font-weight: 600; margin-bottom: 20px;  }
.vision-text p{ color: var(--text-muted); font-size: 15.5px; margin-bottom: 18px;  }
.vision-text p:last-child{ margin-bottom: 0; }

.vision-visual{
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #0E5C3B 0%, #123F2C 55%, #04281A 100%);
  box-shadow: var(--shadow);
}
.vision-visual .globe-dot{
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(224,165,38,0.25);
  animation: pulse-dot 2.6s ease-in-out infinite;
}
.vision-visual .globe-dot:nth-child(4){ animation-delay: .3s; }
.vision-visual .globe-dot:nth-child(5){ animation-delay: .6s; }
.vision-visual .globe-lines{
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 34px);
}
.vision-visual .globe-ring{ position: absolute; border: 1.5px solid rgba(224,165,38,0.55); border-radius: 50%; }

@keyframes pulse-dot{
  0%, 100%{ box-shadow: 0 0 0 6px rgba(224,165,38,0.25); }
  50%{ box-shadow: 0 0 0 10px rgba(224,165,38,0.12); }
}
@media (prefers-reduced-motion: reduce){
  .vision-visual .globe-dot{ animation: none; }
}

/* ---------- Our Mission (about.php) ---------- */
.mission{   border-bottom: 1px solid #e8eeeb; padding: 92px 0; }
.mission-text{ max-width: auto; margin-bottom: 48px; display: flex; gap: 24px; }
.mission-text h2{ font-size: 32px; font-weight: 600; margin-bottom: 20px; max-width: 560px; }
.mission-text p{ color: var(--text-muted); font-size: 15.5px; margin-bottom: 16px; }
.mission-text p:last-child{ margin-bottom: 0; }

.pillar-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}
.pillar-card{ padding: 28px 26px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background .18s ease; }
.pillar-card:hover{ background: var(--green-light); }
.pillar-grid .pillar-card:last-child{ border-right: none; }
.pillar-card .pillar-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--green-light);
  color: var(--green);
  margin-bottom: 16px;
}
.pillar-card .pillar-icon svg{ display: block; width: 19px; height: 19px; }
.pillar-card h4{ font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.pillar-card p{ font-size: 13.4px; color: var(--text-muted); }

/* ---------- Our Commitment (about.php) ---------- */
.commitment{ background: var(--white); padding: 92px 0; }
.commitment-inner{
  background: linear-gradient(120deg, #0D5A3A, #0A2E1F 80%);
  border-radius: 18px;
  padding: 64px 48px;
  text-align: left;
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.commitment-inner::before{
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image: repeating-linear-gradient(115deg, transparent 0 40px, rgba(255,255,255,0.08) 40px 41px);
}
.commitment-eyebrow{
  position: relative;
  display: inline-block;
  color: var(--gold);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}
.commitment-inner h3{ position: relative; font-size: 28px; font-weight: 600; color: #fff; max-width: 720px; margin-bottom: 24px; line-height: 1.4; }
.commitment-tagline{ position: relative; font-size: 13.5px; font-weight: 700; letter-spacing: 2px; color: #CFE3D8; text-transform: uppercase; }

/* ---------- Quality intro visual reuse note ----------
   .about, .about-grid, .about-points etc. are already defined
   in styles.css and reused as-is on quality.php's intro section. */

/* ---------- Certifications showcase (quality.php) ---------- */
.cert-showcase{ padding: 92px 0; background: #fff; }
.cert-cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cert-card{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: left;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s ease;
}
.cert-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 28px rgba(4,40,26,0.1); border-color: var(--green); }
.cert-card .cert-icon{
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--green-light);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: background .2s ease, color .2s ease;
}
.cert-card:hover .cert-icon{ background: var(--green); color: #fff; }
.cert-card .cert-icon svg{ width: 24px; height: 24px; }
.cert-card .cert-tag{ display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; color: var(--gold-dark); text-transform: uppercase; margin-bottom: 8px; }
.cert-card h4{ font-size: 17px; font-weight: 700; margin-bottom: 11px; padding-top:12px; }
.cert-card p{ font-size: 13.6px; color: var(--text-muted); margin-bottom: 18px; line-height: 1.6; }
.cert-card a{ font-size: 13px; font-weight: 600; color: var(--green); display: inline-flex; align-items: center; gap: 6px; }
.cert-card a svg{ transition: transform .18s ease; }
.cert-card a:hover svg{ transform: translateX(3px); }

/* =========================================
PRODUCT DETAIL SECTION
========================================= */

.product-detail {
/* padding: 80px 0; */
/* border-bottom: 1px solid #e8eeeb; */
 background: var(--cream);

}

.product-detail-row {
display: grid;
grid-template-columns: 30% 70%;
align-items: center;
/* gap: 60px; */
	border-bottom: 1px solid #e8eeeb;
	padding-bottom:40px;
	
}
.product-detail-row-2 {
display: grid;
grid-template-columns: 60% 35%;
align-items: center;
gap: 60px;
	padding-top:40px;
	
}

/* =========================================
PRODUCT IMAGE
========================================= */

.product-image {
display:flex;
	justify-content:center;
}

.product-image img {
width: 80%;
height: 100%;

object-fit: contain;
display: block;
}

/* =========================================
PRODUCT CONTENT
========================================= */

.product-content {
width: 100%;
}

.product-category {
display: block;
margin-bottom: 8px;

font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;

color: var(--gold-dark);
}

.product-title {
margin: 0 0 12px;

font-size: 42px;
line-height: 1.15;
font-weight: 700;

color: #123b5d;
}

.product-description {
margin: 0 0 22px;

font-size: 15px;
line-height: 1.7;

color: #5d7184;
}



/* =========================================
MOBILE
========================================= */

@media (max-width: 767px) {

.product-detail {
padding: 50px 0;
}

.product-detail-row {
grid-template-columns: 1fr;
gap: 30px;
}
.product-detail-row-2 {
grid-template-columns: 1fr;
gap: 30px;
}
.product-image {
height: 350px;
}

.product-title {
font-size: 32px;
}

.product-description {
font-size: 14px;
}

.specification-row {
grid-template-columns: 42% 58%;
}

.specification-label,
.specification-value {
padding: 9px 10px;
font-size: 11px;
}

.product-cta {
width: 100%;
}
}
/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .vision-grid{ grid-template-columns: 1fr; }
  .vision-visual{ order: -1; aspect-ratio: 16/9; }
  .pillar-grid{ grid-template-columns: repeat(2, 1fr); }
  .pillar-grid .pillar-card:nth-child(2){ border-right: none; }
  .pillar-grid .pillar-card:nth-child(1),
  .pillar-grid .pillar-card:nth-child(2){ border-bottom: 1px solid var(--border); }
  .cert-cards{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px){
  .page-banner h1{ font-size: 30px; }
  .vision-text h2, .mission-text h2{ font-size: 26px; }
  .pillar-grid{ grid-template-columns: 1fr; }
  .pillar-grid .pillar-card{ border-right: none !important; border-bottom: 1px solid var(--border); }
  .pillar-grid .pillar-card:last-child{ border-bottom: none; }
  .commitment-inner{ padding: 44px 24px; flex-direction: column; align-items: flex-start; }
  .commitment-inner h3{ font-size: 21px; }
  .cert-cards{ grid-template-columns: 1fr; }
  .mission-text{ flex-direction: column; }
}
@media (max-width: 556px){
	.mission{
		    padding: 10px 0;
	}
	.commitment{
		padding: 50px 0;
	}
	.cta-banner-actions{
		flex-direction:column;
	}
	.cert-showcase{
		padding: 50px 0;
	}
}