/* ============================================================
   EGR59 AGRO FOODS — main.css  v2.0
   Fixed: Header, Mega Menu, Icons, Responsive, All Components
   ============================================================ */

/* ---- TOKENS ---- */
:root {
   --green: #26773C;
   --green-dark: #1d5c2e;
   --green-lt: #e8f5e9;
   --green2: #8EB03E;
   --yellow: #F3E90F;
   --orange: #FCB614;
   --white: #ffffff;
   --light: #f8f9fa;
   --border: #e9ecef;
   --muted: #adb5bd;
   --dark: #1F2937;
   --body-clr: #4B5563;
   --dark-bg: #111827;
   --success: #22C55E;
   --error: #EF4444;
   --font: 'Poppins', sans-serif;
   --rad-sm: 8px;
   --rad-md: 12px;
   --rad-lg: 16px;
   --rad-xl: 24px;
   --rad-full: 9999px;
   --sh-sm: 0 2px 8px rgba(0, 0, 0, .08);
   --sh-md: 0 4px 20px rgba(0, 0, 0, .10);
   --sh-lg: 0 10px 40px rgba(0, 0, 0, .12);
   --sh-green: 0 6px 24px rgba(38, 119, 60, .3);
   --trans: 0.28s ease;
   --trans-fast: 0.15s ease;
   --nav-h: 70px;
   --topbar-h: 40px;
}

/* ---- RESET ---- */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

html {
   scroll-behavior: smooth;
   font-size: 16px
}

body {
   font-family: var(--font);
   font-size: 1rem;
   line-height: 1.8;
   color: var(--body-clr);
   background: #fff;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden
}

body.nav-open {
   overflow: hidden
}

img,
video {
   display: block;
   max-width: 100%;
   height: auto
}

a {
   color: var(--green);
   text-decoration: none;
   transition: color var(--trans-fast)
}

a:hover {
   color: var(--green-dark)
}

ul,
ol {
   list-style: none;
   padding: 0;
   margin: 0
}

address {
   font-style: normal
}

button {
   cursor: pointer;
   font-family: inherit
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font);
   font-weight: 700;
   line-height: 1.25;
   color: var(--dark);
   margin-bottom: 0
}

h1 {
   font-size: clamp(2rem, 5vw, 3.5rem)
}

h2 {
   font-size: clamp(1.6rem, 3.5vw, 2.4rem)
}

h3 {
   font-size: clamp(1rem, 2vw, 1.25rem)
}

p {
   margin-bottom: 0
}

::selection {
   background: var(--green);
   color: #fff
}

:focus-visible {
   outline: 3px solid var(--green);
   outline-offset: 3px;
   border-radius: var(--rad-sm)
}

::-webkit-scrollbar {
   width: 6px
}

::-webkit-scrollbar-track {
   background: var(--light)
}

::-webkit-scrollbar-thumb {
   background: var(--green);
   border-radius: var(--rad-full)
}

/* ---- PAGE LOADER ---- */
#page-loader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   height: 100dvh;
   background: #fff;
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: opacity .5s, visibility .5s
}

#page-loader.loaded {
   opacity: 0;
   visibility: hidden;
   pointer-events: none
}

.loader-inner {
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px
}

.loader-inner img {
   width: 150px;
   animation: lpulse 1.5s ease-in-out infinite
}

.loader-brand-text {
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--green);
   letter-spacing: .05em
}

@keyframes lpulse {

   0%,
   100% {
      opacity: 1;
      transform: scale(1)
   }

   50% {
      opacity: .7;
      transform: scale(.95)
   }
}

.loader-bar {
   width: 200px;
   height: 4px;
   background: var(--border);
   border-radius: var(--rad-full);
   overflow: hidden
}

.loader-progress {
   display: block;
   height: 100%;
   width: 0;
   background: linear-gradient(90deg, var(--green), var(--green2));
   border-radius: var(--rad-full);
   animation: lbar 1.8s ease forwards
}

