/* NAVPRA INTERNATIONAL LLP — site styles */
 :root{
    --green:#174b3b;
    --green2:#23654d;
    --lime:#c8d99b;
    --gold:#d4ad67;
    --ink:#1d2d28;
    --muted:#68766f;
    --cream:#f6f7f1;
    --line:#e4e9e1;
    --white:#fff;
    --shadow:0 18px 45px rgba(21,54,41,.10)
}
 *{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:95px
}
body{
    margin:0;
    font-family:"DM Sans",sans-serif;
    color:var(--ink);
    font-size:16px;
    line-height:1.7;
    background:#fff
}
img{
    display:block;
    max-width:100%
}
a{
    color:inherit;
    text-decoration:none
}
button,input,textarea,select{
    font:inherit
}
.container{
    width:min(1180px,calc(100% - 48px));
    margin:auto
}
.topbar{
    background:#12382d;
    color:#dce9df;
    font-size:13px
}
.topbar-inner,.topbar-inner>div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-height:40px
}
.topbar a{
    margin-left:20px
}
.topbar i{
    color:var(--lime);
    margin-right:7px
}
.header{
    height:88px;
    position:sticky;
    top:0;
    z-index:50;
    background:white;
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(20,70,52,.08)
}
.nav-wrap{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0
}
.brand img{
    width:58px;
  
    object-fit:contain
}
.brand span{
    display:flex;
    flex-direction:column;
    line-height:1.15
}
.brand strong{
    font:800 22px Manrope,sans-serif;
    letter-spacing:2px;
    color:var(--green)
}
.brand small{
    font-size:10px;
    font-weight:700;
    letter-spacing:2.1px;
    margin-top:5px;
    color:#69796e
}
.nav{
    display:flex;
    align-items:center;
    gap:27px;
    font-size:14px;
    font-weight:700
}
.nav>a:not(.nav-cta){
    transition:color .2s
}
.nav>a:hover{
    color:var(--green2)
}
.nav-cta{
    background:var(--green);
    color:white;
    padding:13px 18px;
    border-radius:4px
}
.nav-cta i{
    margin-left:8px
}
.menu-toggle{
    display:none;
    border:0;
    background:var(--cream);
    padding:12px 14px;
    border-radius:4px;
    color:var(--green);
    font-size:20px
}
 .hero{
    height:650px;
    min-height:570px;
    position:relative;
    overflow:hidden;
    background:#203d31;
    color:#fff
}
.hero-slide{
    position:absolute;
    inset:0;
    background-image:var(--hero-image);
    background-size:cover;
    background-position:center;
    opacity:0;
    transform:scale(1.04);
    transition:opacity 1s ease,transform 6s ease
}
.hero-slide.active{
    opacity:1;
    transform:scale(1)
}
.hero-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(9,35,26,.86) 0%,rgba(13,44,32,.70) 48%,rgba(16,40,30,.25) 100%),linear-gradient(0deg,rgba(8,32,24,.25),transparent 50%)
}
.hero-content{
    height:100%;
    position:relative;
    display:flex;
    align-items:center;
    z-index:2
}
.hero-copy{
    max-width:690px;
    padding-bottom:15px
}
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--green2);
    font-size:12px;
    letter-spacing:2px;
    font-weight:800;
    margin-bottom:15px
}
.eyebrow.light{
    color:#d5e5d1
}
.eyebrow span{
    width:25px;
    height:2px;
    background:var(--gold);
    display:inline-block
}
.hero h1,.section-heading h2,.about-copy h2,.value-band h2,.process-intro h2,.faq-grid h2,.contact-copy h2{
    font-family:Manrope,sans-serif;
    font-size:clamp(42px,5vw,66px);
    letter-spacing:-2.2px;
    line-height:1.1;
    margin:0 0 22px;
    font-weight:800
}
.hero h1 em,.section-heading h2 em,.about-copy h2 em,.value-band h2 em,.process-intro h2 em,.faq-grid h2 em,.contact-copy h2 em{
    font-style:normal;
    color:var(--lime)
}
.hero-copy>p{
    font-size:18px;
    line-height:1.8;
    color:#e2e9e2;
    max-width:620px;
    margin:0 0 30px
}
.hero-actions{
    display:flex;
    gap:13px;
    flex-wrap:wrap
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:15px 21px;
    border-radius:4px;
    font-weight:800;
    font-size:14px;
    border:1px solid transparent;
    cursor:pointer;
    transition:transform .2s,background .2s
}
.btn:hover{
    transform:translateY(-2px)
}
.btn-primary{
    background:var(--green2);
    color:#fff
}
.btn-primary:hover{
    background:#174b3b
}
.btn-glass{
    color:#fff;
    border-color:rgba(255,255,255,.5);
    background:rgba(255,255,255,.07)
}
.btn-light{
    background:#fff;
    color:var(--green)
}
.hero-proof{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:45px;
    color:#dce8dc;
    font-size:13px;
    line-height:1.5
}
.proof-icon{
    width:43px;
    height:43px;
    border:1px solid rgba(255,255,255,.4);
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:19px;
    color:var(--lime)
}
.hero-proof b{
    color:#fff;
    font-size:14px
}
.hero-controls{
    position:absolute;
    z-index:3;
    bottom:35px;
    left:max(24px,calc((100% - 1180px)/2));
    display:flex;
    align-items:center;
    gap:15px
}
.hero-controls>button{
    width:42px;
    height:42px;
    border:1px solid rgba(255,255,255,.5);
    color:white;
    background:transparent;
    border-radius:50%;
    cursor:pointer
}
.hero-dots{
    display:flex;
    gap:8px
}
.dot{
    height:6px;
    width:24px;
    border:0;
    border-radius:10px;
    background:rgba(255,255,255,.5);
    padding:0;
    cursor:pointer
}
.dot.active{
    width:40px;
    background:var(--lime)
}
.hero-index{
    position:absolute;
    z-index:3;
    right:max(24px,calc((100% - 1180px)/2));
    bottom:44px;
    color:#dce6dd;
    font-size:12px;
    letter-spacing:2px
}
.hero-index span{
    font-size:23px;
    color:white;
    font-weight:700
}
.hero-index i{
    display:inline-block;
    width:45px;
    height:1px;
    background:#b8c9bb;
    vertical-align:middle;
    margin:0 12px
}
 .trade-strip{
    position:relative;
    z-index:5;
    margin-top:-1px;
    background:#fff;
    border-bottom:1px solid var(--line)
}
.trade-strip-inner{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    padding:27px 0
}
.trade-strip-inner>div{
    display:flex;
    align-items:center;
    gap:15px;
    padding:0 30px;
    border-right:1px solid var(--line)
}
.trade-strip-inner>div:first-child{
    padding-left:0
}
.trade-strip-inner>div:last-child{
    border:0
}
.strip-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#edf3e8;
    color:var(--green);
    font-size:20px
}
.trade-strip b,.trade-strip small{
    display:block
}
.trade-strip b{
    font:700 16px Manrope
}
.trade-strip small{
    font-size:12px;
    color:var(--muted);
    margin-top:3px
}
 .section{
    padding:50px 0
}
.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center
}
.about-visual{
    position:relative;
    padding:0 25px 28px 0
}
.about-photo{
    height:490px;
    overflow:hidden;
    border-radius:5px 80px 5px 5px;
    background:#e7eee3
}
.about-photo img{
    width:100%;
    height:100%;
    object-fit:cover
}
.about-stamp{
    position:absolute;
    right:0;
    top:38px;
    background:var(--green);
    color:white;
    width:125px;
    height:125px;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 30px #183c2b33
}
.about-stamp i{
    font-size:25px;
    color:var(--lime);
    margin-bottom:4px
}
.about-stamp b{
    font:700 19px Manrope
}
.about-stamp span{
    font-size:10px;
    color:#d9e4d8
}
.about-note{
    position:absolute;
    left:-20px;
    bottom:0;
    background:#fff;
    padding:17px 22px;
    display:flex;
    gap:12px;
    align-items:center;
    box-shadow:var(--shadow);
    border-left:3px solid var(--gold)
}
.about-note>i{
    font-size:25px;
    color:var(--green2)
}
.about-note b,.about-note small{
    display:block
}
.about-note b{
    font:700 14px Manrope
}
.about-note small{
    font-size:12px;
    color:var(--muted)
}
.about-copy h2,.process-intro h2,.faq-grid h2{
    font-size:clamp(36px,4vw,48px);
    letter-spacing:-1.5px
}
.about-copy h2 em,.section-heading h2 em,.process-intro h2 em,.faq-grid h2 em{
    color:var(--green2)
}
.about-copy p{
    color:var(--muted);
    margin:0 0 17px
}
.about-copy .lead{
    font-size:18px;
    color:#34483e
}
.about-points{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 18px;
    margin:27px 0
}
.about-points div{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:14px;
    font-weight:700
}
.about-points i{
    color:var(--green2)
}
.text-link{
    font-weight:800;
    color:var(--green2);
    font-size:14px;
    display:inline-flex;
    gap:10px;
    align-items:center
}
.text-link i{
    transition:transform .2s
}
.text-link:hover i{
    transform:translateX(4px)
}
 .segments-section{
    background:var(--cream)
}
.section-heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:42px
}
.section-heading h2{
    font-size:clamp(36px,4vw,49px);
    letter-spacing:-1.5px;
    margin:0
}
.section-heading>p{
    max-width:420px;
    color:var(--muted);
    margin:0 0 5px
}
.section-heading.centered{
    display:block;
    text-align:center;
    max-width:720px;
    margin:0 auto 48px
}
.section-heading.centered>p{
    max-width:620px;
    margin:14px auto 0
}
.segment-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px
}
.segment-card{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    background:#fff;
    box-shadow:0 8px 35px rgba(20,55,40,.06);
    border-radius:6px;
    overflow:hidden
}
.segment-image{
    position:relative;
    min-height:390px;
    overflow:hidden
}
.segment-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
    transition:transform .5s
}
.segment-card:hover .segment-image img{
    transform:scale(1.05)
}
.segment-label{
    position:absolute;
    top:18px;
    left:18px;
    background:rgba(20,65,48,.92);
    color:#fff;
    padding:7px 10px;
    font-size:10px;
    font-weight:800;
    letter-spacing:1.3px
}
.segment-body{
    padding:30px 25px;
    position:relative
}
.segment-icon{
    width:49px;
    height:49px;
    background:#edf3e8;
    color:var(--green);
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:20px;
    margin-bottom:18px
}
.segment-body h3{
    font:800 23px Manrope;
    margin:0 0 10px
}
.segment-body p,.segment-body li{
    font-size:14px;
    color:var(--muted)
}
.segment-body p{
    margin:0 0 15px
}
.segment-body ul{
    padding-left:18px;
    margin:0 0 20px
}
.segment-body li{
    margin:4px 0
}
 .products-section{
    background:#fff
}
.product-subhead{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 0;
    border-bottom:1px solid var(--line);
    margin-bottom:25px;
    scroll-margin-top:120px
}
.product-subhead>div{
    display:flex;
    align-items:center;
    gap:14px
}
.subhead-icon{
    width:47px;
    height:47px;
    display:grid;
    place-items:center;
    background:var(--green);
    color:white;
    border-radius:50%;
    font-size:18px
}
.product-subhead h3{
    font:800 23px Manrope;
    margin:0
}
.product-subhead p{
    font-size:13px;
    color:var(--muted);
    margin:0
}
.count-pill{
    font-size:11px;
    font-weight:800;
    letter-spacing:1px;
    color:var(--green);
    background:#edf3e8;
    padding:8px 12px;
    border-radius:20px
}
.product-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin-bottom:45px
}
.product-card{
    border:1px solid #e8ece5;
    border-radius:5px;
    overflow:hidden;
    background:white;
    transition:transform .25s,box-shadow .25s
}
.product-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow)
}
.product-image{
    height:230px;
    position:relative;
    overflow:hidden;
    background:#edf1e9
}
.product-image>img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .55s
}
.product-card:hover .product-image>img{
    transform:scale(1.06)
}
.product-tag{
    position:absolute;
    left:15px;
    top:15px;
    padding:6px 10px;
    border-radius:2px;
    background:var(--green);
    color:#fff;
    font-size:10px;
    letter-spacing:1.2px;
    font-weight:800
}
.import-tag{
    background:#a77839
}
.zoom-link{
    position:absolute;
    right:14px;
    top:14px;
    width:36px;
    height:36px;
    background:#ffffffeb;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:var(--green);
    opacity:0;
    transform:translateY(5px);
    transition:.2s
}
.product-card:hover .zoom-link{
    opacity:1;
    transform:none
}
.product-info{
    padding:23px 23px 25px
}
.product-kicker{
    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;
    color:#8c9a8d
}
.product-info h4{
    font:800 21px Manrope;
    margin:7px 0 10px
}
.product-info p{
    font-size:14px;
    line-height:1.75;
    color:var(--muted);
    min-height:98px;
    margin:0 0 19px
}
.product-link{
    font-size:13px;
    font-weight:800;
    color:var(--green2);
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid var(--line);
    padding-top:14px
}
.import-grid{
    grid-template-columns:repeat(3,1fr)
}
.import-grid .product-card{
    grid-column:span 1
}
.import-subhead{
    margin-top:12px
}
 .value-band{
    background:var(--green);
    color:#fff;
    padding:65px 0;
    position:relative;
    overflow:hidden
}
.value-band:after{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    border:1px solid #ffffff18;
    border-radius:50%;
    right:-100px;
    top:-180px;
    box-shadow:0 0 0 45px #ffffff08,0 0 0 90px #ffffff05
}
.value-band-inner{
    display:grid;
    grid-template-columns:1.1fr 1fr auto;
    align-items:center;
    gap:45px;
    position:relative;
    z-index:1
}
.value-band h2{
    font-size:38px;
    letter-spacing:-1.2px;
    margin:0
}
.value-band h2 em{
    color:var(--lime)
}
.value-band-inner>p{
    color:#d3e0d6;
    margin:0;
    font-size:15px
}
 .why-section{
    background:var(--cream)
}
.why-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px
}
.why-card{
    background:#fff;
    border:1px solid #e7ece4;
    padding:30px 24px 28px;
    position:relative;
    min-height:250px;
    transition:transform .25s,box-shadow .25s
}
.why-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow)
}
.why-number{
    position:absolute;
    right:20px;
    top:17px;
    color:#dce5d8;
    font:800 27px Manrope
}
.why-icon{
    width:53px;
    height:53px;
    border-radius:50%;
    background:#edf3e8;
    color:var(--green);
    display:grid;
    place-items:center;
    font-size:21px;
    margin-bottom:25px
}
.why-card h3{
    font:800 18px Manrope;
    margin:0 0 10px
}
.why-card p{
    font-size:14px;
    color:var(--muted);
    margin:0
}
 .process-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:100px
}
.process-intro h2{
    font-size:43px
}
.process-intro p,.faq-grid>div>p{
    color:var(--muted);
    margin:0 0 23px
}
.process-steps{
    border-top:1px solid var(--line)
}
.process-step{
    display:grid;
    grid-template-columns:60px 1fr;
    gap:20px;
    padding:24px 0;
    border-bottom:1px solid var(--line)
}
.process-step>span{
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--green);
    color:#fff;
    display:grid;
    place-items:center;
    font:800 15px Manrope
}
.process-step h3{
    font:800 18px Manrope;
    margin:0 0 6px
}
.process-step p{
    color:var(--muted);
    font-size:14px;
    margin:0
}
 .gallery-section{
    background:#f7f8f4
}
.gallery-grid{
    display:grid;
    grid-template-columns:1.35fr 1fr 1fr;
    grid-template-rows:220px 220px;
    gap:16px
}
.gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:4px;
    background:#dfe8dd;
    display:block
}
.gallery-item.gallery-large{
    grid-row:span 2
}
.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .55s
}
.gallery-item:hover img{
    transform:scale(1.07)
}
.gallery-item:after{
    content:"";
    position:absolute;
    inset:30% 0 0;
    background:linear-gradient(transparent,rgba(9,35,26,.8))
}
.gallery-item>span{
    position:absolute;
    z-index:2;
    left:20px;
    right:20px;
    bottom:17px;
    color:white;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:end
}
.gallery-item b{
    font:700 17px Manrope
}
.gallery-item small{
    grid-column:1;
    color:#e1e9e1;
    font-size:12px
}
.gallery-item i{
    grid-column:2;
    grid-row:1/3;
    width:35px;
    height:35px;
    border:1px solid #ffffff99;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:13px
}
.gallery-note{
    font-size:12px;
    color:#7d887e;
    margin:18px 0 0
}
.gallery-note i{
    margin-right:6px
}
 .faq-section{
    background:#fff
}
.faq-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:100px
}
.faq-grid h2{
    font-size:43px
}
.faq-grid>div>.btn{
    margin-top:8px
}
.faq-list details{
    border-bottom:1px solid var(--line);
    padding:20px 0
}
.faq-list details:first-child{
    border-top:1px solid var(--line)
}
.faq-list summary{
    list-style:none;
    cursor:pointer;
    font:700 16px Manrope;
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center
}
.faq-list summary::-webkit-details-marker{
    display:none
}
.faq-list summary i{
    color:var(--green2);
    transition:transform .2s
}
.faq-list details[open] summary i{
    transform:rotate(45deg)
}
.faq-list details p{
    font-size:14px;
    color:var(--muted);
    margin:13px 30px 0 0
}
 .contact-section{
    background:#153f31;
    padding:95px 0;
    color:#fff;
    position:relative;
    overflow:hidden
}
.contact-section:before{
    content:"";
    position:absolute;
    left:-180px;
    bottom:-250px;
    width:600px;
    height:600px;
    border:1px solid #ffffff10;
    border-radius:50%;
    box-shadow:0 0 0 55px #ffffff06,0 0 0 110px #ffffff04
}
.contact-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:85px;
    position:relative;
    z-index:1
}
.contact-copy h2{
    font-size:clamp(38px,4.2vw,51px);
    letter-spacing:-1.5px
}
.contact-copy>p{
    color:#d0dfd5;
    max-width:440px;
    margin:0 0 35px
}
.contact-copy h2 em{
    color:var(--lime)
}
.contact-detail{
    display:flex;
    gap:14px;
    align-items:center;
    margin:20px 0
}
.contact-detail>span{
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    border:1px solid #ffffff42;
    border-radius:50%;
    color:var(--lime);
    font-size:17px
}
.contact-detail small{
    display:block;
    font-size:10px;
    letter-spacing:1.6px;
    color:#c5d6c9;
    font-weight:800
}
.contact-detail a,.contact-detail p{
    font-size:15px;
    color:#fff;
    margin:2px 0 0
}
.social-links{
    display:flex;
    gap:10px;
    margin-top:30px
}
.social-links a,.footer-social a{
    width:39px;
    height:39px;
    border:1px solid #ffffff55;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    transition:.2s
}
.social-links a:hover,.footer-social a:hover{
    background:var(--lime);
    color:var(--green);
    border-color:var(--lime)
}
.contact-form-wrap{
    background:#fff;
    color:var(--ink);
    padding:35px 38px;
    border-radius:5px;
    box-shadow:0 25px 65px #092b1e35
}
.form-heading>span{
    font-size:10px;
    letter-spacing:1.8px;
    font-weight:800;
    color:var(--green2)
}
.form-heading h3{
    font:800 27px Manrope;
    margin:5px 0
}
.form-heading p{
    font-size:12px;
    color:var(--muted);
    margin:0 0 22px
}
.contact-form-wrap form label{
    display:block;
    font-size:12px;
    font-weight:800;
    margin-bottom:15px;
    color:#394b41
}
.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px
}
.contact-form-wrap input,.contact-form-wrap select,.contact-form-wrap textarea{
    display:block;
    width:100%;
    margin-top:7px;
    padding:12px 13px;
    border:1px solid #dfe6dc;
    border-radius:3px;
    background:#fbfcfa;
    color:var(--ink);
    outline:none;
    font-size:13px;
    font-weight:400
}
.contact-form-wrap input:focus,.contact-form-wrap select:focus,.contact-form-wrap textarea:focus{
    border-color:var(--green2);
    box-shadow:0 0 0 3px #23654d12
}
.contact-form-wrap textarea{
    resize:vertical;
    min-height:110px
}
.form-submit{
    width:100%;
    border:0
}
.form-disclaimer{
    font-size:11px;
    color:#7a867d;
    text-align:center;
    margin:12px 0 0
}
.form-status{
    font-size:13px;
    color:var(--green);
    margin-top:10px
}
 .footer{
    background:#102c22;
    color:#d4e0d6
}
.footer-main{
    display:grid;
    grid-template-columns:1.3fr .7fr .8fr 1fr;
    gap:50px;
    padding-top:65px;
    padding-bottom:55px
}
.brand-light strong{
    color:#fff
}
.brand-light small{
    color:#aebeb1
}
.brand-light img{
   
    padding:4px
}
.footer-brand>p{
    font-size:13px;
    color:#aebeb4;
    max-width:300px;
    margin:20px 0
}
.footer-social{
    display:flex;
    gap:8px
}
.footer-social a{
    width:34px;
    height:34px;
    font-size:13px
}
.footer-links h4,.footer-contact h4{
    font:800 15px Manrope;
    color:#fff;
    margin:6px 0 20px
}
.footer-links>a{
    display:block;
    color:#b8c8bc;
    font-size:13px;
    margin:10px 0;
    transition:color .2s
}
.footer-links>a:hover,.footer-contact a:hover{
    color:var(--lime)
}
.footer-contact p{
    font-size:13px;
    color:#b8c8bc;
    display:flex;
    gap:10px;
    align-items:flex-start
}
.footer-contact p i{
    color:var(--lime);
    margin-top:5px
}
.footer-contact-cta{
    display:inline-flex;
    gap:10px;
    align-items:center;
    color:var(--lime);
    font-size:13px;
    font-weight:800;
    margin-top:10px
}
.footer-bottom{
    border-top:1px solid #ffffff1b
}
.footer-bottom .container{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    font-size:14px;
    color:white;
}
.footer-bottom a{
    color:#d9e5d9
}
.whatsapp-float{
    position:fixed;
    right:22px;
    bottom:22px;
    width:55px;
    height:55px;
    background:#1fae61;
    color:white;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:27px;
    z-index:80;
    box-shadow:0 8px 25px #0003;
    transition:transform .2s
}
.whatsapp-float:hover{
    transform:translateY(-4px)
}
 @media(max-width:1100px){
    .nav{
        gap:15px;
        font-size:13px
    }
    .nav-cta{
        padding:11px 13px
    }
    .about-grid{
        gap:55px
    }
    .segment-card{
        grid-template-columns:1fr
    }
    .segment-image{
        min-height:230px
    }
    .segment-body{
        padding:25px
    }
    .segment-body ul{
        display:flex;
        flex-wrap:wrap;
        gap:6px 20px
    }
    .segment-body li{
        margin:0
    }
    .value-band-inner{
        gap:25px
    }
    .process-grid,.faq-grid{
        gap:60px
    }
    .contact-grid{
        gap:45px
    }
    .footer-main{
        gap:28px
    }
}
 @media(max-width:850px){
    .topbar-inner{
        justify-content:center
    }
    .topbar-inner>span{
        display:none
    }
    .topbar-inner>div{
        width:100%;
        justify-content:center
    }
    .header{
        height:78px
    }
    .brand img{
        width:51px;
      
    }
    .menu-toggle{
        display:block
    }
    .nav{
        display:none;
        position:absolute;
        top:78px;
        left:0;
        right:0;
        background:#fff;
        padding:20px 24px 25px;
        box-shadow:0 20px 25px #153f3114;
        align-items:stretch;
        gap:0;
        flex-direction:column
    }
    .nav.open{
        display:flex
    }
    .nav>a{
        padding:12px 0;
        border-bottom:1px solid var(--line)
    }
    .nav .nav-cta{
        margin-top:12px;
        text-align:center;
        border:0
    }
    .hero{
        height:600px
    }
    .hero-copy{
        max-width:610px
    }
    .trade-strip-inner{
        grid-template-columns:1fr;
        gap:18px;
        padding:22px 0
    }
    .trade-strip-inner>div{
        border:0;
        padding:0!important
    }
    .about-grid,.process-grid,.faq-grid,.contact-grid{
        grid-template-columns:1fr;
        gap:45px
    }
    .about-visual{
        max-width:560px;
        width:100%;
        margin:0 auto
    }
    .about-copy{
        max-width:700px
    }
    .segment-grid{
        gap:18px
    }
    .segment-body{
        padding:22px
    }
    .segment-body h3{
        font-size:20px
    }
    .product-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .value-band-inner{
        grid-template-columns:1fr 1fr
    }
    .value-band-inner .btn{
        grid-column:1/-1;
        justify-self:start
    }
    .why-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .process-intro{
        max-width:600px
    }
    .gallery-grid{
        grid-template-columns:1fr 1fr;
        grid-template-rows:220px 220px 220px
    }
    .gallery-item.gallery-large{
        grid-row:span 2
    }
    .footer-main{
        grid-template-columns:1fr 1fr
    }
    .contact-copy{
        max-width:600px
    }
}
 @media(max-width:560px){
    .container{
        width:min(100% - 34px,1180px)
    }
    .topbar{
        font-size:11px
    }
    .topbar-inner>div{
        gap:12px
    }
    .topbar a{
        margin:0
    }
    .hero{
        height:620px;
        min-height:580px
    }
    .hero-shade{
        background:linear-gradient(90deg,rgba(9,35,26,.88),rgba(13,44,32,.57)),linear-gradient(0deg,rgba(8,32,24,.25),transparent)
    }
    .hero h1{
        font-size:44px;
        letter-spacing:-1.7px
    }
    .hero-copy>p{
        font-size:16px
    }
    .hero-actions{
        align-items:stretch;
        flex-direction:column;
        max-width:280px
    }
    .hero-actions .btn{
        justify-content:space-between
    }
    .hero-proof{
        margin-top:30px
    }
    .hero-controls{
        bottom:22px;
        left:17px
    }
    .hero-index{
        bottom:31px;
        right:17px
    }
    .section{
        padding:70px 0
    }
    .about-grid{
        gap:45px
    }
    .about-photo{
        height:360px
    }
    .about-stamp{
        width:100px;
        height:100px;
        right:0;
        top:22px
    }
    .about-note{
        left:-5px;
        padding:12px
    }
    .about-copy h2,.section-heading h2,.process-intro h2,.faq-grid h2{
        font-size:36px
    }
    .about-points{
        grid-template-columns:1fr
    }
    .section-heading{
        display:block
    }
    .section-heading>p{
        margin-top:15px
    }
    .section-heading.centered{
        margin-bottom:35px
    }
    .segment-grid{
        grid-template-columns:1fr
    }
    .segment-card{
        grid-template-columns:.9fr 1.1fr
    }
    .segment-image{
        min-height:370px
    }
    .segment-body{
        padding:20px 16px
    }
    .segment-body p,.segment-body li{
        font-size:12px
    }
    .segment-body ul{
        display:block;
        padding-left:15px
    }
    .segment-body li{
        margin:4px 0
    }
    .segment-body h3{
        font-size:19px
    }
    .segment-icon{
        width:40px;
        height:40px;
        font-size:16px;
        margin-bottom:12px
    }
    .segment-body .text-link{
        font-size:12px
    }
    .product-grid{
        grid-template-columns:1fr;
        gap:18px
    }
    .product-image{
        height:240px
    }
    .product-info p{
        min-height:0
    }
    .product-subhead h3{
        font-size:19px
    }
    .count-pill{
        font-size:9px;
        padding:6px 8px
    }
    .value-band{
        padding:55px 0
    }
    .value-band-inner{
        grid-template-columns:1fr;
        gap:20px
    }
    .value-band h2{
        font-size:34px
    }
    .value-band-inner .btn{
        grid-column:auto
    }
    .why-grid{
        grid-template-columns:1fr
    }
    .why-card{
        min-height:0
    }
    .process-grid,.faq-grid{
        gap:35px
    }
    .gallery-grid{
        grid-template-columns:1fr 1fr;
        grid-template-rows:190px 190px 190px;
        gap:10px
    }
    .gallery-item.gallery-large{
        grid-row:span 2
    }
    .gallery-item>span{
        left:12px;
        right:12px;
        bottom:12px
    }
    .gallery-item b{
        font-size:14px
    }
    .gallery-item small{
        font-size:10px
    }
    .gallery-item i{
        width:28px;
        height:28px;
        font-size:11px
    }
    .contact-section{
        padding:70px 0
    }
    .contact-form-wrap{
        padding:25px 20px
    }
    .form-row{
        grid-template-columns:1fr;
        gap:0
    }
    .footer-main{
        grid-template-columns:1fr 1fr;
        gap:30px 20px;
        padding-top:48px;
        padding-bottom:40px
    }
    .footer-brand,.footer-contact{
        grid-column:1/-1
    }
    .footer-bottom .container{
        padding:15px 0;
        flex-direction:column;
        align-items:flex-start;
        gap:5px
    }
    .whatsapp-float{
        width:50px;
        height:50px;
        right:15px;
        bottom:15px
    }
    .product-link{
        gap:10px
    }
    .segment-image{
        min-height:330px
    }
}
 @media(max-width:380px){
    .segment-card{
        grid-template-columns:1fr
    }
    .segment-image{
        min-height:200px
    }
    .segment-body{
        padding:22px
    }
    .segment-body p,.segment-body li{
        font-size:14px
    }
    .segment-body ul{
        display:flex;
        flex-direction:column
    }
    .hero h1{
        font-size:39px
    }
    .topbar-inner>div{
        font-size:10px;
        gap:8px
    }
    .brand strong{
        font-size:19px
    }
    .brand small{
        font-size:9px
    }
}
 
 
 
 
 
 
/* NAVPRA COMPACT SECTORS SECTION */

