/* ================================
   CSS RESET
   ================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* Fonts */
@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeue-Medium.eot');
    src: url('../fonts/HelveticaNeue-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeue-Medium.woff2') format('woff2'),
        url('../fonts/HelveticaNeue-Medium.woff') format('woff'),
        url('../fonts/HelveticaNeue-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}



/* ================================
   ROOT VARIABLES
   ================================ */
:root {
  /* Font Families */
  --ff-degular: "degular", sans-serif;
  --ff-poppins: "Poppins", sans-serif;
--ff-muli: "muli", sans-serif;
--ff-helvetica:'Helvetica Neue';

  /* Font Weights */
  --fw-thin: 100;
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;


  /* Colors (starter placeholders) */
--color-primary: #132136;
  --color-black: #000000;
  --color-white: #ffffff;
}


html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  overflow-x: hidden;

}



/* ================================
   LINKS
   ================================ */
a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  text-decoration: none;
}

/* ================================
   IMAGES & MEDIA
   ================================ */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

 

 

/* ---------- Sticky header ---------- */
.site-header{
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
   transition: background-color 0.3s ease, box-shadow 0.3s ease;
  background: transparent;
}

/* When scrolled */
.site-header.is-scrolled {
  background-color: var(--color-primary);
  
}
 .site-header  .jw-brand img{
  width: 220px;
 
  transition: all 0.5s linear;
 }
 .site-header.is-scrolled .jw-brand img{
  width: 150px;
  transition: all 0.5s linear;
 }

 
.site-header.is-scrolled::after{ opacity: 1; }

.jw-nav{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 0;
}

/* ---------- Brand ---------- */
 
 

 
.jw-brand-top{
  display:block;
  font-family: var(--ff-muli);
  font-weight: var(--fw-bold);
  letter-spacing:.4px;
  text-transform: uppercase;
  font-size: 14px;
}
.jw-brand-bottom{
  display:block;
  font-family: var(--ff-muli);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  font-size: 16px;
}

/* ---------- Desktop menu layout ---------- */
.nav-check{ display:none; }

.jw-nav-links{
  display:flex;
  align-items:center;
  gap: 22px;
}

.jw-menu{
  list-style:none;
  display:flex;
  align-items:center;
  gap: 22px;
  margin:0;
  padding:0;
}

.jw-link{
  font-family: var(--ff-muli);
  font-size: 16px;
  font-weight: var(--fw-regular);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  position:relative;
  padding: 8px 2px;
  transition: color .2s ease;
}

.jw-link:hover{
  color: var(--color-white);
   
}

.jw-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:1px;
  background: rgba(255,255,255,.55);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .2s ease;
}
.jw-link:hover::after{ transform: scaleX(1); }

.jw-nav-right{
  display:flex;
  align-items:center;
  gap: 14px;
}

/* Contact Us pill (anchor, not button) */
.jw-cta{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-primary);
  text-decoration:none;

  font-family: var(--ff-muli);
  font-size: 16px;
  font-weight: var(--fw-extrabold);

  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  transition: transform .2s ease, box-shadow .2s ease;
}

.jw-cta i{ font-size: 18px; }

.jw-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}

/* Language */
.jw-lang{
  display:flex;
  align-items:center;
  gap: 10px;
  font-family: var(--ff-muli);
  font-size: 14px;
  color: rgba(255,255,255,.9);
}

.jw-lang-link{
  text-decoration:none;
  color: rgba(255,255,255,.9);
  transition: opacity .2s ease;
}
.jw-lang-link:hover{ opacity: .95; }
.jw-lang-link.is-active{ color: var(--color-white); }

.jw-lang-sep{
  opacity: .7;
}

/* Mobile toggle icon */
.nav-toggle{
  display:none; /* shown in responsive.css */
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: var(--color-white);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.nav-toggle i{
  font-size: 22px;
  line-height: 1;
}

.nav-ico-close{ display:none; }
.nav-check:checked ~ .nav-toggle .nav-ico-open{ display:none; }
.nav-check:checked ~ .nav-toggle .nav-ico-close{ display:inline; }
/* =========================
   Dropdown (Desktop + Mobile)
   ========================= */

.jw-has-dropdown{
  position: relative;
}

/* Small arrow icon */
.jw-dd-ico{
  font-size: 18px;
  margin-left: 6px;
  vertical-align: -2px;
  transition: transform .2s ease;
}

/* Dropdown panel */
.jw-dropdown{
  list-style: none;
  margin: 0;
  padding: 10px 0;
  min-width: 220px;

  position: absolute;
  top: calc(100% + 10px);
  left: 0;

  background: var(--color-primary);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;

  z-index: 1000;
}

/* Links inside dropdown */
.jw-dd-link{
  display: block;
  padding: 10px 14px;

  font-family: var(--ff-muli);
  font-size: 16px;
  font-weight: var(--fw-regular);

  color: rgba(255,255,255,.92);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.jw-dd-link:hover,
.jw-dd-link:focus{
  background: rgba(255,255,255,.10);
  color: var(--color-white);
  outline: none;
}

 
@media (min-width: 992px){
  .jw-has-dropdown:hover > .jw-dropdown,
  .jw-has-dropdown:focus-within > .jw-dropdown{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .jw-has-dropdown:hover .jw-dd-ico,
  .jw-has-dropdown:focus-within .jw-dd-ico{
    transform: rotate(180deg);
  }
}

 
@media (max-width: 991.98px){
  .jw-dropdown{
    position: static;
    min-width: 100%;
    box-shadow: none;
    border-radius: 12px; 
    max-height: 0;
    overflow: hidden;
    opacity: 1;            
    visibility: visible;
    transform: none;
    padding: 0;
    transition: max-height .25s ease, padding .25s ease;
    background-color: transparent;
    
  }

 
  .jw-has-dropdown > .jw-dropdown-toggle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
 
  #nav-check:checked ~ .jw-nav-links .jw-has-dropdown:focus-within > .jw-dropdown{
    max-height: 420px;
    padding: 8px 0;
  }

  #nav-check:checked ~ .jw-nav-links .jw-has-dropdown:focus-within .jw-dd-ico{
    transform: rotate(180deg);
  }

 
  .jw-dd-link{
    padding-left: 22px;
  }
}






/* =========================
   MOBILE NAV SCROLL + BODY LOCK
========================= */
body.menu-open{
  overflow: hidden;
  height: 100vh;
}

/* mobile nav scroll */
@media (max-width: 992px){
  .jw-nav-links{
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* overlay */
.nav-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

body.menu-open .nav-overlay{
  opacity: 1;
  pointer-events: auto;
}


/* ---------- Hero ---------- */
/* HERO (full-width image, container text) */
.jw-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Full screen image */
.jw-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.jw-hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

 
.jw-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  /* background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0.15) 100%
  ); */
}

/* Content */
.jw-hero .container {
  position: relative;
  z-index: 3;
}

.jw-hero-inner {
  max-width: 640px;
  padding: 120px 0 80px;
}

.jw-hero-title {
  margin: 0 0 18px;
  color: var(--color-white);
  font-family: var(--ff-degular);
  font-weight: var(--fw-medium);
  font-size: 80px;
  line-height: 0.98;
}

.jw-hero-sub {
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 23px;
  line-height: 1.6;
  max-width: 560px;
}

/* Anchor button */
 /* CTA with white circle icon (Hero) */
.jw-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px 10px 10px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: var(--color-white);
  text-decoration: none;

  font-family: var(--ff-muli);
  font-weight: var(--fw-bold);
  font-size: 20px;

  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

/* White circular icon */
.jw-hero-cta-icon {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jw-hero-cta-icon i {
  color: var(--color-primary);
  font-size: 18px;
}

/* Text */
.jw-hero-cta-text {
  white-space: nowrap;
}

/* Hover animation (subtle, premium) */
.jw-hero-cta:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 1);
}

.jw-hero-cta:hover .jw-hero-cta-icon {
  transform: rotate(-8deg);
  transition: transform 0.25s ease;
}




/* =========================
   ABOUT SECTION
   ========================= */
.jw-about {
  margin-top: 90px;  
  padding: 60px 0;
  position: relative;
  
   
}

/* LEFT CONTENT */
.jw-about-content {
  position: relative;
  max-width: 520px;
}

 .fancyCircle {
  position: absolute;
  top: -50px;
  left: -14%;

 }

  .fancyCircle img{
    width: 300px;
  }

/* Heading */
.jw-about-title {
  margin-bottom: 24px;
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 60px;
  line-height: 1.1;
  color: var(--color-primary);
}

/* Paragraph */
.jw-about-text {
  margin-bottom: 18px;
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-black);
}

/* CTA Anchor */
.jw-about-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding: 12px 26px;
  border-radius: 999px;
  background-color: #002f43;
  color: var(--color-white);
  text-decoration: none;

  font-family: var(--ff-muli);
  font-weight: var(--fw-extrabold);
  font-size: 16px;

  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.jw-about-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 47, 67, 0.35);
}

/* RIGHT IMAGES */
.jw-about-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}

