/* ===============================
   PCIPL GLOBAL COLOR THEME
   =============================== */

:root{
--primary-color:#ff6a00;
--primary-light:#ff8c33;
--primary-soft:#fff2e9;

--text-dark:#1f2a44;
--text-light:#555;
--bg-light:#f6f8fb;
}
:root{
  --brand:#0b3556;
  --accent:#0a84ff;
  --muted:#6b7280;
  --bg:#f7f8fa;
  --card:#ffffff;
  --max-w:1100px;
  --radius:12px;
  --gap:18px;
  --container-pad:20px;
  --text:#1f2937;
  --accent-2:#0f766e;
  --font-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

/* container */
.container{max-width:var(--max-w);margin:0 auto;padding:24px;}

/* header */
.site-header{background:#fff;border-bottom:1px solid #e6e9ef;position:sticky;top:0;z-index:20}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand h1{font-size:1.1rem;margin:0}
.logo-img{width:64px;height:48px;object-fit:cover;border-radius:6px}
.nav-toggle{display:none;background:none;border:0;font-size:1.4rem}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:14px}
.main-nav a{color:var(--brand);text-decoration:none;padding:10px 8px;border-radius:6px}
.main-nav a.active{background:linear-gradient(90deg,var(--accent)22%,rgba(10,132,255,0.06));color:var(--accent)}

.hero{background:linear-gradient(180deg, rgba(10,132,255,0.03), transparent);padding:36px 0}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:24px;align-items:center}
.hero-content h2{font-size:1.8rem;margin:0 0 12px}
.hero-content p{color:var(--muted);margin:0 0 16px}
.cta-row{display:flex;gap:12px}
/* Logo adjustments */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo-img{
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:50%;
  box-shadow:0 4px 12px rgba(11,35,86,0.08);
  border:4px solid #fff; /* optional: helps logo pop on header */
}

/* Brand text smaller on narrow screens */
.brand-text h1{font-size:1.05rem;margin:0}
.brand-text .tag{font-size:0.85rem;color:var(--muted);margin-top:2px}

/* Hero image sizing */
.hero-image img{
  width:100%;
  height:320px;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(11,35,86,0.06);
}
/* HERO SLIDESHOW */
.hero-slider-wrapper{position:relative;width:100%;max-width:720px;margin-left:auto;border-radius:12px;overflow:hidden}
.hero-slider{position:relative;display:block;width:100%;height:320px;min-height:220px}
.slide{position:absolute;inset:0;opacity:0;transform:scale(1.02);transition:opacity .6s ease, transform .6s ease;display:flex;align-items:center;justify-content:center}
.slide img{width:100%;height:100%;object-fit:cover;display:block}

/* active slide */
.slide[aria-hidden="false"]{opacity:1;transform:scale(1);z-index:2}

/* controls */
.slider-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.86);border:1px solid rgba(11,35,86,0.06);width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;box-shadow:0 6px 18px rgba(11,35,86,0.06)}
.slider-btn.prev{left:12px}
.slider-btn.next{right:12px}

/* indicators */
.slider-indicators{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;display:flex;gap:8px;z-index:3}
.indicator{width:10px;height:10px;border-radius:99px;border:1px solid rgba(255,255,255,0.8);background:rgba(255,255,255,0.45);cursor:pointer;outline:none}
.indicator.active{background:var(--brand);border-color:var(--brand);box-shadow:0 4px 10px rgba(11,35,86,0.12)}

/* small screens */
@media (max-width:900px){
  .hero-slider{height:260px}
  .hero-slider-wrapper{max-width:560px}
}
@media (max-width:680px){
  .hero-slider{height:200px}
  .hero-slider-wrapper{max-width:100%}
  .slider-btn{width:34px;height:34px;font-size:14px}
  .indicator{width:8px;height:8px}
}


/* Slight responsive tweak: reduce hero height on small screens */
@media (max-width:680px){
  .hero-image img{height:220px}
  .logo-img{width:52px;height:52px}
  .brand-text h1{font-size:.98rem}
}

