:root{
  --bg:#060606;
  --panel:#0B0F15;
  --border:rgba(255,255,255,0.10);
  --text:#F3F6FF;
  --muted:rgba(243,246,255,0.70);
  --red:#ED3A23;
  --orange:#FF5C00;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(237,58,35,0.12), transparent 60%),
    radial-gradient(1000px 500px at 80% 20%, rgba(255,92,0,0.08), transparent 55%),
    var(--bg);
}
a{color:inherit; text-decoration:none}
.muted{color:var(--muted)}
.container{max-width:1100px; margin:0 auto; padding:28px 16px}
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  background: rgba(6,6,6,0.85);
  backdrop-filter: blur(10px);
}
.brand{display:flex; align-items:center; gap:12px}
.mark{width:34px; height:34px}
.brand-name{font-weight:700; font-size:14px; letter-spacing:0.4px}
.brand-sub{font-size:12px; color:var(--muted)}
.nav{display:flex; gap:18px; align-items:center}
.nav a{font-size:13px; color:var(--muted)}
.nav a:hover{color:var(--text)}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:14px;
  background: linear-gradient(135deg, var(--red), var(--orange));
  color:#fff; font-weight:700; font-size:13px;
  transition: transform .15s ease;
  border:0; cursor:pointer;
}
.btn:hover{transform:translateY(-1px)}
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.02);
  font-weight:700; font-size:13px;
}
.card{
  border:1px solid var(--border);
  background: rgba(11,15,21,0.45);
  border-radius:22px;
  padding:20px;
}
.hero{
  position:relative;
  overflow:hidden;
  padding:46px 22px;
  border-radius:26px;
}
.hero h1{margin:0; font-size:38px; line-height:1.05}
.hero p{max-width:720px; font-size:15px}
.gradient-text{
  background: linear-gradient(90deg, var(--red), var(--orange));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.route{position:absolute; inset:0; opacity:.55; pointer-events:none;}
.grid{display:grid; gap:14px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width: 900px){
  .nav{display:none}
  .hero h1{font-size:30px}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
}
.kpi{border:1px solid var(--border); background: rgba(6,6,6,0.35); border-radius:18px; padding:14px}
.kpi .t{font-weight:700; font-size:13px}
.kpi .d{font-size:12px; color:var(--muted); margin-top:6px}
.product-card{transition: transform .15s ease, box-shadow .15s ease}
.product-card:hover{transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(237,58,35,0.25);}
.form input,.form textarea,.form select{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background: transparent;
  color: var(--text);
  outline:none;
}
.form textarea{resize:vertical}
.row{display:grid; gap:12px; grid-template-columns:1fr 1fr}
@media (max-width: 700px){ .row{grid-template-columns:1fr} }
.footer{border-top:1px solid var(--border); margin-top:50px; padding:34px 16px;}
.footer-grid{max-width:1100px; margin:0 auto; display:grid; gap:18px; grid-template-columns: 1.2fr 1fr 1fr;}
.footer-title{font-weight:800; font-size:14px; margin-bottom:10px}
.footer-links{display:grid; gap:8px}
.copyright{max-width:1100px; margin:20px auto 0; text-align:center; font-size:12px}
.wa-float{
  position:fixed; right:16px; bottom:16px;
  padding:12px 14px; border-radius:16px;
  background: rgba(237,58,35,0.16);
  border:1px solid var(--border);
  font-weight:800; font-size:13px;
}
.wa-float:hover{background: rgba(237,58,35,0.22)}


/* Brand logo visibility */
.logo-box{
  display:flex; align-items:center; justify-content:center;
  padding:6px 10px;
  border-radius:14px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.10);
}
.logo-img{height: 44px; width:auto; display:block}
@media (max-width: 900px){
  .logo-img{height:44px}
}

/* ===== V1.2 UI FIXES (logo visibility + stronger "rectangle" feel) ===== */
.logo-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:16px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 30px rgba(0,0,0,0.30);
}
.logo-full{
  height:150px; /* change to 36px if you want bigger */
  width:auto;
  display:block;
}