/* Image placeholders */
.jw-img {
  background-color: #e5e7eb; /* placeholder */
  border-radius: 18px;
  background-size: cover;
  background-position: center;
}

/* Large left image */
.jw-img-large {
  grid-row: span 2;
  border-radius: 25px;
  min-height: 420px;
  overflow: hidden;
}

.jw-img-large img{
  width: inherit;
  height: 100%;
  object-fit: cover;
}

/* Right top */
.jw-img-top {
  min-height: 200px;
    border-radius: 25px;overflow: hidden;
}

/* Right bottom */
.jw-img-bottom {
  min-height: 200px;
    border-radius: 25px;overflow: hidden; 
}




/* =========================
   PRODUCTS SECTION
   ========================= */
.jw-products{
  position: relative;
  overflow: hidden;
  background-image: url(../images/productbg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin-top: 90px;
}

/* background image placeholder */
.jw-products-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.jw-products-bg-img{
  width:100%;
  height:100%;
  object-fit:cover;
}

 
/* columns sit above bg */
.jw-products .row{
  position: relative;
  z-index: 2;
  min-height: 680px; /* similar height to your screenshot */
}

/* LEFT */
.jw-products-left {
  height: 100%;
  padding: 90px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* ✅ THIS FIXES IT */
}
.jw-products-title{
  margin: 0 0 18px;
  color: var(--color-white);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 60px;
  line-height: 1.05;
}

.jw-products-text{
  margin: 0 0 18px;
  color: rgba(255,255,255,.82);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.7;
  max-width: 420px;
}

/* All Products CTA (anchor) */
 /* All Products CTA (full width like design) */
.jw-products-cta{
  margin-top: 22px;
  width: auto; 
  display:flex;
  align-items:center;
  gap: 14px;

  padding: 10px 20px;
  border-radius: 999px;
  background: var(--color-white);
  color: #002F43;
  text-decoration:none;
  font-family: var(--ff-muli);
  font-weight: var(--fw-extrabold);
  font-size: 16px;

  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* circle icon same */
.jw-products-cta-icon{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #002F43;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.jw-products-cta-icon i{
  color: var(--color-white);
  font-size: 18px;
}

.jw-products-cta-text{
  flex: 1;
}


/* MIDDLE IMAGE */
.jw-products-mid{
  height:100%;
}
.jw-products-mid-img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* RIGHT */
.jw-products-right{
  height:100%;
  padding: 70px 60px;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* RIGHT ACCORDION (UPDATED to match design) */
.jw-products-acc{
  width: 100%;
  max-width: 520px;
  display:flex;
  flex-direction: column;
  gap: 22px;
}

/* Gold filled pill */
.jw-acc-item{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;

  border: 1px solid rgba(212,175,55,.55);
 
  box-shadow: 0 16px 45px rgba(0,0,0,.35);
}

/* header row */
.jw-acc-head{
  list-style: none;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;

  padding: 22px 22px 22px 34px;
  cursor:pointer;
  user-select:none;
}
.jw-acc-head::-webkit-details-marker{ display:none; }

/* title */
.jw-acc-title{
  color: var(--color-white);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 25px;
  line-height: 1.1;
}

/* right icon circle */
.jw-acc-ico{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.95);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.jw-acc-ico i{
  color: var(--color-white);
  font-size: 24px;
  line-height:1;
}

/* + / - swap */
.jw-ico-minus{ display:none; }
.jw-acc-item[open] .jw-ico-plus{ display:none; }
.jw-acc-item[open] .jw-ico-minus{ display:inline; }

/* Body (when open) */
.jw-acc-body{
  padding: 0 34px 22px 34px;
}

.jw-acc-body p{
  margin: 0;
  color: rgba(255,255,255,.86);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.65;
}

/* Open state becomes expanded card */
.jw-acc-item[open]{
  border-radius: 26px;
  border: 1px solid rgba(212,175,55,.55);
   
}

.jw-acc-item[open] .jw-acc-head{
  padding-bottom: 10px;
}

/* hover subtle lift */
.jw-acc-item:hover{
  transform: translateY(-1px);
  transition: transform .2s ease;
}




/* =========================
   STATS COUNTER SECTION
   ========================= */
.jw-stats{
  padding:125px 0 55px 0;
  background: var(--color-white);
}

.jw-stats-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  align-items:center;
  text-align:center;
}

.jw-stat-num{
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  gap: 2px;
  color: var(--color-primary); /* #132136 */
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 50px;
  line-height: 1;
}

.jw-suffix{
  color: var(--color-primary);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 50px;
  line-height: 1;
}

.jw-stat-label{
  margin-top: 6px;
  font-family: var(--ff-muli);
  font-weight: var(--fw-regular);
  font-size: 16px;
  color: #002F43;
}



/* =========================
   WHY CHOOSE US SECTION
   ========================= */
.jw-why{
  padding: 70px 0;
  background: var(--color-white);
}

.jw-why-wrap{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  min-height: 520px;

  /* ✅ set your background image here */
  background-image: url(../images/tayagarne.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

 

.jw-why-inner{
  position: relative;
  z-index: 2;
  min-height: 520px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding: 70px 70px;
}

.jw-why-content{
  width: 100%;
  max-width: 560px;
}

.jw-why-title{
  margin: 0 0 14px;
  color: var(--color-white);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 60px;
  line-height: 1.05;
}

.jw-why-subtitle{
  margin: 0 0 12px;
  color: var(--color-white);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 1.4;
}

.jw-why-text{
  margin: 0 0 26px;
  color: rgba(255,255,255,.86);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.75;
  max-width: 540px;
}

/* features */
.jw-why-features{
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  padding: 14px 0 22px;
  max-width: 520px;
 
}

.jw-why-dots{
  position:absolute;
  top: 40px; /* aligns behind circles */
  left: 50px;
  right: 38px;
  height: 2px; max-width: 410px;
  /* background-image: radial-gradient(rgba(255,255,255,.55) 1.2px, transparent 1.2px); */
  border: 1px dashed white;
  background-repeat: repeat-x;
  opacity: .9;
  pointer-events:none;
}

.jw-why-item{
  width: 33.333%;
  text-align:center;
  position: relative;
  z-index: 2;
}

.jw-why-ico{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--color-white);
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  overflow: hidden;
}

.jw-why-ico img{
  width: 26px;
  height: 26px;
  object-fit: contain;
  display:block;
}

.jw-why-item-title{
  color: var(--color-white);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  line-height: 1.25;
}

/* CTA */
.jw-why-cta{
  margin-top: 16px;
  display:inline-flex;
  align-items:center;
  gap: 12px;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  background: var(--color-white);
  color: #002F43;
  text-decoration:none;

  font-family: var(--ff-muli);
  font-weight: var(--fw-extrabold);
  font-size: 14px;

  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  transition: transform .25s ease, box-shadow .25s ease;
}

.jw-why-cta-icon{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #002F43;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.jw-why-cta-icon i{
  color: var(--color-white);
  font-size: 16px;
}

.jw-why-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}



/* =========================
   CUSTOM SOLUTIONS ACCORDION
   ========================= */
.jw-sacc{
  padding: 60px 0;
  background: var(--color-white);
}

.jw-sacc-wrap{
  display:flex;
  flex-direction: column;
  gap: 26px;
}

/* Card */
.jw-sacc-item{
  border-radius: 10px;
  background: var(--color-white);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  overflow: hidden;
}

/* Summary */
.jw-sacc-head{
  list-style:none;
  cursor:pointer;
  user-select:none;

  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;

  padding: 22px 26px;
}

/* ✅ OPEN layout: add MORE space between title and paragraph (match your design) */
.jw-sacc-item[open] .jw-sacc-head{
  display: grid;
  grid-template-columns: 260px 1fr 34px;  /* title | paragraph | arrow */
  align-items: start;
  column-gap: 80px;                      /* ✅ big gap like your design */
}



.jw-sacc-head::-webkit-details-marker{ display:none; }

/* Title */
.jw-sacc-title{
  color: #002F43;
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 30px;
  line-height: 1.1;
  flex: 1;
}

/* Description (only when open) */
.jw-sacc-desc{
  display:none;
  color: var(--color-black);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.65;
  max-width: 520px;
}

/* Arrow */
.jw-sacc-ico{
  width: 34px;
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color: #002F43;
}

.jw-sacc-ico i{
  font-size: 22px;
  line-height: 1;
}

/* icon swap */
.jw-sacc-ico-up{ display:none; }
.jw-sacc-item[open] .jw-sacc-ico-down{ display:none; }
.jw-sacc-item[open] .jw-sacc-ico-up{ display:inline; }

/* OPEN layout: title left, paragraph right, arrow far right */
.jw-sacc-desc{
  max-width: none;      /* 🔥 remove artificial gap */
  width: 100%;
}
.jw-sacc-item[open] .jw-sacc-desc{
  display: block;
  width: 100%;
  max-width: 800px;                      /* ✅ prevents ultra-wide lines */
  margin-top: 2px;
}




/* =========================
   LATEST NEWS (SWIPER)
   ========================= */
.jw-news{
  padding: 85px 0;
  background: var(--color-white);
  overflow: hidden; /* allow half slide view clean */
}

.jw-news-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-left: 20%;
}

.jw-news-head-left{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.jw-news-title{ 
  color: var(--color-primary);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 60px;
  line-height: 1.05;
  margin-bottom: 30px;
}

.jw-news-all{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: fit-content;
  padding: 8px 30px;
  border-radius: 999px;
  background: #002F43;
  color: var(--color-white);
  font-family: var(--ff-muli);
  font-weight: var(--fw-bold);
  font-size: 16px;
  text-decoration:none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.jw-news-all:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
}

/* slider wrapper */
.jw-news-slider{
  position: relative;
}

/* show 2 full + half */
 

.jw-news-swiper .swiper-slide{
  width: 320px; /* fixed card width to control “half” */
}

/* Card */
.jw-news-card{
  background: transparent;
}

.jw-news-link{
  display:block;
  text-decoration:none;
  color: inherit;
}

/* clickable image */
.jw-news-img{
  border-radius: 16px;
  overflow:hidden;
  height: 350px;
  background: #e5e7eb;
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
}
.jw-news-img img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transition: transform .35s ease;
}

/* body */
.jw-news-body{
  padding-top: 12px;
}

.jw-news-date{
  color: #424242;
  font-family: var(--ff-muli);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  margin-bottom: 6px;
}

.jw-news-text{
  margin: 0 0 10px;
  color: var(--color-black);
  font-family: var(--ff-muli);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.5;
  max-width: 300px;
}

/* read more */
.jw-news-read{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-family: var(--ff-muli);
  font-weight: var(--fw-bold);
  font-size: 16px;
  color: #002F43;
  border: 1px solid var(--color-primary);
  border-radius: 25px;
  padding: 10px 20px;
  margin-top: 20px;
  
}

.jw-news-read-ico{
  width: 22px;
  height: 22px;
  border-radius: 50%; 
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.jw-news-read-ico i{
  font-size: 14px;
  line-height: 1;
  color: #002F43;
}

/* hover (image + subtle lift) */
.jw-news-link:hover .jw-news-img img{
  transform: scale(1.05);
}
.jw-news-link:hover{
  transform: translateY(-1px);
  transition: transform .2s ease;
}



/* for arrow */
.jw-news-nav{
  position: absolute;
  top: -81px;          /* adjust to match your design */
  right: 12px;        /* adjust to match your design */
  z-index: 10;
  display: flex;
  gap: 10px;
}

/* buttons */
.jw-news-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--color-primary);
  background: rgba(255,255,255,.92);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.jw-news-btn i{
  font-size: 26px; /* ri-arrow-drop icons look good bigger */
  line-height: 1;
  color: var(--color-primary);
}

.jw-news-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
  background: #fff;
}