/* buttons */
.btn{display:inline-block;padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:600}
.btn.primary{background:var(--brand);color:#fff;border:0}
.btn.outline{background:transparent;border:2px solid var(--brand);color:var(--brand)}
.btn.small{padding:8px 10px;font-size:0.9rem}
.btn-primary{
background:var(--primary-color);
color:white;
padding:12px 28px;
border-radius:6px;
border:none;
}

.btn-primary:hover{
background:var(--primary-light);
}
/* cards */
.capabilities{padding:28px 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px}
.card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 4px 14px rgba(11,35,86,0.06)}
.card h4{margin:0 0 8px}

/* product preview */
.product-preview{padding:28px 0}
.section-header{display:flex;justify-content:space-between;align-items:center}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px}
.prod{background:var(--card);padding:14px;border-radius:12px;text-align:left}
.prod img{width:100%;height:150px;object-fit:cover;border-radius:8px}
.prod h4{margin:10px 0}

/* process */
.process{padding:24px 0}
.process ol{margin:12px 0 0 20px;color:var(--muted)}

/* product details */
.content-section{padding:28px 0;background:transparent}
.product-detail{background:var(--card);padding:18px;border-radius:12px;margin:14px 0;box-shadow:0 6px 20px rgba(15,118,110,0.04)}
.product-flex{display:flex;gap:18px;align-items:flex-start}
.product-flex img{width:280px;height:160px;object-fit:cover;border-radius:8px}

/* specs table */
.specs{border-collapse:collapse;width:100%;max-width:520px;margin-top:12px}
.specs th, .specs td{border:1px solid #e9eef6;padding:8px;text-align:left}
.specs th{background:#f3f6fb}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 360px;gap:20px}
.contact-form{background:var(--card);padding:16px;border-radius:12px;box-shadow:0 6px 20px rgba(11,35,86,0.06)}
.contact-form label{display:block;margin-top:12px;font-weight:600}
.contact-form input, .contact-form textarea{width:100%;padding:10px;margin-top:6px;border:1px solid #dfe7ef;border-radius:8px}
.form-actions{display:flex;gap:10px;margin-top:12px;align-items:center}

/* footer */
.site-footer{background:#fff;border-top:1px solid #e6e9ef;padding:22px 0;margin-top:36px}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.footer-bottom{border-top:1px solid #f1f4f8;margin-top:12px;padding-top:12px;text-align:center;font-size:0.9rem;color:var(--muted)}

/* responsive */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .product-flex{flex-direction:column}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  .main-nav{display:none}
  .nav-toggle{display:block}
  .product-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
}
/* ABOUT PAGE - corporate, tighter spacing & SVG icons */

/* Typography adjustments for a tighter corporate look */
.page-title{font-size:1.45rem;margin:0 0 8px;font-weight:700;letter-spacing:0.2px}
.lead{font-size:1rem;line-height:1.45;margin-bottom:10px}
.muted{color:var(--muted);font-size:0.95rem;line-height:1.45}

/* two-column summary */
.about-summary{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:20px;
  align-items:start;
  margin: 18px 0 26px;
}
.summary-left p{margin:0 0 12px}
.summary-right{display:flex;flex-direction:column;gap:12px}

/* compact card variations */
.card.compact{padding:12px;border-radius:10px}
.card.tight{padding:14px;border-radius:10px}

/* Mission & Vision grid refined */
.mv-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin: 8px 0 20px;
}
.mv-card h3{margin:0 0 8px;font-size:1.05rem}
.mv-card p{margin:0}

/* Values grid — tighter & icon aligned */
.values-section h3{margin-bottom:10px;font-size:1.05rem}
.values-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:8px;
}
.value{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:var(--card);
  padding:12px;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(11,35,86,0.035);
  min-height:110px;
}
.value-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:8px;
  background:rgba(11,53,86,0.06);
  color:var(--brand);
  flex-shrink:0;
}
.value-body h4{margin:0 0 6px;font-size:1rem}
.value-body p{margin:0;font-size:0.94rem;color:var(--muted)}