.navpra-sector-mini {
    padding: 55px 0;
    background: #f6f7f1;
    font-family: "DM Sans", sans-serif;
}

.navpra-mini-container {
    width: min(1180px, calc(100% - 40px));
    margin: auto;
}

.navpra-mini-heading {
    text-align: center;
    margin-bottom: 30px;
}

.navpra-mini-heading > span {
    color: #b18b48;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.navpra-mini-heading h2 {
    margin: 5px 0 0;
    color: #174b3b;
    font-family: "Manrope", sans-serif;
    font-size: 34px;
    font-weight: 800;
}

.navpra-mini-heading h2 b {
    color: #b18b48;
}

.navpra-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.navpra-mini-card {
    min-height: 105px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 19px 16px;
    background: #ffffff;
    border: 1px solid #e3e9df;
    border-radius: 5px;
    border-bottom: 2px solid #d4ad67;
    transition: .25s ease;
}

.navpra-mini-card:hover {
    border-color: #23654d;
    background: #fbfcf8;
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(23, 75, 59, .08);
}

.navpra-mini-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf3e8;
    color: #23654d;
    border-radius: 4px;
    font-size: 21px;
    transition: .25s ease;
}

.navpra-mini-card:hover .navpra-mini-icon {
    background: #174b3b;
    color: #d4ad67;
}