/* disabled state (Swiper adds this class automatically) */
.jw-news-btn.swiper-button-disabled{
  opacity: .4;
  cursor: not-allowed;
  box-shadow: none;
}

/* optional: move arrows slightly down on mobile if needed */
@media (max-width: 575px){
  .jw-news-nav{
    top: 10px;
    right: 10px;
  }
}

/* =========================
   WORLD / OFFICES SECTION
========================= */
.jw-world{
  position: relative;
  overflow: hidden;
  background-image: url(../images/theworldbg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

 

.jw-world .container{
  position: relative;
  z-index: 2;
}

 
 

/* heading (use your existing heading style vibe) */
.jw-world-title{
  margin: 0 0 22px;
  color: var(--color-white);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 60px;
  line-height: 1.05;
}

/* Offices label */
.jw-world-offices{
  margin: 0 0 14px;
  color: var(--color-white);
  font-family: var(--ff-muli);
  font-weight: var(--fw-bold);
  font-size: 25px;
  line-height: 1.2;
}

/* pills */
.jw-world-pills{
  display:flex;
  align-items:center;
  gap: 14px;
  margin: 0 0 16px;
}

.jw-world-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  color: var(--color-white);
  text-decoration:none;

  font-family: var(--ff-muli);
  font-weight: var(--fw-bold);
  font-size: 16px;

  background: rgba(0,0,0,.10);
}

/* paragraph */
.jw-world-text{
  margin: 0;
  color: rgba(255,255,255,.85);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.75;
  max-width: 420px;
}



/* =========================
   CONTACT SECTION
========================= */
.jw-contact{
  padding: 90px 0;
  background: var(--color-white);
}

.jw-contact-left{
  padding-top: 10px;
}

.jw-contact-title{
  margin: 0;
  color: var(--color-primary); /* #132136 */
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 60px;
  line-height: 1.05;
}

/* form wrap (keeps it centered like design) */
.jw-contact-form-wrap{
  max-width: 760px;
}

/* labels */
.jw-form-label{
  display:block;
  margin: 0 0 8px;
  color: #424242;
  font-family: var(--ff-muli);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.2;
}

/* inputs */
.jw-form-input{
  width: 100%;
  height: 42px;
  border-radius: 999px;
  border: 1px solid #424242;
  padding: 0 16px;
  outline: none;
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  color: var(--color-black);
  background: var(--color-white);
}

/* textarea */
.jw-form-textarea{
  width: 100%;
  min-height: 82px;
  border-radius: 14px;
  border: 1px solid #424242;
  padding: 12px 16px;
  outline: none;
  resize: none;
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  color: var(--color-black);
  background: var(--color-white);
}

/* small note */
.jw-form-note{
  margin: 0;
  color: #424242;
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 11px;
  line-height: 1.5;
  opacity: .95;
}

/* button */
.jw-contact-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 40px;
  border-radius: 999px;
  border: 0;
  background: #002F43;
  color: var(--color-white);
  cursor: pointer;

  font-family: var(--ff-muli);
  font-weight: var(--fw-extrabold);
  font-size: 16px;

  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  transition: transform .2s ease, box-shadow .2s ease;
}

.jw-contact-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
/* =========================
   FOOTER
========================= */
  /* =========================
   FOOTER (MATCH SCREENSHOT)
========================= */

.jw-footer{
  position: relative;
  padding: 60px 0 55px;
  background: #001c28;
  background-image: url(../images/footerbg.jpg);
  background-position: center;
  background-size: cover;
}

.jw-footer .container{
  position: relative;
  z-index: 2;
}

/* -------------------------
   TOP ROW
------------------------- */
.jw-footer-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.jw-footer-brand img{
  width: 230px;
}

/* RIGHT SIDE GROUP (nav + actions close together) */
.jw-footer-top-right{
  display: flex;
  align-items: center;
  gap: 14px;  
}

/* NAV */
.jw-footer-nav{
  display: flex;
  align-items: center;
  gap: 40px;  
}

.jw-footer-link{
  font-family: var(--ff-muli);
  font-weight: var(--fw-regular);
  font-size: 16px;
  color: rgba(255,255,255,.92);
  text-decoration: none;
  white-space: nowrap;
}

/* CONTACT + LINKEDIN */
.jw-footer-actions{
  display: inline-flex;
  align-items: center;
  gap: 10px; /* <<< tight */
}

.jw-footer-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-primary);
  text-decoration: none;

  font-family: var(--ff-muli);
  font-weight: var(--fw-extrabold);
  font-size: 16px;

  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.jw-footer-cta i{
  font-size: 16px;
}

/* LinkedIn circle */
.jw-footer-li{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #d4af37;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex: 0 0 auto;
}

.jw-footer-li i{
  color: #0b1a23;
  font-size: 18px;
}

/* -------------------------
   OFFICES (RIGHT SIDE AREA)
------------------------- */

/* this wrapper pushes the offices block to the right side like screenshot */
.jw-footer-offices-wrap{
  margin-top: 55px;
  display: flex;
  justify-content: flex-end; /* <<< push to right */
}

/* fixed/right block width so there's empty space at far right/left like screenshot */
.jw-footer-offices{
  width: min(1120px, 100%);  /* keeps a "right block" feel */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
}

/* City: Muli 17px ExtraBold white */
.jw-office-title{
  font-family: var(--ff-muli);
  font-size: 17px;
  font-weight: var(--fw-extrabold);
  color: #ffffff;
  margin-bottom: 12px;
}
 
.jw-office-address{
  font-family: var(--ff-muli);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,.92);
  line-height: 1.55;
  margin-bottom: 18px;
  min-height: 80px;
}

/* Phone + Email: MUST be two lines */
.jw-footer-info{
  display: flex;           /* <<< force new line */
  align-items: center;
  gap: 8px;

  font-family: var(--ff-muli);
  font-size: 16px;
  color: rgba(255,255,255,.9);
  text-decoration: none;

  margin-bottom: 12px;     /* spacing between phone & email */
  width: fit-content;
}

.jw-footer-info i{
  color: #d4af37;
  font-size: 16px;
}

