/* =========================================================
   ALLEGRA FOODSTUFF AND PACKING TRADING FZE LLC
   Wilshire build — Visual Template T04 "Angular Cut"
   Brand colours derived from the client logo.
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* brand — from logo */
  --primary-color:#1e2a5f;
  --primary-light:#2e4ba3;
  --secondary-color:#2e4ba3;
  --secondary-light:#4e6cc9;
  --accent-color:#f26a1b;
  --accent-dark:#d9520f;
  --accent-red:#e63c28;

  /* neutrals */
  --ink:#161a26;
  --body-color:#5d6478;
  --line:#e3e5ec;
  --soft:#f6f6f8;
  --footer-bg:#101322;

  /* T04 template tokens */
  --container-max:1200px;
  --section-pad:95px;
  --grid-gap:1.5rem;
  --radius:4px;
  --btn-radius:0px;
  --clip:14px;
  --clip-deep:26px;
  --shadow:0 12px 30px rgba(22,26,38,.09);
  --shadow-hover:0 20px 44px rgba(30,42,95,.16);
  --card-pad:2rem 1.85rem;
  --h1-size:clamp(2.05rem,4.8vw,3.5rem);
  --h2-size:clamp(1.6rem,3vw,2.35rem);
  --body-lh:1.75;
  --text-cap:560px;

  /* the template's signature shape */
  --cut-btn:polygon(0 0,100% 0,100% 100%,var(--clip) 100%,0 calc(100% - var(--clip)));
  --cut-img:polygon(0 0,100% 0,100% calc(100% - 42px),calc(100% - 42px) 100%,0 100%);
  --cut-card:polygon(0 0,100% 0,100% 100%,22px 100%,0 calc(100% - 22px));
}

/* ---------- 2. BASE ---------- */
*{box-sizing:border-box;}
html,body{overflow-x:hidden;max-width:100%;}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:.95rem;
  line-height:var(--body-lh);
  color:var(--body-color);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Outfit',system-ui,sans-serif;
  color:var(--ink);
  font-weight:700;
  line-height:1.15;
}
a{text-decoration:none;transition:color .25s ease;}
img{max-width:100%;height:auto;}
.container{max-width:var(--container-max);}
.section-padding{padding:var(--section-pad) 0;}
.bg-light-soft{background:var(--soft);}

.section-tag{                       /* D6 — small icon + accent text */
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Outfit',sans-serif;
  font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-color);margin-bottom:.85rem;
}
.section-tag::before{
  content:"\F135";font-family:'bootstrap-icons';
  font-size:.95rem;letter-spacing:0;line-height:1;
  color:var(--accent-color);transform:translateY(1px);
}
.section-title{
  font-size:var(--h2-size);font-weight:700;letter-spacing:-.015em;
  color:var(--ink);margin-bottom:1.1rem;
}
.text-cap{max-width:var(--text-cap);}
.lead-p{font-size:1rem;}

