/* =========================================================
   AGRONIKA COMPANY FOR FEEDS AND PACKING TRADING - F.Z.E
   Industrial agri-commodity design system
   Palette derived from company logo (navy + leaf green)
   ========================================================= */

:root{
  --primary-color:#0B3655;
  --primary-light:#17527D;
  --secondary-color:#5C8740;
  --secondary-light:#7BA85E;
  --accent-color:#8FBE4A;
  --accent-dark:#6E9A33;

  --sand:#F4F6F1;
  --line:#E1E6DC;
  --ink:#132430;
  --muted:#5D6B72;
}

*{box-sizing:border-box}

html,body{
  overflow-x:hidden;
  max-width:100%;
}

body{
  font-family:'Karla',system-ui,-apple-system,sans-serif;
  color:var(--muted);
  font-size:16px;
  line-height:1.75;
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
  font-family:'Archivo',system-ui,sans-serif;
  color:var(--primary-color);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.2;
}

a{text-decoration:none;transition:color .2s ease}
img{max-width:100%;height:auto}

/* ---------- Layout rhythm ---------- */
.section-padding{padding:96px 0}
.bg-light-soft{background:var(--sand)}

.section-tag{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:'Archivo',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--secondary-color);
  margin-bottom:14px;
}
.section-tag::before{
  content:"";
  width:28px;
  height:2px;
  background:var(--secondary-color);
  display:inline-block;
}
.text-center .section-tag::after{
  content:"";
  width:28px;
  height:2px;
  background:var(--secondary-color);
  display:inline-block;
}

.section-title{
  font-size:2.15rem;
  margin-bottom:20px;
}
@media (max-width:767.98px){
  .section-padding{padding:64px 0}
  .section-title{font-size:1.65rem}
}

/* ---------- Buttons ---------- */
.btn-brand,
.btn-brand-outline,
.btn-brand-secondary{
  border-radius:3px;
  font-family:'Archivo',sans-serif;
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.03em;
  padding:12px 26px;
  border:2px solid transparent;
  transition:all .22s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-brand{
  background:var(--secondary-color);
  border-color:var(--secondary-color);
  color:#fff;
}
.btn-brand:hover,.btn-brand:focus{
  background:var(--accent-dark);
  border-color:var(--accent-dark);
  color:#fff;
}
.btn-brand-outline{
  background:transparent;
  border-color:#fff;
  color:#fff;
}
.btn-brand-outline:hover{
  background:#fff;
  color:var(--primary-color);
}
.btn-brand-secondary{
  background:var(--primary-color);
  border-color:var(--primary-color);
  color:#fff;
}
.btn-brand-secondary:hover{
  background:var(--primary-light);
  border-color:var(--primary-light);
  color:#fff;
}
.btn-lg{padding:14px 32px;font-size:.95rem}

/* ---------- Top bar ---------- */
.top-bar{
  background:var(--primary-color);
  color:rgba(255,255,255,.82);
  font-size:.83rem;
  padding:9px 0;
  letter-spacing:.02em;
}
.top-bar a{color:rgba(255,255,255,.82)}
.top-bar a:hover{color:var(--accent-color)}
.top-bar i{color:var(--accent-color);margin-right:8px}
@media (max-width:767.98px){.top-bar{display:none}}

/* ---------- Navbar ---------- */
.main-navbar{
  background:#fff;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(11,54,85,.04);
  transition:padding .25s ease, box-shadow .25s ease;
}
.main-navbar.scrolled{
  padding:7px 0;
  box-shadow:0 6px 22px rgba(11,54,85,.10);
}
.main-navbar .navbar-brand img{
  height:64px;
  width:320px;
  transition:height .25s ease;
}
.main-navbar.scrolled .navbar-brand img{height:46px}

.main-navbar .nav-link{
  font-family:'Archivo',sans-serif;
  font-weight:600;
  font-size:.9rem;
  color:var(--primary-color);
  padding:10px 16px !important;
  position:relative;
  letter-spacing:.02em;
}
.main-navbar .nav-link::after{
  content:"";
  position:absolute;
  left:16px;right:16px;bottom:2px;
  height:2px;
  background:var(--secondary-color);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.main-navbar .nav-link:hover::after,
.main-navbar .nav-link.active::after{transform:scaleX(1)}
.main-navbar .nav-link.active{color:var(--secondary-color)}

.main-navbar .btn-brand{padding:10px 20px;font-size:.85rem}

.navbar-toggler{
  border:1px solid var(--line);
  border-radius:3px;
  padding:6px 10px;
}
.navbar-toggler:focus{box-shadow:none}
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230B3655' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width:991.98px){
  .main-navbar .navbar-collapse{
    flex-basis:100%;
    padding-top:10px;
    border-top:1px solid var(--line);
    margin-top:10px;
  }
  .main-navbar .nav-link{padding:10px 2px !important}
  .main-navbar .nav-link::after{left:2px;right:auto;width:26px}
  .main-navbar .navbar-brand img{height:44px}
}

/* ---------- Hero slider ---------- */
.hero-slider .carousel-item{height:640px}
.hero-slide{
  height:640px;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  position:relative;
}
.hero-slide::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(100deg,
      rgba(11,54,85,.96) 0%,
      rgba(11,54,85,.90) 34%,
      rgba(11,54,85,.55) 58%,
      rgba(11,54,85,.15) 100%);
}
.hero-slide .container{position:relative;z-index:2;max-width:1200px}
.hero-slide .hero-tag{
  display:inline-block;
  font-family:'Archivo',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#fff;
  background:var(--secondary-color);
  padding:7px 16px;
  margin-bottom:22px;
}
.hero-slide h1{
  color:#fff;
  font-size:3.15rem;
  max-width:720px;
  margin-bottom:18px;
}
.hero-slide p{
  color:rgba(255,255,255,.86);
  max-width:600px;
  font-size:1.05rem;
  margin-bottom:30px;
}
.hero-slider .carousel-indicators{
  margin-bottom:34px;
  justify-content:flex-start;
  padding-left:calc((100vw - 1140px)/2 + 12px);
}
.hero-slider .carousel-indicators [data-bs-target]{
  width:44px;height:4px;border-radius:0;
  background:rgba(255,255,255,.4);
  border:0;opacity:1;
  transition:background .25s ease;
}
.hero-slider .carousel-indicators .active{background:var(--accent-color)}
.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next{width:6%;opacity:.55}
.hero-slider .carousel-control-prev:hover,
.hero-slider .carousel-control-next:hover{opacity:1}

