/* =====================================================================
   Jumbo Fish Farm — Modern Design System Overlay
   Loaded LAST (after the theme CSS) so these rules win.
   Restyles the legacy ThemeMascot theme into a clean, professional,
   cohesive aquaculture brand without changing markup/backend.
   Author: refactor pass, 2026
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --jff-primary:        #0a6cba;   /* ocean blue      */
  --jff-primary-dark:   #08508c;   /* deep blue       */
  --jff-primary-darker: #063a66;   /* navy            */
  --jff-accent:         #17b3c4;   /* aqua / teal      */
  --jff-accent-dark:    #0e94a3;
  --jff-ink:            #142a3f;   /* headings / dark  */
  --jff-body:           #3f5063;   /* body text        */
  --jff-muted:          #6b7c8f;
  --jff-line:           #e5edf4;   /* hairline border  */
  --jff-bg:             #ffffff;
  --jff-bg-alt:         #f4f8fc;   /* soft section bg  */
  --jff-footer:         #0d2033;   /* footer navy      */
  --jff-footer-2:       #0a1a29;
  --jff-radius:         14px;
  --jff-radius-sm:      10px;
  --jff-shadow:         0 10px 30px rgba(16, 42, 67, .08);
  --jff-shadow-lg:      0 18px 50px rgba(16, 42, 67, .14);
  --jff-shadow-sm:      0 4px 14px rgba(16, 42, 67, .06);
  --jff-transition:     .28s cubic-bezier(.4, 0, .2, 1);
  --jff-font:           'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --jff-head:           'Poppins', 'Inter', 'Segoe UI', sans-serif;
}

/* ---------- Base typography ---------- */
body {
  font-family: var(--jff-font) !important;
  color: var(--jff-body) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--jff-bg) !important;
}

h1, h2, h3, h4, h5, h6,
.font-raleway {
  font-family: var(--jff-head) !important;
  color: var(--jff-ink) !important;
  letter-spacing: -.01em;
}
h1 { font-weight: 700 !important; }
h2 { font-weight: 700 !important; }
h3, h4 { font-weight: 600 !important; }

p { color: var(--jff-body) !important; }

a {
  color: var(--jff-primary);
  transition: color var(--jff-transition);
}
a:hover, a:focus { color: var(--jff-primary-dark); text-decoration: none; }

/* Recolor the theme's colour utility classes → cohesive brand palette */
.text-theme-colored          { color: var(--jff-primary) !important; }
.text-theme-color-2          { color: var(--jff-accent) !important; }
.text-hover-theme-colored:hover { color: var(--jff-primary) !important; }
.bg-theme-colored            { background-color: var(--jff-primary) !important; }
.bg-theme-color-2            { background-color: var(--jff-ink) !important; }
.bg-theme-colored-transparent{ background-color: rgba(10, 108, 186, .82) !important; }
.border-theme-colored        { border-color: var(--jff-primary) !important; }
.text-white, .text-white p, .text-white h1, .text-white h2,
.text-white h3, .text-white h4, .text-white h5, .text-white h6 { color: #fff !important; }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--jff-head) !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  letter-spacing: .02em;
  border: none !important;
  transition: all var(--jff-transition) !important;
  box-shadow: none;
  padding: 11px 26px;
}
.btn-lg, .btn-xl { padding: 14px 34px !important; font-size: 14px !important; }
.btn-md { padding: 10px 24px !important; }

