/* ================================
   EMPPE PARALLAX HERO SECTION
   CLIENT SAFE – NO CONTENT CHANGE
================================ */



/* Inner wrapper */
.empee-hero-inner {
  position: relative;
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;      /* vertical center text */
  justify-content: center;  /* horizontal center text */
  text-align: center;
}

/* Center text strip */
.empee-hero h1 {
  display: inline-block;
  background-color: #8ba488;     /* CLIENT GIVEN COLOR */
  color: #ffffff;
  font-size: 36px;
  font-weight: 600;
  padding: 12px 28px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.3;
}

/* Scroll down arrow – FIXED AT BOTTOM OF IMAGE */
.empee-scroll-down {
  position: absolute;
  bottom: 20px;            /* bottom of image */
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  font-size: 34px;
  animation: empeeBounce 1.5s infinite;
  z-index: 10;
  cursor: pointer;
}

/* Arrow animation */
@keyframes empeeBounce {
  0%, 100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 10px);
  }
}

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

@media (max-width: 768px) {
  .empee-hero {
    height: 60vh;
    min-height: 300px;
    background-attachment: scroll;   /* mobile safe */
  }

  .empee-hero h1 {
    font-size: 22px;
    padding: 8px 18px;
    letter-spacing: 1px;
  }

  .empee-scroll-down {
    font-size: 28px;
    bottom: 15px;
  }
}
 /* =========================================
   EMPPE – INTRO SECTION (PRIMARY COLOR BLOCK)
   LEFT ALIGNED – MATCHING GOOGLE SITE
========================================= */

.empee-intro {
  width: 100%;
  background-color: #8ba488;     /* PRIMARY CLIENT COLOR */
  padding: 25px 0 20px 0;        /* reduced padding */
}

/* Container */
.empee-intro .container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Title wrapper */
.empee-intro .sec-title {
   text-align: left;             /* LEFT aligned */
}

/* Title styling */
.empee-intro .sec-title__title {
  font-size: 30px;              /* slightly smaller like Google */
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
  margin: 0;
  text-align: left;
}

/* Paragraph styling */
.empee-intro-text {
   margin: 0;                    /* no centering */
  font-size: 16px;
  line-height: 1.75;
  color: #ffffff;
  text-align: left;            /* LEFT aligned */
}

/* =========================================
   MOBILE VIEW (GOOGLE STYLE)
========================================= */

@media (max-width: 768px) {

  .empee-intro {
    padding: 35px 0 30px 0;
  }

  .empee-intro .sec-title__title {
    font-size: 24px;
  }

  .empee-intro-text {
    font-size: 14.5px;
    line-height: 1.7;
  }

}
 /* =========================================
   EMPPE – GREEN INTRO SECTION (PRIMARY BLOCK)
   BOOTSTRAP 5 FRIENDLY – NO CLASS CONFLICT
========================================= */

.empee-green-intro {
  width: 100%;
  background-color: #8ba488;      /* PRIMARY CLIENT COLOR */
  padding: 25px 0 20px 0;
}

/* Title */
.empee-green-intro .sec-title__title {
  font-size: 30px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
  margin: 0 0 5px 0;
  text-align: left;
}

/* Paragraph */
.empee-green-text {
   margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: #ffffff;
  text-align: left;
}

/* Button style */
.empee-who-btn {
  padding: 8px 22px;
  border: 2px solid #ffffff;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 4px;
  background: transparent;
  transition: all 0.3s ease;
}

/* Hover */
.empee-who-btn:hover {
  background-color: #ffffff;
  color: #8ba488;
  text-decoration: none;
}

/* Mobile */
@media (max-width: 768px) {

  .empee-green-intro {
    padding: 35px 0 30px 0;
  }

  .empee-green-intro .sec-title__title {
    font-size: 24px;
  }

  .empee-green-text {
    font-size: 14.5px;
  }

}
 /* =========================================
   EMPPE – ABOUT / VISION / MISSION (FINAL PREMIUM)
   BOOTSTRAP 5 PURE – ENTERPRISE UI
========================================= */

.empee-about-block {
  width: 100%;
  background-color: #ffffff;
  padding: 30px 0 30px 0;
}