/* Key facts list */
.key-facts ul{list-style:none;padding:6px 0 0;margin:0;font-size:0.95rem}
.key-facts li{padding:6px 0;border-bottom:1px solid #f1f5f9}
.key-facts li:last-child{border-bottom:none}

/* Buttons small */
.btn.small{padding:8px 12px;font-size:0.92rem;border-radius:8px}

/* Responsive adjustments */
@media (max-width:1000px){
  .about-summary{grid-template-columns:1fr 300px}
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .mv-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  .about-summary{grid-template-columns:1fr}
  .summary-right{order:2}
  .values-grid{grid-template-columns:1fr}
  .mv-grid{grid-template-columns:1fr}
  .value{min-height:initial}
  .page-title{font-size:1.25rem}
}
/* Clickable app-tree */
.app-tree { margin:28px 0; }
.app-tree h3 { margin-bottom:12px; font-size:1.1rem; }
.app-tree-wrap { width:100%; max-width:1100px; margin:auto; padding:10px; }
.app-tree-svg { width:100%; height:auto; display:block; }

/* make bubbles show pointer and hover transform handled in SVG style, but add fallback */
.app-tree .app-bubble { cursor: pointer; outline: none; }

/* small note */
.app-tree-note { max-width:1100px; margin:auto; }

/* responsive */
@media (max-width:900px){
  .app-tree-wrap { max-width:840px; }
}
@media (max-width:680px){
  .app-tree-wrap { max-width:100%; padding:6px; }
  .app-tree h3 { font-size:1rem; }
}
/* Applications list (replaces SVG tree) */
.applications { margin: 30px 0; }
.applications h3 { margin-bottom: 12px; font-size: 1.2rem; }
.applications .muted { font-size: 0.95rem; color: var(--muted); margin-bottom: 16px; }

.app-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.app-item {
  background: var(--card, #f9fafb);
  border: 1px solid #e3e9f0;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 0.98rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 10px rgba(11,35,86,0.04);
}

.app-item:hover {
  background: var(--brand, #0b6fc1);
  color: #fff;
  box-shadow: 0 6px 18px rgba(11,35,86,0.12);
  transform: translateY(-2px);
}

.app-item:active {
  transform: translateY(0);
}

/* smaller screens */
@media (max-width:600px){
  .app-item { font-size:0.95rem; padding:12px 14px; }
}
/* INDUSTRIES SECTION */

.industries-served{
padding:80px 0;
background:#f6f8fb;
}

.industry-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
gap:30px;
margin-top:50px;
}

/* CARD */

.industry-card{
background:white;
padding:30px 25px;
border-radius:10px;
box-shadow:0 6px 18px rgba(0,0,0,0.06);
text-align:center;
transition:all 0.3s ease;
min-height:220px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
}

.industry-card:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.12);
}

/* ICON */

.icon-box{
width:120px;
height:120px;
margin-bottom:20px;
display:flex;
align-items:center;
justify-content:center;
}

.icon-box img{
max-width:100px;
max-height:100px;
object-fit:contain;
}

/* TITLE */

.industry-card h3{
font-size:18px;
font-weight:600;
margin-bottom:10px;
color:#1f2a44;
}

/* TEXT */

.industry-card p{
font-size:14px;
line-height:1.5;
color:#555;
margin:0;
max-width:200px;
}
/* CERTIFICATIONS */

.certifications{
padding:80px 0;
background:white;
}

.cert-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
gap:35px;
margin-top:50px;
}

.cert-card{
background:#f7f7f7;
padding:35px 25px;
border-radius:10px;
text-align:center;
border-top:4px solid #ff7a00;
box-shadow:0 6px 18px rgba(0,0,0,0.05);
}