@media (max-width:1199.98px){
  .hero-slider .carousel-indicators{padding-left:28px}
}
@media (max-width:991.98px){
  .hero-slider .carousel-item,.hero-slide{height:520px}
  .hero-slide h1{font-size:2.3rem}
}
@media (max-width:575.98px){
  .hero-slider .carousel-item,.hero-slide{height:470px}
  .hero-slide h1{font-size:1.85rem}
  .hero-slide p{font-size:.95rem}
  .hero-slide .btn{margin-bottom:10px}
}

/* ---------- About blocks ---------- */
.about-img-wrap{
  position:relative;
  border-radius:4px;
  overflow:visible;
}
.about-img-wrap img{
  width:100%;
  border-radius:4px;
  display:block;
  position:relative;
  z-index:2;
}
.about-img-wrap::before{
  content:"";
  position:absolute;
  left:-16px;top:-16px;
  width:120px;height:120px;
  border-left:4px solid var(--secondary-color);
  border-top:4px solid var(--secondary-color);
  z-index:1;
}
.badge-float{
  position:absolute;
  right:-14px;bottom:-22px;
  background:var(--primary-color);
  color:#fff;
  padding:20px 26px;
  border-radius:3px;
  z-index:3;
  font-family:'Archivo',sans-serif;
  font-size:.82rem;
  line-height:1.35;
  letter-spacing:.04em;
  text-transform:uppercase;
  max-width:200px;
  box-shadow:0 14px 30px rgba(11,54,85,.22);
}
.badge-float .num{
  display:block;
  font-size:1.85rem;
  font-weight:700;
  color:var(--accent-color);
  letter-spacing:0;
}
@media (max-width:575.98px){
  .badge-float{right:8px;bottom:-16px;padding:14px 18px}
  .about-img-wrap::before{display:none}
}

.check-list{list-style:none;padding:0;margin:0}
.check-list li{
  position:relative;
  padding-left:32px;
  margin-bottom:12px;
  color:var(--ink);
  font-weight:500;
}
.check-list li::before{
  content:"\F26E";
  font-family:'bootstrap-icons';
  position:absolute;
  left:0;top:0;
  color:var(--secondary-color);
  font-size:1.05rem;
}

