/* ========== VIVA Polybags Bootstrap 5 theme ==========
   Derived palette and layout accents from legacy styles
   Colors: text #191919, brand red #ed1c24, gray #7f7f7f, footer #f2f2f2
   Fonts: Montserrat (Regular/Bold) for headings, MyriadPro for body (with system fallbacks)
======================================================== */

/* Fonts (keep existing file paths if available) */
@font-face{
  font-family:'MontserratRegular';
  src:url('../fonts/MontserratRegular.eot');
  src:url('../fonts/MontserratRegular.eot') format('embedded-opentype'),
url('../fonts/MontserratRegular.woff2') format('woff2'),
url('../fonts/MontserratRegular.woff') format('woff'),
url('../fonts/MontserratRegular.ttf') format('truetype'),
url('../fonts/MontserratRegular.svg#MontserratRegular') format('svg');
}
@font-face{
  font-family:'MontserratBold';
  src:url('../fonts/MontserratBold.eot');
  src:url('../fonts/MontserratBold.eot') format('embedded-opentype'),
url('../fonts/MontserratBold.woff2') format('woff2'),
url('../fonts/MontserratBold.woff') format('woff'),
url('../fonts/MontserratBold.ttf') format('truetype'),
url('../fonts/MontserratBold.svg#MontserratBold') format('svg');
}
@font-face{
  font-family:'MyriadProRegular';
  src:url('../fonts/MyriadProRegular.eot');
  src:url('../fonts/MyriadProRegular.eot') format('embedded-opentype'),
url('../fonts/MyriadProRegular.woff2') format('woff2'),
url('../fonts/MyriadProRegular.woff') format('woff'),
url('../fonts/MyriadProRegular.ttf') format('truetype'),
url('../fonts/MyriadProRegular.svg#MyriadProRegular') format('svg');
}

/* CSS variables for easy theming */
:root{
  --brand-red:#ed1c24;
  --text-dark:#191919;
  --muted-gray:#7f7f7f;
  --footer-bg:#f2f2f2;
  --bs-primary: var(--brand-red);
--bs-link-color: var(--brand-red);
--bs-link-hover-color: var(--text-dark);
--h1-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
--h2-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.0rem);
--h3-size: 1.125rem;
}

/* Global */
html{scroll-behavior:smooth;}
body{
  background:#fff;
  color:var(--text-dark);
  font-family:MyriadProRegular, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:1.125rem; /* 18px base on most devices */
  padding-top:100px; /* space for fixed navbar */
}
@media (min-width:992px){ body{ font-size:1.25rem; } }

a{ color:var(--brand-red); }
a:hover, a:focus{ color:var(--text-dark); }

/* Headings */
h1,h2,h3,h4,h5,h6{font-family:'Montserrat', MontserratRegular, Arial, sans-serif;}
h1{ margin:80px 0 40px; font-size:var(--h1-size); }
@media (max-width:768px){ h1{ font-size:var(--h1-size); margin:60px 0 30px; } }

/* Navbar overrides */
.navbar-brand img{ height:64px; width:auto; }
.navbar .nav-link{
  color:var(--text-dark);
  text-transform:uppercase;
  font-family:MontserratBold, Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:1.125rem;
  padding:.75rem 1rem;
  letter-spacing:.02em;
}
.navbar .nav-link:hover{ color:var(--brand-red); }

/* Buttons */
.btn-primary{
  background-color:var(--brand-red);
  border-color:var(--brand-red);
}
.btn-primary:hover, .btn-primary:focus{
  background-color:#c4161c;
  border-color:#c4161c;
}