.cert-card img{
max-width:90px;
max-height:90px;
object-fit:contain;
margin-bottom:15px;
}

.cert-card h3{
font-size:18px;
margin-bottom:8px;
color:#1f2a44;
}

.cert-card p{
font-size:14px;
color:#555;
line-height:1.5;
}
/* UNIVERSAL PCIPL CARD STYLE */

.pcipl-card{
background:#f3f3f3;
padding:35px 30px;
border-radius:14px;
text-align:center;
box-shadow:0 8px 20px rgba(0,0,0,0.05);
position:relative;
overflow:hidden;
transition:all 0.3s ease;
}

/* ORANGE CURVED TOP LINE */

.pcipl-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:6px;
background:#ff6a00;
border-top-left-radius:14px;
border-top-right-radius:14px;
}

/* HOVER EFFECT */

.pcipl-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 28px rgba(0,0,0,0.12);
}

/* ICON */

.pcipl-card img{
width:90px;
height:90px;
object-fit:contain;
margin-bottom:18px;
}

/* TITLE */

.pcipl-card h3{
font-size:20px;
font-weight:600;
margin-bottom:12px;
color:#1f2a44;
}

/* TEXT */

.pcipl-card p{
font-size:15px;
line-height:1.6;
color:#555;
max-width:260px;
margin:auto;
}
.pcipl-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
margin-top:40px;
justify-content:center;
}
/* ==============================
   PCIPL BRAND COLOR SYSTEM
   ============================== */

:root{

--pcipl-orange:#ff6a00;
--pcipl-orange-light:#ff8c33;
--pcipl-orange-soft:#fff3ea;

--pcipl-dark:#1f2a44;
--pcipl-text:#555;
--pcipl-bg:#f6f8fb;

}
.btn-primary{
background:var(--pcipl-orange);
color:white;
padding:12px 28px;
border-radius:6px;
font-weight:600;
border:none;
transition:0.3s;
}

.btn-primary:hover{
background:var(--pcipl-orange-light);
}
.section-title{
font-size:32px;
font-weight:700;
color:var(--pcipl-dark);
text-align:center;
margin-bottom:20px;
position:relative;
}

.section-title::after{
content:"";
display:block;
width:80px;
height:4px;
background:var(--pcipl-orange);
margin:12px auto 0;
border-radius:2px;
}
.pcipl-card{
background:white;
padding:35px 30px;
border-radius:14px;
text-align:center;
box-shadow:0 8px 20px rgba(0,0,0,0.05);
position:relative;
overflow:hidden;
transition:all 0.3s ease;
}

/* ORANGE CURVE LINE */

.pcipl-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:6px;
background:var(--pcipl-orange);
border-top-left-radius:14px;
border-top-right-radius:14px;
}

.pcipl-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 28px rgba(0,0,0,0.12);
}

/* ICON */

.pcipl-card img{
width:95px;
height:95px;
object-fit:contain;
margin-bottom:18px;
}

/* TITLE */

.pcipl-card h3{
font-size:20px;
color:var(--pcipl-dark);
margin-bottom:12px;
}

/* TEXT */

.pcipl-card p{
font-size:15px;
color:var(--pcipl-text);
line-height:1.6;
}
.pcipl-card:hover::before{
height:8px;
}
nav a:hover{
color:var(--pcipl-orange);
}
.hero-overlay{
background:linear-gradient(
rgba(255,106,0,0.7),
rgba(0,0,0,0.5)
);
}
.orange-section{
background:var(--pcipl-orange-soft);
padding:80px 0;
}

.pcipl-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:35px;
margin-top:40px;
}

/* CLIENT LOGO STRIP */

.client-strip{
padding:70px 0;
background:#fff;
overflow:hidden;
}

.client-logos{
width:100%;
overflow:hidden;
position:relative;
}

.logo-track{
display:flex;
align-items:center;
gap:70px;
animation:scrollClients 25s linear infinite;
}

.logo-track img{
height:55px;
width:auto;
filter:grayscale(100%);
opacity:0.8;
transition:0.3s;
}

