/* =====================================================================
   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: var(--jff-radius-sm) !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));
  border-bottom:1px solid rgba(255,255,255,.08);
}

.header-top .list-inline>li{
  font-size:13px;
}

.header-top a.text-white{
  transition:opacity var(--jff-transition);
}

.header-top a.text-white:hover{
  opacity:.85;
}

.header-top ul.text-right li a i{
  width:32px;
  height:32px;
  line-height:32px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  transition:all var(--jff-transition);
}

.header-top ul.text-right li a:hover i{
  background:var(--jff-accent);
}

.header-nav-wrapper{
  background:#fff !important;
  box-shadow:0 3px 18px rgba(16,42,67,.08);
}

.menuzord{
  background:transparent !important;
  padding:0 !important;
}

.menuzord-brand img{
  height:58px;
  max-height:58px;
  width:auto;
}

.menuzord-menu{
  background:transparent !important;
}

.menuzord-menu>li{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  margin:0 !important;
}

.menuzord-menu>li>a{
  position:relative;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:28px 20px !important;
  color:var(--jff-ink) !important;
  font-family:var(--jff-head) !important;
  font-size:14.5px;
  font-weight:500;
  text-transform:capitalize;
  transition:color var(--jff-transition);
}

.menuzord-menu>li:hover>a,
.menuzord-menu>li.active>a{
  color:var(--jff-primary) !important;
  background:transparent !important;
}

/* Animated underline (aligned to the 20px link padding above) */
.menuzord-menu>li>a::after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:18px;
  height:3px;
  background:var(--jff-primary);
  border-radius:3px;
  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);
}

/* Contact Us — CTA pill button, sits apart from the plain nav links on
   purpose so the extra spacing before it reads as intentional */
.menuzord-menu>li.nav-cta{
  display:flex;
  align-items:center;
  margin-left:8px !important;
}

.menuzord-menu>li.nav-cta>a{
  padding:10px 22px !important;
  background:var(--jff-primary) !important;
  color:#fff !important;
  border-radius:999px !important;
  text-transform:capitalize;
}

.menuzord-menu>li.nav-cta>a:hover{
  background:var(--jff-primary-dark) !important;
  color:#fff !important;
}

.menuzord-menu>li.nav-cta>a::after{
  content:none;
}

/* Dropdowns */

.menuzord-menu ul.dropdown{
  border:none !important;
  border-top:3px solid var(--jff-primary) !important;
  border-radius:12px !important;
  box-shadow:var(--jff-shadow);
  overflow:hidden;
  padding:8px 0;
}

.menuzord-menu ul.dropdown li a{
  padding:11px 20px !important;
  color:var(--jff-body) !important;
  transition:.25s;
}

.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;
  padding:2px 6px;
  font-size:9px;
}

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

/* =====================================================================
   FIX: HEADER OVERLAPPING & STRUCTURAL LAYOUT
   ===================================================================== */

/* 1. Uncomment and force the wrapper to act as a proper sticky/fixed element */
.header-nav-wrapper.bg-white {
  position: relative; /* Change to 'fixed' or 'sticky' if you want it to scroll with the page */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999 !important; /* Ensures the header stays on top of carousels/images */
  box-shadow: 0 4px 24px rgba(16, 42, 67, .08);
  background: #ffffff !important;
}

/* 2. Prevent content from diving under the header wrapper */
.main-content,
#wrapper > section:first-of-type,
.inner-header {
  margin-top: 0 !important;
  padding-top: 20px; /* Adjust this value if your top content still needs breathing room */
}

/* 3. Re-enable the Menuzord Navigation bar styles that were commented out */
.menuzord {
  padding: 0 !important;
  background: transparent !important;
  display: block;
  clear: both;
}

/* 4. Logo sizing and menu link padding/typography are now defined once,
   near the top of this file, alongside the animated underline and the
   Contact Us CTA button — see ".menuzord-brand img" and
   ".menuzord-menu>li>a" above. (Previously duplicated here and further
   below with conflicting !important values — consolidated.) */

.menuzord-menu > li:hover > a,
.menuzord-menu > li.active > a,
.menuzord-menu > li > a:hover {
  color: var(--jff-primary) !important;
  background: transparent !important;
}

/* =====================================================================
   MODERN BACKEND TESTIMONIAL CAROUSEL OVERRIDES
   ===================================================================== */
.jff-testimonial-wrapper {
  background: var(--jff-bg) !important;
  border: 1px solid var(--jff-line) !important;
  border-radius: var(--jff-radius) !important;
  padding: 40px 35px !important;
  box-shadow: var(--jff-shadow) !important;
}

.jff-carousel-title {
  margin-top: 0 !important;
  margin-bottom: 25px !important;
  font-family: var(--jff-head) !important;
  color: var(--jff-ink) !important;
  font-size: 22px !important;
}

/* Format text coming directly from about_testimonials() database query */
.jff-modern-carousel .testimonial-item,
.jff-modern-carousel .item {
  padding: 5px 2px !important;
}

/* Testimonial text paragraphs */
.jff-modern-carousel p {
  font-family: var(--jff-font) !important;
  color: var(--jff-body) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-style: italic;
  margin-bottom: 20px !important;
}

/* Author/Client metadata layout restructuring */
.jff-modern-carousel .testimonial-author,
.jff-modern-carousel .author {
  font-family: var(--jff-head) !important;
  color: var(--jff-ink) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}

.jff-modern-carousel .testimonial-role,
.jff-modern-carousel .title {
  font-family: var(--jff-font) !important;
  color: var(--jff-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  display: block;
}

/* Modernize Owl Carousel navigation dot indicators */
.jff-modern-carousel .owl-dots {
  text-align: left !important;
  margin-top: 25px !important;
}

.jff-modern-carousel .owl-dot {
  display: inline-block;
  zoom: 1;
}

.jff-modern-carousel .owl-dot span {
  width: 8px !important;
  height: 8px !important;
  margin: 5px 4px !important;
  background: #cbd5e1 !important; /* soft fallback gray */
  display: block;
  -webkit-backface-visibility: visible;
  transition: all var(--jff-transition);
  border-radius: 50% !important;
}

.jff-modern-carousel .owl-dot.active span {
  background: var(--jff-primary) !important;
  width: 24px !important; /* elongated active capsule dot styling */
  border-radius: 4px !important;
}