.navpra-mini-content {
    flex: 1;
    min-width: 0;
}

.navpra-mini-content h3 {
    margin: 0 0 5px;
    color: #1d2d28;
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
}

.navpra-mini-content p {
    margin: 0;
    color: #68766f;
    font-size: 12px;
    line-height: 1.6;
}

.navpra-mini-arrow {
    flex-shrink: 0;
    color: #b18b48;
    font-size: 13px;
    transition: transform .25s;
}

.navpra-mini-card:hover .navpra-mini-arrow {
    transform: translateX(4px);
    color: #174b3b;
}

/* Tablet */
@media (max-width: 900px) {
    .navpra-mini-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 560px) {
    .navpra-sector-mini {
        padding: 42px 0;
    }

    .navpra-mini-heading h2 {
        font-size: 29px;
    }

    .navpra-mini-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .navpra-mini-card {
        min-height: 88px;
        padding: 14px;
    }

    .navpra-mini-icon {
        width: 43px;
        height: 43px;
        font-size: 19px;
    }
}
















/* NAVPRA GREEN NUMBER COUNTER */

.navpra-counter-section {
    position: relative;
    padding: 48px 0;
    background: linear-gradient(120deg, #123e30 0%, #1b6047 55%, #174b3b 100%);
    overflow: hidden;
    font-family: "DM Sans", sans-serif;
}

.navpra-counter-section::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    top: -220px;
    left: 10%;
    border: 1px solid rgba(212, 173, 103, .18);
    border-radius: 50%;
    box-shadow: 0 0 0 35px rgba(255,255,255,.025),
                0 0 0 70px rgba(255,255,255,.02);
    pointer-events: none;
}