@keyframes lbar {
   0% {
      width: 0
   }

   60% {
      width: 70%
   }

   100% {
      width: 100%
   }
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
   position: relative;
   z-index: 500
}

/* Top Bar */
.header-topbar {
   background: var(--dark);
   height: var(--topbar-h);
   display: flex;
   align-items: center;
   padding-top: 4px
}

.topbar-item {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: .8125rem;
   color: rgba(255, 255, 255, .7)
}

.topbar-item svg {
   color: var(--green2);
   flex-shrink: 0
}

.topbar-item a {
   color: rgba(255, 255, 255, .7)
}

.topbar-item a:hover {
   color: var(--orange)
}

.topbar-tag {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: .8125rem;
   font-weight: 600;
   color: var(--yellow);
   background: rgba(243, 233, 15, .08);
   padding: 3px 12px;
   border-radius: var(--rad-full);
   border: 1px solid rgba(243, 233, 15, .2)
}

.topbar-social {
   display: flex;
   gap: 4px
}

.topbar-social a {
   width: 28px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, .6);
   border: 1px solid rgba(255, 255, 255, .15);
   border-radius: 50%;
   transition: all var(--trans-fast)
}

.topbar-social a:hover {
   background: var(--green);
   border-color: var(--green);
   color: #fff
}

/* ---- MAIN NAV ---- */
.main-nav {
   background: #fff;
   border-bottom: 1px solid var(--border);
   padding: 14px 0;
   transition: all var(--trans)
}

/* Sticky */
.site-header.is-sticky .main-nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   box-shadow: var(--sh-md);
   background: rgba(255, 255, 255, .97);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   animation: slideDown .3s ease;
   padding: 8px 0
}

.site-header.is-sticky .header-topbar {
   display: none !important
}

@keyframes slideDown {
   from {
      transform: translateY(-100%);
      opacity: 0
   }

   to {
      transform: translateY(0);
      opacity: 1
   }
}

/* Logo */
.site-logo {
   display: flex;
   align-items: center;
   padding: 0 !important;
   margin-right: 24px
}

.logo-img {
   height: 58px;
   width: auto;
   object-fit: contain;
   transition: all var(--trans-fast)
}

.site-header.is-sticky .logo-img {
   height: 46px
}

.logo-text-fallback {
   font-size: 1.1rem;
   font-weight: 800;
   color: var(--green);
   letter-spacing: .02em
}

/* Custom hamburger */
.custom-toggler {
   display: flex;
   flex-direction: column;
   gap: 5px;
   width: 40px;
   height: 40px;
   padding: 9px 8px;
   border: 1px solid var(--border);
   border-radius: var(--rad-sm);
   background: none;
   cursor: pointer;
   transition: all var(--trans-fast)
}

.custom-toggler span {
   display: block;
   height: 2px;
   background: var(--dark);
   border-radius: var(--rad-full);
   transition: all var(--trans)
}

.custom-toggler:focus {
   box-shadow: none
}

.custom-toggler[aria-expanded="true"] span:nth-child(1) {
   transform: translateY(7px) rotate(45deg)
}

.custom-toggler[aria-expanded="true"] span:nth-child(2) {
   opacity: 0;
   transform: scaleX(0)
}

.custom-toggler[aria-expanded="true"] span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg)
}

.custom-toggler:hover {
   background: var(--green-lt);
   border-color: var(--green)
}

.custom-toggler:hover span {
   background: var(--green)
}

/* Nav links */
.navbar-nav .nav-link {
   font-size: .9375rem;
   font-weight: 500;
   color: var(--dark) !important;
   padding: 8px 14px !important;
   border-radius: var(--rad-sm);
   transition: all var(--trans-fast);
   display: flex;
   align-items: center;
   gap: 4px
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
   color: var(--green) !important;
   background: var(--green-lt)
}

.navbar-nav .nav-link.dropdown-toggle::after {
   display: none
}

.navbar-nav .nav-link.dropdown-toggle {
   gap: 6px
}

.navbar-nav .nav-link.dropdown-toggle::before {
   content: '▾';
   font-size: .7rem;
   transition: transform var(--trans);
   display: inline-block
}