/* ---------- 3. BUTTONS ---------- */
.btn-brand,.btn-brand-outline,.btn-brand-secondary{
  font-family:'Outfit',sans-serif;
  font-size:.85rem;font-weight:600;letter-spacing:.045em;text-transform:uppercase;
  padding:14px 30px;border-radius:var(--btn-radius);border:0;
  display:inline-flex;align-items:center;gap:.55rem;
  clip-path:var(--cut-btn);
  transition:background .25s ease,color .25s ease,clip-path .25s ease,box-shadow .25s ease;
}
.btn-brand{background:var(--accent-color);color:#fff;}
.btn-brand:hover{background:var(--accent-dark);color:#fff;--clip:var(--clip-deep);}
.btn-brand-outline{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);}
.btn-brand-outline:hover{background:#fff;color:var(--primary-color);box-shadow:inset 0 0 0 1.5px #fff;--clip:var(--clip-deep);}
.btn-brand-secondary{background:var(--primary-color);color:#fff;}
.btn-brand-secondary:hover{background:var(--secondary-color);color:#fff;--clip:var(--clip-deep);}
.btn-lg.btn-brand,.btn-lg.btn-brand-outline,.btn-lg.btn-brand-secondary{padding:16px 36px;font-size:.88rem;}

/* ---------- 4. TOP BAR ---------- */
.top-bar{                            /* white with hairline bottom border */
  background:#fff;border-bottom:1px solid var(--line);
  font-size:.78rem;padding:9px 0;color:var(--body-color);
}
.top-bar a{color:var(--body-color);}
.top-bar a:hover{color:var(--accent-color);}
.top-bar i{color:var(--accent-color);margin-right:.45rem;}

/* ---------- 5. NAVBAR ---------- */
.main-navbar{
  background:#fff;padding:0;border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease;
}
.main-navbar.scrolled{box-shadow:0 6px 22px rgba(22,26,38,.09);border-bottom-color:transparent;}
.main-navbar .navbar-brand{padding:14px 0;margin-right:2rem;}
.main-navbar .navbar-brand img{height:46px;width:auto;display:block;}
.main-navbar .nav-link{
  font-family:'Outfit',sans-serif;
  font-size:.88rem;font-weight:600;letter-spacing:.02em;
  color:var(--ink);padding:26px .95rem !important;position:relative;
}
.main-navbar .nav-link:hover{color:var(--accent-color);}
.main-navbar .nav-link.active{color:var(--accent-color);}
.main-navbar .nav-link.active::after{
  content:"";position:absolute;left:.95rem;right:.95rem;bottom:18px;height:3px;
  background:var(--accent-color);
  clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);
}
/* G3 — slanted parallelogram accent block with a circular icon chip */
.main-navbar .btn-brand{
  background:var(--accent-color);color:#fff;
  clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%);
  padding:13px 34px 13px 30px;font-size:.78rem;letter-spacing:.03em;
  text-transform:none;position:relative;
}
.main-navbar .btn-brand:hover{background:var(--primary-color);}
.main-navbar .btn-brand i{
  width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.22);
  display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;
  margin-right:.15rem;
}
.navbar-toggler{border:1px solid var(--line);padding:.35rem .6rem;border-radius:0;}
.navbar-toggler:focus{box-shadow:none;}

.nav-products-row{display:flex;align-items:center;}
.mobile-cat-toggle{
  background:none;border:0;color:var(--ink);padding:.25rem .55rem;
  transition:transform .25s ease;
}
.mobile-cat-toggle.open{transform:rotate(180deg);color:var(--accent-color);}
.main-navbar .dropdown-menu{
  border:0;border-top:3px solid var(--accent-color);border-radius:0;
  box-shadow:0 14px 34px rgba(22,26,38,.13);padding:.4rem 0;margin-top:0;min-width:238px;
}
.main-navbar .dropdown-item{
  font-family:'Outfit',sans-serif;font-size:.86rem;font-weight:500;
  color:var(--ink);padding:.62rem 1.25rem;
}
.main-navbar .dropdown-item:hover{background:var(--soft);color:var(--accent-color);}

/* ---------- 6. HERO SLIDER (70vh · C1 · A1 · B4) ---------- */
.hero-slider{position:relative;}
.hero-slide{
  height:70vh;min-height:500px;
  background-size:cover;background-position:center;
  display:flex;align-items:center;position:relative;
}
.hero-slide::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(15,20,42,.78) 0%,rgba(15,20,42,.56) 45%,rgba(15,20,42,.34) 100%);
}
.hero-slide .container{position:relative;z-index:2;}
.hero-slide .hero-copy{max-width:700px;}
.hero-tag{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:'Outfit',sans-serif;font-size:.76rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:var(--accent-color);padding:8px 18px;margin-bottom:1.25rem;
  clip-path:polygon(0 0,100% 0,100% 100%,10px 100%,0 calc(100% - 10px));
}
.hero-tag i{font-size:.9rem;letter-spacing:0;}
.hero-slide h1{
  font-size:var(--h1-size);font-weight:700;color:#fff;
  letter-spacing:-.015em;line-height:1.13;margin-bottom:1.05rem;
}
.hero-slide p{
  color:rgba(255,255,255,.85);font-size:1rem;max-width:520px;margin-bottom:1.9rem;
}
.hero-slide .btn-brand::after{content:"\2197";font-size:.95rem;line-height:1;}

/* A1 — vertical dot stack on the right edge, active dot ringed */
.hero-slider .carousel-indicators{
  right:26px;left:auto;bottom:auto;top:50%;transform:translateY(-50%);
  flex-direction:column;margin:0;gap:14px;
}
.hero-slider .carousel-indicators [data-bs-target]{
  width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.55);
  border:0;margin:0;opacity:1;text-indent:0;position:relative;transition:background .3s ease;
}
.hero-slider .carousel-indicators .active{background:var(--accent-color);}
.hero-slider .carousel-indicators .active::after{
  content:"";position:absolute;inset:-6px;border:1.5px solid var(--accent-color);border-radius:50%;
}
/* B4 — solid accent squares stacked at the right edge */
.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next{
  width:48px;height:48px;opacity:1;left:auto;right:0;background:var(--accent-color);
  border:0;transition:background .25s ease;
}
.hero-slider .carousel-control-prev{top:auto;bottom:96px;}
.hero-slider .carousel-control-next{top:auto;bottom:48px;background:var(--primary-color);}
.hero-slider .carousel-control-prev:hover{background:var(--accent-dark);}
.hero-slider .carousel-control-next:hover{background:var(--secondary-color);}
.hero-slider .carousel-control-prev-icon,
.hero-slider .carousel-control-next-icon{width:18px;height:18px;}