.navpra-counter-container {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 40px));
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.navpra-counter-item {
    position: relative;
    padding: 10px 20px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,.18);
}

.navpra-counter-item:last-child {
    border-right: none;
}

.navpra-counter-icon {
    width: 49px;
    height: 49px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(212,173,103,.6);
    border-radius: 50%;
    color: #e1bf7b;
    font-size: 20px;
    background: rgba(255,255,255,.04);
    transition: .3s ease;
}

.navpra-counter-item:hover .navpra-counter-icon {
    background: #d4ad67;
    color: #174b3b;
    transform: translateY(-3px);
}

.navpra-counter-item h2 {
    margin: 0 0 8px;
    color: #ffffff;
    font-family: "Manrope", sans-serif;
    font-size: clamp(32px, 3.3vw, 43px);
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.navpra-counter-item .navpra-plus {
    color: #e1bf7b;
    font-size: .8em;
    margin-left: 2px;
}

.navpra-counter-item p {
    margin: 0;
    color: #e1eae3;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .2px;
}

.navpra-counter-line {
    width: 28px;
    height: 2px;
    margin: 15px auto 0;
    background: #d4ad67;
    transition: width .3s ease;
}

.navpra-counter-item:hover .navpra-counter-line {
    width: 55px;
}

/* Tablet */
@media (max-width: 768px) {
    .navpra-counter-section {
        padding: 35px 0;
    }

    .navpra-counter-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 28px;
    }

    .navpra-counter-item:nth-child(2) {
        border-right: none;
    }

    .navpra-counter-item:nth-child(3),
    .navpra-counter-item:nth-child(4) {
        padding-top: 20px;
        border-top: 1px solid rgba(255,255,255,.18);
    }
}