.nav-item.dropdown.show>.nav-link.dropdown-toggle::before {
   transform: rotate(180deg)
}

/* Nav right */
.nav-right {
   flex-shrink: 0
}

.btn-icon-nav {
   width: 38px;
   height: 38px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--light);
   border: 1px solid var(--border);
   border-radius: var(--rad-sm);
   color: var(--dark);
   transition: all var(--trans-fast)
}

.btn-icon-nav:hover {
   background: var(--green);
   border-color: var(--green);
   color: #fff
}

/* ============================================================
   MEGA MENU — Fixed Bootstrap-compatible approach
   ============================================================ */
.mega-dd {
   position: static !important
}

.mega-menu {
   position: absolute;
   top: 100%;
   left: 0 !important;
   right: 0 !important;
   width: 100% !important;
   transform: none !important;
   border: none;
   border-top: 3px solid var(--green);
   border-radius: 0 0 var(--rad-lg) var(--rad-lg);
   box-shadow: var(--sh-lg);
   padding: 28px 0;
   background: #fff;
   margin-top: 0 !important;
}

/* Relative parent for absolute mega menu */
.main-nav .container-xl {
   position: relative
}

.mega-heading {
   font-size: .6875rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .1em;
   color: var(--muted);
   margin-bottom: 10px;
   padding-bottom: 8px;
   border-bottom: 1px solid var(--border)
}

.mega-list {
   display: flex;
   flex-direction: column;
   gap: 2px
}

.mega-link {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 9px 12px;
   border-radius: var(--rad-sm);
   color: var(--body-clr) !important;
   transition: all var(--trans-fast)
}

.mega-link:hover {
   background: var(--green-lt);
   color: var(--green) !important;
   transform: translateX(4px)
}

.mega-link svg {
   color: var(--green);
   flex-shrink: 0
}

.mega-link span {
   display: flex;
   flex-direction: column;
   gap: 2px
}

.mega-link strong {
   font-size: .875rem;
   font-weight: 600;
   color: var(--dark);
   line-height: 1.3
}

.mega-link small {
   font-size: .75rem;
   color: var(--muted);
   line-height: 1.3
}

.mega-feature-panel {
   background: linear-gradient(135deg, var(--green), var(--green-dark));
   border-radius: var(--rad-lg);
   padding: 24px 16px;
   text-align: center;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px
}

.mega-feature-panel svg {
   color: var(--yellow)
}

.mega-feature-panel p {
   font-size: .8125rem;
   font-weight: 500;
   color: rgba(255, 255, 255, .9);
   line-height: 1.6;
   margin: 0
}

/* Mobile: stack mega menu & nav padding */
@media(max-width:1199.98px) {
   .navbar-collapse {
      padding: 1rem 0 1.5rem
   }

   .navbar-nav .nav-item {
      margin-bottom: 4px
   }

   .navbar-nav .nav-link {
      padding: 10px 16px !important;
      font-size: 1rem
   }

   .nav-right {
      padding-top: 1.25rem;
      border-top: 1px solid var(--border);
      margin-top: 0.5rem !important
   }

   .mega-menu {
      position: static;
      border: none;
      border-top: 2px solid var(--green-lt);
      border-radius: 0;
      box-shadow: none;
      padding: 12px 0 12px 16px;
      background: var(--light)
   }

   .mega-dd {
      position: relative !important
   }
}

/* ============================================================
   SEARCH BAR (slide down)
   ============================================================ */
.search-bar-slide {
   background: var(--dark);
   overflow: hidden;
   max-height: 0;
   transition: max-height .35s ease, padding .35s ease;
   padding: 0
}

.search-bar-slide.open {
   max-height: 80px;
   padding: 12px 0
}

.search-bar-form {
   display: flex;
   align-items: center;
   gap: 8px
}

.search-bar-form input {
   flex: 1;
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .15);
   border-radius: var(--rad-md);
   padding: 10px 16px;
   color: #fff;
   font-family: var(--font);
   font-size: .9375rem
}