.btn-theme-colored,
.btn-colored.btn-theme-colored,
.btn-dark.btn-theme-colored,
.btn.bg-theme-colored {
  background: linear-gradient(135deg, var(--jff-primary), var(--jff-primary-dark)) !important;
  color: #fff !important;
}
.btn-theme-colored:hover,
.btn-colored.btn-theme-colored:hover,
.btn-dark.btn-theme-colored:hover,
.btn.bg-theme-colored:hover {
  background: linear-gradient(135deg, var(--jff-primary-dark), var(--jff-primary-darker)) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(10, 108, 186, .35);
}
.btn-gray, .btn-gray.btn-theme-colored {
  background: #fff !important;
  color: var(--jff-primary-dark) !important;
}
.btn-gray:hover, .btn-gray.btn-theme-colored:hover {
  background: var(--jff-accent) !important;
  color: #fff !important;
  transform: translateY(-2px);
}
.btn-border, .btn-transparent.btn-border {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,.85) !important;
  color: #fff !important;
}
.btn-border:hover { background: #fff !important; color: var(--jff-primary-dark) !important; }

/* ---------- Button groups: keep breathing room between adjacent buttons ----------
   Several inner pages place two <a class="btn ..."> links back-to-back with no
   gap (e.g. "Order X" + "Contact Us"). On desktop the browser's default inline
   whitespace hides the problem, but once the buttons wrap onto separate lines
   on narrower screens they end up touching. These rules give every button
   consistent spacing at all sizes, and stack them cleanly on mobile. */
.btn { margin: 0 10px 12px 0 !important; }
.btn:last-child { margin-right: 0 !important; }

@media (max-width: 767px) {
  .product-content .btn,
  .section-content .btn,
  .call-to-action .btn {
    display: inline-block;
    margin: 0 10px 14px 0 !important;
  }
}
@media (max-width: 480px) {
  /* Very small screens: full-width stacked buttons are easiest to tap */
  .product-content .btn,
  .call-to-action .col-sm-4.text-center .btn {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 0 14px 0 !important;
  }
  .product-content .btn:last-child { margin-bottom: 0 !important; }
}

/* ---------- Preloader (subtle) ---------- */
#preloader { background: var(--jff-bg) !important; }
.preloader-dot-loading .cssload-loading i { background: var(--jff-primary) !important; }

/* =====================================================================
   HEADER
   ===================================================================== */
.header-top.bg-theme-colored {
  background: linear-gradient(90deg, var(--jff-primary-darker), var(--jff-primary)) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-top .list-inline > li { font-size: 13.5px; }
.header-top a.text-white { transition: opacity var(--jff-transition); }
.header-top a.text-white:hover { opacity: .8; }
.header-top .list-inline > li > a i { transition: transform var(--jff-transition); }
.header-top ul.text-right li a i {
  width: 30px; height: 30px; line-height: 30px; text-align: center;
  display: inline-block; border-radius: 50%;
  background: rgba(255,255,255,.12); font-size: 14px;
}
.header-top ul.text-right li a:hover i { background: var(--jff-accent); }

.header-nav-wrapper.bg-white {
  box-shadow: 0 4px 24px rgba(16, 42, 67, .08);
  background: #fff !important;
}
.menuzord {
  padding: 0 !important;
  background: transparent !important;
}
/* Kill the broken inline logo height:500px */
.menuzord-brand img,
a.menuzord-brand img {
  height: 62px !important;
  width: auto !important;
  padding: 8px 0;
}
.menuzord-menu > li > a {
  font-family: var(--jff-head) !important;
  font-weight: 500 !important;
  font-size: 14.5px !important;
  color: var(--jff-ink) !important;
  padding: 26px 15px !important;
  text-transform: capitalize;
  transition: color var(--jff-transition);
}
.menuzord-menu > li:hover > a,
.menuzord-menu > li.active > a,
.menuzord-menu > li > a:hover {
  color: var(--jff-primary) !important;
  background: transparent !important;
}
.menuzord-menu > li > a:after {
  content: '';
  position: absolute;
  left: 15px; right: 15px; bottom: 18px;
  height: 3px; border-radius: 3px;
  background: var(--jff-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--jff-transition);
}
.menuzord-menu > li:hover > a:after,
.menuzord-menu > li.active > a:after { transform: scaleX(1); }

/* Dropdowns */
.menuzord-menu ul.dropdown {
  border: none !important;
  border-radius: var(--jff-radius-sm) !important;
  box-shadow: var(--jff-shadow) !important;
  padding: 8px 0 !important;
  overflow: hidden;
  border-top: 3px solid var(--jff-primary) !important;
}
.menuzord-menu ul.dropdown li a {
  font-family: var(--jff-font) !important;
  font-size: 13.5px !important;
  color: var(--jff-body) !important;
  padding: 9px 20px !important;
  transition: all var(--jff-transition);
}
.menuzord-menu ul.dropdown li:hover > a {
  background: var(--jff-bg-alt) !important;
  color: var(--jff-primary) !important;
  padding-left: 26px !important;
}
.label-danger {
  background: var(--jff-accent) !important;
  border-radius: 4px;
  font-size: 9px;
  padding: 2px 6px;
  vertical-align: middle;
}

/* =====================================================================
   SECTIONS & TITLES
   ===================================================================== */
section { position: relative; }
.section-title h2,
h2.line-height-1 {
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 22px !important;
}
.section-title.text-center h2:after,
h2.text-center.line-height-1:after {
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 0; width: 70px; height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--jff-primary), var(--jff-accent));
}
.section-title p, .section-content p { font-size: 16px; }

/* soft alternating background helper for readability */
#about { background: var(--jff-bg); }