/* Make cards more "rectangle" + color-coded */
.card{
  border:1px solid rgba(255,255,255,0.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
  border-radius:22px;
  padding:22px;
}
.kpi{
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(6,6,6,0.45);
  border-radius:18px;
}

/* Stronger hero and section separation */
.hero{
  padding:56px 26px;
  border-radius:28px;
  background:
    radial-gradient(900px 420px at 15% 25%, rgba(237,58,35,0.18), transparent 55%),
    radial-gradient(800px 380px at 80% 10%, rgba(255,92,0,0.14), transparent 55%),
    rgba(11,15,21,0.55);
  border:1px solid rgba(255,255,255,0.12);
}

/* Better links/buttons look */
.nav a{font-weight:700}
.nav a.btn{color:#fff}
a.btn-outline{color:var(--text)}
a.btn-outline:hover{border-color: rgba(237,58,35,0.35)}

/* Visible section headings */
.section-title{
  font-weight:950;
  font-size:22px;
  letter-spacing:0.2px;
}
.section-sub{
  margin-top:8px;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}

/* Product cards: color edge */
.product-card{
  position:relative;
}
.product-card:before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:22px;
  padding:1px;
  background: linear-gradient(135deg, rgba(237,58,35,0.55), rgba(255,92,0,0.20), rgba(255,255,255,0.08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
  opacity:0.65;
}
.product-card:hover:before{opacity:1}

/* Mobile: keep logo + hide sub text */
@media (max-width: 900px){
  .brand-text{display:none}
  .logo-full{height:26px}
}

/* ===== Mark (zoom) logo ===== */
.mark-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:18px;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow: 0 12px 34px rgba(0,0,0,0.34);
  overflow:hidden;
}
.mark-zoom{
  width:34px;
  height:34px;
  display:block;
  transition: transform .18s ease;
}
.mark-pill:hover .mark-zoom{
  transform: scale(1.18);
}

/* ===== LIGHT THEME (Parchment + White) ===== */
:root{
  --bg:#FCF5E5;               /* Parchment */
  --panel:#FFFFFF;            /* White cards */
  --border:rgba(42,79,94,0.18);
  --text:#2A4F5E;             /* Main text */
  --muted:rgba(42,79,94,0.72);
  --primary:#2A4F5E;
  --primary2:#3C6C7F;
}

/* Page background */
body{
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(42,79,94,0.10), transparent 60%),
    radial-gradient(1000px 500px at 80% 20%, rgba(42,79,94,0.06), transparent 55%),
    var(--bg) !important;
  color: var(--text) !important;
}

/* Top navbar */
.topbar{
  background: rgba(252,245,229,0.90) !important; /* parchment glass */
  border-bottom: 1px solid var(--border) !important;
}

/* Nav links visible on light */
.nav a{
  color: rgba(42,79,94,0.78) !important;
}
.nav a:hover{ color: var(--text) !important; }

/* Cards become clear white rectangles */
.card{
  background: rgba(255,255,255,0.86) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 30px rgba(42,79,94,0.10);
}

/* KPI blocks */
.kpi{
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid var(--border) !important;
}

/* Hero panel */
.hero{
  background:
    radial-gradient(900px 420px at 15% 25%, rgba(42,79,94,0.14), transparent 55%),
    rgba(255,255,255,0.72) !important;
  border: 1px solid var(--border) !important;
}

/* Buttons: teal theme */
.btn{
  background: linear-gradient(135deg, var(--primary), var(--primary2)) !important;
  color:#fff !important;
}
.btn-outline{
  background: rgba(255,255,255,0.65) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* Footer */
.footer{
  border-top: 1px solid var(--border) !important;
  background: rgba(255,255,255,0.55);
}

/* Mark/logo pill matches light theme */
.mark-pill{
  background: rgba(255,255,255,0.75) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 12px 34px rgba(42,79,94,0.16) !important;
}

/* ===== NAV CTA FIX (Request Quote) ===== */
.nav a.cta{
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color:#FFFFFF !important;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(42,79,94,0.28);
  box-shadow: 0 10px 24px rgba(42,79,94,0.18);
  font-weight:900;
}
.nav a.cta:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
}

/* ===== NAV DASHBOARD BUTTON ===== */
.nav .nav-outline{
  padding:9px 12px;
  border-radius:12px;
  font-weight:900;
}
.nav a.cta{
  color:#FFFFFF !important;
}

/* ===== SVG LOGO HEADER FIX ===== */
.brand--svg{
  display:flex;
  align-items:center;
  gap:0;
}
.logo-svg{
  height:52px;        /* change to 40px if you want bigger */
  width:auto;
  display:block;
}
.topbar .container,
.topbar-inner{
  align-items:center;
}
@media (max-width: 900px){
  .logo-svg{ height:30px; }
}

/* ===== FORCE SVG LOGO VISIBILITY ===== */
/* Stop header items from shrinking the logo */
.topbar .brand{ 
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
}

/* Force SVG logo size */
.topbar .brand .logo-svg{
  height: 40px !important;     /* increase if you want bigger */
  width: auto !important;
  max-width: 260px !important;
  display: block !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Keep nav on right and allow it to wrap if needed */
.topbar .nav{
  margin-left: auto;
  flex: 1 1 auto;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 900px){
  .topbar .brand .logo-svg{ height: 32px !important; max-width: 200px !important; }
}

/* ===== BIGGER HEADER LOGO ===== */
.topbar .brand{ flex:0 0 auto !important; flex-shrink:0 !important; }
.topbar .brand .logo-svg{
  height: 52px !important;      /* BIG */
  width: auto !important;
  max-width: 340px !important;
  display:block !important;
}
@media (max-width: 900px){
  .topbar .brand .logo-svg{ height: 40px !important; max-width: 260px !important; }
}

/* ===== GREEN BACKGROUND #D4F5CE ===== */
:root{
  --bg:#D4F5CE;  /* NEW background */
}

/* Apply background */
body{
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(42,79,94,0.08), transparent 60%),
    radial-gradient(1000px 500px at 80% 20%, rgba(42,79,94,0.05), transparent 55%),
    var(--bg) !important;
}

/* ===== BG COLOR: F9FCD4 ===== */
:root{
  --bg: #F9FCD4;
}
body{
  background: var(--bg) !important;
}

/* Keep sections/cards readable on new background */
.card{
  background: rgba(255,255,255,0.88) !important;
}
.topbar{
  background: rgba(249,252,212,0.92) !important;
}

/* ===== BACKGROUND COLOR: #E8FFFA ===== */
:root{
  --bg: #E8FFFA;  /* mint background */
}

/* Page background */
body{
  background: var(--bg) !important;
}

/* ===== BACKGROUND COLOR OVERRIDE (#F0F1F2) ===== */
:root{
  --bg: #F0F1F2 !important;
}
body{
  background: #F0F1F2 !important;
}

/* ===== HERO WELCOME (BACKGROUND + RIGHT CARD) ===== */
:root{
  --hero-image: url('../img/hero.jpg'); /* Put your background image here */
}

.hero-welcome{
  position: relative;
  padding: 44px 0 52px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background-image:
    linear-gradient(90deg, rgba(240,241,242,0.92) 0%, rgba(240,241,242,0.65) 55%, rgba(240,241,242,0.35) 100%),
    var(--hero-image);
  background-size: cover;
  background-position: center;
}

.hero-welcome__overlay{
  position:absolute; inset:0;
  background: radial-gradient(1200px 520px at 20% 15%, rgba(42,79,94,0.14), transparent 60%);
  pointer-events:none;
}

.hero-welcome__grid{
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 26px;
  align-items: center;
  min-height: 420px;
}

.hero-welcome__eyebrow{
  font-weight: 900;
  letter-spacing: 0.2px;
  color: rgba(42,79,94,0.78);
}

.hero-welcome__title{
  margin-top: 10px;
  font-size: 54px;
  line-height: 1.03;
  font-weight: 950;
  color: #2A4F5E;
}

.hero-welcome__sub{
  margin-top: 14px;
  max-width: 640px;
  color: rgba(42,79,94,0.72);
  font-size: 15px;
  line-height: 1.55;
}

.hero-welcome__cta{ margin-top: 18px; display:flex; gap: 12px; flex-wrap: wrap; }

.hero-welcome__card{
  border-radius: 18px;
  background: rgba(255,255,255,0.92) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.12);
}