.search-bar-form input::placeholder {
   color: rgba(255, 255, 255, .4)
}

.search-bar-form input:focus {
   outline: none;
   border-color: var(--green)
}

.search-bar-form button {
   background: var(--green);
   border: none;
   color: #fff;
   padding: 10px 16px;
   border-radius: var(--rad-md);
   display: flex;
   align-items: center;
   transition: background var(--trans-fast)
}

.search-bar-form button:hover {
   background: var(--green-dark)
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
   font-family: var(--font);
   font-weight: 600;
   border-radius: var(--rad-md);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   transition: all var(--trans);
   border: 2px solid transparent;
   letter-spacing: .01em;
   line-height: 1.4
}

.btn:active {
   transform: scale(.97)
}

.btn svg {
   flex-shrink: 0
}

.btn-primary-brand {
   background: var(--green);
   border-color: var(--green);
   color: #fff
}

.btn-primary-brand:hover {
   background: var(--green-dark);
   border-color: var(--green-dark);
   color: #fff;
   box-shadow: var(--sh-green);
   transform: translateY(-2px)
}

.btn-outline-brand {
   background: transparent;
   border-color: var(--green);
   color: var(--green)
}

.btn-outline-brand:hover {
   background: var(--green);
   border-color: var(--green);
   color: #fff;
   transform: translateY(-2px)
}

.btn-outline-white {
   background: transparent;
   border-color: rgba(255, 255, 255, .7);
   color: #fff
}

.btn-outline-white:hover {
   background: #fff;
   border-color: #fff;
   color: var(--green);
   transform: translateY(-2px)
}

.btn-light-brand {
   background: #fff;
   border-color: #fff;
   color: var(--green)
}

.btn-light-brand:hover {
   background: var(--yellow);
   border-color: var(--yellow);
   color: var(--dark);
   transform: translateY(-2px)
}

.btn:focus,
.btn:focus-visible {
   box-shadow: 0 0 0 3px rgba(38, 119, 60, .25) !important
}

/* ============================================================
   SECTION UTILS
   ============================================================ */
.section {
   padding: 80px 0
}

@media(max-width:991.98px) {
   .section {
      padding: 60px 0
   }
}

@media(max-width:575.98px) {
   .section {
      padding: 48px 0
   }
}

.rounded-xl {
   border-radius: var(--rad-xl) !important
}

.bg-light-brand {
   background: #f5fbf6
}

.bg-dark-brand {
   background: var(--dark-bg)
}

.text-light-muted {
   color: rgba(255, 255, 255, .6)
}

.section-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: .75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .12em;
   color: var(--green);
   margin-bottom: 10px;
   position: relative;
   padding-left: 18px
}

.section-eyebrow::before {
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 10px;
   height: 3px;
   background: var(--green);
   border-radius: var(--rad-full)
}

.eyebrow-light {
   color: var(--yellow)
}

.eyebrow-light::before {
   background: var(--yellow)
}

.section-heading {
   font-size: clamp(1.5rem, 3vw, 2.25rem);
   font-weight: 700;
   color: var(--dark);
   line-height: 1.25;
   margin-bottom: 14px
}

.section-subheading {
   font-size: 1.0625rem;
   color: var(--body-clr);
   max-width: 540px
}

.text-center .section-subheading {
   margin: 0 auto
}

.section-body {
   font-size: .9375rem;
   color: var(--body-clr);
   line-height: 1.85;
   margin-bottom: 14px
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
   background: #0d1a12;
   color: rgba(255, 255, 255, .7)
}

.footer-tagline-bar {
   background: linear-gradient(90deg, var(--green), var(--green-dark));
   padding: 16px 0;
   text-align: center
}

.footer-tagline-bar p {
   font-size: .9375rem;
   font-weight: 500;
   color: rgba(255, 255, 255, .92);
   font-style: italic;
   margin: 0
}

.footer-main {
   padding: 64px 0 48px
}

.footer-brand-col {
   display: flex;
   flex-direction: column;
   gap: 18px
}