/* ---------- About / welcome video image ---------- */
.video-popup img {
  border-radius: var(--jff-radius) !important;
  box-shadow: var(--jff-shadow-lg);
  margin-left: 0 !important;
}

/* =====================================================================
   MISSION / VISION / VALUES flip cards
   ===================================================================== */
.card {
  border-radius: var(--jff-radius) !important;
  overflow: hidden;
  box-shadow: var(--jff-shadow);
  min-height: 260px;
}
.card .card__front { border-radius: var(--jff-radius); }
.card.effect__hover:hover { box-shadow: var(--jff-shadow-lg); }
.card__front.bg-theme-colored {
  background: linear-gradient(140deg, var(--jff-primary), var(--jff-primary-dark)) !important;
}
.card__front.bg-black-333 {
  background: linear-gradient(140deg, var(--jff-ink), var(--jff-primary-darker)) !important;
}
.card__front[data-bg-color="#dedede"] {
  background: linear-gradient(140deg, var(--jff-accent), var(--jff-accent-dark)) !important;
}
.card__front .icon-box-title,
.card__front i { color: #fff !important; }
.icon-box .icon i.font-72 { font-size: 60px !important; }

/* =====================================================================
   "WHAT WE DO" project cards
   ===================================================================== */
.project.border-2px {
  border: 1px solid var(--jff-line) !important;
  border-radius: var(--jff-radius) !important;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--jff-shadow-sm);
  transition: transform var(--jff-transition), box-shadow var(--jff-transition);
}
.project.border-2px:hover { transform: translateY(-6px); box-shadow: var(--jff-shadow-lg); }
.project .thumb { overflow: hidden; }
.project .thumb img { transition: transform .5s ease; }
.project.border-2px:hover .thumb img { transform: scale(1.06); }
.project .project-details {
  border-bottom: 3px solid var(--jff-primary) !important;
  padding: 20px 18px !important;
}
.project .project-details h4 { font-size: 17px !important; margin-bottom: 10px !important; }
.project .project-details h4 a { color: var(--jff-ink) !important; }
.project .project-details h4 a:hover { color: var(--jff-primary) !important; }
.project .project-details p { font-size: 14px; color: var(--jff-muted) !important; }
.project .hover-link i,
.project .hover-link .btn { background: var(--jff-primary) !important; }

/* Framed feature images */
.frame { text-align: center; padding: 10px 0; }
.frame img {
  border-radius: var(--jff-radius) !important;
  box-shadow: var(--jff-shadow);
  max-width: 1170px;
  width: 92%;
}

/* =====================================================================
   Certifications block over parallax
   ===================================================================== */
.bg-white-transparent-9 {
  background: rgba(255,255,255,.96) !important;
  border-radius: var(--jff-radius) !important;
  box-shadow: var(--jff-shadow-lg);
}
.icon-box .icon i.text-theme-colored { color: var(--jff-primary) !important; }
.icon-box-title { color: var(--jff-ink) !important; }

/* =====================================================================
   Funfacts (counters)
   ===================================================================== */
.divider.parallax .funfact i { font-size: 44px !important; opacity: .9; }
.funfact .animate-number { font-size: 42px !important; font-weight: 700 !important; }
.funfact h4 { letter-spacing: .04em; font-size: 14px !important; }

/* =====================================================================
   Team slider
   ===================================================================== */