.hero-tabs{
  display:flex; gap:18px;
  border-bottom: 1px solid rgba(42,79,94,0.14);
  padding-bottom: 10px;
}

.hero-tab{
  background: transparent;
  border: 0;
  padding: 8px 10px;
  font-weight: 900;
  color: rgba(42,79,94,0.75);
  cursor: pointer;
  border-bottom: 3px solid transparent;
}

.hero-tab.is-active{
  color: #2A4F5E;
  border-bottom-color: #2A4F5E;
}

.hero-tabpanels{ padding-top: 12px; }
.hero-panel{ display:none; }
.hero-panel.is-active{ display:block; }

.hero-panel__label{
  font-weight: 900;
  color: rgba(42,79,94,0.85);
  margin-bottom: 8px;
}

.hero-panel__form{
  display:flex;
  gap: 10px;
  align-items:center;
}

.hero-input{
  flex: 1 1 auto;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(42,79,94,0.18);
  padding: 0 14px;
  outline: none;
  background: #fff;
}

.hero-search{
  height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  font-weight: 900;
}

.hero-panel__hint{
  margin-top: 10px;
  color: rgba(42,79,94,0.72);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 980px){
  .hero-welcome__grid{ grid-template-columns: 1fr; min-height: unset; }
  .hero-welcome__title{ font-size: 40px; }
}