/* -----------------------------------------
   ABOUT US PART
----------------------------------------- */

/* Section title */
.empee-section-title {
  font-size: 30px;
  font-weight: 600;
  color: #222222;
  margin-bottom: 15px;
  text-align: left;
}

/* Paragraph text */
.empee-section-text {
  font-size: 16px;
  line-height: 1.8;
  color: #444444;
  text-align: left;
  margin: 0;
}

/* -----------------------------------------
   VISION & MISSION BLOCK
----------------------------------------- */

.empee-vm-box {
  margin-top: 35px;
}

/* Card base */
.empee-vm-card {
  position: relative;
  border-radius: 12px;
  padding: 15px 15px 25px 15px;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(139, 164, 136, 0.10),
    rgba(139, 164, 136, 0.03)
  );
  border: 1px solid rgba(139, 164, 136, 0.35);
  transition: all 0.35s ease;
  overflow: hidden;
}

/* Brand accent bar */
.empee-vm-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    #8ba488,
    rgba(139, 164, 136, 0.5)
  );
}

/* Hover effect */
.empee-vm-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.12);
  background: linear-gradient(
    135deg,
    rgba(139, 164, 136, 0.18),
    rgba(139, 164, 136, 0.06)
  );
}

/* Header layout */
.empee-vm-header {
  display: flex;
  align-items: center;
  margin-bottom: 22px;
}

/* Icon circle */
.empee-vm-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(139, 164, 136, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 18px;
  flex-shrink: 0;
}

/* Icon */
.empee-vm-icon i {
  font-size: 34px;
  color: #8ba488;
}

/* Vision / Mission title */
.empee-vm-header h3 {
  font-size: 26px;
  font-weight: 600;
  color: #222222;
  margin: 0;
}

/* Text inside cards */
.empee-vm-card p {
  font-size: 15.5px;
  line-height: 1.85;
  color: #444444;
  margin: 0;
  text-align: left;
}

/* -----------------------------------------
   MOBILE VIEW
----------------------------------------- */

@media (max-width: 768px) {

  .empee-about-block {
    padding: 45px 0 40px 0;
  }

  .empee-section-title {
    font-size: 24px;
  }

  .empee-section-text {
    font-size: 14.5px;
  }

  .empee-vm-card {
    padding: 35px 25px 28px 30px;
  }

  .empee-vm-header h3 {
    font-size: 22px;
  }

  .empee-vm-icon {
    width: 54px;
    height: 54px;
  }

  .empee-vm-icon i {
    font-size: 28px;
  }

  .empee-vm-card p {
    font-size: 14.5px;
    line-height: 1.75;
  }

}

 /* =========================================
   EMPPE – SILO TYPES SECTION (FINAL BLUE PANEL VERSION)
   LEFT IMAGE / RIGHT DARK BLUE PANEL – SAME HEIGHT PERFECT ALIGN
========================================= */

.empee-silo-types {
  width: 100%;
  background-color: #f4f7f5;
  padding: 60px 0 60px 0;
}

/* Row spacing */
.empee-silo-row {
  padding: 35px 0;
}

/* Force equal height columns */
.empee-silo-row > div {
  display: flex;
  align-items: stretch;
}

/* -----------------------------------------
   IMAGE SIDE (FULL HEIGHT)
----------------------------------------- */

.empee-silo-img {
  width: 100%;
  height: 100%;                     /* FULL HEIGHT */
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0,0,0,0.15);
  display: flex;
}

.empee-silo-img img {
  width: 100%;
  height: 100%;                     /* STRETCH TO MATCH TEXT */
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Subtle zoom */
.empee-silo-img:hover img {
  transform: scale(1.04);
}

/* -----------------------------------------
   TEXT SIDE – DARK BLUE PANEL
----------------------------------------- */

.empee-silo-text {
  position: relative;
  width: 100%;
  height: 100%;                     /* MATCH IMAGE HEIGHT */
  padding: 10px;
  background: linear-gradient(
    135deg,
    #8ba488,
    #4f7329
  );                                /* DARK BLUE PANEL */
  border-radius: 5px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.30);
  display: flex;
  flex-direction: column;
  justify-content: center;          /* VERTICAL CENTER */
}

