*
=====
GLOBAL
RESET
=====
*/
*
{
  box-sizing:
  border-box;
  margin:
  0;
  padding:
  0;
}
body {
  font-family: 'Segoe UI', sans-serif;
  /* Gradient untuk keseluruhan body */
  background: linear-gradient(135deg, #ff7e5f, #feb47b, #ffb347);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  color: #000000;
  scroll-behavior: smooth;
  line-height: 1.6;
}
h1,
h2,
h3,
h4,
h5
{
  font-weight:
  bold;
  color:
  #000000;
}
a
{
  text-decoration:
  none;
  color:
  #000000;
  transition:
  0.3s
  ease;
}
a:hover
{
  color:
  #333333;
}
img
{
  max-width:
  100%;
  display:
  block;
}
section
{
  padding:
  80px
  0;
}
/*
=====
NAVBAR
=====
*/
.custom-navbar
{
  background-color:
  rgba(16,
  40,
  32,
  0.95);
  backdrop-filter:
  blur(5px);
}
.custom-navbar.scrolled
{
  background-color:
  #ff6b35;
}
.obf-brand-text
{
  font-size:
  1.5rem;
  font-weight:
  bold;
  color:
  #ff6b35;
  text-shadow:
  0
  0
  6px
  rgba(84,
  227,
  70,
  0.4);
}
.navbar-nav
.nav-link
{
  color:
  #ff6b35
  !important;
  position:
  relative;
  font-size:
  15px;
}
.navbar-nav
.nav-link.nav-underline::after
{
  content:
  '';
  position:
  absolute;
  left:
  10%;
  bottom:
  0;
  width:
  0%;
  height:
  2px;
  background-color:
  #ff6b35;
  transition:
  width
  0.3s
  ease;
}
.navbar-nav
.nav-link.nav-underline:hover::after
{
  width:
  80%;
}
/*
=====
FILTERS
=====
*/
#searchInput,
#categoryFilter,
#sortSelect
{
  background-color:
  #ffa559;
  color:
  #e2e2e2;
  border:
  1px
  solid
  #ffa559;
  border-radius:
  25px;
  padding:
  10px
  16px;
  font-size:
  14px;
}
#searchInput::placeholder
{
  color:
  #a0d0b0;
}
/*
=====
MARVEL
PRODUCT
CARD
STYLE
(MODERNIZED)
=====
*/
.contenedorCards
{
  display:
  flex;
  flex-wrap:
  wrap;
  justify-content:
  center;
  gap:
  2rem;
  padding:
  2rem
  0;
}
.card
{
  width:
  300px;
  background:
  none;
  border:
  none;
}
.card
.wrapper
{
  margin-top:
  60px;
  padding-top:
  300px;
  background-color:
  #1e1f26;
  border-radius:
  14px;
  position:
  relative;
  overflow:
  hidden;
  box-shadow:
  0
  10px
  25px
  rgba(0,
  0,
  0,
  0.6);
  transition:
  transform
  0.3s
  ease,
  box-shadow
  0.3s
  ease;
}
.card
.wrapper:hover
{
  transform:
  translateY(-6px);
  box-shadow:
  0
  12px
  35px
  rgba(0,
  0,
  0,
  0.7);
}
.colorProd
{
  position:
  absolute;
  top:
  0;
  left:
  0;
  height:
  200px;
  width:
  100%;
}
.imgProd
{
  background-size:
  contain;
  background-repeat:
  no-repeat;
  background-position:
  center
  bottom;
  height:
  300px;
  width:
  100%;
  position:
  absolute;
  bottom:
  calc(100%
  -
  300px);
  transition:
  height
  0.3s
  ease;
}
.wrapper:hover
.imgProd
{
  height:
  340px;
}
.infoProd
{
  display:
  flex;
  flex-direction:
  column;
  align-items:
  center;
  height:
  170px;
  padding:
  20px;
  box-sizing:
  border-box;
}
.nombreProd
{
  font-weight:
  600;
  font-size:
  17px;
  text-align:
  center;
  margin-bottom:
  8px;
  color:
  #fca311;
}
.extraInfo
{
  font-size:
  13px;
  color:
  #b0b0b0;
  margin-bottom:
  12px;
}
.actions
{
  display:
  flex;
  justify-content:
  space-between;
  align-items:
  center;
  width:
  100%;
}
.preciosGrupo
{
  flex-grow:
  1;
  position:
  relative;
}
.precio
{
  font-size:
  22px;
  font-weight:
  700;
  color:
  #000000;
}
.precioOferta
{
  color:
  #ff4d4f;
  text-decoration:
  line-through;
  font-size:
  14px;
  position:
  absolute;
  top:
  -18px;
  left:
  0;
}
.icono
{
  display:
  inline-flex;
  align-items:
  center;
  justify-content:
  center;
  cursor:
  pointer;
  width:
  36px;
  height:
  36px;
  position:
  relative;
  color:
  #ffffff;
  transition:
  transform
  0.25s
  ease,
  color
  0.2s
  ease;
}
.icono:hover
{
  transform:
  scale(1.15);
  color:
  #fca311;
}
.icono
svg
{
  width:
  100%;
  height:
  100%;
  stroke:
  currentColor;
  fill:
  none;
  stroke-width:
  2.5;
}
.action.aFavs
{
  position:
  absolute;
  top:
  18px;
  right:
  18px;
  color:
  #fff;
  width:
  28px;
  height:
  28px;
}
.card.esFav
.aFavs
svg
path
{
  fill:
  #ffa559;
  stroke:
  #ffa559;
  transform:
  scale(1.2);
}
.card.enCarrito
.alCarrito
.inCart
{
  transform:
  scale(1);
}
.card.enCarrito
.alCarrito
.outCart
{
  transform:
  scale(0);
}
.alCarrito
.inCart
{
  transform:
  scale(0);
  position:
  absolute;
  top:
  0;
  left:
  0;
}
.alCarrito
.outCart
{
  position:
  absolute;
  top:
  0;
  left:
  0;
  transform:
  scale(1);
}
/*
=====
CART
SUMMARY
MODAL
=====
*/
.cart-summary
{
  position:
  fixed;
  top:
  100px;
  right:
  -400px;
  width:
  360px;
  max-height:
  85vh;
  overflow-y:
  auto;
  background:
  rgba(27,
  59,
  50,
  0.92);
  color:
  white;
  border-radius:
  20px;
  box-shadow:
  -8px
  8px
  25px
  rgba(0,
  0,
  0,
  0.4);
  padding:
  20px;
  z-index:
  10000;
  transition:
  right
  0.35s
  ease;
  backdrop-filter:
  blur(12px);
}
.cart-summary.active
{
  right:
  30px;
}
.cart-header
{
  display:
  flex;
  justify-content:
  space-between;
  align-items:
  center;
  padding-bottom:
  10px;
  border-bottom:
  1px
  solid
  #FF6B35;
  margin-bottom:
  15px;
}
.cart-header
h5
{
  font-size:
  1.3rem;
  font-weight:
  bold;
  color:
  #000000;
  display:
  flex;
  align-items:
  center;
  gap:
  6px;
}
.cart-header
button
{
  background:
  none;
  border:
  none;
  font-size:
  22px;
  color:
  #fff;
  cursor:
  pointer;
}
.cart-item
{
  display:
  flex;
  align-items:
  center;
  justify-content:
  space-between;
  background:
  #204d3c;
  border-radius:
  12px;
  padding:
  10px
  12px;
  margin-bottom:
  12px;
  font-size:
  14px;
  position:
  relative;
}
.cart-item
>
div:first-child
{
  flex:
  1;
  font-weight:
  500;
}
.qty-controls
{
  display:
  flex;
  align-items:
  center;
  background:
  #FF6B35;
  border-radius:
  20px;
  overflow:
  hidden;
  box-shadow:
  inset
  0
  0
  5px
  rgba(0,
  0,
  0,
  0.25);
}
.qty-controls
button
{
  padding:
  4px
  10px;
  background:
  #000000;
  border:
  none;
  color:
  #FFA559;
  font-weight:
  bold;
  font-size:
  14px;
  transition:
  0.2s
  ease;
  cursor:
  pointer;
}
.qty-controls
button:hover
{
  background:
  #333333;
}
.qty-controls
span
{
  min-width:
  26px;
  text-align:
  center;
  color:
  #000000;
  font-weight:
  bold;
  font-size:
  13px;
}
.remove-btn
{
  background-color:
  #e74c3c;
  border:
  none;
  color:
  #fff;
  font-size:
  14px;
  font-weight:
  bold;
  border-radius:
  50%;
  width:
  22px;
  height:
  22px;
  position:
  absolute;
  top:
  -8px;
  right:
  -8px;
  display:
  flex;
  align-items:
  center;
  justify-content:
  center;
  cursor:
  pointer;
  transition:
  background
  0.2s
  ease;
}
.remove-btn:hover
{
  background-color:
  #c0392b;
}
.cart-footer
{
  border-top:
  1px
  solid
  #FF6B35;
  margin-top:
  20px;
  padding-top:
  10px;
  text-align:
  center;
}
.cart-footer
strong
{
  display:
  block;
  margin-bottom:
  10px;
  font-size:
  16px;
  color:
  #ffffff;
}
.cart-footer
.btn
{
  background-color:
  #FF6B35;
  border:
  none;
  font-weight:
  bold;
  font-size:
  15px;
  width:
  100%;
  padding:
  10px
  0;
  border-radius:
  12px;
  color:
  white;
  transition:
  background
  0.2s
  ease;
}
.cart-footer
.btn:hover
{
  background-color:
  #1ebd5b;
}
@media
(max-width:
768px)
{
  .cart-summary
  {
    width:
    100%;
    right:
    -100%;
    border-radius:
    0;
    top:
    80px;
  }
  .cart-summary.active
  {
    right:
    0;
  }
}
/*
=====
TOAST
&
EMPTY
CART
=====
*/
.toast-msg
{
  position:
  fixed;
  bottom:
  40px;
  left:
  50%;
  transform:
  translateX(-50%);
  background:
  #000000;
  color:
  #FFA559;
  padding:
  12px
  20px;
  border-radius:
  25px;
  font-size:
  14px;
  font-weight:
  bold;
  opacity:
  0;
  pointer-events:
  none;
  z-index:
  9999;
  transition:
  opacity
  0.3s
  ease;
}
.toast-msg.show
{
  opacity:
  1;
}
.empty-cart
{
  text-align:
  center;
  opacity:
  0.7;
  padding:
  30px
  10px;
}
.empty-cart
img
{
  width:
  120px;
  margin-bottom:
  15px;
}
.empty-cart
p
{
  font-size:
  14px;
  color:
  #ccc;
}
/*
=====
ANIMATION
=====
*/
.card.bounce
{
  animation:
  bounceScale
  0.4s
  ease;
}
@keyframes
bounceScale
{
  0%
  {
    transform:
    scale(1);
  }
  30%
  {
    transform:
    scale(1.08);
  }
  100%
  {
    transform:
    scale(1);
  }
}
/*
=====
FOOTER
=====
*/
.footer-obf {
  background: linear-gradient(135deg, #ff7e5f, #feb47b, #ffb347);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  color: #000000;
  padding: 20px 0;
}.footer-logo-wrapper
{
  display:
  flex;
  justify-content:
  flex-end;
}
.footer-logo
{
  width:
  100px;
  border-radius:
  50%;
  background-color:
  #FF6B35;
  padding:
  10px;
}
.footer-obf
hr
{
  opacity:
  0.2;
}
/*
=====
SCROLL
TO
TOP
=====
*/
.scroll-to-top
{
  position:
  fixed;
  bottom:
  30px;
  right:
  30px;
  background-color:
  #333333;
  color:
  #fff;
  width:
  42px;
  height:
  42px;
  border-radius:
  50%;
  display:
  none;
  align-items:
  center;
  justify-content:
  center;
  font-size:
  24px;
  z-index:
  999;
  transition:
  background
  0.3s
  ease;
}
.scroll-to-top:hover
{
  background-color:
  #13856d;
}
/*
=====
RESPONSIVE
=====
*/
@media
(max-width:
768px)
{
  .card
  {
    width:
    90%;
  }
  .contenedorCards
  {
    gap:
    1.5rem;
  }
  .scroll-to-top
  {
    right:
    15px;
    bottom:
    15px;
  }
}
/*
===
ANIMATION:
Quantity
Bounce
===
*/
.cart-item.qty-anim
{
  animation:
  qtyBounce
  0.3s
  ease;
}
@keyframes
qtyBounce
{
  0%
  {
    transform:
    scale(1);
  }
  30%
  {
    transform:
    scale(1.1);
  }
  100%
  {
    transform:
    scale(1);
  }
}
/*
===
Floating
Cart
Badge
===
*/
.cart-badge
{
  position:
  fixed;
  top:
  100px;
  right:
  30px;
  background-color:
  #FF6B35;
  color:
  #fff;
  padding:
  8px
  14px;
  border-radius:
  30px;
  z-index:
  999;
  cursor:
  pointer;
  display:
  flex;
  align-items:
  center;
  gap:
  8px;
  font-size:
  14px;
  box-shadow:
  0
  4px
  12px
  rgba(0,0,0,0.2);
  transition:
  top
  0.3s
  ease;
}
.cart-badge
i
{
  font-size:
  18px;
}
/*
===
Floating
Image
Animation
===
*/
.imgProd.clone
{
  pointer-events:
  none;
  opacity:
  0.7;
  z-index:
  9999;
}
/*
WhatsApp
Floating
Button
*/
/*
WhatsApp
Floating
Button
*/
.float-whatsapp
{
  position:
  fixed;
  bottom:
  90px;
  right:
  15px;
  width:
  56px;
  height:
  56px;
  background-color: #25D366;
  color:
  white;
  font-size:
  24px;
  border-radius:
  50%;
  display:
  flex;
  align-items:
  center;
  justify-content:
  center;
  box-shadow:
  0
  4px
  10px
  rgba(0,
  0,
  0,
  0.3);
  z-index:
  9998;
  transition:
  transform
  0.3s
  ease;
}
.float-whatsapp:hover
{
  transform:
  scale(1.1);
  color:
  white;
}
/*
Scroll
To
Top
Button
*/
.scroll-to-top
{
  position:
  fixed;
  bottom:
  20px;
  right:
  20px;
  background-color:
  #000000;
  color:
  white;
  font-size:
  20px;
  padding:
  10px
  14px;
  border-radius:
  50%;
  box-shadow:
  0
  4px
  12px
  rgba(0,
  0,
  0,
  0.25);
  z-index:
  9999;
  display:
  none;
  cursor:
  pointer;
  transition:
  transform
  0.3s
  ease;
}
.scroll-to-top:hover
{
  transform:
  scale(1.1);
}
#noResults
h4
{
  font-size:
  1.5rem;
  font-weight:
  bold;
  color:
  #ff6b6b;
  animation:
  fadeIn
  0.4s
  ease-in-out;
}
@keyframes
fadeIn
{
  from
  {
    opacity:
    0;
    transform:
    translateY(10px);
  }
  to
  {
    opacity:
    1;
    transform:
    translateY(0);
  }
}
.descProd
{
  font-size:
  0.9rem;
  color:
  #ddd;
  line-height:
  1.4;
  max-height:
  none;
  transition:
  all
  0.3s
  ease;
  margin-bottom:
  5px;
}
.line-clamp
{
  display:
  -webkit-box;
  -webkit-line-clamp:
  2;
  -webkit-box-orient:
  vertical;
  overflow:
  hidden;
  max-height:
  2.8em;
}
.read-toggle
{
  cursor:
  pointer;
  color:
  #000000;
  display:
  inline-block;
  margin-bottom:
  10px;
}
.card
.card-img-top
{
  transition:
  transform
  0.3s
  ease;
}
.card:hover
.card-img-top
{
  transform:
  scale(1.05);
}
.card-text
{
  font-size:
  0.95rem;
  color:
  #444;
}
.img-thumbnail
{
  border:
  2px
  solid
  #e0e0e0;
  transition:
  0.2s
  ease-in-out;
}
.img-thumbnail:hover
{
  border-color:
  #000000;
}
.carousel
.carousel-item
img
{
  border-bottom:
  2px
  solid
  #000000;
  transition:
  transform
  0.3s
  ease;
}
.carousel
.carousel-item
img:hover
{
  transform:
  scale(1.02);
}
.card
.card-body
{
  background-color:
  #f8fff8;
}
.card-title
{
  font-weight:
  600;
}
.card-text
{
  font-size:
  0.95rem;
  color:
  #555;
}
.card
{
  transition:
  transform
  0.3s
  ease;
  border-radius:
  1.2rem;
}
.card:hover
{
  transform:
  translateY(-5px);
}
.card-title
{
  font-weight:
  700;
  font-size:
  1.3rem;
}
.card-text
{
  font-size:
  1rem;
  color:
  #444;
}
.carousel-control-prev-icon,
.carousel-control-next-icon
{
  width:
  2.2rem;
  height:
  2.2rem;
}
/*
=====
SHOW
FARM
UI
ENHANCEMENT
=====
*/
.card.showfarm-card
{
  border-radius:
  1.5rem;
  overflow:
  hidden;
  background-color:
  #f8fff8;
  box-shadow:
  0
  8px
  24px
  rgba(0,
  0,
  0,
  0.2);
  transition:
  transform
  0.3s
  ease,
  box-shadow
  0.3s
  ease;
}
.card.showfarm-card:hover
{
  transform:
  translateY(-8px);
  box-shadow:
  0
  12px
  28px
  rgba(0,
  0,
  0,
  0.3);
}
.card.showfarm-card
.card-title
{
  color:
  #2f7d4f;
  font-size:
  1.3rem;
  font-weight:
  700;
  margin-bottom:
  0.5rem;
}
.card.showfarm-card
.card-text
{
  font-size:
  1rem;
  color:
  #333;
}
.card.showfarm-card
.carousel-inner
{
  height:
  260px;
}
.card.showfarm-card
.carousel-inner
img
{
  object-fit:
  cover;
  height:
  100%;
  width:
  100%;
  transition:
  transform
  0.3s
  ease;
  border-bottom:
  3px
  solid
  #000000;
}
.card.showfarm-card
.carousel-inner
img:hover
{
  transform:
  scale(1.03);
}
.carousel-control-prev-icon,
.carousel-control-next-icon
{
  width:
  2.2rem;
  height:
  2.2rem;
  background-color:
  rgba(0,
  0,
  0,
  0.6);
  border-radius:
  50%;
}
/*
No-image
fallback
block
*/
.showfarm-noimage
{
  height:
  260px;
  background-color:
  #eef0ec;
  color:
  #666;
  display:
  flex;
  align-items:
  center;
  justify-content:
  center;
  font-style:
  italic;
  border-bottom:
  3px
  dashed
  #ccc;
}
/*
Responsive
tweaks
*/
@media
(max-width:
768px)
{
  .card.showfarm-card
  .carousel-inner
  {
    height:
    200px;
  }
}
.showfarm-carousel-inner
{
  height:
  400px
  !important;
}
.showfarm-carousel-inner
.carousel-item
img
{
  height:
  100%
  !important;
  object-fit:
  cover;
  object-position:
  center;
  border-bottom:
  4px
  solid
  #000000;
  transition:
  transform
  0.3s
  ease;
}
.showfarm-carousel-inner
.carousel-item
img:hover
{
  transform:
  scale(1.03);
}
/*
===
Show
Farm
Landscape
Image
Display
===
*/
.showfarm-card
{
  border-radius:
  1.4rem;
  box-shadow:
  0
  10px
  24px
  rgba(0,
  0,
  0,
  0.25);
  overflow:
  hidden;
  transition:
  transform
  0.3s
  ease;
}
.showfarm-card:hover
{
  transform:
  translateY(-6px);
}
.showfarm-card
.card-body
{
  background-color:
  #f8fff8;
}
.showfarm-card
.card-title
{
  font-weight:
  700;
  color:
  #2f7d4f;
  font-size:
  1.3rem;
}
.showfarm-card
.card-text
{
  font-size:
  1rem;
  color:
  #333;
}
.showfarm-landscape-img
{
  width:
  100%;
  height:
  auto;
  object-fit:
  contain;
  border-bottom:
  3px
  solid
  #000000;
}
.showfarm-noimage
{
  width:
  100%;
  height:
  auto;
  aspect-ratio:
  16
  /
  9;
  background-color:
  #eee;
  display:
  flex;
  align-items:
  center;
  justify-content:
  center;
  font-style:
  italic;
  color:
  #666;
}
.carousel-control-prev-icon,
.carousel-control-next-icon
{
  background-color:
  rgba(0,0,0,0.6);
  border-radius:
  50%;
  width:
  2rem;
  height:
  2rem;
}
/*
======
CLIENT
LOGO
SLIDER
======
*/
@keyframes
scroll
{
  0%
  {
    transform:
    translateX(0);
  }
  100%
  {
    transform:
    translateX(calc(-250px
    *
    7));
  }
}
.slider
{
  height:
  100px;
  overflow:
  hidden;
  position:
  relative;
  max-width:
  1100px;
  margin:
  auto;
  background:
  transparent;
}
.slider::before,
.slider::after
{
  content:
  "";
  position:
  absolute;
  width:
  100px;
  height:
  100px;
  top:
  0;
  z-index:
  2;
  background:
  linear-gradient(to
  right,
  #f8f9fa
  0%,
  transparent
  100%);
}
.slider::after
{
  right:
  0;
  transform:
  rotateZ(180deg);
}
.slider::before
{
  left:
  0;
}
.slide-track
{
  display:
  flex;
  width:
  calc(250px
  *
  14);
  /*
  7
  logos
  duplicated
  */
  animation:
  scroll
  25s
  linear
  infinite;
}
.slide
{
  width:
  250px;
  height:
  100px;
  display:
  flex;
  align-items:
  center;
  justify-content:
  center;
}
.slide
img
{
  height:
  60px;
  object-fit:
  contain;
  filter:
  grayscale(100%);
  transition:
  filter
  0.3s
  ease;
}
.slide
img:hover
{
  filter:
  grayscale(0%);
}
/*
======
GENERAL
======
*/
body
{
  font-family:
  'Segoe
  UI',
  sans-serif;
  background-color: #ffa559;
  color: #000000;
  margin:
  0;
  padding:
  0;
  scroll-behavior:
  smooth;
}
h1,
h2,
h3,
h4,
h5
{
  font-weight:
  bold;
  color: #000000;
}
a
{
  text-decoration:
  none;
  color:
  #000000;
  transition:
  color
  0.3s
  ease;
}
a:hover
{
  color:
  #333333;
}
img
{
  max-width:
  100%;
  display:
  block;
}
section
{
  padding:
  80px
  0;
}
.text-white-muted
{
  color:
  rgba(255,
  255,
  255,
  0.85);
}
/*
======
NAVBAR
======
*/
.custom-navbar
{
  background-color:
  rgba(16,
  40,
  32,
  0.95);
  backdrop-filter:
  blur(5px);
}
.custom-navbar.scrolled
{
  background-color:
  #ff6b35;
}
.obf-brand-text
{
  font-size:
  1.5rem;
  font-weight:
  bold;
  color:
  #fff;
  text-shadow:
  0
  0
  6px
  rgba(84,
  227,
  70,
  0.4);
}
.navbar-nav
.nav-link
{
  color:
  #fff
  !important;
  position:
  relative;
  font-size:
  15px;
  padding-bottom:
  4px;
}
.navbar-nav
.nav-link.nav-underline::after
{
  content:
  '';
  position:
  absolute;
  left:
  10%;
  bottom:
  0;
  width:
  0%;
  height:
  2px;
  background-color:
  #fff;
  transition:
  width
  0.3s
  ease;
}
.navbar-nav
.nav-link.nav-underline:hover::after
{
  width:
  80%;
}
/*
======
HERO
======
*/
.obf-hero
{
  background-image:
  url('../assets/images/hero-bg.jpg');
  background-size:
  cover;
  background-position:
  center;
  padding:
  140px
  0;
  position:
  relative;
  color:
  #000000;
}
.hero-overlay
{
  position:
  absolute;
  top:
  0;
  left:
  0;
  width:
  100%;
  height:
  100%;
  background:
  linear-gradient(to
  right,
  rgba(16,
  40,
  32,
  0.95),
  rgba(16,
  40,
  32,
  0.4));
  z-index:
  1;
}
.highlight-word
{
  color:
  #000000;
  text-shadow:
  0
  0
  10px
  rgba(84,
  227,
  70,
  0.6);
}
.obf-hero
.container
{
  position:
  relative;
  z-index:
  2;
}
/*
======
BUTTONS
======
*/
.btn-primary
{
  background-color:
  #000000;
  border:
  none;
  color:
  #FFA559;
}
.btn-primary:hover
{
  background-color:
  #3bcc2e;
  box-shadow:
  0
  0
  10px
  rgba(84,
  227,
  70,
  0.3);
}
/*
/* ===== VIDEO BACKGROUND SECTION ===== */
.impact-video-section {
    position: relative;
    width: 100%;
    max-width: 900px;  /* medium size container */
    height: 500px;       /* medium height, adjust as needed */
    margin: 0 auto;      /* center in page */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 12px; /* optional: rounded corners */
}

.impact-video-section .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;  /* keep video full without stretching */
    z-index: 0;
}

.impact-video-section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 40, 32, 0.6); /* transparent overlay */
    z-index: 1;
}