/* ===== HERO SHIP (MP4 STYLE) ===== */
.hero-ship{
  position: relative;
  min-height: 70vh;
  background: url('../img/hero.jpg') center/cover no-repeat;
  overflow: hidden;
}
.hero-ship__overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0.05) 100%);
  pointer-events:none;
}
.hero-ship__wrap{
  position: relative;
  max-width: 1250px;
  margin: 0 auto;
  padding: 90px 18px 86px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: center;
}
.hero-ship__title{
  font-size: 72px;
  line-height: 1.02;
  letter-spacing: 0.2px;
  font-weight: 300;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 10px 40px rgba(0,0,0,0.35);
  margin: 0;
}
.hero-ship__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
  width: 380px;
  max-width: 100%;
  height: 68px;
  border-radius: 14px;
  background: rgba(255,255,255,0.95);
  color: #2A4F5E;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.hero-ship__card{
  background: rgba(255,255,255,0.95);
  border-radius: 16px;
  box-shadow: 0 25px 70px rgba(0,0,0,0.25);
  padding: 18px 18px 16px;
}
.hero-ship__tabs{
  display:flex;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.hero-tab{
  border: 0;
  background: transparent;
  cursor: pointer;
  font-weight: 900;
  color: rgba(15,40,70,0.85);
  padding: 8px 14px;
  border-bottom: 4px solid transparent;
}
.hero-tab.is-active{
  border-bottom-color: #0F2846;
}
.hero-panel{ display:none; padding: 16px 10px 8px; }
.hero-panel.is-active{ display:block; }

.hero-ship__label{
  font-weight: 900;
  color: rgba(0,0,0,0.75);
  margin-bottom: 10px;
}
.hero-ship__form{ display:block; }
.hero-ship__input{
  width: 100%;
  height: 56px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.15);
  padding: 0 16px;
  outline: none;
  margin-bottom: 12px;
}
.hero-ship__hint{
  margin-top: 12px;
  color: rgba(15,40,70,0.75);
  line-height: 1.4;
}
.hero-ship__btn{
  width: 100%;
  height: 60px;
  border-radius: 12px;
  border: 0;
  background: #0F2846;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
.hero-ship__btn--link{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.hero-ship__news{
  position: absolute;
  left: 0; right: 0;
  bottom: 18px;
  padding: 0 18px;
}
.hero-ship__news-inner{
  max-width: 1250px;
  margin: 0 auto;
  background: rgba(255,255,255,0.92);
  border-radius: 10px;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  gap: 16px;
  box-shadow: 0 18px 55px rgba(0,0,0,0.25);
}
.hero-ship__date{
  font-weight: 900;
  color: rgba(15,40,70,0.7);
  min-width: 120px;
}
.hero-ship__msg{
  flex: 1 1 auto;
  font-weight: 700;
  color: rgba(15,40,70,0.9);
}
.hero-ship__more{
  font-weight: 900;
  color: #0F2846;
  text-decoration: underline;
}

@media (max-width: 980px){
  .hero-ship__wrap{ grid-template-columns: 1fr; padding: 70px 16px 110px; }
  .hero-ship__title{ font-size: 46px; }
  .hero-ship__news{ bottom: 10px; }
  .hero-ship__date{ min-width: 90px; }
}

/* ===== JOVIAAN TOP BANNER IMAGE ===== */
.jv-banner{
  padding: 14px 0 10px;
  background: transparent;
}
.jv-banner__inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 14px;
}
.jv-banner__img{
  width: 100%;
  height: 520px;           /* change 520 -> 420 if you want shorter */
  object-fit: cover;
  border-radius: 16px;
  display: block;
  box-shadow: 0 18px 55px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.08);
}
@media (max-width: 980px){
  .jv-banner__img{ height: 320px; border-radius: 14px; }
}

/* ===== JOVIAAN BANNER ACTION ANIMATION ===== */
.jv-banner{
  position: relative;
  overflow: hidden;
}
.jv-banner__overlay{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 260px at 25% 30%, rgba(255,255,255,0.12), transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.02) 45%, rgba(0,0,0,0.00) 100%);
}

/* Make image fill the frame nicely */
.jv-banner__img{
  transform-origin: center;
  will-change: transform, filter;
}

/* (A) Ken Burns: slow zoom + pan */
.jv-banner--kenburns .jv-banner__img{
  animation: jvKenBurns 14s ease-in-out infinite alternate;
}
@keyframes jvKenBurns{
  0%   { transform: scale(1.02) translateX(0px) translateY(0px); filter: saturate(1.02) contrast(1.02); }
  100% { transform: scale(1.08) translateX(-22px) translateY(-10px); filter: saturate(1.06) contrast(1.04); }
}