/* Brand accent vertical line */
.empee-silo-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25px;
  width: 5px;
  height: calc(100% - 50px);
  background: linear-gradient(
    to bottom,
    #fff,
   #effee0
  );
  border-radius: 3px;
}

/* Title */
.empee-silo-text h3 {
  font-size: 28px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 12px;
  padding-left: 18px;
  position: relative;
}

/* Divider under title */
.empee-silo-text h3::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: #fff;
  margin-top: 8px;
  border-radius: 2px;
}

/* Paragraphs */
.empee-silo-text p {
  font-size: 15.8px;
  line-height: 1.85;
  color: #eef3f8;                   /* SOFT WHITE BLUE */
 
  padding-left: 18px;
  text-align: left;
}

/* Last paragraph no margin */
.empee-silo-text p:last-child {
  margin-bottom: 0;
}

/* -----------------------------------------
   CAPACITY BADGE – PRIMARY ON BLUE
----------------------------------------- */

.empee-silo-capacity {
  margin-top: 8px;
  margin-bottom: 12px;
  margin-left: 18px;
  padding: 12px 24px;
  background-color: #8ba488;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 15.5px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.3px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}

/* Icon inside badge */
.empee-silo-capacity i {
  font-size: 18px;
  opacity: 0.95;
}

/* -----------------------------------------
   MOBILE VIEW
----------------------------------------- */

@media (max-width: 768px) {

  .empee-silo-types {
    padding: 45px 0 40px 0;
  }

  .empee-silo-row {
    padding: 25px 0;
  }

  /* Stack normally on mobile */
  .empee-silo-row > div {
    display: block;
  }

  .empee-silo-text {
    margin-top: 25px;
    padding: 10px ;
    height: auto;
  }

  .empee-silo-text::before {
    top: 20px;
    height: calc(100% - 40px);
  }

  .empee-silo-text h3 {
    font-size: 24px;
  }

  .empee-silo-text p {
    font-size: 14.5px;
    line-height: 1.75;
  }

  .empee-silo-capacity {
    margin-left: 0;
    font-size: 14.5px;
    padding: 10px 18px;
  }

}

.mt5{
	margin-top:5px  !important;
} 


 /* =========================================
   EMPPE – INDUSTRIES SECTION (GOOGLE MATCH)
   GREEN HEADER + WHITE IMAGE AREA
========================================= */

.empee-industries {
  width: 100%;
}

/* Header bar */
.empee-industries-header {
  width: 100%;
  background-color: #8ba488;    /* PRIMARY GREEN */
  padding: 35px 0;
}

/* Header title */
.empee-industries-header h2 {
  font-size: 32px;
  font-weight: 600;
  color: #ffffff;              /* WHITE TEXT */
  text-align: center;
  letter-spacing: 1px;
  margin: 0;
}

/* Body area (white background for image) */
.empee-industries-body {
  width: 100%;
  background-color: #ffffff !important;   /* PURE WHITE BG */
  padding: 50px 0 60px 0;
}

/* Image */
.empee-industries-body img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

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

@media (max-width: 768px) {

  .empee-industries-header {
    padding: 28px 0;
  }

  .empee-industries-header h2 {
    font-size: 26px;
  }

  .empee-industries-body {
    padding: 35px 0 40px 0;
  }

}
/* =========================================
   EMPPE – TURNKEY SOLUTION SECTION (VIDEO)
   GREEN HEADER + WHITE BODY – GOOGLE MATCH
========================================= */

.empee-turnkey {
  width: 100%;
}

/* Header bar */
.empee-turnkey-header {
  width: 100%;
  background-color: #8ba488;    /* PRIMARY GREEN */
  padding: 35px 0;
}

/* Header title */
.empee-turnkey-header h2 {
  font-size: 32px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  letter-spacing: 1px;
  margin: 0;
}

/* Body area */
.empee-turnkey-body {
  width: 100%;
  background-color: #ffffff;   /* WHITE BG */
  padding: 20px 0 60px 0;
}

/* Responsive video wrapper */
.empee-video-wrapper {
  position: relative;
  width: 100%;
            /* nice centered width like Google */
  margin: 0 auto;
  padding-bottom: 56.25%;      /* 16:9 ratio */
  height: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* Iframe */
.empee-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

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

@media (max-width: 768px) {

  .empee-turnkey-header {
    padding: 28px 0;
  }

  .empee-turnkey-header h2 {
    font-size: 26px;
  }

  .empee-turnkey-body {
    padding: 35px 0 40px 0;
  }

  .empee-video-wrapper {
    max-width: 100%;
  }

}

 /* =========================================
   EMPPE – OUR SUCCESS CASES (CLEAN INDUSTRIAL FINAL)
========================================= */

.empee-success-cases {
  width: 100%;
  background-color: #8ba488;   /* PRIMARY BG */
  padding: 30px 0 30px 0;
}

/* Title */
.empee-success-title {
  font-size: 32px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

/* Card */
.empee-case-card {
  width: 100%;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e5e5;
  transition: all 0.3s ease;
  height: 100%;
}

/* Hover – subtle only */
.empee-case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.18);
}

/* Image */
.empee-case-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

/* Info panel */
.empee-case-info {
  padding: 16px 18px 18px 18px;
  background-color: #ffffff;
}

/* Info rows */
.empee-case-info div {
  display: flex;
  justify-content: flex-start;     /* LEFT ALIGN */
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 14.5px;
  line-height: 1.4;
  border-bottom: 1px solid #eeeeee;   /* HR LINE BELOW EACH ROW */
}

/* Remove line from last row */
.empee-case-info div:last-child {
  border-bottom: none;
}

/* Labels */
.empee-case-info span {
  color: #005aa0;              /* BRAND BLUE */
  font-weight: 600;
  min-width: 85px;
  text-align: left;
}

/* Values */
.empee-case-info strong {
  color: #333333;
  font-weight: 500;
  text-align: left;
  flex: 1;
}

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

@media (max-width: 768px) {

  .empee-success-cases {
    padding: 50px 0 50px 0;
  }

  .empee-success-title {
    font-size: 26px;
  }

  .empee-case-card img {
    height: 170px;
  }

  .empee-case-info div {
    font-size: 14px;
  }

}


/* =========================================
   EMPPE – WHAT WE DO (EXACT GOOGLE STYLE)
========================================= */

.empee-whatwedo {
  width: 100%;
}

/* Section header bar */
.empee-whatwedo-header {
  width: 100%;
  background-color: #8ba488;
  padding: 35px 0;
}

.empee-whatwedo-header h2 {
  font-size: 32px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  letter-spacing: 1px;
  margin: 0;
}

/* Body */
.empee-whatwedo-body {
  width: 100%;
  background-color: #ffffff;
  padding: 50px 0 60px 0;
}

/* Headings above images */
.empee-what-heading {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 15px;
}

 
 /* =========================================
   EMPPE – WHAT WE DO IMAGE STYLE (FINAL PREMIUM)
   STYLISH BORDER + FRAME + SUBTLE HOVER
========================================= */

/* Image wrapper – PREMIUM FRAME DESIGN */
.empee-what-img {
  width: 100%;
  background-color: #ffffff;
   border: 2px solid #e3e6e8;          /* LIGHT OUTER BORDER */
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  position: relative;
  overflow: hidden;
  transition: all 0.35s ease;
}

/* Accent corner line (brand touch) */
.empee-what-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #8ba488;          /* PRIMARY GREEN ACCENT */
  z-index: 2;
}