.logo-track img:hover{
filter:none;
opacity:1;
}

/* animation */

@keyframes scrollClients{
0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}
}
/* FACILITY HERO */

.facility-hero{
padding:90px 0;
background:#fff2e9;
text-align:center;
}

.facility-hero h1{
font-size:40px;
margin-bottom:15px;
}

.facility-hero p{
max-width:650px;
margin:auto;
font-size:18px;
color:#555;
}

/* FACILITY GRID */

.facility-overview{
padding:80px 0;
background:white;
}

.facility-grid{
display:grid;
grid-template-columns: 40% 60%;
gap:50px;
align-items:center;
margin-bottom:70px;
}

.facility-image img{
width:100%;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.facility-features{
margin-top:20px;
padding-left:20px;
}

.facility-features li{
margin-bottom:10px;
}

/* PROCESS FLOW */

.green-process{
padding:80px 0;
background:#f6f8fb;
text-align:center;
}

.process-flow{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:30px;
margin-top:40px;
}

.process-step img{
height:80px;
margin-bottom:10px;
}

.process-arrow{
font-size:30px;
color:#ff6a00;
}
/* PROCESS GIF BELOW SLIDER */

.process-gif{
margin-top:20px;
text-align:center;
}

.process-gif img{
width:100%;
max-width:420px;
border-radius:10px;
box-shadow:0 6px 18px rgba(0,0,0,0.15);
}
/* FACILITY IMAGE SLIDER */

.slider{
position:relative;
width:100%;
overflow:hidden;
border-radius:12px;
}

/* Track */

.slide-track{
display:flex;
width:100%;
transition:transform 0.5s ease;
}

/* Each slide */

.slide-track img{
width:100%;
flex:0 0 100%;
object-fit:cover;
}

/* Buttons */

.slide-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,0.5);
color:white;
border:none;
padding:10px 14px;
cursor:pointer;
font-size:18px;
border-radius:4px;
z-index:5;
}

.slide-btn.prev{
left:10px;
}

.slide-btn.next{
right:10px;
}

.slide-btn:hover{
background:#ff6a00;
}
/* FACILITY IMAGE SLIDER SIZE */

.facility-image{
max-width:480px;
}

.slider{
width:100%;
height:300px;
overflow:hidden;
border-radius:12px;
}

.slide-track img{
width:100%;
height:300px;
object-fit:cover;
}
.facility-content{
max-width:600px;
}

.facility-content p{
line-height:1.7;
margin-bottom:15px;
}
/* PRODUCTS DROPDOWN MENU */

.dropdown{
position:relative;
}

/* hide menu by default */

.dropdown-menu{
position:absolute;
top:100%;
left:0;
background:white;
min-width:220px;
box-shadow:0 8px 20px rgba(0,0,0,0.15);
border-radius:6px;
padding:10px 0;

display:none;   /* important */

z-index:999;
}

/* menu items */

.dropdown-menu li{
list-style:none;
}

.dropdown-menu a{
display:block;
padding:10px 18px;
text-decoration:none;
color:#333;
}

/* hover style */

.dropdown-menu a:hover{
background:#fff3ea;
color:#ff6a00;
}

/* show menu on hover */

.dropdown:hover .dropdown-menu{
display:block;
}
/* FIX PRODUCT DROPDOWN */

.main-nav ul li.dropdown {
position: relative;
}

.main-nav ul li.dropdown .dropdown-menu{
display: none !important;
position: absolute;
top: 100%;
left: 0;
background: white;
min-width: 220px;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
border-radius: 6px;
padding: 10px 0;
z-index: 999;
}

.main-nav ul li.dropdown:hover .dropdown-menu{
display: block !important;
}
.core-values,
.certifications{
padding:80px 0;
background:#f6f8fb;
}
.pcipl-grid{
grid-template-columns:repeat(3,1fr);
max-width:1100px;
margin:40px auto;
}