/* -------------------------
   RESPONSIVE
------------------------- */
@media (max-width: 992px){
  .jw-footer-top{
    flex-wrap: wrap;
  }
  .jw-footer-top-right{
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@media (max-width: 992px){
  .jw-footer-offices-wrap{
    justify-content: flex-start;
    
  }
  .jw-footer-offices{
    grid-template-columns: 1fr;
    gap: 35px;
    width: 100%;
    text-align: center;
  }
  .jw-footer-nav{
    flex-wrap: wrap;
    gap: 16px;
  }
  .jw-footer-info {
  justify-content: center;
    width: 100%;
  }
  .jw-office-address {
    min-height: auto;
  }
}


/* About us page */


.abouthead{
  background-image: url(../images/abouthead.jpg);
  height: 60vh;
  background-size: cover;
  background-position: center center;
}



/* =========================
   ABOUT (ALT LAYOUT)
========================= */
/* =========================
   ABOUT (IMAGE LEFT = ONE IMAGE)
========================= */
.jw-about2{
  padding: 90px 0;
  background: var(--color-white);
}

.jw-about2-media{
  max-width: 620px;
}

.jw-about2-mainimg{
  width: 100%;
  height: auto;
  border-radius: 22px;
  display:block;
}

/* RIGHT CONTENT */
.jw-about2-content{
  max-width: 560px;
  margin-left: auto;
}

.jw-about2-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 34px;
  border-radius: 999px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;

  font-family: var(--ff-muli);
  font-weight: var(--fw-extrabold);
  font-size: 19px;
  margin-bottom: 24px;
}

.jw-about2-title{
  margin: 0 0 22px;
  color: #132136;
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 60px;
  line-height: 1.05;
}

.jw-about2-text{
  margin: 0 0 18px;
  color: var(--color-black);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.75;
  max-width: 520px;
}

@media (max-width: 991.98px){
  .jw-about2-media{
    max-width: 100%;
    margin-bottom: 34px;
  }
  .jw-about2-content{
    margin-left: 0;
    max-width: 100%;
  }
}
/* =========================
   MVV SECTION (GLASS CARDS)
========================= */
.jw-mvv{
  position: relative;
  overflow: hidden;
  padding: 95px 0 110px;

  /* dummy bg (replace later) */
  background-image: url(../images/aboutterkut.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

 
.jw-mvv .container{
  position: relative;
  z-index:2;
}

/* heading */
.jw-mvv-head{
  margin-bottom: 46px;
}

.jw-mvv-title{
  margin: 0 0 10px;
  color: var(--color-white);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 60px;
  line-height: 1.1;
}

.jw-mvv-sub{
  margin: 0 auto;
  max-width: 640px;
  color: rgba(255,255,255,.86);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.7;
}

/* card */
.jw-mvv-card{
  position: relative;
  height: 100%;
  border-radius: 14px;
  padding: 28px 26px 26px;

  /* glass effect */
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 18px 55px rgba(0,0,0,.28);
  min-height: 340px;
  margin: 0 25px;
}

/* icon circle */
.jw-mvv-ico{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 55px;
}

.jw-mvv-ico img{
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* title (Degular white semibold) */
.jw-mvv-card-title{
  margin: 0 0 14px;
  color: var(--color-white);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 25px; /* ✅ 25px as requested */
  line-height: 1.2;
}

/* paragraph (min 16px) */
.jw-mvv-card-text{
  margin: 0;
  color: rgba(255,255,255,.86);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.75;
 
}
/* =========================
   SHIPPING SECTION (FULL CSS)
========================= */
.jw-ship{

  overflow-x: hidden;
}

.jw-ship-wrap{
  position: relative;
  min-height: 760px; /* keeps space for box */
}

/* TOP COUNTERS */
.jw-ship-top{
  padding-top: 80px;
  margin-bottom: 34px;
}

.jw-ship-stats{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap: 120px;
  flex-wrap: wrap;
}

.jw-ship-stat{
  text-align:center;
  min-width: 170px;
}

.jw-ship-stat-num{
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  gap: 4px;

  color: var(--color-primary);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 44px;
  line-height: 1;
}

.jw-ship-prefix,
.jw-ship-suffix{
  color: var(--color-primary);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 44px;
  line-height: 1;
}

.jw-ship-stat-label{
  margin-top: 8px;
  font-family: var(--ff-muli);
  font-weight: var(--fw-regular);
  font-size: 16px;
  color: #002F43;
}

/* LEFT CONTENT */
.jw-ship-content{
  padding-top: 70px;
  max-width: 430px;
}

.jw-ship-title{
  margin: 0 0 18px;
  color: var(--color-primary);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size:60px;
  line-height: 1.1;
}

.jw-ship-text{
  margin: 0 0 18px;
  color: var(--color-black);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.75;
}

/* CTA */
.jw-ship-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 18px;
  border-radius: 999px;
  background: #002F43;
  color: var(--color-white);
  text-decoration:none;

  font-family: var(--ff-muli);
  font-weight: var(--fw-extrabold);
  font-size: 16px;

  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  transition: transform .2s ease, box-shadow .2s ease;
}

.jw-ship-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}

/* RIGHT SPACE (RESERVED FOR BOX) */
.jw-ship-right-space{
  min-height: 520px;
}

/* ABSOLUTE BOX IMAGE (RIGHT) */
.jw-ship-box{
  position:absolute;
  top: 0;
  right: -120px;
  width: 660px;
  max-width: 70%;
  pointer-events:none;
  
}

.jw-ship-box img{
  width: 100%;
  height: auto;
  display:block;
}

/* ICONS */
.jw-ship-icons{
  margin-top: 55px;
  position: relative;
  padding-top: 80px;
}

/* dashed line */
.jw-ship-icons::before{
  content:"";
  position:absolute;
  left: 18%;
  right: 18%;
  top: 130px;
  border-top: 2px dashed rgba(19,33,54,.55);
  z-index: 1;
}

.jw-ship-icon-item{
  text-align:center;
  position: relative;
  z-index: 2;
}

.jw-ship-icon-circle{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #002F43;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto 14px;
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
  overflow:hidden;
}

.jw-ship-icon-circle img{
  width: 50px;
  height: 50px;
  object-fit: contain;
  display:block;
}

.jw-ship-icon-text{
  color: var(--color-primary);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 22px;
  line-height: 1.2;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1199.98px){
  .jw-ship-stats{ gap: 70px; align-items: unset; flex-direction: column;}
  .jw-ship-box{
    width: 560px;
    right: -20px;
  }
}

@media (max-width: 991.98px){
  .jw-ship-wrap{ min-height: auto; }

  .jw-ship-content{ padding-top: 20px; max-width: 100%; }
  .jw-ship-right-space{ min-height: 0; }

  .jw-ship-box{
    display: none;
  }

  .jw-ship-icons::before{
    left: 14%;
    right: 14%;
  }
}

@media (max-width: 575.98px){
  .jw-ship-stats{ gap: 26px; }
  .jw-ship-icons::before{ display:none; }
}


/* =========================
   FULL BG CTA SECTION
========================= */
.jw-cta-bg{
  position: relative;
  overflow: hidden;
  padding: 90px 0;
  min-height: 520px;
  display:flex;
  align-items:center;
  border-radius: 50px 50px 0 0;
  
}

/* full edge background */
.jw-cta-bg-img{
  position:absolute;
  inset:0;
  z-index:1;

   
  background-image: url(../images/purabg.jpg);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  
}

/* dark overlay on right side (like design) */
.jw-cta-bg::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.15) 40%,
    rgba(0,0,0,0.55) 75%,
    rgba(0,0,0,0.65) 100%
  );
}

.jw-cta-bg .container{
  position: relative;
  z-index:3;
}

.jw-cta-bg-content{
  padding: 30px 0;
}

/* title */
.jw-cta-bg-title{
  margin: 0 0 18px;
  color: var(--color-white);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 60px;
  line-height: 1.1;
}

/* paragraph (>=16px) */
.jw-cta-bg-text{
  margin: 0 0 18px;
  color: rgba(255,255,255,.86);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.75;
}

/* button like your style */
.jw-cta-bg-btn{
  margin-top: 14px;
  display:inline-flex;
  align-items:center;
  gap: 12px;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  background: var(--color-white);
  color: #002F43;
  text-decoration:none;

  font-family: var(--ff-muli);
  font-weight: var(--fw-extrabold);
  font-size: 16px;

  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  transition: transform .25s ease, box-shadow .25s ease;
}

.jw-cta-bg-btn-ico{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #002F43;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.jw-cta-bg-btn-ico i{
  color: var(--color-white);
  font-size: 16px;
}

.jw-cta-bg-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}




/* =========================
  PAGE HEADER (Sea freight)
========================= */
.jw-pagehead{
  position: relative;
  height: 100vh;
  min-height: 420px;
  overflow: hidden;
  padding-top: 70px;
  display: flex;
  align-items: center;
 background-image: url(../images/seafr-head.jpg);  
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}

 

.jw-pagehead .container{
  position: relative;
  z-index: 3;
}

 
.jw-pagehead-title{
  margin: 0 0 22px;
  color: var(--color-white);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 70px;
  line-height: 1.02;
}