/* Mobile */
@media (max-width: 480px) {
    .navpra-counter-container {
        width: calc(100% - 24px);
        column-gap: 0;
    }

    .navpra-counter-item {
        padding: 10px 6px;
    }

    .navpra-counter-icon {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    .navpra-counter-item h2 {
        font-size: 32px;
    }

    .navpra-counter-item p {
        font-size: 12px;
    }
}




/* ===== NAVPRA THREE IMAGE SLIDER ===== */

.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hero .hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    z-index: -2;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.hero .hero-slide.active {
    opacity: 1;
    visibility: visible;
}

.hero .hero-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero .hero-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        90deg,
        rgba(0, 40, 29, 0.85),
        rgba(0, 40, 29, 0.55),
        rgba(0, 40, 29, 0.15)
    );
    pointer-events: none;
}

.hero .hero-content {
    position: relative;
    z-index: 2;
}

.hero .hero-controls {
    position: absolute;
    z-index: 5;
}

@media (max-width: 768px) {
    .hero .hero-slide img {
        object-position: center;
    }

    .hero .hero-shade {
        background: rgba(0, 40, 29, 0.68);
    }
}

















/* DISTRIBUTION SECTION */
.distribution-section {
    padding: 100px 0;
    background: #f5f7f5;
    position: relative;
    overflow: hidden;
}