/* ---------- Feature cards (Why Choose Us) ---------- */
.feature-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:4px;
  padding:34px 30px 30px;
  height:100%;
  position:relative;
  transition:border-color .25s ease, transform .25s ease;
}
.feature-card::before{
  content:"";
  position:absolute;
  top:-1px;left:-1px;
  height:3px;width:56px;
  background:var(--secondary-color);
  transition:width .3s ease;
}
.feature-card:hover{
  border-color:var(--secondary-light);
  transform:translateY(-4px);
}
.feature-card:hover::before{width:calc(100% + 2px)}
.feature-card .icon-wrap{
  width:52px;height:52px;
  background:rgba(92,135,64,.10);
  border-radius:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
}
.feature-card .icon-wrap i{
  font-size:1.45rem;
  color:var(--secondary-color);
}
.feature-card h5{
  font-size:1.08rem;
  margin-bottom:10px;
}
.feature-card p{margin:0;font-size:.94rem}

/* ---------- CTA ---------- */
.cta-section{
  background-size:cover;
  background-position:center;
  background-attachment:scroll;
  position:relative;
  color:#fff;
}
.cta-section::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,54,85,.92),rgba(11,54,85,.86));
}
.cta-section .container{position:relative;z-index:2}
.cta-section h2{
  color:#fff;
  font-size:2rem;
  max-width:760px;
  margin:0 auto 14px;
}
.cta-section p{
  color:rgba(255,255,255,.85);
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
}