.jw-pagehead-text{
  max-width: 520px;
  margin: 0 0 22px;
  color: #ffffff;
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.7;
}

.jw-pagehead-readmore{
  display: inline-block;
  margin-bottom: 26px;
  color: #ffffff;
  font-family: var(--ff-poppins);
  font-weight: var(--fw-bold);
  font-size: 16px;
  text-decoration: none;
}


/* CTA (same style system) */
.jw-pagehead-cta{
  display:inline-flex;
  align-items:center;
  gap: 12px;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  background: var(--color-white);
  color: #002F43;
  text-decoration:none;

  font-family: var(--ff-muli);
  font-weight: var(--fw-extrabold);
  font-size: 14px;

  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  transition: transform .25s ease, box-shadow .25s ease;
}

.jw-pagehead-cta-icon{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #002F43;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.jw-pagehead-cta-icon i{
  color: var(--color-white);
  font-size: 16px;
}

.jw-pagehead-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}

@media (max-width: 991.98px){
  .jw-pagehead{ min-height: 360px; }
  .jw-pagehead-inner{ padding: 70px 0; }
  .jw-pagehead-title{ font-size: 52px; }
}

@media (max-width: 575.98px){
  .jw-pagehead-title{ font-size: 44px; }
}








/* =========================
  PRODUCT INTRO
========================= */
.jw-prodintro{
  padding: 90px 0;
  background: var(--color-white);
}

.jw-prodintro-media{
  max-width: 620px;
}

.jw-prodintro-img{
  width: 100%;
  height: 600px;
  object-fit: cover;
  border-radius: 30px;
  display:block;
}

/* RIGHT CONTENT */
.jw-prodintro-content{
  max-width: 560px;
  margin-left: auto;
}

/* pill = same style as about us page */
.jw-prodintro-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 34px;
  border-radius: 999px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;

  font-family: var(--ff-muli);
  font-weight: var(--fw-extrabold);
  font-size: 19px;
  margin-bottom: 24px;
}

/* title = same as about us page */
.jw-prodintro-title{
  margin: 0 0 10px;
  color: var(--color-primary);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 60px;
  line-height: 1.05;
}

/* subtitle */
.jw-prodintro-subtitle{
  
  color: #002f43;
  font-family: var(--ff-poppins);
  font-weight: var(--fw-medium);
  font-size: 25px;
  line-height: 1.25;
  margin-bottom: 30px;
}

/* paragraph = same vibe as about us page */
.jw-prodintro-text{
  margin: 0 0 18px;
  color: var(--color-black);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.75;
  max-width: 520px;
}

@media (max-width: 991.98px){
  .jw-prodintro-media{ max-width: 100%; }
  .jw-prodintro-content{ margin-left: 0; max-width: 100%; }
   
  .jw-prodintro-subtitle{ font-size: 24px; }
}
/* =========================
  HOW IT WORKS
========================= */
.jw-how{
  padding: 90px 0;
  background-image: url(../images/workhowbg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
}

.jw-how-head{
  margin-bottom: 46px;
}

.jw-how-kicker{
  margin: 0 0 10px;
  color: var(--color-white);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-medium);
  font-size: 25px;
  line-height: 1.2;
}

.jw-how-title{
  margin: 0;
  color: var(--color-white);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 60px;
  line-height: 1.05;
}

/* items */
.jw-how-item{
  text-align: center;
  padding: 10px 10px 0;
}

.jw-how-iconwrap{
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--color-white);
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto 18px;
  position: relative;
}

.jw-how-icon{
  width: 64px;
  height: 64px;
  object-fit: contain;
  display:block;
}

/* number badge */
.jw-how-num{
  position: absolute;
  top: -3px;
  right: -10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;

  color: var(--color-white);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-semibold);
  font-size: 25px;
  line-height: 1;

  background: linear-gradient(135deg, #d8b46a 0%, #b88c44 35%, #8a5f2a 100%);
}

.jw-how-item-title{
  margin: 0 0 10px;
  color: var(--color-white);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-medium);
  font-size: 22px;
  line-height: 1.2;
}

.jw-how-item-text{
  margin: 0 auto;
  max-width: 240px;
  color: rgba(255,255,255,.9);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.65;
}

@media (max-width: 991.98px){
 
  .jw-how-iconwrap{ width: 150px; height: 150px; }
  .jw-how-num{ width: 40px; height: 40px; font-size: 22px; }
  .jw-how-num{
    top: 2px;
    right: 5px;
  }
}
/* =========================
  THINGS YOU NEED KNOW + FAQ
========================= */
.forbg{
  background-color: #f9f9f9;
  position: relative;
 
 
}
.jw-tnk{
  padding: 95px 0;
 
}

/* LEFT */
.jw-tnk-title{
  margin: 0 0 34px;
  color: var(--color-primary);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 60px;
  line-height: 1.05;
}

.jw-tnk-points{
  display:flex;
  flex-direction: column;
  gap: 34px;
  margin-top: 55px;
}

.jw-tnk-point{
  display:flex;
  align-items:flex-start;
  gap: 18px;
}

.jw-tnk-ico{
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #002F43;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink: 0;
  overflow: hidden;
}

.jw-tnk-ico img{
  width: 30px;
  height: 30px;
  object-fit: contain;
  display:block;
}

.jw-tnk-point-title{
  margin: 0 0 6px;
  color: #002F43;
  font-family: var(--ff-poppins);
  font-weight: var(--fw-bold);
  font-size: 25px;
  line-height: 1.2;
}

.jw-tnk-point-text{
  margin: 0;
  color: var(--color-black);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.7;
  max-width: 360px;
}

/* RIGHT FAQ */
.jw-faq{
  display:flex;
  flex-direction: column;
  gap: 18px;
}

.jw-faq-item{
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  overflow: hidden;
}

.jw-faq-head{
  width: 100%;
  border: 0;
  background: transparent;
  padding: 18px 22px;
  cursor: pointer;

  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
}

.jw-faq-q{
  color: #002F43;
  font-family: var(--ff-poppins);
  font-weight: var(--fw-bold);
  font-size: 25px;
  line-height: 1.2;
}

.jw-faq-ico{
  width: 34px;
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: #002F43;
  flex-shrink: 0;
}

.jw-faq-ico i{
  font-size: 22px;
  line-height: 1;
}

.jw-faq-up{ display:none; }
.jw-faq-item.is-open .jw-faq-up{ display:inline; }
.jw-faq-item.is-open .jw-faq-down{ display:none; }

.jw-faq-body{
  display:none;
  padding: 0 22px 20px;
}

.jw-faq-item.is-open .jw-faq-body{
  display:block;
}

.jw-faq-body p{
  margin: 0;
  color: var(--color-black);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.75;
}

/* responsive */
@media (max-width: 991.98px){
 
  .jw-faq-q{ font-size: 20px; }
  .jw-tnk-point-title{ font-size: 22px; }
}



.jw-included{
   padding-bottom: 80px;
}

.jw-included-line{
  width: 100%;
  height: 1px;
  background: var(--color-primary);
  margin-bottom: 60px;
}

.jw-included-title{
  margin: 0;
  color: var(--color-primary);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 60px;
  line-height: 1.05;
}

.jw-included-list{
  margin: 0;
  padding-left: 18px;
}

.jw-included-list li{
  margin-bottom: 14px;
  color: var(--color-black);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.6;
  list-style: disc;
}


.fancyTop {
  position: absolute;
  right: 0;
  bottom: -10%;
}

.fancyTop img {
  width: 150px;
}

/* =========================
  MORE SERVICES
========================= */
.jw-mores{
  padding-top: 15px;
  padding-bottom: 80px;
  background: var(--color-white);
}

.jw-mores-head{
  margin-bottom: 42px;
}

.jw-mores-kicker{
  margin: 0 0 10px;
  color: #002F43;
  font-family: var(--ff-poppins);
  font-weight: var(--fw-medium);
  font-size: 25px;
  line-height: 1.2;
}

.jw-mores-title{
  margin: 0;
  color: var(--color-primary);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 60px;
  line-height: 1.05;
}