/* ---------- 7. PAGE HERO ---------- */
.page-hero{
  height:300px;background-size:cover;background-position:center;
  display:flex;align-items:center;position:relative;overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(15,20,42,.8) 0%,rgba(15,20,42,.5) 100%);
}
.page-hero::after{                    /* clipped accent wedge in the corner */
  content:"";position:absolute;right:0;bottom:0;width:190px;height:190px;
  background:var(--accent-color);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  opacity:.92;
}
.page-hero .container{position:relative;z-index:2;}
.page-hero h1{
  color:#fff;font-size:clamp(1.85rem,3.6vw,2.7rem);font-weight:700;
  letter-spacing:-.01em;margin-bottom:.45rem;
}
.breadcrumb-custom{font-size:.83rem;color:rgba(255,255,255,.72);font-weight:500;}
.breadcrumb-custom a{color:var(--accent-color);}
.breadcrumb-custom a:hover{color:#fff;}

/* ---------- 8. ABOUT ROWS (F5 / 6:5 clipped corner) ---------- */
.about-img-wrap{position:relative;}
.about-img-wrap img{
  width:100%;aspect-ratio:6/5;object-fit:cover;display:block;
  clip-path:var(--cut-img);
}
.about-img-wrap::before{                 /* accent angle plate behind */
  content:"";position:absolute;left:-16px;top:-16px;width:110px;height:110px;
  background:var(--accent-color);z-index:-1;
  clip-path:polygon(0 0,100% 0,0 100%);
}
.about-img-wrap .badge-float{
  position:absolute;right:0;bottom:0;background:var(--primary-color);color:#fff;
  padding:1rem 1.5rem;font-family:'Outfit',sans-serif;font-size:.76rem;
  letter-spacing:.09em;text-transform:uppercase;line-height:1.35;max-width:190px;
  clip-path:polygon(18px 0,100% 0,100% 100%,0 100%);
}
.about-img-wrap .badge-float .num{
  display:block;font-size:1.75rem;font-weight:700;letter-spacing:-.01em;
  color:var(--accent-color);text-transform:none;
}
.check-list{list-style:none;padding:0;margin:0;}
.check-list li{position:relative;padding-left:1.9rem;margin-bottom:.6rem;font-size:.93rem;}
.check-list li::before{
  content:"\F26E";font-family:'bootstrap-icons';position:absolute;left:0;top:0;
  color:var(--accent-color);font-size:1.05rem;line-height:1.7;
}

/* diagonal clip-path section transition — the T04 signature cut */
.angle-cut-top{
  clip-path:polygon(0 62px,100% 0,100% 100%,0 100%);
  margin-top:-62px;padding-top:calc(var(--section-pad) + 40px);position:relative;z-index:2;
}

/* ---------- 9. FEATURE CARDS (J1 + E5) ---------- */
.feature-card{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:2.6rem 1.85rem 1.9rem;height:100%;position:relative;
  clip-path:var(--cut-card);
  transition:clip-path .3s ease,box-shadow .3s ease;
}
.feature-card:hover{box-shadow:var(--shadow-hover);clip-path:polygon(0 0,100% 0,100% 100%,40px 100%,0 calc(100% - 40px));}
.feature-card .icon-wrap{      /* E5 — clipped badge overlapping the top-left corner */
  position:absolute;top:-14px;left:22px;
  width:56px;height:60px;background:var(--accent-color);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
  clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);
  box-shadow:0 8px 18px rgba(242,106,27,.32);
}
.feature-card h5{
  font-size:1.02rem;font-weight:600;color:var(--accent-color);
  margin:1.5rem 0 .6rem;letter-spacing:-.005em;
}
.feature-card p{font-size:.88rem;margin:0;line-height:1.75;}