/* Hero / Parallax */
.parallax-container{
  width:100%;
  min-height:70vh;
  position:relative;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
@media (min-width:992px){
  .parallax-container{ background-attachment:fixed; }
}
.parallax-container .content-container{
  padding:50px;
  background-color:rgba(255,255,255,0.3);
  margin:50px 15%;
}
@media (max-width:768px){
  .parallax-container .content-container{
    margin:20px 10%;
    padding:30px;
  }
}
.parallax-container h1{ text-align:center; font-size:2.25rem; text-transform:uppercase; margin:0; }
@media (max-width:768px){ .parallax-container h1{ font-size:1.5625rem; } }
.parallax-container p{ margin-top:40px; text-align:center; }
@media (max-width:768px){ .parallax-container p{ font-size:1.125rem; margin-top:30px; } }

/* Arrow buttons */
.arrow-down{
  position:absolute;
  bottom:25px;
  left:50%;
  margin-left:-40px;
  display:block;
  width:80px;height:80px;
}
.arrow-down svg line{ stroke:#fff; stroke-width:2px; }
.arrow-down svg circle{ stroke:#fff; stroke-width:2px; fill:none; }
.arrow-down:hover svg line,
.arrow-down:hover svg circle{ stroke:var(--text-dark); transition:stroke 200ms; }

.arrow-content{
  position:static;
  margin:30px auto 40px;
}
.arrow-content svg line,
.arrow-content svg circle{ stroke:var(--text-dark); }
.arrow-content:hover svg line,
.arrow-content:hover svg circle{ stroke:var(--brand-red); }

/* Spacing helpers to keep legacy proportions */
.wp-10{ padding:0 15%; }
.wp-5{ padding:0 5%; }
.mt-20{ margin-top:20px; }
.mt-10{ margin-top:10px; }
.mb-20{ margin-bottom:20px; }
.pt-20{ padding-top:20px; }

/* Products list */
.content-cols{ font-size:1.125rem; margin-top:50px; }
.content-cols h3{
  margin:0 0 20px 0;
  font-size:1.125rem;
  text-transform:uppercase;
  height:68px;
  line-height:68px;
  padding:0 0 0 80px;
  text-align:left;
}
.content-cols h3 > span{ display:inline-block; vertical-align:middle; line-height:20px; }

/* Icon headers (expects assets in ./img/) */
.content-cols h3.ico-standard{ background:url('../img/ico-standard-bag.png') center left no-repeat; }
.content-cols h3.ico-special{ background:url('../img/ico-special-bag.png') center left no-repeat; }
.content-cols h3.ico-nigerian{ background:url('../img/ico-nigerian-bag.png') center left no-repeat; }

.content-cols p{ padding:10px 0; }
.content-cols p.text-justify{ text-align:justify; }

/* Legacy-style bullet list */
.content-cols ul{ padding:10px 0 10px 10px; }
.content-cols li{
  list-style:none; margin:0; padding:0; position:relative;
}
.content-cols li::before{
  content:"• "; color:var(--brand-red); font-size:20px; position:absolute; left:-10px; top:-3px;
}

/* Media block kept for parity */
.video{
  display:block; width:260px;
  background:url('../img/ico-movie.png') 20px center no-repeat;
  padding:40px 10px 40px 100px;
  border-top:solid var(--muted-gray) 10px;
  border-bottom:solid var(--muted-gray) 10px;
  border-left:solid var(--muted-gray) 1px;
  border-right:solid var(--muted-gray) 1px;
  margin:55px auto 40px;
}
@media (max-width:768px){ .video{ width:100%; margin-top:0; } }

/* Footer */
.footer-bg{
  background:var(--footer-bg);
  font-size:1.125rem;
  font-family:MontserratRegular, Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

 h2{ font-size:var(--h2-size); }

/* Navbar shrink on scroll */
.navbar.navbar-shrink{ box-shadow: 0 .25rem .75rem rgba(0,0,0,.05); }
.navbar.navbar-shrink .navbar-brand img{ height:56px; transition:height 160ms ease; }
.navbar .navbar-brand img{ transition:height 160ms ease; }

/* Active link styling in navbar */
.navbar .nav-link{ position:relative; }
.navbar .nav-link.active{ color:var(--brand-red); }
.navbar .nav-link.active::after{
  content:""; position:absolute; left:0; right:0; bottom:.35rem; height:2px;
  background:var(--brand-red);
}

/* Bootstrap 5 primary hue mapping (+ safeguard for buttons) */
.btn-primary{
  background-color:var(--bs-primary);
  border-color:var(--bs-primary);
}
.btn-primary:hover,.btn-primary:focus{
  background-color:color-mix(in srgb, var(--bs-primary) 85%, black);
  border-color:color-mix(in srgb, var(--bs-primary) 85%, black);
}


/* Sticky section rail (right side) */
.section-rail{
  position:fixed;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  z-index:1030; /* above content, below navbar */
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
@media (max-width: 767.98px){
  .section-rail{ display:none; }
}
.section-rail .rail-item{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  font-family:MontserratRegular, Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:.875rem;
  color:var(--muted-gray);
  padding:.25rem .5rem;
  border-radius:999px;
  background:rgba(255,255,255,0.62);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:color .15s ease, background .15s ease;
}
.section-rail .rail-item::before{
  content:"";
  width:8px; height:8px; border-radius:50%;
  background:var(--muted-gray);
  flex:0 0 auto;
}
.section-rail .rail-item:hover{ color:var(--text-dark); }
.section-rail .rail-item:hover::before{ background:var(--text-dark); }
.section-rail .rail-item.active{ color:var(--brand-red); background:#fff; }
.section-rail .rail-item.active::before{ background:var(--brand-red); width:10px; height:10px; }

/* Back-to-top button */
.btn-backtop{
  position:fixed;
  right:18px; bottom:18px;
  z-index:1030;
  display:inline-flex;
  align-items:center; justify-content:center;
  width:44px; height:44px;
  border:none; border-radius:999px;
  background:var(--brand-red); color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.btn-backtop svg{ display:block; }
.btn-backtop.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* Anchor offset for fixed header */
header[id], section[id]{ scroll-margin-top: 110px; }


/* Legal modal content tweaks */
#legalContent h2, #legalContent h3{ margin-top:1.25rem; }
#legalContent p, #legalContent li{ font-size:.95em; }


/* Legal modal iframe adjustments */
#legalModal .modal-body{ padding:0; }

.mb-40{ margin-bottom:40px; }


/* KPI Grid */
.kpi-card{ border-radius:1rem; background:#fff; }
.kpi-ico{ color:var(--brand-red); margin-bottom:.5rem; }
.kpi-num{ font-family:MontserratBold, Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size:2rem; line-height:1.1; }
.kpi-unit{ font-size:1rem; color:var(--muted-gray); margin-left:.25rem; }
.kpi-label{ color:var(--muted-gray); margin-top:.25rem; }

/* Timeline */
.timeline{ position:relative; }
.timeline-list{ list-style:none; padding:0; margin:0; position:relative; }
.timeline-list::before{
  content:""; position:absolute; left:12px; top:0; bottom:0; width:2px; background:#e6e6e6;
}
.timeline-list li{ position:relative; padding-left:48px; margin-bottom:18px; }
.timeline-list .dot{
  position:absolute; left:6px; top:.35rem; width:14px; height:14px; border-radius:50%;
  background:#fff; border:2px solid var(--brand-red);
}
.timeline-list .content h3{ margin:0 0 .25rem 0; font-size:1.125rem; }
.timeline-list .content p{ margin:0; color:#333; font-size:1rem; }


/* Contact form spacing */
#contact form .form-label{ font-weight:600; }
#contact form .btn{ min-width:140px; }

/* Optional: subtle hover for video teaser */
.video:hover{ border-color: var(--brand-red); }


/* =================== GALLERY =================== */
.gallery-hero{
  background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.25)), url('../img/product.jpg') center/cover no-repeat;
  min-height: 40vh; display:flex; align-items:flex-end; color:#fff;
}
.gallery-hero .content{ padding:40px 0; }

.gallery-filter .btn{
  border-radius:999px; padding:.4rem .9rem; margin:.25rem;
}

.gallery-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.g-item{ position:relative; overflow:hidden; border-radius:16px; background:#f8f9fa; }
.g-item a{ display:block; position:relative; }
.g-item img, .g-item .thumb{
  display:block; width:100%; height:100%; object-fit:cover;
  aspect-ratio: 4 / 3;
}
.g-item .overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55));
  opacity:0; transition:opacity .18s ease;
}
.g-item:hover .overlay{ opacity:1; }
.g-item .caption{
  color:#fff; padding:.6rem .8rem; width:100%; font-size:.95rem;
}

.g-item.video::after{
  content:"▶"; position:absolute; left:10px; top:10px;
  background: rgba(0,0,0,.55); color:#fff; width:28px; height:28px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.9rem;
}

/* Lightbox */
#lightboxModal .modal-body{ padding:0; background:#000; }
#lightboxModal .media-stage{ width:100%; height:calc(100vh - 160px); display:flex; align-items:center; justify-content:center; }
#lightboxModal img, #lightboxModal video{ max-width:100%; max-height:100%; }
#lightboxModal .lb-caption{ color:#fff; padding:.75rem 1rem; font-size:.95rem; }
#lightboxModal .lb-controls{ position:absolute; inset:0; pointer-events:none; }
#lightboxModal .lb-btn{
  pointer-events:auto; position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border:none; border-radius:999px; background:rgba(0,0,0,.45); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
#lightboxModal .lb-prev{ left:12px; }
#lightboxModal .lb-next{ right:12px; }
#lightboxModal .lb-btn:hover{ background:rgba(0,0,0,.7); }


/* Gallery thumb sizing */
:root{ --thumb-min: 240px; } /* default = medium */
.gallery-grid{ grid-template-columns: repeat(auto-fill, minmax(var(--thumb-min), 1fr)); }
@media (min-width: 1200px){
  :root{ --thumb-min: 260px; } /* slightly larger on wide screens by default */
}
/* Optional compact size shadows */
.g-item{ transition: transform .12s ease; }
.g-item:hover{ transform: translateY(-2px); }



/* === Typography (fonts + headings) from viva-styles-red.css – minimal subset === */
@font-face{font-family:'MontserratRegular';src:url('../fonts/MontserratRegular.eot');src:url('../fonts/MontserratRegular.eot') format('embedded-opentype'),url('../fonts/MontserratRegular.woff2') format('woff2'),url('../fonts/MontserratRegular.woff') format('woff'),url('../fonts/MontserratRegular.ttf') format('truetype'),url('../fonts/MontserratRegular.svg#MontserratRegular') format('svg')}
@font-face{font-family:'MontserratBold';src:url('../fonts/MontserratBold.eot');src:url('../fonts/MontserratBold.eot') format('embedded-opentype'),url('../fonts/MontserratBold.woff2') format('woff2'),url('../fonts/MontserratBold.woff') format('woff'),url('../fonts/MontserratBold.ttf') format('truetype'),url('../fonts/MontserratBold.svg#MontserratBold') format('svg')}
@font-face{font-family:'MyriadProRegular';src:url('../fonts/MyriadProRegular.eot');src:url('../fonts/MyriadProRegular.eot') format('embedded-opentype'),url('../fonts/MyriadProRegular.woff2') format('woff2'),url('../fonts/MyriadProRegular.woff') format('woff'),url('../fonts/MyriadProRegular.ttf') format('truetype'),url('../fonts/MyriadProRegular.svg#MyriadProRegular') format('svg')}
h1,h2,h3,h4,h5,h6{font-family:'Montserrat', MontserratRegular, Arial, sans-serif;}
.parallax-container h1{text-align:center;font-size:36px;text-transform:uppercase;}


/* Larger body text in light sections (Company/Contact) */
section.bg-light p,
section.bg-light li {
  font-size: 1.125rem; /* ~18px */
  line-height: 1.75;
}


/* Increase bullet-to-text gap in lists (content sections) */
.content-cols ul{
  list-style: none;        /* hide default marker to control spacing */
  padding-left: 1.25rem;   /* overall left indent */
  margin-left: 0;
}
.content-cols ul li{
  position: relative;
  padding-left: .45rem;    /* gap between custom bullet and text */
}
.content-cols ul li::before{
  content: "";
  position: absolute;
  left: -1.05rem;          /* bullet position inside indent */
  top: .6em;
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--brand-red);
}


/* --- Hero refinements --- */
.parallax-container{ position:relative; }
.parallax-container::before{
  content:""; position:absolute; inset:0;
  background: rgba(0,0,0,.35); /* slightly darker for contrast */
  pointer-events:none;
}
.parallax-container .content-container{ position:relative; z-index:1; }
.parallax-container .content-container p{
  font-size: 1.125rem; /* ~18px */
  line-height: 1.6;
}


/* --- GLightbox hint --- */
.glb-hint{
  position: fixed;
  right: 12px; bottom: 12px;
  z-index: 99999;
  padding: .35rem .55rem;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: .8rem;
  letter-spacing: .01em;
  user-select: none;
}


/* Brand accent for product tabs */
.nav-pills .nav-link.active{
  background-color: var(--brand-red);
}
.nav-pills .nav-link{
  border-radius: 999px;
}


/* --- Products tabs styling --- */
#products-content .nav-pills .nav-link{
  border: 1px solid var(--brand-red);
  color: var(--brand-red);
  background-color: transparent;
  border-radius: 999px;
  padding: .4rem .9rem;
  margin: 0 .25rem;
}
#products-content .nav-pills .nav-link:hover{
  background-color: rgba(237,28,36,.06);
}
#products-content .nav-pills .nav-link.active{
  background-color: var(--brand-red);
  color: #fff;
  border-color: var(--brand-red);
}

/* --- Products grid cards --- */
#products-content .bag-grid .col > .bag-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .9rem;
  background: #fff;
  padding: 1rem .75rem;
  height: 100%;
}
#products-content .bag-grid img{
  max-height: 80px;
  object-fit: contain;
}
#products-content .tab-pane{ padding-top: .25rem; }
#products-content .tab-pane > .row:first-child{ margin-top: 0 !important; }