.distribution-container {
    width: 90%;
    max-width: 1250px;
    margin: auto;
}

.distribution-heading {
    max-width: 760px;
    margin-bottom: 55px;
}

.distribution-eyebrow {
    color: #b58b48;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    display: inline-block;
    margin-bottom: 17px;
}

.distribution-heading h2 {
    font-size: clamp(32px, 4vw, 52px);
    color: #152d26;
    line-height: 1.15;
    font-weight: 750;
    margin: 0 0 20px;
}

.distribution-heading h2 em {
    color: #b58b48;
    font-style: normal;
}

.distribution-heading > p {
    color: #68736e;
    font-size: 15px;
    line-height: 1.9;
    max-width: 700px;
}

.distribution-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.distribution-card {
    position: relative;
    padding: 35px 28px;
    background: #fff;
    border: 1px solid #e9eee9;
    border-radius: 5px;
    transition: all .35s ease;
    min-height: 275px;
}

.distribution-card:hover {
    transform: translateY(-8px);
    border-color: #b58b48;
    box-shadow: 0 15px 40px rgba(20, 45, 35, .09);
}

.distribution-icon {
    width: 58px;
    height: 58px;
    background: #edf3ed;
    color: #b58b48;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 23px;
    margin-bottom: 24px;
    transition: .3s;
}