/* ---------- 10. MISSION / VISION / VALUES ---------- */
.mv-card{
  background:#fff;padding:2.4rem 2rem;height:100%;box-shadow:var(--shadow);
  border-radius:var(--radius);border-top:3px solid var(--accent-color);
  clip-path:var(--cut-card);
}
.mv-card i{font-size:2rem;color:var(--accent-color);display:block;margin-bottom:1rem;}
.mv-card h4{font-size:1.25rem;font-weight:700;margin-bottom:.75rem;}
.mv-card p{font-size:.92rem;margin:0;}
.value-pill{
  background:#fff;padding:2rem 1.6rem;height:100%;text-align:center;
  border:1px solid var(--line);border-radius:var(--radius);
  clip-path:var(--cut-card);transition:clip-path .3s ease,border-color .3s ease;
}
.value-pill:hover{border-color:var(--accent-color);clip-path:polygon(0 0,100% 0,100% 100%,40px 100%,0 calc(100% - 40px));}
.value-pill i{font-size:1.7rem;color:var(--accent-color);display:block;margin-bottom:.85rem;}
.value-pill h6{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:600;color:var(--ink);margin-bottom:.5rem;}
.value-pill p{font-size:.85rem;margin:0;}

/* ---------- 11. PRODUCT & ITEM CARDS (6:5) ---------- */
.category-card-link{display:block;height:100%;}
.product-card,.item-card{
  background:#fff;height:100%;box-shadow:var(--shadow);border-radius:var(--radius);
  overflow:hidden;clip-path:var(--cut-card);
  transition:clip-path .3s ease,box-shadow .3s ease;
}
.product-card:hover,.item-card:hover{
  box-shadow:var(--shadow-hover);
  clip-path:polygon(0 0,100% 0,100% 100%,40px 100%,0 calc(100% - 40px));
}
.product-img,.item-img{overflow:hidden;}
.product-img img,.item-img img{
  width:100%;aspect-ratio:6/5;object-fit:cover;display:block;
}
.product-body,.item-body{padding:1.15rem 1.4rem 1.5rem;}
.product-body h5,.item-body h5{
  font-size:1rem;font-weight:600;color:var(--ink);margin:0;letter-spacing:-.005em;
}
.category-card-link:hover .product-body h5{color:var(--accent-color);}

