/* Changspire Global: small style tweaks, loaded after site.css. */
/* Hero in the style of the reference design */
.elementor .e-con.cs-hero .e-con.cs-hero-text{max-width:900px;align-items:flex-start;gap:14px!important}
.cs-hero .elementor-widget-heading.cs-eyebrow .elementor-heading-title{font-size:18px!important;letter-spacing:.05em}
.cs-hero .elementor-widget-heading.cs-hero-title .elementor-heading-title,.cs-hero .elementor-widget-heading.cs-hero-title2 .elementor-heading-title{font-size:clamp(34px,4.3vw,60px)!important;line-height:1.08!important}
.cs-hero .elementor-widget-text-editor{max-width:600px;font-size:19px}
.cs-hero .e-con.cs-row{margin-top:10px!important;gap:18px!important}
.elementor .e-con.cs-hero-feats{max-width:880px;margin-top:26px!important}
.cs-hfeat .elementor-icon svg{width:46px!important;height:46px!important}
.cs-hfeat .elementor-icon-box-title{font-size:19px!important}
@media (min-width:768px){.elementor .e-con.cs-hero{--min-height:660px;min-height:660px}}
/* Top bar and header scale */
.cs-topbar{font-size:15px}
.cs-topbar .cs-wrap{min-height:52px}
.cs-social a{width:36px;height:36px;border-radius:8px}
/* Bigger WhatsApp button */
.cs-wa-float{width:66px;height:66px}
.cs-wa-float svg{width:34px;height:34px}
@media (max-width:767px){.cs-topbar{font-size:13px}.cs-wa-float{width:56px;height:56px}}
/* Phones: figures two per row, shorter product cards */
@media (max-width:767px){
.elementor .e-con.cs-grid-4:has(>.elementor-widget-icon-box.cs-stat){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
.cs-stat .elementor-icon-box-wrapper{padding:20px 12px!important}
.cs-stat .elementor-icon-box-title{font-size:30px!important}
.cs-stat .elementor-icon-box-description{font-size:13.5px!important}
}
@media (max-width:640px){
.cs-pcard-img{aspect-ratio:16/10}
.cs-pcard-body{padding:16px 16px 18px}
.cs-pcard-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:none}
}
/* Footer headings (h2 for correct heading order, same look as before) */
.cs-footer h2.cs-fhead{color:#fff;font-size:17px;font-weight:600;line-height:1.3;margin:6px 0 18px;position:relative;padding-bottom:12px}
.cs-footer h2.cs-fhead::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:3px;border-radius:2px;background:var(--cs-gold)}
/* Team: compact cards with round initials instead of large squares */
.cs-team{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.cs-member{padding:24px 14px 20px;border-radius:14px;transition:transform .25s,box-shadow .25s}
.cs-member:hover{transform:translateY(-3px);box-shadow:var(--cs-shadow)}
.cs-member .cs-member-photo{width:76px;height:76px;aspect-ratio:auto;border-radius:50%;margin:0 auto 14px;font-size:26px;letter-spacing:.02em}
.cs-member h4{margin:0 0 4px;font-size:17px}
.cs-member .cs-role{margin:0;font-size:13.5px}
.cs-member-lead{grid-template-columns:150px 1fr;gap:30px;padding:28px}
.cs-member-lead .cs-member-photo{width:150px;height:150px;aspect-ratio:auto;border-radius:50%;font-size:46px}
@media (max-width:1024px){.cs-team{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.cs-team{grid-template-columns:1fr 1fr;gap:12px}.cs-member{padding:18px 10px 16px}.cs-member .cs-member-photo{width:62px;height:62px;font-size:21px;margin-bottom:10px}.cs-member-lead{grid-template-columns:1fr;text-align:center;padding:22px 18px;gap:16px}.cs-member-lead .cs-member-photo{width:110px;height:110px;margin:0 auto;font-size:36px}}
/* Order steps: three per row */
.elementor .e-con.cs-steps{gap:22px!important}
.cs-steps .cs-step .elementor-widget-text-editor{font-size:15px}
/* Product page: clean specification table and styled lists */
.cs-spec th,.cs-spec td{border:0;border-bottom:1px solid var(--cs-line);background:transparent!important}
.cs-prose h3{font-size:19px;margin:22px 0 10px;color:var(--cs-navy)}
.cs-prose ul{list-style:none;margin:0 0 14px;padding:0}
.cs-prose li{position:relative;padding-left:22px;margin:0 0 8px}
.cs-prose li::before{content:"";position:absolute;left:3px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--cs-teal)}
/* Hero heading: second line stays on one row on wide screens */
.cs-hero .elementor-widget-heading.cs-hero-title .elementor-heading-title,.cs-hero .elementor-widget-heading.cs-hero-title2 .elementor-heading-title{font-size:clamp(34px,4vw,56px)!important}
.elementor .e-con.cs-hero .e-con.cs-hero-text{max-width:960px}
/* Page not found */
.cs-404{text-align:center;max-width:760px;margin:0 auto}
.cs-404-code{font-size:120px;font-weight:700;line-height:1;margin:0 0 6px;color:var(--cs-teal);opacity:.2}
.cs-404 .cs-lead-txt{margin:0 auto}
.cs-404-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
@media (max-width:640px){.cs-member-lead p:not(.cs-role){text-align:left}}
.cs-form-card h2.cs-form-title{margin:0 0 6px;font-size:24px;line-height:1.25}
/* Home page hero (11 Nov 2026): cargo port picture and the look of the approved local design */
.elementor .e-con.cs-hero.cs-hero-home{--min-height:clamp(510px,39vw,680px);min-height:clamp(510px,39vw,680px);--padding-top:72px;--padding-bottom:75px;background-position:center 54%!important;background-size:cover!important}
.elementor .e-con.cs-hero.cs-hero-home::before{background-image:linear-gradient(90deg,rgba(6,31,70,.99) 0%,rgba(6,31,70,.93) 31%,rgba(6,31,70,.62) 60%,rgba(6,31,70,.16) 100%)!important;background-color:transparent!important;opacity:1!important}
.elementor .e-con.cs-hero.cs-hero-home .e-con.cs-hero-text{max-width:935px;gap:0!important}
.cs-hero-home .elementor-widget-heading.cs-eyebrow{margin-bottom:9px!important}
.cs-hero-home .elementor-widget-heading.cs-eyebrow .elementor-heading-title{color:#a6d513!important;font-size:13.5px!important;font-weight:800!important;letter-spacing:.115em!important;text-transform:uppercase}
.cs-hero-home .elementor-widget-heading.cs-hero-title .elementor-heading-title,.cs-hero-home .elementor-widget-heading.cs-hero-title2 .elementor-heading-title{font-size:clamp(40px,4.2vw,58px)!important;line-height:1.12!important;letter-spacing:-.03em!important;font-weight:700!important}
.cs-hero-home .elementor-widget-heading.cs-hero-title2 .elementor-heading-title{color:#a6d513!important}
.cs-hero-home .elementor-widget-text-editor{color:#edf5fc!important;max-width:600px;font-size:clamp(16px,1.25vw,18.5px)!important;line-height:1.65;margin-top:16px!important}
.cs-hero-home .elementor-widget-text-editor p{margin:0}
.elementor .e-con.cs-hero.cs-hero-home .e-con.cs-row{margin-top:28px!important;gap:14px!important}
.cs-hero-home .elementor-widget-button.cs-el-btn .elementor-button,.cs-hero-home .elementor-widget-button.cs-el-btn-outline .elementor-button{text-transform:none;letter-spacing:0;font-weight:800;font-size:15px;padding:12px 21px;min-height:48px;border-radius:8px;display:inline-flex;align-items:center;box-shadow:none}
.cs-hero-home .elementor-widget-button.cs-el-btn .elementor-button{background:#a6d513!important;color:#061b38!important;border:2px solid #a6d513}
.cs-hero-home .elementor-widget-button.cs-el-btn .elementor-button:hover{background:#c1ec38!important;border-color:#c1ec38}
.cs-hero-home .elementor-widget-button.cs-el-btn-outline .elementor-button{background:rgba(7,33,70,.28)!important;color:#fff!important;border:2px solid #a6d513}
.cs-hero-home .elementor-widget-button.cs-el-btn-outline .elementor-button:hover{background:#a6d513!important;color:#082750!important}
.cs-benefits{display:flex;flex-wrap:wrap;gap:18px 30px;margin-top:35px;max-width:935px}
.cs-benefits>div{display:flex;align-items:center;gap:9px;color:#fff;font-size:14.5px;font-weight:700;line-height:1.3}
.cs-benefits svg{color:#a6d513;width:30px;height:30px;flex:none}
@media (max-width:830px){.elementor .e-con.cs-hero.cs-hero-home{--min-height:500px;min-height:500px;--padding-top:54px;--padding-bottom:54px;background-position:64% center!important}.elementor .e-con.cs-hero.cs-hero-home::before{background-image:linear-gradient(90deg,rgba(6,35,76,.96) 0%,rgba(6,35,76,.75) 70%,rgba(6,35,76,.51))!important}}
@media (max-width:535px){.cs-hero-home .elementor-widget-heading.cs-hero-title .elementor-heading-title,.cs-hero-home .elementor-widget-heading.cs-hero-title2 .elementor-heading-title{font-size:clamp(34px,10vw,46px)!important}.cs-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:24px}.cs-benefits>div{font-size:13px}.cs-benefits svg{width:23px;height:23px}}
.elementor .e-con.cs-hero.cs-hero-home .elementor-widget-text-editor{max-width:600px!important}
.elementor .e-con.cs-hero.cs-hero-home .e-con.cs-row{--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;padding:0!important}
/* 12 Nov 2026: Get a Quote opens at the form, clear of the sticky header */
#cs-quote{scroll-margin-top:110px}
.admin-bar #cs-quote{scroll-margin-top:142px}
@media (max-width:767px){#cs-quote{scroll-margin-top:86px}.admin-bar #cs-quote{scroll-margin-top:132px}}
/* Request a Quote page: shorter banner so the form shows sooner */
.page-id-108 .elementor .e-con.cs-page-banner{--padding-top:52px;--padding-bottom:46px}
.page-id-108 .cs-page-banner .cs-banner-lead{display:none}
@media (max-width:767px){.page-id-108 .elementor .e-con.cs-page-banner{--padding-top:34px;--padding-bottom:30px}}
/* Phones: wide tables scroll inside their own box instead of shrinking the whole page */
.elementor-widget.cs-table{max-width:100%;min-width:0}
@media (max-width:767px){.elementor-widget.cs-table{overflow-x:auto;-webkit-overflow-scrolling:touch}.cs-table table{min-width:540px}}
/* Social icons (shown only once a link is added in Settings) */
.cs-social{flex-wrap:wrap}
.cs-social a.s-tiktok{background:#111}
/* 13 Nov 2026: LinkedIn, Facebook, Instagram and TikTok always show, in the same style as WhatsApp and Email */
.cs-social span{width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:#fff;cursor:default}
.cs-social .s-linkedin,.cs-social a.s-linkedin{background:#0a66c2}
.cs-social .s-facebook,.cs-social a.s-facebook{background:#1877f2}
.cs-social .s-instagram,.cs-social a.s-instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.cs-social .s-tiktok,.cs-social a.s-tiktok{background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
/* 13 Nov 2026: social icons not linked yet are buttons that show a 'coming soon' note */
.cs-social button{width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:#fff;border:0;padding:0;margin:0;font:inherit;line-height:1;cursor:pointer}
.cs-social button:hover{filter:brightness(1.12)}
.cs-social button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cs-soon-pop{position:fixed;top:0;left:0;z-index:10001;width:max-content;max-width:min(280px,calc(100vw - 16px));background:#01787b;color:#fff;font-size:13.5px;line-height:1.45;text-align:left;padding:10px 14px;border-radius:10px;box-shadow:0 10px 26px rgba(3,32,50,.3);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s,transform .18s,visibility .18s;pointer-events:none}
.cs-soon-pop.is-above{transform:translateY(4px)}
.cs-soon-pop.is-on{opacity:1;visibility:visible;transform:none}
.cs-soon-pop strong{font-weight:600;color:#fff}
.cs-soon-pop::before{content:"";position:absolute;left:var(--cs-arrow,50%);top:-5px;width:11px;height:11px;background:inherit;border-radius:2px;transform:translateX(-50%) rotate(45deg)}
.cs-soon-pop.is-above::before{top:auto;bottom:-5px}
/* 13 Nov 2026: social icons - all six the same size and rounded shape (no sharp corners), light tile with the brand-coloured symbol, full brand colour on hover */
.cs-social a,.cs-social button,.cs-social a:hover,.cs-social button:hover,.cs-social a:focus,.cs-social button:focus,.cs-social a:active,.cs-social button:active{-webkit-appearance:none!important;appearance:none!important;box-sizing:border-box!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;margin:0!important;border:0!important;border-radius:10px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;box-shadow:none!important;filter:none!important;text-decoration:none!important;cursor:pointer;transition:background-color .2s,color .2s,transform .2s}
.cs-social a svg,.cs-social button svg{width:15px!important;height:15px!important;fill:currentColor}
.cs-social a:focus-visible,.cs-social button:focus-visible{outline:2px solid #fff!important;outline-offset:2px!important}
.cs-social .s-wa{background:#e3f7eb!important;color:#1a9e52!important}
.cs-social .s-mail{background:#dff1f1!important;color:#01787b!important}
.cs-social .s-linkedin{background:#e6f0fa!important;color:#0a66c2!important}
.cs-social .s-facebook{background:#e7effd!important;color:#1877f2!important}
.cs-social .s-instagram{background:#fbe7f0!important;color:#c13584!important}
.cs-social .s-tiktok,.cs-social .s-x{background:#ececec!important;color:#111!important}
.cs-social .s-youtube{background:#fde8e7!important;color:#e62117!important}
@media (hover:hover){
.cs-social a:hover,.cs-social button:hover{transform:translateY(-1px)}
.cs-social .s-wa:hover{background:#25d366!important;color:#fff!important}
.cs-social .s-mail:hover{background:#01787b!important;color:#fff!important}
.cs-social .s-linkedin:hover{background:#0a66c2!important;color:#fff!important}
.cs-social .s-facebook:hover{background:#1877f2!important;color:#fff!important}
.cs-social .s-instagram:hover{background:#c13584!important;color:#fff!important}
.cs-social .s-tiktok:hover,.cs-social .s-x:hover{background:#111!important;color:#fff!important}
.cs-social .s-youtube:hover{background:#e62117!important;color:#fff!important}
}