/* card */
.jw-mores-card{
  background: var(--color-white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  height: 100%;
  display:flex;
  flex-direction: column;
  margin: 0 22px;
}

.jw-mores-imglink{
  display:block;
}

.jw-mores-img{
  width: 100%;
  height: 210px;
  object-fit: cover;
  display:block;
}

.jw-mores-body{
  padding: 18px 18px 16px;
  display:flex;
  /* flex-direction: column; */
  flex: 1;
}

.jw-mores-card-title{
  margin: 0 0 10px;
  color: var(--color-primary);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 26px;
  line-height: 1.1;
}

.jw-mores-card-text{
  margin: 0 0 18px;
  color: var(--color-black);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.7;
  max-width: 320px;
}

/* footer learn more row */
.jw-mores-foot{
  margin-top: auto;
}

.jw-mores-more{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  text-decoration:none;
  color: inherit;
  width: 100%;
}

.jw-mores-more-text{
  color: #002F43;
  font-family: var(--ff-poppins);
  font-weight: var(--fw-medium);
  font-size: 14px;
}

.jw-mores-more-ico{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #002F43;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.jw-mores-more-ico i{
  color: var(--color-white);
  font-size: 14px;
  line-height: 1;
}

.jw-mores-card:hover .jw-mores-img{
  transform: scale(1.03);
  transition: transform .35s ease;
}

@media (max-width: 991.98px){
 
  .jw-mores-card-title{ font-size: 22px; }
}


.jw-mores-body-simple{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 18px;
}

.jw-mores-arrow{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #002F43;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink: 0;
}

.jw-mores-arrow i{
  color: #ffffff;
  font-size: 16px;
  line-height: 1;
}








/* =========================
  GET IN TOUCH (DARK BG FORM)
========================= */
.jw-touch{
  position: relative;
  padding:200px 0;
  overflow: hidden;
 
  /* replace bg image here */
  background-image:url(../images/contactbg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.jw-touch-title{
  margin: 0;
  color: var(--color-white);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 60px;
  line-height: 1.05;
}

/* form container */
.jw-touch-formwrap{
  max-width: 820px;
  margin-left: auto;
}

/* labels */
.jw-touch-label{
  display:block;
  margin: 0 0 8px;
  color: rgba(255,255,255,.92);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-medium);
  font-size: 16px;
  line-height: 1.2;
}

/* inputs */
.jw-touch-input{
  width: 100%;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.35);
  padding: 0 14px;
  outline: none;
  background: rgba(255,255,255,.03);

  color: var(--color-white);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  
  transition: border-color .2s ease, background .2s ease;
}

.jw-touch-textarea{
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.35);
  padding: 12px 14px;
  outline: none;
  resize: none;
  background: rgba(255,255,255,.03);

  color: var(--color-white);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
 
  line-height: 1.6;

  transition: border-color .2s ease, background .2s ease;
}

.jw-touch-input:focus,
.jw-touch-textarea:focus{
  border-color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.06);
}

/* checkbox row */
.jw-touch-check{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  cursor: pointer;
  user-select:none;
  margin: 0;
}

.jw-touch-check input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.jw-touch-checkbox{
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.05);
  flex-shrink:0;
  margin-top: 3px;
  position: relative;
}

.jw-touch-check input:checked + .jw-touch-checkbox{
  border-color: rgba(212,175,55,.95);
  background: rgba(212,175,55,.18);
}

.jw-touch-check input:checked + .jw-touch-checkbox::after{
  content:"";
  position:absolute;
  left: 3px;
  top: 1px;
  width: 6px;
  height: 9px;
  border-right: 2px solid rgba(212,175,55,.95);
  border-bottom: 2px solid rgba(212,175,55,.95);
  transform: rotate(40deg);
}

.jw-touch-note{
  color: rgba(255,255,255,.82);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.5;
}

/* =========================
  SEND BUTTON (PREMIUM GRADIENT)
========================= */
.jw-touch-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 52px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;

  /* close match gradient */
  background: linear-gradient(
    90deg,
    #f7d58a 0%,
    #e2b66a 35%,
    #c9994f 65%,
    #b07c3d 100%
  );

  color: #002F43;
  font-family: var(--ff-muli);
  font-weight: var(--fw-extrabold);
  font-size: 18px;
  letter-spacing: .2px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 14px 34px rgba(0,0,0,.32);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease;
}

.jw-touch-btn:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 18px 44px rgba(0,0,0,.38);
  filter: saturate(1.05);
}

.jw-touch-btn:active{
  transform: translateY(0);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.18),
    0 10px 26px rgba(0,0,0,.28);
}

@media (max-width: 991.98px){
 
  .jw-touch-formwrap{ margin-left: 0; max-width: 100%; }
}










 
/* =========================
  PAGE HEADER (Request Quote)
========================= */
.js-requesthead{
  position: relative;
  height: 60vh;
  min-height: 420px;
  overflow: hidden;
 background-image: url(../images/request-head-bg.jpg);  
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
}

 
.js-requesthead-inner{
  padding-top: 80px;
}

.js-requesthead .container{
  position: relative;
  z-index: 3;
}

.js-requesthead-title{
  margin: 0 0 22px;
  color: var(--color-white);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 70px;
  line-height: 1.02;
}
/* =========================
  REQUEST QUOTE FORM
========================= */
 
.js-rq{
  padding: 90px 0;
  background: var(--color-white);
}

.js-rq-form{
  max-width: 760px;
  margin: 0 auto;
  display:flex;
  flex-direction: column;
  gap: 16px;
}

.js-rq-group{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.js-rq-label{
  font-family: var(--ff-helvetica);
  font-size: 16px;
  color: #606060;
  
}

/* inputs */
.js-rq-input,
.js-rq-textarea{
  width: 100%;
  background: #f4f4f4;
  border: 0;
  border-radius: 10px;
  padding: 14px 18px;
  font-family: var(--ff-helvetica);
  font-size: 16px;
  color: #606060;
  outline: none;
}

.js-rq-input::placeholder,
.js-rq-textarea::placeholder{
  color: rgba(96,96,96,.25);
}

.js-rq-textarea{
  resize: none;
  border-radius: 10px;
}

/* select */
.js-rq-select{
  position: relative;
}

.js-rq-select select{
  appearance: none;
  -webkit-appearance: none;
}

.js-rq-select i{
  position:absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #606060;
  font-size: 20px;
}

/* section headings */
.js-rq-section{
  margin-top: 10px;
}

.js-rq-section .js-rq-group {
  margin-top: 25px;
}

.js-rq-section-title{
  margin: 14px 0 8px;
  color: var(--color-primary);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-bold);
  font-size: 25px; /* requested */
}

.js-rq-section-title2{
  margin: 18px 0 8px;
  color: var(--color-primary);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-bold);
  font-size: 23px; /* requested */
}

/* =========================
  CHECKBOX (REQUEST QUOTE)
========================= */
.js-rq-check{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  margin-top: 10px;
}

.js-rq-check input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.js-rq-check-box{
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #7a7a7a;
  flex-shrink: 0;
  margin-top: 4px;
  position: relative;
}

/* checked state */
.js-rq-check input:checked + .js-rq-check-box{
  background: #002F43;
}

.js-rq-check input:checked + .js-rq-check-box::after{
  content:"";
  position:absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.js-rq-check-text{
  color: #606060;
  font-family: var(--ff-helvetica);
  font-size: 12px;
  line-height: 1.5;
}

/* button (same system style) */
.js-rq-btn{
  margin-top: 14px;
  align-self: flex-start;
  display:inline-flex;
  align-items:center;
  gap: 12px;

  padding: 10px 22px 10px 10px;
  border-radius: 999px;
  border: 0;
  background: #002F43;
  color: var(--color-white);
  cursor: pointer;

  font-family: var(--ff-muli);
  font-weight: var(--fw-extrabold);
  font-size: 16px;
}

.js-rq-btn-ico{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-white);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink: 0;
}

.js-rq-btn-ico i{
  color: #002F43;
  font-size: 16px;
}

@media (max-width: 991.98px){
  .js-rq{ padding: 70px 0; }
  .js-rq-section-title{ font-size: 22px; }
  .js-rq-section-title2{ font-size: 20px; }
  .js-talk-title {
    font-size: 20px;
  }
}



/* =========================
  TALK TO A SPECIALIST FORM
========================= */
.js-talk{
  
  background: var(--color-white);
}

.js-talk-form{
  max-width: 760px;
  margin: 0 auto;              
  display:flex;
  flex-direction: column;
  gap: 18px;
}

.js-talk-title{
  margin-bottom: 6px;
  color: var(--color-primary);
  font-family: var(--ff-helvetica);
  font-weight: 700;
  font-size: 25px;
}

/* group */
.js-talk-group{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.js-talk-label{
  font-family: var(--ff-helvetica);
  font-size: 16px;
  color: #606060;
}

/* input */
.js-talk-input{
  width: 100%;
  background: #f4f4f4;
  border: 0;
  border-radius: 10px;
  padding: 14px 18px;

  font-family: var(--ff-helvetica);
  font-size: 16px;
  color: #606060;
  outline: none;
}

.js-talk-input::placeholder{
  color: rgba(96,96,96,.25);
}

/* note */
.js-talk-note{
  margin-top: 4px;
  font-family: var(--ff-helvetica);
  font-size: 14px;
  color: #606060;
}

/* button */
.js-talk-btn{
  margin-top: 6px;
  align-self: flex-start;
  display:inline-flex;
  align-items:center;
  gap: 12px;

  padding: 10px 22px 10px 10px;
  border-radius: 999px;
  border: 0;
  background: #002F43;
  color: var(--color-white);
  cursor: pointer;

  font-family: var(--ff-muli);
  font-weight: var(--fw-extrabold);
  font-size: 16px;
}

.js-talk-btn-ico{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-white);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink: 0;
}

.js-talk-btn-ico i{
  color: #002F43;
  font-size: 16px;
}