/* --- Fix: remove custom bullets from nav-pills (red dots) --- */
#products-content .nav,
#products-content .nav li{ list-style: none; padding-left: 0; margin-left: 0; }
#products-content .nav li::before{ content: none !important; }

/* --- Tab content spacing (avoid large top gap) --- */
#products-content .tab-content{ margin-top: .5rem; }
#products-content .tab-pane{ padding-top: 0; margin-top: 0; }


/* --- Products tabs color override (active red, inactive dark grey) --- */
#products-content .nav-pills .nav-link{
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}
#products-content .nav-pills .nav-link:hover{
  background-color: #5c636a;
  border-color: #5c636a;
  color: #fff;
}
#products-content .nav-pills .nav-link.active{
  background-color: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
}

/* --- Spacing fixes for Special/Standard panes --- */
#products-content .tab-content{ margin-top: .35rem !important; }
#products-content .tab-pane{ padding-top: 0 !important; margin-top: 0 !important; }
#products-content .tab-pane > p{ margin-bottom: .75rem !important; } /* tighten lead */
#products-content .bag-grid{ margin-top: 0 !important; }


/* --- Products grid: 3-up & consistent cards --- */
#products-content .bag-grid .col{ display:flex; }
#products-content .bag-grid .col > .bag-card{ width:100%; }