.footer-brand-col img {
   height: 48px;
   width: auto;
   object-fit: contain
}

.footer-logo-text {
   font-size: 1.1rem;
   font-weight: 800;
   color: #fff
}

.footer-brand-col p {
   font-size: .875rem;
   color: rgba(255, 255, 255, .5);
   line-height: 1.8
}

.footer-social-links {
   display: flex;
   gap: 8px
}

.footer-social-links a {
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 50%;
   color: rgba(255, 255, 255, .55);
   transition: all var(--trans-fast)
}

.footer-social-links a:hover {
   background: var(--green);
   border-color: var(--green);
   color: #fff;
   transform: translateY(-3px)
}

.footer-col-title {
   font-size: .875rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: #fff;
   margin-bottom: 18px;
   padding-bottom: 10px;
   border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.footer-nav-list {
   display: flex;
   flex-direction: column;
   gap: 8px
}

.footer-nav-list li a {
   font-size: .875rem;
   color: rgba(255, 255, 255, .5);
   transition: all var(--trans-fast);
   display: flex;
   align-items: center
}

.footer-nav-list li a:hover {
   color: var(--green2);
   padding-left: 6px
}

.footer-address {
   display: flex;
   flex-direction: column;
   gap: 12px
}

.footer-contact-item {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   font-size: .875rem;
   color: rgba(255, 255, 255, .5)
}

.footer-contact-item svg {
   color: var(--green2);
   flex-shrink: 0;
   margin-top: 3px
}

.footer-contact-item a {
   color: rgba(255, 255, 255, .5)
}

.footer-contact-item a:hover {
   color: var(--green2)
}

.footer-bottom-bar {
   background: rgba(0, 0, 0, .3);
   border-top: 1px solid rgba(255, 255, 255, .06);
   padding: 16px 0
}

.footer-bottom-inner {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 12px
}

.footer-bottom-inner p {
   font-size: .875rem;
   color: rgba(255, 255, 255, .45);
   margin: 0
}

.footer-bottom-inner a {
   font-size: .8125rem;
   color: rgba(255, 255, 255, .4)
}

.footer-bottom-inner a:hover {
   color: var(--green2)
}

/* ============================================================
   BACK TO TOP + WHATSAPP
   ============================================================ */
.back-to-top {
   position: fixed;
   bottom: 90px;
   right: 20px;
   width: 44px;
   height: 44px;
   background: var(--green);
   color: #fff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: var(--sh-green);
   z-index: 900;
   opacity: 0;
   visibility: hidden;
   transform: translateY(16px);
   transition: all var(--trans);
   text-decoration: none
}

.back-to-top.visible {
   opacity: 1;
   visibility: visible;
   transform: translateY(0)
}

.back-to-top:hover {
   background: var(--green-dark);
   color: #fff;
   transform: translateY(-4px)
}

.whatsapp-btn {
   position: fixed;
   bottom: 24px;
   right: 20px;
   background: #25D366;
   color: #fff;
   border-radius: var(--rad-full);
   padding: 10px 18px;
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: .875rem;
   font-weight: 600;
   font-family: var(--font);
   z-index: 900;
   box-shadow: 0 4px 20px rgba(37, 211, 102, .4);
   transition: all var(--trans);
   text-decoration: none
}

.whatsapp-btn:hover {
   transform: translateY(-3px) scale(1.04);
   color: #fff;
   box-shadow: 0 8px 32px rgba(37, 211, 102, .5)
}

/* Form Controls */
.form-control,
.form-select {
   font-family: var(--font);
   font-size: .9375rem;
   border: 1.5px solid var(--border);
   border-radius: var(--rad-md);
   padding: 12px 16px;
   color: var(--dark);
   background: #fff;
   transition: border-color var(--trans-fast), box-shadow var(--trans-fast)
}

.form-control:focus,
.form-select:focus {
   border-color: var(--green);
   box-shadow: 0 0 0 3px rgba(38, 119, 60, .15);
   outline: none
}

.form-control::placeholder {
   color: var(--muted)
}