.distribution-card:hover .distribution-icon {
    background: #173d30;
    color: #fff;
}

.distribution-number {
    position: absolute;
    right: 25px;
    top: 30px;
    font-size: 32px;
    font-weight: 800;
    color: #edf0eb;
}

.distribution-card h3 {
    font-size: 20px;
    color: #18372c;
    margin-bottom: 13px;
    font-weight: 700;
}

.distribution-card p {
    font-size: 13.5px;
    color: #737d77;
    line-height: 1.85;
    margin: 0;
}

.distribution-bottom {
    margin-top: 45px;
    padding: 38px 42px;
    background: #18392e;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    border-left: 5px solid #b58b48;
}

.distribution-bottom span {
    font-size: 11px;
    letter-spacing: 2px;
    color: #d6b678;
    font-weight: 700;
}

.distribution-bottom h3 {
    color: #fff;
    font-size: 25px;
    margin: 10px 0;
}

.distribution-bottom p {
    color: #c3d0c8;
    font-size: 13px;
    margin: 0;
    line-height: 1.7;
}

.distribution-btn {
    background: #b58b48;
    color: #fff !important;
    text-decoration: none;
    padding: 16px 25px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: .3s;
    border-radius: 3px;
}

.distribution-btn:hover {
    background: #fff;
    color: #18392e !important;
}

.distribution-btn i {
    margin-left: 9px;
}