/* Tighten top spacing across panes and leads */
#products-content .tab-content{ margin-top: .25rem !important; }
#products-content .tab-pane{ padding-top: 0 !important; margin-top: 0 !important; }
#products-content .tab-pane > *:first-child{ margin-top: 0 !important; }
#products-content #pane-special > p.text-muted,
#products-content #pane-standard > p.text-muted{ margin-bottom: .75rem !important; }

/* Optional: small nudge for Standard if something adds extra space above */
#products-content #pane-standard{ margin-top: 0 !important; }


/* --- Navbar: highlight Gallery link --- */
.navbar .nav-link.gallery-pill{
  background-color: var(--brand-red);
  color: #fff !important;
  border-radius: 999px;
  padding: .35rem .9rem;
  line-height: 1;
  margin-left: .25rem;
}
.navbar .nav-link.gallery-pill:hover,
.navbar .nav-link.gallery-pill:focus{
  background-color: #6c757d;
  color: #fff !important;
  text-decoration: none;
}


/* --- A11y: focus outline for Gallery pill --- */
.navbar .nav-link.gallery-pill:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(0,0,0,.25);
}


/* --- Navbar: make 'Gallery' look like primary button --- */
.navbar .nav-link.gallery-pill{
  background-color: var(--brand-red);
  border: 1px solid var(--brand-red);
  color: #fff !important;
  border-radius: .375rem;          /* like .btn */
  padding: .375rem .75rem;         /* like .btn */
  line-height: 1.25;
  font-weight: 600;
  display: inline-block;
  margin-left: .5rem;
}
.navbar .nav-link.gallery-pill:hover,
.navbar .nav-link.gallery-pill:focus{
  background-color: #c51e24;       /* darker red hover */
  border-color: #c51e24;
  color: #fff !important;
  text-decoration: none;
}
.navbar .nav-link.gallery-pill:active{
  background-color: #a9181d;
  border-color: #a9181d;
  color: #fff !important;
}
/* Keep accessible focus outline */
.navbar .nav-link.gallery-pill:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 .35rem rgba(237,28,36,.35);
}


/* --- Ensure navs never inherit custom bullets --- */
.nav, .nav ul { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }
.nav li::before { content: none !important; }


/* --- Hero contrast tweaks (non-destructive) --- */
.parallax-container::before{
  /* slightly stronger darkening for background images */
  background: rgba(0,0,0,.42);
}
.parallax-container .content-container{
  /* clearer light card behind text */
  background: rgba(255,255,255,0.62);
  border-radius: .5rem;
  padding: 1.2rem 1.6rem;
  box-shadow: 0 6px 30px rgba(0,0,0,.12);
  backdrop-filter: saturate(110%) blur(2px);
}
.parallax-container .content-container h1{
  color: #111;
}
.parallax-container .content-container p{
  color: #222;
}


/* --- Hero contrast tweak (v2) --- */
.parallax-container::before{
  background: linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 100%) !important;
}
.parallax-container .content-container{
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: .5rem;
  box-shadow: 0 6px 30px rgba(0,0,0,.12);
  padding: 1.25rem 1.5rem;
}
.parallax-container .content-container h1,
.parallax-container .content-container p{
  color: #111;
}
@media (max-width: 576px){
  .parallax-container .content-container{
    padding: .9rem 1rem;
  }
}