/* ---------- 12. CTA (H7 — greyscale image, colour button) ---------- */
.cta-section{
  background-size:cover;background-position:center;position:relative;
}
.cta-section::before{
  content:"";position:absolute;inset:0;
  background:rgba(16,19,34,.72);
  backdrop-filter:grayscale(1) contrast(1.04);
  -webkit-backdrop-filter:grayscale(1) contrast(1.04);
}
.cta-section .container{position:relative;z-index:2;}
.cta-section h2{color:#fff;font-size:var(--h2-size);font-weight:700;margin-bottom:.9rem;}
.cta-section p{color:rgba(255,255,255,.8);max-width:640px;margin-left:auto;margin-right:auto;}

/* ---------- 13. CONTACT ---------- */
.contact-info-card{
  background:var(--primary-color);color:#fff;padding:2.4rem 2rem;height:100%;
  clip-path:var(--cut-card);
}
.contact-info-card h4{color:#fff;font-size:1.25rem;font-weight:700;margin-bottom:1.6rem;}
.contact-info-item{display:flex;gap:1rem;margin-bottom:1.5rem;align-items:flex-start;}
.contact-info-item:last-child{margin-bottom:0;}
.ci-icon{
  flex:0 0 44px;width:44px;height:44px;background:var(--accent-color);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
  clip-path:polygon(0 0,100% 0,100% 100%,10px 100%,0 calc(100% - 10px));
}
.ci-text small{
  display:block;font-family:'Outfit',sans-serif;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-color);margin-bottom:.2rem;
}
.ci-text span,.ci-text a{color:rgba(255,255,255,.9);font-size:.92rem;line-height:1.6;}
.ci-text a:hover{color:var(--accent-color);}
.contact-form-wrap{
  background:#fff;padding:2.4rem 2.2rem;height:100%;box-shadow:var(--shadow);
  clip-path:var(--cut-card);
}
.contact-form-wrap h4{font-size:1.25rem;font-weight:700;}
.contact-form-wrap .form-label{font-size:.8rem;color:var(--ink);letter-spacing:.02em;}
.contact-form-wrap .form-control{
  border:1px solid var(--line);border-radius:0;padding:.72rem .9rem;font-size:.92rem;
  background:#fbfbfc;
}
.contact-form-wrap .form-control:focus{
  border-color:var(--accent-color);box-shadow:0 0 0 .18rem rgba(242,106,27,.14);background:#fff;
}
#contactForm > [class*="col-"]{padding:0 .55rem .95rem;}
#contactForm{margin:0 -.55rem;}

/* ---------- 14. FOOTER ---------- */
.site-footer{background:var(--footer-bg);color:rgba(255,255,255,.62);}
.footer-top{padding:72px 0 56px;}
.footer-brand-text{margin-bottom:1.1rem;}
.footer-brand-text img{height:46px;width:auto;display:block;}
.site-footer p{font-size:.9rem;line-height:1.85;margin:0;max-width:420px;}
.site-footer h5{
  font-family:'Outfit',sans-serif;color:#fff;font-size:.95rem;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:1.4rem;position:relative;padding-bottom:.7rem;
}
.site-footer h5::after{
  content:"";position:absolute;left:0;bottom:0;width:38px;height:3px;background:var(--accent-color);
  clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);
}
.site-footer ul{list-style:none;padding:0;margin:0;}
.site-footer ul li{margin-bottom:.7rem;font-size:.9rem;display:flex;align-items:flex-start;}
.site-footer ul li i{color:var(--accent-color);flex:0 0 auto;margin-top:.28rem;}
.site-footer a{color:rgba(255,255,255,.62);}
.site-footer a:hover{color:var(--accent-color);}
.footer-links li{position:relative;padding-left:1.15rem;display:block !important;}
.footer-links li::before{
  content:"\F285";font-family:'bootstrap-icons';position:absolute;left:0;top:0;
  color:var(--accent-color);font-size:.78rem;line-height:1.85;
}
.footer-bottom{                       /* I1 — accent-filled bar */
  background:var(--accent-color);color:#fff;font-size:.84rem;padding:15px 0;
}
.footer-bottom a{color:#fff;text-decoration:underline;}

/* ---------- 15. BACK TO TOP ---------- */
.back-to-top{
  position:fixed;right:22px;bottom:22px;width:44px;height:44px;
  background:var(--accent-color);color:#fff;display:flex;align-items:center;justify-content:center;
  z-index:1030;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease,background .25s ease;
  clip-path:polygon(0 0,100% 0,100% 100%,12px 100%,0 calc(100% - 12px));
}
.back-to-top.show{opacity:1;visibility:visible;}
.back-to-top:hover{background:var(--primary-color);color:#fff;}

/* ---------- 16. RESPONSIVE ---------- */
@media (max-width:1199.98px){
  :root{--section-pad:80px;}
}
@media (max-width:991.98px){
  :root{--section-pad:66px;--clip:11px;}
  .main-navbar .navbar-collapse{flex-basis:100%;}
  .main-navbar .navbar-brand img{height:34px;}
  .main-navbar .nav-link{padding:.7rem .25rem !important;}
  .main-navbar .nav-link.active::after{display:none;}
  .main-navbar .navbar-collapse{padding-bottom:1.1rem;}
  .main-navbar .dropdown-menu{border-top:0;box-shadow:none;padding-left:.9rem;}
  .nav-products-row{justify-content:space-between;width:100%;}
  .hero-slide{height:auto;min-height:0;padding:110px 0 130px;}
  .hero-slider .carousel-indicators{
    flex-direction:row;top:auto;bottom:22px;left:0;right:0;transform:none;justify-content:center;
  }
  .hero-slider .carousel-control-prev,.hero-slider .carousel-control-next{display:none;}
  .about-img-wrap::before{display:none;}
  .angle-cut-top{clip-path:polygon(0 32px,100% 0,100% 100%,0 100%);margin-top:-32px;padding-top:calc(var(--section-pad) + 26px);}
}
@media (max-width:767.98px){
  :root{--section-pad:56px;--grid-gap:1.1rem;}
  .top-bar{display:none;}
  .page-hero{height:230px;}
  .page-hero::after{width:120px;height:120px;}
  .about-img-wrap .badge-float{padding:.8rem 1.1rem;max-width:160px;}
  .about-img-wrap .badge-float .num{font-size:1.4rem;}
  .contact-form-wrap,.contact-info-card{padding:1.85rem 1.4rem;}
  .footer-top{padding:54px 0 40px;}
  .site-footer p{max-width:100%;}
}
@media (max-width:575.98px){
  .main-navbar .navbar-brand img{height:27px;}
  .main-navbar .navbar-brand{margin-right:.5rem;}
  .hero-slide .btn-brand,.hero-slide .btn-brand-outline{width:100%;justify-content:center;margin:0 0 .7rem 0 !important;}
  .feature-card{padding:2.4rem 1.4rem 1.7rem;}
}