/* Image itself – FULL IMAGE ALWAYS VISIBLE */
.empee-what-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  transition: transform 0.4s ease;    /* FOR HOVER */
}

/* Card hover – lift effect */
.empee-what-card:hover .empee-what-img {
  box-shadow: 0 14px 35px rgba(0,0,0,0.20);
  transform: translateY(-4px);
}

/* Image hover – VERY SUBTLE ZOOM */
.empee-what-card:hover .empee-what-img img {
  transform: scale(1.03);
}

/* =========================================
   MOBILE VIEW (KEEP CLEAN)
========================================= */

@media (max-width: 768px) {

  .empee-what-img {
    padding: 8px;
    border-radius: 6px;
  }

  .empee-what-img::before {
    width: 35px;
  }

}


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

@media (max-width: 768px) {

  .empee-whatwedo-header {
    padding: 28px 0;
  }

  .empee-whatwedo-header h2 {
    font-size: 26px;
  }

  .empee-what-heading {
    font-size: 20px;
  }

}

/* Center header for inner sections */
.empee-what-heading {
  font-size: 24px;
  font-weight: 600;
  color: #222222;
  letter-spacing: 0.3px;
  text-align: center;
  background-color: #f0f2f3;
  padding: 10px 0;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  display: inline-block;
  min-width: 280px;
}