/* (B) Optional “motion streaks” overlay */
.jv-banner::after{
  content:"";
  position:absolute; inset:-20%;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.18) 45%, transparent 60%),
    linear-gradient(120deg, transparent 0%, rgba(245,122,80,0.12) 45%, transparent 60%);
  transform: translateX(-25%) translateY(-10%) rotate(0deg);
  opacity: 0.0;
  pointer-events:none;
}
.jv-banner--streaks::after{
  opacity: 1;
  animation: jvStreaks 6s linear infinite;
}
@keyframes jvStreaks{
  0%   { transform: translateX(-35%) translateY(-12%) rotate(0deg); }
  100% { transform: translateX(25%)  translateY(8%)  rotate(0deg); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .jv-banner--kenburns .jv-banner__img{ animation: none !important; }
  .jv-banner--streaks::after{ animation: none !important; }
}

/* ===== JOVIAAN BANNER ROLL (SCROLL ANIMATION) ===== */
.jv-banner{
  padding: 18px 0 18px;
  background: transparent;
}
.jv-banner__inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 14px;
}
.jv-banner__frame{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 18px 55px rgba(0,0,0,0.12);
}
.jv-banner__img{
  width: 100%;
  height: 520px;          /* banner height */
  object-fit: cover;
  display: block;
  will-change: transform, filter;
  transform: translate3d(0,0,0) scale(1.03);
}
@media (max-width: 980px){
  .jv-banner__img{ height: 320px; }
}