/* end */



.jw-why.nayawala{
  padding: 70px 0 0 0;
  background: var(--color-white);
}

.jw-why-wrap{
  position: relative;
  border-radius: 26px 26px 0 0 ;
  overflow: hidden;
  min-height: 520px;

  /* ✅ set your background image here */
  background-image: url(../images/putki.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

 





/* Career page */


.careerhead{
  background-image: url(../images/careerhead.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  height: 80vh;
}
/* =========================
  CONNECTED STATS BAR
========================= */
.jw-stats-connect{
  background-image: url(../images/countebg.jpg);  
  background-position: center center;
  background-size: cover;
  padding: 70px 0;
}

.jw-stats-connect-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  text-align:center;
  align-items:center;
}

.jw-stat-connect-num{
  display:inline-flex;
  align-items:baseline;
  gap: 2px;
  color: #ffffff;
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 44px;
  line-height: 1;
}

.jw-connect-prefix,
.jw-connect-suffix{
  color: #ffffff;
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 44px;
}

.jw-stat-connect-label{
  margin-top: 6px;
  color: #ffffff;
  font-family: var(--ff-muli);
  font-size: 14px;
}
/* =========================
  CAREER ACCORDION
========================= */
 /* =========================
  CAREER ACCORDION (ISOLATED)
========================= */
.js-career-acc{
  padding: 90px 0;
  background: var(--color-white);
}

.js-career-acc-wrap{
  display:flex;
  flex-direction: column;
  gap: 22px;
}

/* card */
.js-career-item{
  background: var(--color-white);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  overflow: hidden;
}

/* header */
.js-career-head{
  width: 100%;
  border: 0;
  background: transparent;
  padding: 22px 26px;
  cursor: pointer;

  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
}

/* title (same system values) */
.js-career-title{
  color: #002F43;
  font-family: var(--ff-poppins);
  font-weight: var(--fw-bold);
  font-size: 25px;
  line-height: 1.2;
}

/* icon (always visible) */
.js-career-ico{
  width: 34px;
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: #002F43;
  flex-shrink: 0;

  transform: rotate(0deg);
  transition: transform .25s ease;
}

.js-career-ico i{
  font-size: 22px;
  line-height: 1;
}

/* rotate when open */
.js-career-item.is-open .js-career-ico{
  transform: rotate(180deg);
}

/* body */
.js-career-body{
  display:none;
  padding: 0 26px 22px;
}

.js-career-body p{
  margin: 0;
  color: var(--color-black);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.75;
}

/* open */
.js-career-item.is-open .js-career-body{
  display:block;
}



/* =========================
  CURRENT VACANCIES
========================= */
.js-vac{
  background: #f9f9f9;
  padding: 90px 0;
}

.js-vac-title{
  margin: 0 0 34px;
  color: var(--color-primary);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 60px;
  line-height: 1.05;
}

/* table (transparent like design) */
.js-vac-table{
  background: transparent !important;
}

.js-vac-table > :not(caption) > * > *{
  background: transparent !important;
}

/* header row */
.js-vac-table thead th{
  border-bottom: 2px solid rgba(0,0,0,.22) !important;
}

.js-vac-th{
  color: #002F43;
  font-family: var(--ff-poppins);
  font-weight: var(--fw-bold);
  font-size: 20px;
  padding: 16px 18px;
}

/* rows spacing (more top/bottom like screenshot) */
.js-vac-row td{
  border-bottom: 2px solid rgba(0,0,0,.18) !important;
  padding: 26px 18px !important;
}

/* position */
 
.js-vac-pos{
  color: var(--color-primary);   /* ✅ primary */
  font-family: var(--ff-poppins);
  font-weight: var(--fw-bold);
  font-size: 20px;
}

/* LOCATION   */
.js-vac-td{
  color: #606060;               
  font-family: var(--ff-poppins);
  font-weight: var(--fw-medium);
  font-size: 20px;
  line-height: 1.2;
}


/* action cell */
.js-vac-action{
  text-align: right;
  white-space: nowrap;
}

/* button */
.js-vac-btn{
  border: 0;
  padding: 10px 28px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-bold);
  font-size: 14px;
  cursor: pointer;
}



.js-choosebtn{
  border: 0;
  padding: 10px 28px;
  border-radius: 5px; 
  background:#606060;
  color: var(--color-white);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-bold);
  font-size: 14px;
  cursor: pointer;
}


/* 4th row dim (visible always) */
.js-vac-dim{
  opacity: .25;
}

.js-vac-btn-dim{
  background: #cfcfcf;
  color: #ffffff;
}

/* hidden rows */
.js-vac-more{
  display: none;
  opacity: 0;
  transform: translateY(-10px);
}

.js-vac.is-expanded .js-vac-more{
  display: table-row;
}

/* smooth show */
.js-vac.is-expanded .js-vac-more{
  animation: jsVacFadeIn .35s ease forwards;
}

@keyframes jsVacFadeIn{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* once expanded, 4th row becomes normal (no opacity) */
.js-vac.is-expanded .js-vac-dim{
  opacity: 1;
}

.js-vac.is-expanded .js-vac-btn-dim{
  background: var(--color-primary);
  color: var(--color-white);
}

/* view more button */
.js-vac-morebtn{
  margin: 22px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;

  color: var(--color-primary);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-bold);
  font-size: 20px;
}

.js-vac-morebtn i{
  font-size: 22px;
  line-height: 1;
  transition: transform .25s ease;
}

.js-vac.is-expanded .js-vac-morebtn i{
  transform: rotate(180deg);
}

/* responsive */
@media (max-width: 991.98px){
 
  .js-vac-th{ font-size: 16px; }
  .js-vac-pos, .js-vac-td{ font-size: 16px; }
  .js-vac-row td{ padding: 18px 14px !important; }
  .js-vac-morebtn{ font-size: 16px; }
}







.jw-seaservices{
  background-image:url(../images/productbg.jpg);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  overflow:hidden;
}

.jw-seaservices .row{
  min-height: 680px;
}