.team-members {
  border-radius: var(--jff-radius) !important;
  overflow: hidden;
  box-shadow: var(--jff-shadow-sm);
  border-bottom: none !important;
  background: #fff;
  transition: box-shadow var(--jff-transition), transform var(--jff-transition);
}
.team-members:hover { transform: translateY(-5px); box-shadow: var(--jff-shadow-lg); }
.team-members .team-thumb img { object-fit: cover; }
.team-members .team-details { background: #fff !important; padding: 16px 10px 20px !important; }
.team-members .team-details h4 a { color: var(--jff-ink) !important; }
.styled-icons.icon-theme-colored a { background: var(--jff-primary) !important; color: #fff !important; border: none !important; }
.styled-icons.icon-theme-colored a:hover { background: var(--jff-accent) !important; }

/* =====================================================================
   Call to action band
   ===================================================================== */
.call-to-action.bg-theme-colored {
  background: linear-gradient(120deg, var(--jff-primary-dark), var(--jff-accent-dark)) !important;
  border-radius: 0;
}
.call-to-action .icon-box i { border-color: rgba(255,255,255,.5) !important; }

/* =====================================================================
   Testimonials + video band
   ===================================================================== */
.testimonial-wrapper .thumb img {
  width: 90px; height: 90px; object-fit: cover;
  border-radius: 50%; border: 3px solid rgba(255,255,255,.4);
  margin: 0 auto;
}
.testimonial-wrapper .lead { font-size: 16px !important; font-style: italic; }
.embed-responsive { border-radius: var(--jff-radius); overflow: hidden; box-shadow: var(--jff-shadow); }

/* =====================================================================
   FORMS
   ===================================================================== */
.form-control {
  border: 1.5px solid var(--jff-line) !important;
  border-radius: var(--jff-radius-sm) !important;
  box-shadow: none !important;
  padding: 10px 14px !important;
  height: auto !important;
  color: var(--jff-ink) !important;
  transition: border-color var(--jff-transition), box-shadow var(--jff-transition);
}
.form-control:focus {
  border-color: var(--jff-primary) !important;
  box-shadow: 0 0 0 3px rgba(10, 108, 186, .12) !important;
}
label { color: var(--jff-ink); font-weight: 500; }

/* =====================================================================
   CLIENT LOGOS strip (footer.php)
   ===================================================================== */
.clients { padding: 30px 0; border-top: 1px solid var(--jff-line); }
.clients img { filter: grayscale(1); opacity: .6; transition: all var(--jff-transition); max-height: 70px; margin: 0 auto; }
.clients img:hover { filter: none; opacity: 1; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer.bg-black-222 {
  background: var(--jff-footer) !important;
}
.footer .widget.dark img { max-width: 150px; border-radius: 14px; }
.footer .widget.dark { color: #b7c4d1; }
.footer .widget-title.line-bottom {
  color: #fff !important;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 20px !important;
  font-size: 17px !important;
}
.footer .widget-title.line-bottom:after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 42px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--jff-primary), var(--jff-accent));
}
.footer .list a, .footer .list-border a, .footer .widget.dark a {
  color: #aebccb !important;
  transition: color var(--jff-transition), padding var(--jff-transition);
}
.footer .list a:hover, .footer .widget.dark a:hover { color: #fff !important; }
.footer .list.angle-double-right li:hover { padding-left: 4px; }
.footer .styled-icons li a {
  width: 38px; height: 38px; line-height: 38px; text-align: center;
  display: inline-block; border-radius: 50%;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  transition: all var(--jff-transition);
}
.footer .styled-icons li a:hover { background: var(--jff-primary) !important; transform: translateY(-3px); }
.newsletter-form .form-control { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: #fff !important; }
.newsletter-form .btn { border-radius: 0 var(--jff-radius-sm) var(--jff-radius-sm) 0 !important; padding: 0 16px; }

.footer-bottom.bg-theme-colored {
  background: var(--jff-footer-2) !important;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-bottom p, .footer-bottom a, .footer-bottom li { color: #8ba0b4 !important; }
.footer-bottom a:hover { color: #fff !important; }

/* Scroll to top */
.scrollToTop {
  background: var(--jff-primary) !important;
  border-radius: 50% !important;
  width: 44px; height: 44px; line-height: 44px !important;
  box-shadow: var(--jff-shadow);
  color: #fff !important;
  transition: all var(--jff-transition);
}
.scrollToTop:hover { background: var(--jff-primary-dark) !important; transform: translateY(-3px); }
.scrollToTop i { color: #fff !important; }

/* =====================================================================
   Inner page banners / page title areas (used across content pages)
   ===================================================================== */
.divider.parallax.layer-overlay .container { position: relative; z-index: 2; }
.funfact i, .divider .text-white { position: relative; z-index: 2; }

/* Generic content page cards / lists used on inner pages */
.list.theme-colored li:before,
.list.check.theme-colored li:before { color: var(--jff-primary) !important; }

/* =====================================================================
   MOBILE NAVIGATION (Menuzord adds .menuzord-responsive + shows .showhide
   below 900px). Style the hamburger + the stacked mobile menu to match.
   ===================================================================== */
/* Hamburger toggle */
.menuzord .showhide {
  height: 62px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: none;
}
.menuzord-responsive .showhide { display: block !important; }
.menuzord .showhide em {
  width: 26px !important;
  height: 3px !important;
  margin: 5px 22px 0 !important;
  border-radius: 3px;
  background: var(--jff-primary) !important;
  float: right;
}

/* Stacked mobile menu */
.menuzord-responsive .menuzord-menu {
  background: #fff;
  box-shadow: var(--jff-shadow);
  border-radius: 0 0 var(--jff-radius-sm) var(--jff-radius-sm);
  max-height: 78vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.menuzord-responsive .menuzord-menu > li > a {
  padding: 14px 20px !important;
  font-size: 15px !important;
  color: var(--jff-ink) !important;
  border-bottom: 1px solid var(--jff-line) !important;
  border-top: none !important;
}
/* remove desktop underline animation on mobile */
.menuzord-responsive .menuzord-menu > li > a:after { display: none !important; }
.menuzord-responsive .menuzord-menu > li:hover > a,
.menuzord-responsive .menuzord-menu > li.active > a,
.menuzord-responsive .menuzord-menu ul.dropdown li:hover > a {
  background: var(--jff-bg-alt) !important;
  color: var(--jff-primary) !important;
  padding-left: 20px !important;
}
/* Dropdown panels become inline, indented, flat */
.menuzord-responsive .menuzord-menu ul.dropdown {
  box-shadow: none !important;
  border-top: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: #fafcff !important;
}
.menuzord-responsive .menuzord-menu ul.dropdown li a {
  padding: 12px 20px 12px 38px !important;
  border-bottom: 1px solid var(--jff-line) !important;
}
/* Expand/collapse indicator arrows */
.menuzord-responsive .menuzord-menu li .indicator {
  height: 51px;
  line-height: 51px;
  border-left: 1px solid var(--jff-line);
  color: var(--jff-primary);
}
.menuzord-responsive .menuzord-menu li .indicator i { color: var(--jff-primary); }
.menuzord-responsive .menuzord-brand { margin: 6px 20px 6px 15px !important; }

/* =====================================================================
   RESPONSIVE polish (layout, typography, media)
   ===================================================================== */
@media (max-width: 1199px) {
  .menuzord-menu > li > a { padding: 26px 11px !important; font-size: 13.5px !important; }
  .menuzord-menu > li > a:after { left: 11px; right: 11px; }
}
@media (max-width: 991px) {
  .menuzord-brand img, a.menuzord-brand img { height: 48px !important; }
  .header-top { text-align: center; }
  .header-top .col-md-8, .header-top .col-md-4 { text-align: center; width: 100%; }
  .header-top ul.text-right { text-align: center !important; margin-top: 4px; }
  .header-nav-wrapper .container { padding-left: 15px; padding-right: 15px; }
  /* even columns for cards/features on tablet */
  #about .col-md-6 { margin-bottom: 24px; }
  .card { margin-bottom: 24px; }
  h2 { font-size: 28px !important; }
  .funfact { margin-bottom: 24px; }
}
@media (max-width: 767px) {
  body { font-size: 15px !important; }
  h1 { font-size: 28px !important; }
  h2 { font-size: 24px !important; line-height: 1.25 !important; }
  h3 { font-size: 20px !important; }
  /* generous, consistent vertical rhythm on phones */
  section .container { padding-top: 40px !important; padding-bottom: 40px !important; }
  .pt-70 { padding-top: 40px !important; }
  .pb-70, .pb-60 { padding-bottom: 40px !important; }
  /* header top bar: hide the phone/hours/social block on phones —
     stacking it (previous behaviour) turned it into a huge wall of
     text + 5 full-width social icons that pushed all page content
     down. The compact logo+hamburger nav below it is enough on mobile;
     phone/email are still one tap away via the Contact page & footer. */
  .header-top { display: none !important; }
  /* inner-page banners */
  .inner-header .title, .inner-header h2 { font-size: 24px !important; }
  .inner-header .container { padding-top: 40px !important; }
  /* media & embeds never overflow */
  .frame img { width: 96%; }
  iframe { max-width: 100% !important; }
  .main-content iframe[src*="google.com/maps"] { width: 100% !important; height: 320px !important; }
  img { height: auto; }
  /* stacked CTA */
  .call-to-action .icon-box { margin-left: 0 !important; text-align: center; }
  .call-to-action .col-sm-4.text-center { margin-top: 16px; }
  .call-to-action .media-left { float: none !important; display: inline-block; }
  /* funfacts 2-up feel */
  .funfact .animate-number { font-size: 34px !important; }
  /* tables scroll instead of breaking layout */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* footer: left-align, add breathing room */
  .footer .widget.dark { margin-bottom: 26px; }
  .footer-bottom .text-right { text-align: center !important; }
  .footer-bottom .col-md-6 { text-align: center; }
  .footer-bottom .col-md-6 + .col-md-6 { margin-top: 8px; }
}
@media (max-width: 480px) {
  .btn-lg, .btn-xl { padding: 12px 22px !important; font-size: 13px !important; }
  .menuzord-brand img, a.menuzord-brand img { height: 42px !important; }
  h2 { font-size: 22px !important; }
}