:root{
  --bg:#fff; 
  --fg:#E88C00; 
  --accent:#E88C00; 
  --hover-color:#0000ff; 
  --panel:#f4f4f4;
  --max-width:1200px; 
  --nav-height:72px; 
  --transition:.3s ease;
}

/* RESET */
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:"Poppins",sans-serif;
  background:var(--bg);
  color:var(--fg);
  line-height:1.5;
  scroll-behavior:smooth;
  opacity:1;
  transform:translateY(20px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.container{width:92%;max-width:var(--max-width);margin:0 auto;}

/* NAVBAR */
.navbar{
  position:fixed;top:0;left:0;right:0;height:var(--nav-height);
  background:#0a0a0a;display:flex;align-items:center;
  z-index:1200;box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.nav-inner{width:100%;display:flex;justify-content:space-between;align-items:center;}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;color:#fff;text-decoration:none;}
.logo-img{height:36px;transition:transform var(--transition);}
.logo:hover .logo-img{transform:scale(1.05);}
.nav-list{display:flex;gap:22px;list-style:none;transition:transform var(--transition);}
.nav-list li a{
  color:var(--fg);text-decoration:none;font-weight:500;position:relative;
  transition:color var(--transition);
}
.nav-list li a::after{
  content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;
  background:var(--hover-color);transition:width var(--transition);
}
.nav-list li a:hover{color:var(--hover-color);}
.nav-list li a:hover::after{width:100%;}

/* Dropdown */
.dropdown{position:relative;}
.dropdown-menu{
  display:none;position:absolute;top:100%;left:0;background:#0a0a0a;
  padding:10px 0;border-radius:6px;min-width:180px;
}
.dropdown-menu li a{
  display:block;padding:8px 16px;color:#fff;text-decoration:none;
  transition:background var(--transition);
}
.dropdown-menu li a:hover{background:var(--hover-color);color:#fff;}
.dropdown:hover .dropdown-menu{display:block;}

/* Contact Link */
.contact-link{
  color:#fff;
  background:var(--bg);
  border:2px solid var(--accent);
  padding:8px 14px;border-radius:999px;font-weight:700;text-decoration:none;
  transition:var(--transition);
}
.contact-link:hover{background:transparent;color:var(--accent);transform:translateY(-1px);}

/* Hamburger Toggle */
.nav-toggle{display:none;background:none;border:none;color:var(--fg);font-size:1.8rem;cursor:pointer;}
.nav-toggle.active{color:#fff;}

/* MOBILE NAV */
@media(max-width:700px){
  .nav-toggle{display:block;}
  .nav-list{
    position:fixed;top:var(--nav-height);left:-100%;height:calc(100%-var(--nav-height));
    width:250px;background:#0a0a0a;flex-direction:column;padding-top:20px;
    transition:left var(--transition);gap:14px;z-index:1000;
  }
  .nav-list.active{left:0;}
  .nav-list li a{padding:12px 24px;display:block;}
  .dropdown-menu{
    position:relative;top:0;left:0;background:transparent;
    box-shadow:none;padding:0;display:none;
  }
  .dropdown.open .dropdown-menu{display:block;}
}

/* HERO SECTION */
.hero-packaging{
  padding-top:var(--nav-height);text-align:center;
  background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.5)), url("/images/hero-packaging.jpg");
  background-size:cover;background-position:center;color:#fff;height:80vh;display:flex;align-items:center;justify-content:center;
}
.hero-packaging .container{
  max-width:800px;margin:0 auto;padding:80px 20px;opacity:0;transform:translateY(30px);
  animation:fadeInUp 1s forwards;
}
.hero-packaging h1{font-size:clamp(28px,6vw,48px);font-weight:900;margin-bottom:20px;}
.hero-packaging p{font-size:1.1rem;font-weight:300;margin-bottom:30px;color:#e6e8ee;}

/* HERO CTA BUTTON (View Project) - ORIGINAL STYLE */
.hero-packaging .cta {
  display:inline-block;
  background:var(--hover-color);
  color:#fff;
  padding:12px 24px;
  font-weight:600;
  border-radius:6px;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition:background .25s, transform .25s;
}
.hero-packaging .cta::after {
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:rgba(255,255,255,.1);
  transition:left .4s ease;
}
.hero-packaging .cta:hover::after {
  left:0;
}
.hero-packaging .cta:hover {
  transform:translateY(-2px);
}

/* PACKAGING GALLERY */
.packaging-gallery{padding:72px 0;}
.packaging-gallery h2{text-align:center;font-size:28px;margin-bottom:40px;}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;}
.gallery-item img{width:100%;border-radius:8px;transition:transform var(--transition);}
.gallery-item img:hover{transform:scale(1.05);box-shadow:0 12px 25px rgba(0,0,0,0.2);}

/* ===============================
   PROCESS SECTION WITH GLOWING EFFECT
=============================== */
.process-section{
  padding:6rem 2rem;text-align:center;background:var(--panel);
}
.process-section h2{
  font-size:2.6rem;margin-bottom:3rem;color:var(--fg);
}
.process-cards{
  display:flex;flex-wrap:wrap;gap:2rem;justify-content:center;
}
.process-card{
  background:var(--surface,#111);
  color:#fff;border-radius:20px;flex:1 1 220px;max-width:280px;
  padding:2rem 1.5rem;text-align:center;position:relative;overflow:hidden;
  box-shadow:0 15px 45px rgba(0,0,0,0.25);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.process-card:hover{
  transform:translateY(-10px) scale(1.03);
  box-shadow:0 25px 65px rgba(0,0,0,0.3);
}
.process-card::before{
  content:"";
  position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:linear-gradient(270deg,var(--accent),var(--fg),var(--accent));
  filter:blur(25px);opacity:0.6;z-index:0;border-radius:20px;
  animation:card-glow 4s linear infinite;
}
.process-card .icon{
  font-size:2.5rem;margin-bottom:1rem;position:relative;z-index:1;color:var(--fg);display:inline-block;
}
.process-card .icon::after{
  content:"";position:absolute;top:-6px;left:-6px;
  width:calc(100% + 12px);height:calc(100% + 12px);
  border-radius:50%;border:2px solid var(--accent);
  filter:blur(8px);opacity:0.7;z-index:-1;
  animation:icon-glow 2s linear infinite alternate;
}
.process-card h3{font-weight:600;margin-bottom:0.8rem;}
.process-card p{font-size:0.95rem;color:#fff;line-height:1.5;}
@keyframes card-glow{
  0%{transform:rotate(0deg);}50%{transform:rotate(180deg);}100%{transform:rotate(360deg);}
}
@keyframes icon-glow{
  0%{opacity:0.6;transform:scale(0.95);}100%{opacity:1;transform:scale(1.05);}
}

/* ===============================
   CTA SECTION GLOWING BUTTON
=============================== */
.cta-section.container {
  padding:6rem 2rem;
  text-align:center;
  background:var(--panel);
  border-radius:20px;
  margin:4rem auto;
  max-width:900px;
  box-shadow:0 25px 60px rgba(0,0,0,0.2);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-section.container:hover {
  transform:translateY(-8px);
  box-shadow:0 35px 80px rgba(0,0,0,0.25);
}

.cta-section.container h2 {
  font-size:2.8rem;
  margin-bottom:1rem;
  color:var(--fg);
}

.cta-section.container p {
  font-size:1.1rem;
  margin-bottom:2rem;
  color:rgba(0,0,0,0.8);
}

/* Glowing CTA Button */
.cta-section.container .cta {
  display:inline-block;
  background:linear-gradient(90deg, var(--accent), var(--fg));
  color:#fff;
  font-weight:600;
  padding:0.9rem 2.2rem;
  border-radius:50px;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  z-index:1;
  transition:all 0.3s ease;
}

.cta-section.container .cta::before {
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:linear-gradient(270deg, var(--accent), var(--fg), var(--accent));
  filter:blur(20px);
  opacity:0.7;
  z-index:-1;
  border-radius:50px;
  animation:glowing 3s linear infinite;
}

.cta-section.container .cta:hover {
  transform:translateY(-3px) scale(1.03);
}

.cta-section.container .cta:hover::before {
  opacity:1;
  filter:blur(25px);
}

/* Glowing Animation */
@keyframes glowing {
  0% { transform:rotate(0deg); }
  50% { transform:rotate(180deg); }
  100% { transform:rotate(360deg); }
}

/* RESPONSIVE */
@media(max-width:700px){
  .cta-section.container h2{font-size:2rem;}
  .cta-section.container p{font-size:1rem;}
  .cta-section.container .cta{width:100%; text-align:center;}
}

/* ===============================
   FOOTER
=============================== */
.site-footer{background:var(--fg);color:#fff;padding:48px 20px 26px;margin-top:40px;font-size:14px;}
.footer-top{display:grid;grid-template-columns:minmax(220px,1fr) repeat(3,minmax(160px,1fr));gap:32px;}
.footer-logo{font-weight:900;font-size:1.2rem;margin-bottom:10px;display:block;}
.footer-desc{color:#f0f0f0;line-height:1.6;margin-bottom:12px;}
.footer-links h4{margin-bottom:12px;font-weight:700;}
.footer-links ul{list-style:none;padding-left:0;}
.footer-links ul li{margin-bottom:6px;}
.footer-links ul li a{color:#fff;text-decoration:none;transition:color var(--transition);}
.footer-links ul li a:hover{color:var(--hover-color);}
.footer-bottom{margin-top:28px;border-top:1px solid rgba(255,255,255,.2);padding-top:16px;text-align:center;font-size:1rem;}
.socials{display:flex;gap:14px;}
.socials a{color:#fff;text-decoration:none;transition:color var(--transition);}
.socials a:hover{color:var(--hover-color);transform:translateY(-2px);}

/* ANIMATIONS */
@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px);}100%{opacity:1;transform:translateY(0);}}

/* RESPONSIVE */
@media(max-width:700px){
  .hero-packaging .container{padding:60px 20px;}
  .hero-packaging h1{font-size:clamp(24px,6vw,36px);}
  .hero-packaging p{font-size:1rem;}
  .gallery{grid-template-columns:1fr;gap:16px;}
  .process-cards{flex-direction:column;align-items:center;}
  .process-card{width:90%;margin-bottom:24px;}
  .cta-section .cta-btn{width:100%;}
  .footer-top{grid-template-columns:1fr 1fr;gap:24px;}
  .footer-bottom{font-size:0.9rem;}
}