/* ===== JV HOME FIX V2 ===== */
body{ background:#F0F1F2; }

.jv-banner{ padding:18px 0 10px; }
.jv-banner__inner{ max-width:1280px; margin:0 auto; padding:0 14px; }
.jv-banner__frame{ border-radius:16px; overflow:hidden; border:1px solid rgba(0,0,0,.08); box-shadow:0 18px 55px rgba(0,0,0,.12); }
.jv-banner__img{ width:100%; height:520px; object-fit:cover; display:block; will-change:transform,filter; transform:translate3d(0,0,0) scale(1.05); }
@media (max-width:980px){ .jv-banner__img{ height:320px; } }

.jv-homehero{ padding:18px 0 6px; }
.jv-homehero__inner{ max-width:1280px; margin:0 auto; padding:0 14px; display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:start; }
@media (max-width:980px){ .jv-homehero__inner{ grid-template-columns:1fr; } }

.jv-homehero h1{ margin:0 0 8px; font-size:44px; line-height:1.1; color:#2A4F5E; }
.jv-homehero h1 span{ color:#F05A28; }
.jv-homehero p{ margin:0 0 14px; color:rgba(42,79,94,.85); }

.jv-homehero__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.btn-primary{ display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:12px; background:#2A4F5E; color:#fff; text-decoration:none; font-weight:800; }
.btn-ghost{ display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:12px; background:#fff; color:#2A4F5E; text-decoration:none; font-weight:800; border:1px solid rgba(42,79,94,.25); }
.w100{ width:100%; }

.jv-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px; }
@media (max-width:980px){ .jv-kpis{ grid-template-columns:repeat(2,1fr);} }
.jv-kpi{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:10px 12px; }
.jv-kpi b{ display:block; color:#2A4F5E; }
.jv-kpi small{ color:rgba(42,79,94,.7); }

.jv-card{ background:#fff; border-radius:16px; border:1px solid rgba(0,0,0,.08); box-shadow:0 18px 55px rgba(0,0,0,.08); padding:12px; }
.jv-tabs{ display:flex; justify-content:space-between; gap:8px; border-bottom:1px solid rgba(0,0,0,.08); padding:6px 6px 10px; }
.jv-tab{ border:0; background:transparent; font-weight:900; color:#2A4F5E; padding:8px 10px; cursor:pointer; border-bottom:3px solid transparent; }
.jv-tab.is-active{ border-bottom-color:#2A4F5E; }
.jv-panel{ display:none; padding:12px 6px 6px; }
.jv-panel.is-active{ display:block; }
.jv-label{ font-weight:900; color:#2A4F5E; margin-bottom:8px; }
.jv-form input{ width:100%; height:52px; border-radius:12px; border:1px solid rgba(0,0,0,.15); padding:0 12px; margin-bottom:10px; }
.jv-form button{ width:100%; height:56px; border-radius:12px; border:0; background:#0F2846; color:#fff; font-weight:900; cursor:pointer; }
.jv-hint{ margin-top:10px; color:rgba(42,79,94,.75); }

.jv-section{ padding:24px 0; }
.jv-section__inner{ max-width:1280px; margin:0 auto; padding:0 14px; }
.jv-section h2{ margin:0 0 6px; color:#2A4F5E; }
.muted{ color:rgba(42,79,94,.75); margin:0 0 12px; }

.jv-grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (max-width:980px){ .jv-grid2{ grid-template-columns:1fr; } }
.jv-box{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:16px; }
.jv-box .tag{ font-weight:900; color:#2A4F5E; opacity:.75; font-size:12px; letter-spacing:.08em; }
.jv-box h3{ margin:6px 0 8px; color:#2A4F5E; }
.jv-box a{ color:#F05A28; text-decoration:none; font-weight:900; }

.jv-grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:980px){ .jv-grid4{ grid-template-columns:repeat(2,1fr);} }
.jv-mini{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:14px; }
.jv-mini b{ display:block; color:#2A4F5E; margin-bottom:6px; }
.jv-mini small{ color:rgba(42,79,94,.7); }

.jv-cta{ padding:18px 0 40px; }
.jv-cta__inner{ max-width:1280px; margin:0 auto; padding:16px 14px; background:#fff; border-radius:16px; border:1px solid rgba(0,0,0,.08); display:flex; align-items:center; justify-content:space-between; gap:14px; }
@media (max-width:980px){ .jv-cta__inner{ flex-direction:column; align-items:stretch; } }

/* ===== JV BANNER CAROUSEL V1 ===== */
.jv-banner__frame{ position:relative; overflow:hidden; }

.jv-banner__carousel{
  position:relative;
  width:100%;
  height:520px;
}
@media (max-width:980px){ .jv-banner__carousel{ height:320px; } }

.jv-banner__track{
  display:flex;
  height:100%;
  width:100%;
  transition: transform 800ms ease;
  will-change: transform;
}

.jv-banner__slide{
  flex: 0 0 100%;
  height:100%;
}

.jv-banner__media{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ===== JV BANNER CAROUSEL FADE V1 ===== */
/* Fade mode: make carousel a stacking context */
.jv-banner__carousel{ position:relative; }
.jv-banner__track{
  position:relative;
  height:100%;
}

/* Each slide fills the frame and fades in/out */
.jv-banner__slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity 900ms ease;
  pointer-events:none;
}
.jv-banner__slide.is-active{
  opacity:1;
  pointer-events:auto;
}

/* Keep images covering the frame */
.jv-banner__media{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Remove transform motion from old slide mode (only when fade is enabled) */
.jv-banner__carousel.is-fade .jv-banner__track{
  transform:none !important;
  transition:none !important;
}

/* ===== JV BANNER FADE FIX V2 ===== */
.jv-banner{ padding:18px 0 10px; }
.jv-banner__inner{ max-width:1280px; margin:0 auto; padding:0 14px; }
.jv-banner__frame{ border-radius:16px; overflow:hidden; border:1px solid rgba(0,0,0,.08); box-shadow:0 18px 55px rgba(0,0,0,.12); background:#fff; }

.jv-banner__carousel{ position:relative; width:100%; height:520px; }
@media (max-width:980px){ .jv-banner__carousel{ height:320px; } }

.jv-banner__slide{ position:absolute; inset:0; opacity:0; transition:opacity 900ms ease; pointer-events:none; }
.jv-banner__slide.is-active{ opacity:1; pointer-events:auto; }

.jv-banner__media{ width:100%; height:100%; object-fit:cover; display:block; }

/* ===== JV FADE HOTFIX V1 ===== */
.jv-banner__inner{ max-width:1280px; margin:0 auto; padding:0 14px; }
.jv-banner__frame{ border-radius:16px; overflow:hidden; border:1px solid rgba(0,0,0,.08); box-shadow:0 18px 55px rgba(0,0,0,.12); background:#fff; }

.jv-banner__carousel.is-fade{ position:relative; width:100%; height:520px; }
@media (max-width:980px){ .jv-banner__carousel.is-fade{ height:320px; } }

.jv-banner__carousel.is-fade .jv-banner__slide{
  position:absolute !important;
  inset:0 !important;
  opacity:0 !important;
  transition: opacity 900ms ease !important;
  pointer-events:none;
}
.jv-banner__carousel.is-fade .jv-banner__slide.is-active{
  opacity:1 !important;
  pointer-events:auto;
}
.jv-banner__media{ width:100%; height:100%; object-fit:cover; display:block; }

/* ===== JV HIDE TRACK BOX + DUP BANNER V3 ===== */
/* Hide duplicate banners if JS marks them */
.jv-banner.is-dup { display:none !important; }

/* Fallback hide for the Tracking/Schedules/Offices widget (Chrome/Edge supports :has) */
@supports selector(:has(*)) {
  section:has(input[placeholder*="Container"]),
  section:has(input[placeholder*="Booking"]),
  section:has(input[placeholder*="B/L"]),
  section:has(input[placeholder*="BL"]),
  div:has(input[placeholder*="Container"]),
  div:has(input[placeholder*="Booking"]),
  div:has(input[placeholder*="B/L"]),
  div:has(input[placeholder*="BL"]),
  aside:has(input[placeholder*="Container"]),
  article:has(input[placeholder*="Container"]) {
    display:none !important;
  }
}

/* ===== JV BOTTOM SPACE FIX V1 ===== */
/* Reduce large bottom gaps safely */
main{ padding-bottom: 18px !important; }
section:last-of-type{ margin-bottom: 0 !important; padding-bottom: 12px !important; }

/* If any section forces full viewport height, neutralize it */
.jv-cta, .jv-section, .hero, .hero-ship, .jv-homehero{
  min-height: auto !important;
}

/* Footer spacing (common cause) */
footer{ padding-top: 18px !important; padding-bottom: 18px !important; }
footer .container, footer .footer-inner{ padding-bottom: 0 !important; }

/* Remove accidental big margins */
body{ margin-bottom: 0 !important; }

/* ===== JV BANNER SIZE + TYPO SPACING V1 ===== */
/* 1) Bigger banner (occupy more space, premium look) */
.jv-banner__carousel,
.jv-banner__img{
  height: 680px !important;   /* Desktop banner height */
}
@media (max-width: 980px){
  .jv-banner__carousel,
  .jv-banner__img{
    height: 420px !important; /* Mobile banner height */
  }
}

/* 2) Home hero typography: bigger + more breathing space */
.jv-homehero h1{
  font-size: 54px !important;
  line-height: 1.15 !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 16px !important;
}

.jv-homehero p{
  font-size: 18px !important;
  line-height: 1.75 !important;
  margin-bottom: 22px !important;
}

/* Buttons spacing */
.jv-homehero__actions{
  gap: 14px !important;
  margin-bottom: 20px !important;
}
.btn-primary, .btn-ghost{
  padding: 14px 18px !important;
  border-radius: 14px !important;
}

/* KPI cards spacing */
.jv-kpis{ gap: 14px !important; margin-top: 18px !important; }
.jv-kpi{ padding: 14px 14px !important; border-radius: 14px !important; }
.jv-kpi small{ line-height: 1.4 !important; }

/* 3) Global section spacing (fills page more naturally) */
.jv-section{ padding: 42px 0 !important; }
.jv-cta{ padding: 34px 0 56px !important; }

/* Optional: give the top area more presence */
.jv-homehero{ padding: 28px 0 14px !important; }

/* ===== JV COMPACT FOOTER + END SPACING V1 ===== */
/* 1) Reduce extra space at page end */
main{ padding-bottom: 10px !important; }
body{ margin-bottom: 0 !important; }

/* 2) Compact the last sections (common cause of huge bottom space) */
.jv-cta{ padding: 18px 0 22px !important; }
.jv-section{ padding: 22px 0 !important; }
.jv-homehero{ padding: 16px 0 10px !important; }

/* 3) Footer compact (most important) */
footer,
.site-footer,
.footer{
  margin-top: 14px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* reduce big inner paddings if present */
footer .container,
footer .footer-inner,
footer .footer-container,
.footer .container,
.footer-inner,
.footer-container{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* reduce big footer “rows” / blocks if present */
.footer-top,
.footer-bottom,
.footer-row,
.footer-grid{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  margin-bottom: 0 !important;
}

/* kill typical spacer divs that create empty height */
.spacer,
.footer-spacer,
.bottom-spacer,
.section-spacer{
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
}

/* ===== JV FULL-BLEED TOP BANNER (even inside .container) ===== */
.container > .jv-banner{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* pull up into container padding so banner sits closer to the navbar */
  margin-top: -18px;
}

/* ===== JV BACKGROUND FX (subtle animated gradients) ===== */
body{ position: relative; }
#jv-bgfx{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(255,92,0,0.14), transparent 62%),
    radial-gradient(1000px 600px at 82% 12%, rgba(237,58,35,0.12), transparent 64%),
    radial-gradient(1200px 700px at 50% 90%, rgba(42,79,94,0.10), transparent 62%);
  background-size: 200% 200%;
  animation: jvBgMove 18s ease-in-out infinite alternate;
}
@keyframes jvBgMove{
  0%{ background-position: 0% 0%; }
  100%{ background-position: 100% 100%; }
}

/* keep real content above bgfx */
body > header,
body > main,
body > footer,
body > a.wa-float{
  position: relative;
  z-index: 1;
}

/* ============================================================
   BRAND NAVBAR OVERRIDES (Black + Joviaan "International" red)
   ============================================================ */
:root{
  --jv-accent: #EF3C25;   /* matches the "INTERNATIONAL" color */
}

/* Black navbar */
.topbar{
  background: #000 !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

/* Logo sits on black */
.topbar .brand .logo-svg{
  height: 52px !important;
  width: auto !important;
  max-width: 360px !important;
}

/* Nav link colors */
.topbar .nav a{
  color: rgba(255,255,255,0.88) !important;
  font-weight: 800;
}
.topbar .nav a:hover{
  color: var(--jv-accent) !important;
}

/* Dashboard outline button */
.topbar .nav a.nav-outline{
  background: transparent !important;
  border: 1px solid rgba(239,60,37,0.65) !important;
  color: #fff !important;
}
.topbar .nav a.nav-outline:hover{
  border-color: var(--jv-accent) !important;
  color: var(--jv-accent) !important;
}

/* Request Quote CTA */
.topbar .nav a.cta{
  background: var(--jv-accent) !important;
  border: 1px solid rgba(239,60,37,0.85) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(239,60,37,0.22) !important;
}
.topbar .nav a.cta:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}
















/* === HEADER_LOGO_OVERRIDE_START === */
/* Slightly smaller logo (balanced) */
.topbar{
  padding: 7px 16px !important;
}

.topbar .brand .logo-svg{
  height: 62px !important;
  width: auto !important;
  max-width: 520px !important;
  display: block !important;
}

@media (max-width: 900px){
  .topbar{
    padding: 6px 12px !important;
  }
  .topbar .brand .logo-svg{
    height: 48px !important;
    max-width: 380px !important;
  }
}
/* === HEADER_LOGO_OVERRIDE_END === */


/* ===========================
   CMS Custom Pages (ONLY)
   Permanent visibility + readability
   =========================== */
.cms-content{ color: var(--text); }
.cms-content p, .cms-content li, .cms-content td, .cms-content th{ color: var(--text); }

/* Word/Editor often saves inline black text -> force readable */
.cms-content [style*="color"]{ color: var(--text) !important; }

/* Word/Editor sometimes saves white backgrounds -> keep clean */
.cms-content [style*="background"]{ background: transparent !important; }

.cms-content a{ color: var(--orange); text-decoration: underline; }
.cms-content h1, .cms-content h2, .cms-content h3{ margin: 16px 0 10px; line-height: 1.2; }
.cms-content ul, .cms-content ol{ padding-left: 18px; }
.cms-content hr{ border:0; border-top:1px solid var(--border); margin:18px 0; }

.cms-content table{ width:100%; border-collapse:collapse; margin:14px 0; }
.cms-content th, .cms-content td{ border:1px solid var(--border); padding:10px; vertical-align:top; }
.cms-content th{ background: rgba(255,255,255,0.06); }


/* Footer background image */
.footer{
  position: relative;
  overflow: hidden;
  background: url("../img/footer/footer-bg.jpg") center/cover no-repeat;
}
.footer::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  pointer-events: none;
  z-index: 0;
}
.footer > *{
  position: relative;
  z-index: 1;
}





/* ===== Footer background image (force) ===== */
footer.footer{
  position: relative !important;
  overflow: hidden !important;

  /* force the image (works in /joviaan subfolder) */
  background: url("/joviaan/assets/img/footer/footer-bg.png") center/cover no-repeat !important;
  background-attachment: scroll !important;
}

/* overlay for readability */
footer.footer::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background: rgba(0,0,0,0.35) !important;  /* increase to 0.50 if you want darker */
  z-index:0 !important;
  pointer-events:none !important;
}

/* keep footer content above overlay */
footer.footer *{
  position: relative;
  z-index: 1;
}





/* ===== Footer text color fix for image background ===== */
footer.footer,
footer.footer .footer-title,
footer.footer p,
footer.footer a,
footer.footer div,
footer.footer span,
footer.footer small,
footer.footer li{
  color: rgba(255,255,255,0.92) !important;
}

footer.footer a{
  color: #ffffff !important;
  text-decoration: none;
}
footer.footer a:hover{
  text-decoration: underline;
}

/* Make muted text readable too */
footer.footer .muted{
  color: rgba(255,255,255,0.75) !important;
}

/* Make overlay a bit darker for readability */
footer.footer::before{
  background: rgba(0,0,0,0.55) !important;
}

/* Buttons inside footer */
footer.footer .btn-outline,
footer.footer .btn,
footer.footer .btn-primary{
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.55) !important;
}