/* =====================================================================
   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; }

/* ---------- 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: stack contact lines */
  .header-top .list-inline > li { display: block; padding: 3px 0 !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; }
}