/* TABLET */
@media(max-width: 991px) {
    .distribution-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* MOBILE */
@media(max-width: 600px) {
    .distribution-section {
        padding: 65px 0;
    }

    .distribution-container {
        width: 91%;
    }

    .distribution-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .distribution-card {
        min-height: auto;
        padding: 28px 23px;
    }

    .distribution-bottom {
        padding: 28px 23px;
        flex-direction: column;
        align-items: flex-start;
    }

    .distribution-bottom h3 {
        font-size: 21px;
    }

    .distribution-btn {
        display: inline-block;
    }
}











/* NAVPRA INTERNATIONAL - GLOBAL TRADE SECTION */

.np-trade-section {
    background: #f3f1e9;
    padding: 100px 0;
    overflow: hidden;
    color: #17372d;
}

.np-trade-wrap {
    width: 90%;
    max-width: 1280px;
    margin: auto;
}

.np-trade-top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #c9cec5;
    padding-bottom: 18px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.np-trade-location {
    color: #8b9187;
}

.np-trade-intro {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 50px;
    align-items: end;
    padding: 75px 0 65px;
}

.np-trade-small {
    font-size: 10px;
    letter-spacing: 3px;
    color: #a17c40;
    font-weight: 800;
}

.np-trade-intro h2 {
    font-size: clamp(45px, 6vw, 78px);
    line-height: .98;
    letter-spacing: -3px;
    font-weight: 800;
    margin: 22px 0 0;
    color: #183b30;
}

.np-trade-intro h2 em {
    font-style: normal;
    color: #b28b4b;
}

.np-trade-description {
    padding-bottom: 8px;
}

.np-trade-description p {
    color: #727970;
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 28px;
}

.np-trade-link {
    color: #183b30;
    text-decoration: none;
    font-size: 10px;
    letter-spacing: 1.5px;
    font-weight: 800;
    border-bottom: 1px solid #b28b4b;
    padding-bottom: 12px;
    display: inline-flex;
    gap: 25px;
}

.np-trade-link span {
    color: #b28b4b;
    font-size: 17px;
}

/* GLOBE BANNER */

.np-trade-banner {
    background:
        radial-gradient(circle at 75% 50%, #376957 0%, transparent 32%),
        linear-gradient(110deg, #112e26, #1c4839);
    min-height: 310px;
    position: relative;
    overflow: hidden;
    padding: 50px;
    display: flex;
    align-items: center;
    color: white;
}

.np-trade-banner-content {
    position: relative;
    z-index: 2;
}

.np-trade-banner-content > span {
    font-size: 10px;
    letter-spacing: 3px;
    color: #d4b579;
    font-weight: 800;
}

.np-trade-banner-content h3 {
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.12;
    margin: 18px 0;
    font-weight: 750;
    color: #fff;
}

.np-trade-banner-content p {
    font-size: 13px;
    color: #d0dcd4;
    max-width: 390px;
    line-height: 1.8;
}

.np-trade-globe {
    position: absolute;
    right: 12%;
    top: 50%;
    transform: translateY(-50%);
    width: 270px;
    height: 270px;
    border: 1px solid rgba(220,190,125,.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(218,188,125,.8);
}

.np-trade-globe > i {
    font-size: 160px;
}

.np-orbit {
    position: absolute;
    border: 1px solid rgba(218,188,125,.35);
    border-radius: 50%;
    inset: 25px -30px;
    transform: rotate(-35deg);
}

.orbit-two {
    inset: -30px 40px;
    transform: rotate(40deg);
}

.np-trade-banner-bottom {
    position: absolute;
    left: 50px;
    right: 50px;
    bottom: 22px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.2);
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    letter-spacing: 2px;
    color: #d0b47e;
}

/* PROCESS HEADING */

.np-trade-process-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    padding: 85px 0 35px;
}

.np-trade-process-heading h3 {
    font-size: clamp(27px, 3.5vw, 43px);
    line-height: 1.1;
    margin: 17px 0 0;
    color: #183b30;
    font-weight: 800;
}

.np-trade-process-heading h3 em {
    color: #b28b4b;
    font-style: normal;
}

.np-trade-process-heading > p {
    max-width: 330px;
    font-size: 13px;
    line-height: 1.8;
    color: #747b73;
    margin: 0;
}

/* FOUR STEPS */

.np-trade-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #cbd0c7;
    border-bottom: 1px solid #cbd0c7;
}

.np-trade-step {
    padding: 35px 25px 40px;
    border-right: 1px solid #cbd0c7;
    position: relative;
    transition: .3s;
}

.np-trade-step:first-child {
    border-left: 1px solid #cbd0c7;
}

.np-trade-step:hover {
    background: #fff;
}

.np-step-no {
    color: #b28b4b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.np-step-icon {
    margin: 35px 0 25px;
    width: 53px;
    height: 53px;
    background: #e5e9df;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #1c4939;
    font-size: 20px;
}

.np-trade-step h4 {
    font-size: 24px;
    color: #183b30;
    margin: 0 0 8px;
    font-weight: 800;
}

.np-step-caption {
    color: #a17c40;
    font-size: 9px;
    letter-spacing: 1.5px;
    font-weight: 800;
}

.np-trade-step p {
    color: #747b73;
    font-size: 12px;
    line-height: 1.9;
    margin-top: 20px;
}

/* BOTTOM CTA */

.np-trade-footer {
    margin-top: 60px;
    padding: 30px 0;
    border-top: 1px solid #cbd0c7;
    border-bottom: 1px solid #cbd0c7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}

.np-trade-footer div > span {
    color: #a17c40;
    font-size: 9px;
    letter-spacing: 2px;
    font-weight: 800;
}

.np-trade-footer h3 {
    color: #183b30;
    font-size: 22px;
    margin: 12px 0 0;
}

.np-trade-footer > a {
    background: #183b30;
    color: white;
    text-decoration: none;
    padding: 17px 25px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: .3s;
}

.np-trade-footer > a:hover {
    background: #b28b4b;
}

.np-trade-footer > a span {
    margin-left: 15px;
}

/* RESPONSIVE */

@media(max-width: 900px) {
    .np-trade-intro {
        grid-template-columns: 1fr 1fr;
    }

    .np-trade-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .np-trade-step:nth-child(3) {
        border-left: 1px solid #cbd0c7;
    }

    .np-trade-step:nth-child(n+3) {
        border-top: 1px solid #cbd0c7;
    }

    .np-trade-globe {
        right: 5%;
        opacity: .6;
    }
}

@media(max-width: 600px) {
    .np-trade-section {
        padding: 65px 0;
    }

    .np-trade-wrap {
        width: 91%;
    }

    .np-trade-top {
        font-size: 8px;
        gap: 15px;
    }

    .np-trade-intro {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 55px 0;
    }

    .np-trade-intro h2 {
        font-size: 49px;
        letter-spacing: -2px;
    }

    .np-trade-banner {
        min-height: 350px;
        padding: 30px 24px;
        align-items: flex-start;
    }

    .np-trade-banner-content h3 {
        font-size: 34px;
    }

    .np-trade-globe {
        width: 160px;
        height: 160px;
        right: -15px;
        top: 65%;
        opacity: .25;
    }

    .np-trade-globe > i {
        font-size: 90px;
    }

    .np-trade-banner-bottom {
        left: 24px;
        right: 24px;
        font-size: 7px;
    }

    .np-trade-process-heading {
        display: block;
        padding: 65px 0 30px;
    }

    .np-trade-process-heading > p {
        margin-top: 18px;
    }

    .np-trade-steps {
        grid-template-columns: 1fr 1fr;
    }

    .np-trade-step {
        padding: 25px 15px;
    }

    .np-trade-step h4 {
        font-size: 20px;
    }

    .np-trade-step p {
        font-size: 11px;
    }

    .np-trade-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .np-trade-footer h3 {
        font-size: 20px;
    }
}