/* =========================================
   EMPPE – FOOTER (CLIENT GOOGLE STYLE FINAL)
========================================= */
 /* =========================================
   EMPPE – FOOTER (FINAL PREMIUM CLIENT STYLE)
========================================= */
 

/* Overlay */
.empee-footer-overlay {
  position: absolute;
  inset: 0;
   z-index: 1;
}

/* Content layer */
.empee-footer .container {
  position: relative;
  z-index: 2;
}

 

/* Blocks */
.empee-footer-block h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #ffffff;
}

/* Products list with icons */
.empee-footer-products {
  list-style: none;
  padding: 0;
  margin: 0;
}

.empee-footer-products li {
  font-size: 15px;
  line-height: 1.9;
  color: #e0e0e0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.empee-footer-products li i {
  color: #ffffff;
  font-size: 13px;
}

/* Address text */
.empee-footer-block p {
  font-size: 15px;
  line-height: 1.7;
  color: #e0e0e0;
  margin: 0;
}

/* Social icons */
.empee-footer-social {
  margin-top: 20px;
  display: flex;
  gap: 18px;
}

.empee-footer-social a {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 16px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.empee-footer-social a:hover {
  background-color: #8ba488;
  border-color: #8ba488;
  color: #ffffff;
}

/* Copyright – BELOW ADDRESS (RIGHT SIDE) */
.empee-footer-copy {
  margin-top: 25px;
  font-size: 14px;
  color: #cccccc;
}

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

@media (max-width: 768px) {

  .empee-footer {
    padding: 30px 0 20px 0;
  }

  .empee-footer-logo img {
    max-width: 160px;
    margin-bottom: 20px;
  }

  .empee-footer-block h4 {
    font-size: 18px;
  }

  .empee-footer-block p,
  .empee-footer-products li {
    font-size: 14px;
  }

  .empee-footer-social {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

}
/* =========================================
   FOOTER BOTTOM COPYRIGHT – CENTERED
========================================= */

.empee-footer-bottom {
  margin-top: 30px;
  padding: 16px 0;
   position: relative;
  z-index: 2;
}

.empee-footer-bottom p {
  margin: 0;
  font-size: 15px;
  font-weight:600 !important;
  color: #fff;
  letter-spacing: 0.3px;
}
/* =========================================
   FOOTER CONTENT OVERLAY PANEL (PREMIUM STYLE)
========================================= */

/* Panel that holds all footer content */
.empee-footer-panel {
  position: relative;
  background: rgba(0, 0, 0, 0.55);      /* TRANSPARENT DARK OVERLAY */
  padding: 20px;
  border-radius: 14px;

  /* STYLISH BORDER */
  border: 1px solid rgba(255, 255, 255, 0.25);

  /* INNER GLOW EFFECT */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 15px 40px rgba(0, 0, 0, 0.40);
}

/* Decorative top accent line */
.empee-footer-panel::before {
  content: "";
  position: absolute;
  top: 0;
   
  height: 4px;
  background-color: #8ba488;     /* PRIMARY ACCENT */
  border-radius: 0 0 4px 4px;
}

/* Make sure panel stays above footer bg */
.empee-footer-panel {
  z-index: 2;
}

/* Adjust spacing on small screens */
@media (max-width: 768px) {

  .empee-footer-panel {
    padding: 35px 25px 30px 25px;
    border-radius: 10px;
  }

  .empee-footer-panel::before {
    left: 25px;
    width: 80px;
  }

}