.impact-video-section .z-2 {
    position: relative;
    z-index: 2;
    padding: 20px;
}

======
SLIDER
======
*/
@keyframes
scroll
{
  0%
  {
    transform:
    translateX(0);
  }
  100%
  {
    transform:
    translateX(calc(-250px
    *
    14));
  }
}
.slider
{
  background:
  transparent;
  overflow:
  hidden;
  position:
  relative;
  max-width:
  1100px;
  margin:
  auto;
}
.slide-track
{
  display:
  flex;
  animation:
  scroll
  30s
  linear
  infinite;
}
.slide
{
  width:
  250px;
  height:
  100px;
  display:
  flex;
  align-items:
  center;
  justify-content:
  center;
}
.slide
img
{
  height:
  60px;
  object-fit:
  contain;
  filter:
  grayscale(100%);
  transition:
  filter
  0.3s
  ease;
}
.slide
img:hover
{
  filter:
  grayscale(0%);
}
/*
======
COUNTER
======
*/
.counter
{
  font-size:
  3rem;
  font-weight:
  bold;
  color:
  #000000;
}
.counter
+
p
{
  margin-top:
  10px;
}
/*
======
FAQ
======
*/
.accordion-button
{
  background-color:
  #FF6B35;
  color:
  #000000;
}
.accordion-button:not(.collapsed)
{
  background-color:
  #333333;
  color:
  #ff6b35;
}
.accordion-body
{
  background-color:
  #ff6b35;
  color:
  #000000;
}
.accordion-button
i
{
  transition:
  transform
  0.3s
  ease;
}
.accordion-button[aria-expanded="true"]
i
{
  transform:
  rotate(90deg);
}
/*
======
FLOATING
LEAVES
======
*/
.leaf
{
  position:
  absolute;
  width:
  60px;
  animation:
  floatLeaf
  12s
  infinite
  ease-in-out;
  opacity:
  0.8;
  pointer-events:
  none;
}
.leaf1
{
  top:
  10%;
  left:
  5%;
  animation-delay:
  0s;
}
.leaf2
{
  top:
  20%;
  right:
  10%;
  animation-delay:
  4s;
}
.leaf3
{
  bottom:
  5%;
  left:
  20%;
  animation-delay:
  8s;
}
@keyframes
floatLeaf
{
  0%
  {
    transform:
    translateY(0)
    rotate(0deg);
  }
  50%
  {
    transform:
    translateY(-40px)
    rotate(180deg);
  }
  100%
  {
    transform:
    translateY(0)
    rotate(360deg);
  }
}
/*
======
SCROLL
TO
TOP
======
*/
.scroll-to-top
{
  position:
  fixed;
  bottom:
  30px;
  right:
  30px;
  background-color:
  #333333;
  color:
  #fff;
  width:
  42px;
  height:
  42px;
  border-radius:
  50%;
  display:
  none;
  align-items:
  center;
  justify-content:
  center;
  font-size:
  24px;
  z-index:
  999;
  transition:
  background
  0.3s
  ease;
}
.scroll-to-top:hover
{
  background-color:
  #13856d;
}
/*
======
FOOTER
======
*/
.footer-obf
{
  background-color:
  #FF6B35;
  color:
  #000000;
}
.footer-obf
a
{
  color:
  #000000;
}
.footer-obf
a:hover
{
  color:
  #333333;
}
.footer-obf
ul
li
i
{
  color:
  #333333;
}
.footer-logo-wrapper
{
  display:
  flex;
  justify-content:
  flex-end;
}
.footer-logo
{
  width:
  100px;
  border-radius:
  50%;
  background-color:
  #FF6B35;
  padding:
  10px;
}
.footer-obf
hr
{
  opacity:
  0.2;
}
/*
======
RESPONSIVE
======
*/
@media
(max-width:
768px)
{
  .obf-hero
  {
    padding:
    80px
    0;
    text-align:
    center;
  }
  .footer-logo-wrapper
  {
    justify-content:
    center;
  }
  .counter
  {
    font-size:
    2rem;
  }
  .slide
  {
    width:
    180px;
  }
  .impact-video-section
  {
    height:
    auto;
    padding:
    60px
    20px;
  }
}
/*
======
CLIENT
LOGO
SLIDER
======
*/
@keyframes
scroll
{
  0%
  {
    transform:
    translateX(0);
  }
  100%
  {
    transform:
    translateX(calc(-250px
    *
    7));
  }
}
.slider
{
  height:
  100px;
  overflow:
  hidden;
  position:
  relative;
  max-width:
  1100px;
  margin:
  auto;
  background:
  transparent;
}
.slider::before,
.slider::after
{
  content:
  "";
  position:
  absolute;
  width:
  100px;
  height:
  100px;
  top:
  0;
  z-index:
  2;
  background:
  linear-gradient(to
  right,
  #f8f9fa
  0%,
  transparent
  100%);
}
.slider::after
{
  right:
  0;
  transform:
  rotateZ(180deg);
}
.slider::before
{
  left:
  0;
}
.slide-track
{
  display:
  flex;
  width:
  calc(250px
  *
  14);
  /*
  7
  logos
  duplicated
  */
  animation:
  scroll
  25s
  linear
  infinite;
}
.slide
{
  width:
  250px;
  height:
  100px;
  display:
  flex;
  align-items:
  center;
  justify-content:
  center;
}
.slide
img
{
  height:
  60px;
  object-fit:
  contain;
  filter:
  grayscale(100%);
  transition:
  filter
  0.3s
  ease;
}
.slide
img:hover
{
  filter:
  grayscale(0%);
}
/*
====
LOGO
SLIDER
====
*/
.obf-logo-slider
{
  overflow:
  hidden;
  position:
  relative;
}
.logo-track
{
  display:
  flex;
  width:
  calc(200px
  *
  14);
  animation:
  scrollLogo
  30s
  linear
  infinite;
}
.logo-slide
{
  width:
  200px;
  padding:
  0
  20px;
}
.logo-slide
img
{
  width:
  100%;
  height:
  auto;
  opacity:
  0.6;
  transition:
  transform
  0.3s
  ease,
  opacity
  0.3s
  ease;
}
.logo-slide
img:hover
{
  opacity:
  1;
  transform:
  scale(1.1);
}
@keyframes
scrollLogo
{
  0%
  {
    transform:
    translateX(0);
  }
  100%
  {
    transform:
    translateX(-50%);
  }
}
/*
=====
FINAL
ABOUT
PAGE
THEME
MATCH
FIX
=====
*/
.about-hero-section
{
  background-color:
  #ff6b35;
  padding:
  80px
  0;
  color:
  #000000;
}
.about-hero-section
h1
{
  font-size:
  2.8rem;
  color:
  #000000;
  font-weight:
  bold;
}
.about-hero-section
.lead,
.about-hero-section
ul
li
{
  color:
  #e0fbe5;
  font-size:
  1.1rem;
}
.about-hero-section
.btn-success
{
  background-color:
  #000000;
  border:
  none;
  font-weight:
  bold;
  color:
  #ff6b35;
  padding:
  12px
  28px;
  border-radius:
  30px;
}
.about-hero-section
.btn-success:hover
{
  background-color:
  #333333;
  box-shadow:
  0
  0
  10px
  rgba(84,
  227,
  70,
  0.4);
}
/*
About
Page
Right
Image
Box
*/
.about-hero-section
.position-relative
{
  border-radius:
  20px;
  overflow:
  hidden;
  box-shadow:
  0
  6px
  18px
  rgba(0,
  0,
  0,
  0.3);
}
/*
Icons
on
Image
*/
.about-hero-section
.position-absolute
{
  width:
  44px;
  height:
  44px;
  background-color:
  #c8fadd;
  color:
  #2f7d4f;
}
/*
Differentiator
Cards
*/
section.bg-white
.border
{
  background-color:
  #FF6B35;
  border:
  none;
  color:
  #000000;
  border-radius:
  18px;
  transition:
  transform
  0.3s
  ease;
}
section.bg-white
.border:hover
{
  transform:
  translateY(-6px);
  box-shadow:
  0
  10px
  30px
  rgba(0,
  0,
  0,
  0.2);
}
section.bg-white
.bi
{
  color:
  #000000;
}
/*
Vision
&
Mission
*/
section.bg-light
.bg-white
{
  background-color:
  #FF6B35;
  border-left:
  5px
  solid
  #000000;
  color:
  #000000;
  border-radius:
  14px;
}
/*
Company
Info
*/
section
.bg-light
{
  background-color:
  #ff6b35;
}
section
.bg-light
ul
li
{
  color:
  #e0fbe5;
}
.contact-card
{
  background-color:
  #FF6B35;
  color:
  #000000;
  border-left:
  4px
  solid
  #000000;
  border-radius:
  14px;
}
/*
Section
Headings
*/
section
h2,
section
h3
{
  color: #000;
  font-weight:
  bold;
}
/*
Google
Map
Frame
*/
.map-container
iframe
{
  border-radius:
  16px;
  box-shadow:
  0
  8px
  20px
  rgba(0,
  0,
  0,
  0.2);
}
/*
Responsive
Adjustments
*/
@media
(max-width:
768px)
{
  .about-hero-section
  {
    padding:
    60px
    20px;
    text-align:
    center;
  }
  .about-hero-section
  .btn
  {
    display:
    inline-block;
    margin-top:
    20px;
  }
}
.card
.wrapper
{
  height:
  470px
  !important;
  /*
  Increased
  for
  full
  visibility
  */
}