.jw-seaservices-left{
  height: 100%;
  padding: 90px 60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.jw-seaservices-title{
  margin: 0 0 18px;
  color: #fff;
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 60px;
  line-height: 1.05;
}

.jw-seaservices-text{
  margin: 0 0 18px;
  color: rgba(255,255,255,.82);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.7;
  max-width: 420px;
}

.jw-seaservices-sub{
  margin: 28px 0 16px;
  color: #fff;
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 27px;
  line-height: 1.1;
}

.jw-seaservices-mid{
  height: 100%;
}

.jw-seaservices-mid-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.jw-seaservices-right{
  height: 100%;
    padding: 0 60px;
  /* padding: 70px 60px; */
  /* display:flex;
  align-items:center;
  justify-content:center; */
}

.jw-seaservices-acc{
  width: 100%;
  max-width: 520px;
  display:flex;
  flex-direction:column;
  gap: 22px;
}

.jw-seaservices-item{
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(212,175,55,.55);
  box-shadow: 0 16px 45px rgba(0,0,0,.35);
  background: rgba(0,0,0,.28);
}

.jw-seaservices-head{
  list-style: none;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px 20px 28px;
  cursor:pointer;
  user-select:none;
}
.jw-seaservices-head::-webkit-details-marker{ display:none; }

.jw-seaservices-acc-title{
  color:#fff;
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 22px;
  line-height: 1.1;
}

.jw-seaservices-ico-circle{
  width: 34px;
  height: 34px;
  border-radius: 50%;
border: 1px solid white;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.jw-sea-plus,
.jw-sea-minus{
  color: white;
  font-size: 18px;
  line-height: 1;
}

.jw-sea-minus{ display:none; }
.jw-seaservices-item[open] .jw-sea-plus{ display:none; }
.jw-seaservices-item[open] .jw-sea-minus{ display:inline; }

.jw-seaservices-body{
  padding: 0 28px 20px 28px;
}

.jw-seaservices-body p{
  margin: 0;
  color: rgba(255,255,255,.86);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.65;
}

.jw-seaservices-item[open]{
  border-radius: 26px;
}

.jw-seaservices-item[open] .jw-seaservices-head{
  padding-bottom: 10px;
}







 
/* =========================
  PAGE HEADER (Request Quote)
========================= */
.js-news{
  position: relative;
  height: 60vh;
  min-height: 420px;
  overflow: hidden;
 background-image: url(../images/newshead.jpg);  
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
}

 
.js-news-inner{
  padding-top: 80px;
}

.js-news .container{
  position: relative;
  z-index: 3;
}

.js-news-title{
  margin: 0 0 22px;
  color: var(--color-white);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 70px;
  line-height: 1.02;
}










/* =========================
   LATEST NEWS (GRID CARDS)
   ========================= */
.jw-news-grid{
  padding: 85px 0;
  background: var(--color-white);
}

/* whole card is clickable */
.jw-news-item-link{
  display: block;
  text-decoration: none;
  color: inherit;
}

/* card shell (matches rounded + shadow look) */
.jw-news-item{
  background: var(--color-white);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  overflow: hidden;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}

.jw-news-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 55px rgba(0,0,0,.14);
}

/* image */
.jw-news-item-img{
  height: 220px;              /* adjust if you want taller like design */
  background: #e5e7eb;
  overflow: hidden;
}

.jw-news-item-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.jw-news-item:hover .jw-news-item-img img{
  transform: scale(1.06);
}

/* body spacing */
.jw-news-item-body{
  padding: 16px 16px 18px;
}

.jw-news-item-date{
  color: #424242;
  font-family: var(--ff-muli);
  font-weight: var(--fw-semibold);
  font-size: 13px;
  margin-bottom: 8px;
}

/* title like screenshot */
.jw-news-item-title{
  margin: 0 0 8px;
  color: var(--color-black);
  font-family: var(--ff-muli);
  font-weight: var(--fw-bold);
  font-size: 19px;
  line-height: 1.3;
}

.jw-news-item-text{
  margin: 0 0 14px;
  color: #2b2b2b;
  font-family: var(--ff-muli);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.55;
}

/* Learn More row: text left, icon right */
.jw-news-item-cta{
  display: flex;
  align-items: center;
  justify-content: space-between;  /* key requirement */
  gap: 12px;
  margin-top: 10px;
}

.jw-news-item-cta-text{
  font-family: var(--ff-muli);
  font-weight: var(--fw-bold);
  font-size: 16px;
  color: var(--color-primary);
 
}

/* arrow icon circle (primary bg + white icon) */
.jw-news-item-cta-ico{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .2s ease;
}

.jw-news-item-cta-ico i{
  color: #fff;
  font-size: 22px;
  line-height: 1;
}

.jw-news-item:hover .jw-news-item-cta-ico{
  transform: translateX(2px);
}


.jw-news-item{
   margin: 0 10px;
}






/* About signal page */



/* news page */


.newssingal {
  background-image: url(../images/news-singal.jpg);
  height: 60vh;
}
/* =========================
   NEWS SINGLE DETAIL (OVER HERO)
   ========================= */

.jw-news-single{
  background: transparent;
  position: relative;
  z-index: 2;
  margin-top: -140px; /* overlaps the hero image */
  padding-bottom: 80px;
}

.jw-news-single-box{
  background: var(--color-white);
  padding: 42px 44px 50px;
 
}

/* Date */
.jw-news-single-date{
  color: #424242;
  font-size: 16px;
  font-family: var(--ff-muli);
  font-weight: var(--fw-semibold);
  margin-bottom: 14px;
}

/* Main heading */
.jw-news-single-title{
  margin: 0 0 24px;
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 60px;
  line-height: 1.1;
  color: var(--color-primary);
}

/* Small title */
.jw-news-single-sub{
  color: var(--color-primary);
  font-family: var(--ff-helvetica);
  font-weight: var(--fw-medium);
  font-size: 16px;
  margin-bottom: 12px;
}

/* Divider line */
.jw-news-single-line{
  width: 100%;
  height: 1px;
  background: var(--color-black);
  opacity: 0.7;
  margin-bottom: 18px;
}

/* Paragraphs */
.jw-news-single-content p{
  margin: 0 0 18px;
  color: var(--color-black);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.8;
}

/* Bottom anchor */
.jw-news-single-footer-link{
  display: inline-block;
  margin-top: 16px;
  color: var(--color-primary);
  font-family: var(--ff-helvetica);
  font-weight: var(--fw-medium);
  font-size: 16px;
  text-decoration: none;
}

.jw-news-single-footer-link:hover{
  text-decoration: underline;
}


.jw-news-grid.singal-newsgrid {
 padding: 0;
 padding-bottom: 70px;
}


/* Responsive */
@media (max-width: 991px){
  .jw-news-single{
    margin-top: -90px;
    padding-bottom: 60px;
  }
  .jw-news-single-box{
    padding: 28px 22px 32px;
  }
   
}




.isnewbold {
  font-family: var(--ff-poppins);
  font-weight: var(--fw-medium);
  color: #132136;
  font-size: 22px;
  margin-bottom: 50px;
}

.wedoList{
  padding-left: 15px;
}










/* =========================
  INDUSTRIES WE SERVE
========================= */
.industriesWrap{
  padding: 90px 0;
  background: #f9f9f9;
}

.industriesWrap-head{
  margin-bottom: 55px;
}

.industriesWrap-title{
  margin: 0;
  color: var(--color-primary);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);  
  font-size: 60px;               
  line-height: 1.05;
}

 
.industryCard{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  padding: 14px 12px;
  border-radius: 18px;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

/* circle */
.industryCard-ico{
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #002f43;  
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
  margin-bottom: 16px;
}

.industryCard-ico img{
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}

 
.industryCard-title{
  margin: 0;
  color: #002f43;
  font-family: var(--ff-degular); 
  font-weight:var(--fw-medium);   
  font-size: 30px;                 
  line-height: 1.15;
}

 
.industryCard:hover .industryCard-ico{
  outline: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

 

@media (max-width: 991.98px){
  .industriesWrap{ padding: 40px 0; margin-top: 50px;}
  .industriesWrap-title{ font-size: 35px; }
  .industryCard-title{ font-size: 24px; }
  .industryCard-ico{ width: 82px; height: 82px; }
  .industryCard-ico img{ width: 40px; height: 40px; }

  
}








/* =========================
  OUR STRENGTHS
========================= */
.jw-strengths{
  padding: 90px 0;
  background:#f9f9f9;
}

/* left title (exact values you gave) */
.jw-strengths-title{
  margin: 0 0 18px;
  color: var(--color-primary);
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold);
  font-size: 60px;
  line-height: 1.1;
}

/* right items */
.jw-strength-item{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 6px 0;
}

/* number */
.jw-strength-num{
  flex: 0 0 auto;
  min-width: 52px;
  color: #cca366;                 
  font-family: var(--ff-poppins);
  font-weight: var(--fw-bold);    
  font-size: 25px;                
  line-height: 1;
  margin-top: 2px;
}

/* title */
.jw-strength-item-title{
  margin: 0 0 10px;
  color: #002f43;                 
  font-family: var(--ff-degular);
  font-weight: var(--fw-semibold); 
  font-size: 25px;                
  line-height: 1.15;
}

/* paragraph */
.jw-strength-text{
  margin: 0;
  color: var(--color-black);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: 16px;                
  line-height: 1.75;
  max-width: 340px;                
}

 
@media (min-width: 992px){
  .jw-strengths .col-lg-8 .row.g-4{
    --bs-gutter-x: 60px;  
    --bs-gutter-y: 34px;
  }
}

@media (max-width: 991.98px){
  .jw-strengths{ padding: 70px 0; }
  .jw-strengths-title{ font-size: 35px; margin-bottom: 30px;}
  .jw-strength-item-title{ font-size: 22px; }
  .jw-strength-num{ font-size: 22px; }
  .jw-strength-text{ max-width: 100%; }
}


.jw-more-text {
   
    display: none;
}







/* SERVICES PAGES */
.jw-pagehead.seairhead{ 
 background-image: url(../images/seaair.jpg);  
 
}

.jw-pagehead.cutmhead{ 
 background-image: url(../images/cutmclhead.jpg);  
 
}
 

.jw-pagehead.airfata{ 
 background-image: url(../images/airfata.jpg);  
 
}


 .jw-pagehead.road-fit{ 
 background-image: url(../images/road-fit.jpg);  
 
}
 .jw-pagehead.conhead{ 
 background-image: url(../images/contrhea.jpg);  
 
}
.jw-pagehead.dishead{ 
 background-image: url(../images/dishead.jpg);  
 
}
.jw-pagehead.procargo{ 
 background-image: url(../images/procarhead.jpg);  
 
}



.jw-how.seaair{
  
  background-image: url(../images/sapichoda.jpg);
  
}

.jw-how.akhoj{
  
  background-image: url(../images/akhoj.jpg);
  
}

.jw-how.roadwala{
  
  background-image: url(../images/hora.jpg);
  
}

.jw-how.conlogo{  
  background-image: url(../images/binabuwa.jpg);
  
}


.jw-how.discta{  
  background-image: url(../images/discta.jpg);
  
}

.jw-how.cuscleacta{  
  background-image: url(../images/cusmcta.jpg);
  
}
.jw-how.procargo{  
  background-image: url(../images/procarcta.jpg);
  
}

 
.newlayout p {
 color: rgba(255, 255, 255,1);
    font-family: var(--ff-poppins);
    font-weight: var(--fw-regular);
    font-size: 16px;
}


.newlayout ul {
  margin-top: 40px;
border: 2px solid rgba(212, 175, 55, .55);
    box-shadow: 0 16px 45px rgba(0, 0, 0, .35);
    background: rgba(0, 0, 0, .28);

    border-radius: 20px;
    padding: 35px;
}

.newlayout ul li {
   color: rgba(255, 255, 255,1);
    font-family: var(--ff-poppins);
    font-weight: var(--fw-regular);
    font-size: 16px;
    line-height: 2;
}