/* ---------- Page hero ---------- */
.page-hero{
  background-size:cover;
  background-position:center;
  position:relative;
  padding:96px 0 84px;
  text-align:left;
}
.page-hero::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,54,85,.93) 0%,rgba(11,54,85,.78) 100%);
}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{
  color:#fff;
  font-size:2.5rem;
  margin-bottom:12px;
  padding-bottom:14px;
  position:relative;
  display:inline-block;
}
.page-hero h1::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:64px;height:3px;
  background:var(--accent-color);
}
.breadcrumb-custom{
  color:rgba(255,255,255,.72);
  font-size:.88rem;
  letter-spacing:.03em;
}
.breadcrumb-custom a{color:var(--accent-color)}
.breadcrumb-custom a:hover{color:#fff}
@media (max-width:767.98px){
  .page-hero{padding:64px 0 56px}
  .page-hero h1{font-size:1.8rem}
}

/* ---------- Mission / Vision ---------- */
.mv-card{
  background:var(--primary-color);
  color:rgba(255,255,255,.82);
  padding:44px 38px;
  border-radius:4px;
  height:100%;
  position:relative;
  overflow:hidden;
}
.mv-card:nth-child(1){background:var(--primary-color)}
.mv-card i{
  font-size:2rem;
  color:var(--accent-color);
  display:block;
  margin-bottom:18px;
}
.mv-card h4{
  color:#fff;
  font-size:1.3rem;
  margin-bottom:14px;
}
.mv-card p{margin:0}
.mv-card::after{
  content:"";
  position:absolute;
  right:-60px;bottom:-60px;
  width:180px;height:180px;
  border:2px solid rgba(143,190,74,.18);
  border-radius:50%;
}
.mv-card.mv-alt{
  background:var(--secondary-color);
  color:rgba(255,255,255,.9);
}
.mv-card.mv-alt i{color:#fff}
.mv-card.mv-alt::after{border-color:rgba(255,255,255,.2)}

/* ---------- Core values / commitments ---------- */
.value-pill{
  background:#fff;
  border:1px solid var(--line);
  border-left:3px solid var(--secondary-color);
  border-radius:3px;
  padding:28px 26px;
  height:100%;
  transition:border-left-color .25s ease, background .25s ease;
}
.value-pill:hover{
  border-left-color:var(--accent-color);
  background:#fff;
}
.value-pill i{
  font-size:1.5rem;
  color:var(--secondary-color);
  margin-bottom:14px;
  display:block;
}
.value-pill h6{
  font-size:1rem;
  margin-bottom:8px;
  font-family:'Archivo',sans-serif;
  font-weight:700;
  color:var(--primary-color);
}
.value-pill p{margin:0;font-size:.92rem}

/* ---------- Product cards ---------- */
.category-card-link{display:block;height:100%}
.product-card,
.item-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  height:100%;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.product-card:hover,
.item-card:hover{
  border-color:var(--secondary-light);
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(11,54,85,.09);
}
.product-img,
.item-img{
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--sand);
}
.product-img img,
.item-img img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.product-card:hover .product-img img,
.item-card:hover .item-img img{transform:scale(1.06)}
.product-body,
.item-body{
  padding:20px 22px;
  border-top:1px solid var(--line);
  position:relative;
}
.product-body h5,
.item-body h5{
  font-size:1.02rem;
  margin:0;
  color:var(--primary-color);
  transition:color .2s ease;
}
.product-card:hover .product-body h5,
.item-card:hover .item-body h5{color:var(--secondary-color)}

/* ---------- Contact ---------- */
.contact-info-card{
  background:var(--primary-color);
  color:rgba(255,255,255,.8);
  border-radius:4px;
  padding:38px 32px;
  height:100%;
}
.contact-info-card h4{
  color:#fff;
  font-size:1.25rem;
  margin-bottom:26px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.contact-info-item{
  display:flex;
  gap:16px;
  align-items:flex-start;
  margin-bottom:24px;
}
.contact-info-item:last-child{margin-bottom:0}
.ci-icon{
  flex:0 0 44px;
  width:44px;height:44px;
  background:rgba(143,190,74,.16);
  border-radius:3px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ci-icon i{color:var(--accent-color);font-size:1.1rem}
.ci-text{display:flex;flex-direction:column;word-break:break-word}
.ci-text small{
  font-family:'Archivo',sans-serif;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-color);
  margin-bottom:3px;
}
.ci-text span,.ci-text a{color:#fff;font-size:.96rem;line-height:1.5}
.ci-text a:hover{color:var(--accent-color)}

.contact-form-wrap{
  background:#fff;
  border:1px solid var(--line);
  border-radius:4px;
  padding:38px 34px;
  height:100%;
}
.contact-form-wrap h4{font-size:1.25rem}
.contact-form-wrap .form-label{
  font-family:'Archivo',sans-serif;
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--primary-color);
  margin-bottom:6px;
}
.contact-form-wrap .row{--bs-gutter-x:1.25rem}
.contact-form-wrap .col-md-6,
.contact-form-wrap .col-12{margin-bottom:18px;padding-right:.625rem;padding-left:.625rem}
.contact-form-wrap .form-control{
  border:1px solid var(--line);
  border-radius:3px;
  padding:11px 14px;
  font-size:.95rem;
  background:#FCFDFB;
}
.contact-form-wrap .form-control:focus{
  border-color:var(--secondary-color);
  box-shadow:0 0 0 3px rgba(92,135,64,.12);
  background:#fff;
}
@media (max-width:767.98px){
  .contact-form-wrap,.contact-info-card{padding:26px 22px}
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--primary-color);
  color:rgba(255,255,255,.68);
  font-size:.94rem;
}
.footer-top{padding:70px 0 56px}
.footer-logo{
  height:76px;
  width:420px;
  margin-bottom:20px;
  display:block;
}
.site-footer h5{
  color:#fff;
  font-size:1.02rem;
  margin-bottom:22px;
  padding-bottom:12px;
  position:relative;
  font-family:'Archivo',sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.site-footer h5::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:36px;height:2px;
  background:var(--accent-color);
}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer ul li{margin-bottom:12px;display:flex;align-items:flex-start}
.site-footer ul li i{color:var(--accent-color);margin-top:4px}
.site-footer a{color:rgba(255,255,255,.68)}
.site-footer a:hover{color:var(--accent-color)}
.site-footer p{margin:0;max-width:420px}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding:20px 0;
  font-size:.86rem;
  color:rgba(255,255,255,.55);
}
.footer-bottom a{color:var(--accent-color)}
@media (max-width:767.98px){
  .footer-top{padding:48px 0 36px}
  .footer-logo{height:46px}
}

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed;
  right:22px;bottom:22px;
  width:44px;height:44px;
  background:var(--secondary-color);
  color:#fff;
  border-radius:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:all .25s ease;
  z-index:900;
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--primary-color);color:#fff}