*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{font-family:Arial,sans-serif;color:#12345a;line-height:1.6;background:#fff}

a{text-decoration:none;color:inherit}

button,input,textarea,select{font-family:inherit}

/* HEADER */

header{background:#FFFF;border-bottom:1px solid #eee;position:sticky;top:0;z-index:100}

.navbar{max-width:1250px;margin:auto;padding:17px 25px;display:flex;align-items:center}

.logo{display:flex;align-items:center;gap:10px;font-size:22px;white-space:nowrap}

.logo img{width:55px;height:40px;object-fit:contain}

.nav-links{display:flex;gap:30px;list-style:none;margin:auto;font-size:14px}

.nav-links a{transition:.2s ease}

.nav-links a:hover{color:#1684d8}

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

/* LANGUAGE */

.language{position:relative}

#languageBtn{background:none;border:0;cursor:pointer;font-size:14px;font-weight:bold;color:#12345a;padding:8px}

#languageBtn:hover{color:#1684d8}

.language-menu{display:none;position:absolute;right:0;top:42px;min-width:150px;background:#fff;border:1px solid #e1e8ed;border-radius:8px;box-shadow:0 8px 25px rgba(0,0,0,.1);overflow:hidden}

.language-menu.show{display:block}

.language-menu button{width:100%;padding:12px 15px;border:0;background:#fff;color:#12345a;text-align:left;cursor:pointer;font-size:13px}

.language-menu button:hover{background:#f5f9fc}

/* BUTTONS */

.nav-button,.button{display:inline-block;background:#102d4b;color:#fff;padding:13px 22px;border-radius:8px;font-size:13px;font-weight:bold;border:none;transition:.2s ease}

.button:hover,.nav-button:hover{background:#1684d8}

.outline{background:#fff;color:#102d4b;border:1px solid #dce3e8}

.outline:hover{background:#102d4b;color:#fff}

/* HERO */

.hero{max-width:1250px;min-height:540px;margin:auto;background:#f7fafc;display:grid;grid-template-columns:56% 44%;overflow:hidden;position:relative}

.hero-text{padding:90px 45px 90px 55px;align-self:center;position:relative;z-index:2}

.hero-text small{display:inline-block;font-size:12px;font-weight:bold;letter-spacing:.8px}

h1{font-size:54px;line-height:1.05;margin:15px 0 25px}

h1 span{display:block}

h1 span:last-child{color:#1684d8}

.hero-text p{color:#617589;max-width:560px;font-size:15px;margin-bottom:28px}

.buttons{display:flex;gap:12px}

/* ========================================
   PACK & DASH — HERO FULFILMENT VISUAL
======================================== */

.fulfilment-visual {
    position: relative;
    width: 100%;
    max-width: 650px;
    height: 560px;
    margin: 0 auto;
    overflow: hidden;
}

/* Background circles */

.visual-circle {
    position: absolute;
    border: 1px solid rgba(30, 100, 160, 0.10);
    border-radius: 50%;
}

.circle-one {
    width: 470px;
    height: 470px;
    right: -80px;
    top: 40px;
}

.circle-two {
    width: 300px;
    height: 300px;
    right: 5px;
    top: 125px;
}


/* Connection line */

.flow-line {
    position: absolute;
    width: 430px;
    height: 300px;
    right: 45px;
    top: 110px;
    border: 1px dashed rgba(35, 125, 195, 0.25);
    border-left: none;
    border-radius: 50%;
    transform: rotate(-8deg);
}


/* ========================================
   SMALL PROCESS CARDS
======================================== */

.flow-card {
    position: absolute;
    width: 185px;
    min-height: 105px;
    padding: 17px 18px;
    background: rgb(255, 255, 255);
    border: 1px solid #e4e9ee;
    border-radius: 14px;

    box-shadow:
        0 10px 30px rgba(20, 55, 85, 0.07);

    z-index: 3;
    transition: transform 0.25s ease;
}

.flow-card:hover {
    transform: translateY(-5px);
}

.card-number {
    font-size: 11px;
    font-weight: 700;
    color: #2684c6;
    margin-bottom: 7px;
}

.card-icon {
    position: absolute;
    right: 17px;
    top: 17px;

    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: #f1f7fc;
    color: #1677b8;

    font-size: 16px;
    font-weight: 700;
}

.flow-card h3 {
    margin: 0 0 5px;
    color: #153957;
    font-size: 17px;
    font-weight: 700;
}

.flow-card p {
    margin: 0;
    color: #718394;
    font-size: 12px;
}


/* Card positions */

.card-receive {
    left: 15px;
    top: 65px;
}

.card-store {
    right: 15px;
    top: 40px;
}

.card-pick {
    left: 25px;
    bottom: 70px;
}

.card-pack {
    right: 10px;
    bottom: 75px;
}

.card-dispatch {
    right: 170px;
    bottom: 10px;
}


/* ========================================
   CENTRAL ORDER CARD
======================================== */

.order-card {
    position: absolute;

    width: 245px;
    padding: 22px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    background: rgb(255, 255, 255);

    border: 1px solid #e0e7ed;
    border-radius: 18px;

    box-shadow:
        0 20px 50px rgba(20, 55, 85, 0.13);

    z-index: 5;
}


/* Order header */

.order-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;

    color: #5c7183;
}

.order-status {
    padding: 5px 8px;

    border-radius: 20px;

    background: #edf7f1;
    color: #319060;

    font-size: 9px;
}


/* Divider */

.order-divider {
    height: 1px;
    background: #edf0f3;

    margin: 17px 0;
}


/* Product items */

.order-item {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 13px;
}

.product-box {
    width: 35px;
    height: 35px;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #edf5fa,
            #dceaf3
        );

    border: 1px solid #d3e1ea;

    position: relative;
}

.product-box::after {
    content: "";
    position: absolute;

    width: 13px;
    height: 1px;

    background: #4b89ad;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

.small-box {
    width: 30px;
    height: 30px;
}

.order-item strong {
    display: block;

    color: #193b59;

    font-size: 12px;
}

.order-item small {
    display: block;

    color: #82919e;

    font-size: 10px;

    margin-top: 2px;
}


/* Checked */

.order-check {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: 16px;

    font-size: 10px;
    font-weight: 600;

    color: #537080;
}

.order-check span {
    width: 19px;
    height: 19px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #edf7f1;
    color: #319060;

    font-size: 11px;
}


/* Footer */

.order-footer {
    margin-top: 17px;
    padding-top: 13px;

    border-top: 1px solid #edf0f3;

    text-align: center;

    color: #237db9;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.8px;
}


/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 900px) {

    .fulfilment-visual {
        height: 500px;
        transform: scale(0.9);
        transform-origin: center;
    }

}

@media (max-width: 600px) {

    .fulfilment-visual {
        height: 430px;
        transform: scale(0.78);
        transform-origin: top center;
        margin-bottom: -60px;
    }

}

/* =========================
   TRUST
========================= */

.trust{
    max-width:1100px;
    margin:0 auto;
    padding:30px 25px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:15px;
}

.trust-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:14px 8px;
}

.trust-icon{
    width:32px;
    height:32px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef6fc;
    border-radius:8px;
    font-size:15px;
}

.trust-item b{
    display:block;
    color:#12345a;
    font-size:12px;
    margin-bottom:3px;
}

.trust-item span{
    display:block;
    color:#7a8997;
    font-size:10px;
    line-height:1.4;
}


/* TABLET */

@media(max-width:1000px){

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

}


/* MOBILE */

@media(max-width:600px){

    .trust{
        grid-template-columns:1fr;
        padding:20px;
    }

}

/* TRUST */

.trust{max-width:1250px;margin:auto;display:grid;grid-template-columns:repeat(5,1fr);padding:25px;border-bottom:1px solid #eee}

.trust div{padding:5px 20px;border-right:1px solid #ddd}

.trust div:last-child{border:0}

.trust b,.trust span{display:block}

.trust b{font-size:14px}

.trust span{font-size:11px;color:#738394}

/* GENERAL */

section{padding:90px 25px}

.section-title{max-width:600px;margin-bottom:45px}

.section-title h2{font-size:38px;line-height:1.15;margin:10px 0}

.section-title p{color:#687b8e;font-size:14px}

.center{text-align:center;margin-left:auto;margin-right:auto}

/* PROCESS */

.process{max-width:1250px;margin:auto}

.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}

.card{border:1px solid #e1e8ed;border-radius:12px;background:#fff;padding:25px;transition:.2s ease}

.card:hover{transform:translateY(-4px);box-shadow:0 10px 25px rgba(16,45,75,.08)}

.process .card{text-align:center}

.process-icon{width:54px;height:54px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;background:#e8f4fc;border-radius:12px;color:#1677b8;font-size:25px;line-height:1;gap:2px}

.process .card h3{font-size:17px;margin-top:0}

.card p{color:#687b8e;font-size:12px;margin-top:8px}

/* SERVICES */

.services{background:#f7fafc;padding:90px 25px 100px}

.services-title{max-width:850px;margin:0 auto 48px;text-align:center}

.services-title small{display:inline-block;color:#12345a;font-size:13px;font-weight:bold;letter-spacing:1px;position:relative;padding-bottom:14px}

.services-title small:after{content:"";position:absolute;width:55px;height:2px;background:#1684d8;bottom:0;left:50%;transform:translateX(-50%)}

.services-title h2{color:#102d4b;font-size:44px;line-height:1.1;margin:20px 0 18px}

.services-title p{color:#687b8e;max-width:760px;margin:auto;font-size:15px;line-height:1.6}

.service-process{max-width:1100px;margin:auto;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:auto auto;gap:28px;align-items:stretch}

.service-step{
min-width:0;
display:grid;
grid-template-columns:55% 45%;
background:#fff;
border:1px solid #dce6ed;
border-radius:12px;
overflow:hidden;
box-shadow:0 5px 20px rgba(16,45,75,.04);
transition:.25s ease
}

.service-step:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(16,45,75,.1)}

/* SERVICE PHOTOS */

.service-image{
width:100%;
height:100%;
min-height:0;
overflow:hidden;
background:none;
display:block
}

.service-image img{
width:100%;
height:100%;
display:block;
object-fit:initial
}

.service-info{padding:23px 20px;display:flex;flex-direction:column;justify-content:center}

.service-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#edf6fc;border-radius:9px;color:#12345a;font-size:20px;margin-bottom:13px}

.service-number{color:#1684d8;font-size:11px;font-weight:bold;letter-spacing:.5px;margin-bottom:5px}

.service-info h3{color:#102d4b;font-size:21px;line-height:1.2;margin-bottom:9px}

.service-info p{color:#687b8e;font-size:12.5px;line-height:1.6;margin:0}

.service-one{grid-column:1/span 2;grid-row:1}

.service-two{grid-column:3/span 2;grid-row:1}

.service-three{grid-column:5/span 2;grid-row:1}

.service-four{grid-column:2/span 2;grid-row:2}

.service-five{grid-column:4/span 2;grid-row:2}

/* WHY */

.why{max-width:1250px;margin:auto;padding:95px 65px;background:linear-gradient(135deg,#f5f9fc 0%,#fff 100%);position:relative;overflow:hidden}

.why:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;border:1px solid rgba(22,132,216,.1);right:-170px;top:-130px}

.why:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(22,132,216,.035);left:-100px;bottom:-120px}

.why-content{max-width:1050px;margin:auto;position:relative;z-index:2}

.why-heading{max-width:680px}

.why-heading h2{font-size:48px;line-height:1.08;margin:15px 0 20px}

.why-heading p{color:#687b8e;max-width:600px;font-size:15px}

/* WHY FEATURES - 3 TOP / 2 CENTERED */

.why-features{
    margin-top:55px;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;
}

.why-feature:nth-child(1){
    grid-column:1/span 2;
}

.why-feature:nth-child(2){
    grid-column:3/span 2;
}

.why-feature:nth-child(3){
    grid-column:5/span 2;
}

.why-feature:nth-child(4){
    grid-column:2/span 2;
}

.why-feature:nth-child(5){
    grid-column:4/span 2;
}

.why-feature{
    background:#fff;
    border:1px solid #e1e8ed;
    border-radius:14px;
    padding:28px;
    display:flex;
    gap:18px;
    transition:.2s ease;
}

.why-feature:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(16,45,75,.08);
}

.why-number{
    color:#1684d8;
    font-size:11px;
    font-weight:bold;
    min-width:25px;
    padding-top:3px;
}

.why-feature h3{
    font-size:17px;
    margin-bottom:7px;
}

.why-feature p{
    color:#687b8e;
    font-size:12px;
    line-height:1.6;
}

/* CTA */

.cta{background:#102d4b;color:#fff;text-align:center}

.cta small{color:#65b8ed}

.cta h2{font-size:42px;line-height:1.1;margin:15px 0}

.cta p{color:#b8c7d4;max-width:550px;margin:0 auto 25px}

.light{background:#1684d8}

.light:hover{background:#fff;color:#102d4b}

/* CONTACT */

.contact{max-width:1050px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:70px}

.contact h2{font-size:40px;line-height:1.1;margin:15px 0}

.contact p{color:#687b8e}

#contactForm{display:flex;flex-direction:column;gap:12px}

#contactForm input,#contactForm textarea,#contactForm select{width:100%;padding:14px;border:1px solid #dce3e8;border-radius:7px;outline:none;background:#fff;color:#12345a;font-size:14px}

#contactForm textarea{resize:vertical}

#contactForm input:focus,#contactForm textarea:focus,#contactForm select:focus{border-color:#1684d8}

#contactForm button{cursor:pointer}

/* FOOTER */

/* FOOTER */

footer{
    background:#0c2239;
    color:#fff;
    padding:60px 25px 25px;
}

.footer-content{
    max-width:1100px;
    margin:auto;
}


/* FOOTER TOP */

.footer-top{
    display:grid;
    grid-template-columns:1.3fr 1fr 1.2fr;
    gap:70px;
    align-items:start;
}


/* BRAND */

.footer-brand{
    text-align:left;
}

.footer-logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:22px;
    font-weight:bold;
}

.footer-logo img{
    width:50px;
    height:40px;
    object-fit:contain;
}

.footer-description{
    color:#9fb0c0;
    margin:15px 0 0;
    font-size:13px;
    line-height:1.6;
    max-width:280px;
}


/* FOOTER COLUMNS */

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

.footer-column h3{
    color:#fff;
    font-size:15px;
    margin-bottom:20px;
}

.footer-column a{
    color:#9fb0c0;
    font-size:13px;
    margin-bottom:10px;
    transition:.2s ease;
}

.footer-column a:hover{
    color:#fff;
}


/* GET IN TOUCH */

.footer-contact{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.footer-contact-item strong{
    display:block;
    color:#fff;
    font-size:12px;
    margin-bottom:4px;
}

.footer-contact-item p{
    color:#9fb0c0;
    margin:0;
    font-size:13px;
    line-height:1.5;
}


/* INSTAGRAM */

.footer-instagram{
    width:100%;
    margin-top:22px;
}

.footer-divider{
    width:100%;
    height:1px;
    background:rgba(255,255,255,.12);
    margin-bottom:16px;
}

.footer-instagram a{
    color:#fff;
    font-size:13px;
    font-weight:bold;
    margin:0;
    transition:.2s ease;
}

.footer-instagram a:hover{
    color:#1684d8;
}


/* COPYRIGHT */

.footer-copyright{
    width:100%;
    text-align:center;
    margin-top:45px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.08);
}

footer small{
    color:#71869a;
    font-size:11px;
}


/* TABLET */

@media(max-width:1100px){

    .footer-top{
        grid-template-columns:1fr 1fr;
        gap:45px;
    }

    .footer-brand{
        grid-column:1/span 2;
    }

}


/* MOBILE */

@media(max-width:700px){

    footer{
        padding:45px 20px 25px;
    }

    .footer-top{
        grid-template-columns:1fr;
        gap:35px;
    }

    .footer-brand{
        grid-column:auto;
    }

    .footer-logo{
        font-size:20px;
    }

    .footer-column h3{
        margin-bottom:15px;
    }

    .footer-instagram{
        margin-top:20px;
    }

    .footer-copyright{
        margin-top:35px;
    }

}

/* WHATSAPP */

.whatsapp-button{position:fixed;right:25px;bottom:25px;display:flex;align-items:center;gap:10px;background:#25D366;color:#fff;padding:13px 18px;border-radius:50px;font-size:14px;font-weight:bold;box-shadow:0 5px 20px rgba(0,0,0,.18);z-index:200;transition:.2s ease}

.whatsapp-button:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,.25)}

.whatsapp-icon{width:24px;height:24px;display:block;flex-shrink:0}

/* TABLET */

@media(max-width:1100px){

.navbar{padding-left:20px;padding-right:20px}

.nav-links{gap:18px}

.hero{grid-template-columns:55% 45%}

.hero-text{padding-left:40px;padding-right:30px}

h1{font-size:46px}

.service-process{
grid-template-columns:repeat(2,minmax(0,1fr));
grid-template-rows:auto auto auto;
gap:25px 16px
}

.service-one{grid-column:1;grid-row:1}

.service-two{grid-column:2;grid-row:1}

.service-three{grid-column:1;grid-row:2}

.service-four{grid-column:2;grid-row:2}

.service-five{
grid-column:1/span 2;
grid-row:3;
max-width:600px;
width:100%;
margin:auto
}

.service-step{min-height:0}

.why{padding:70px 35px}

.why-heading h2{font-size:40px}

/* WHY - TABLET */

.why-features{
    grid-template-columns:1fr;
}

.why-feature:nth-child(1),
.why-feature:nth-child(2),
.why-feature:nth-child(3),
.why-feature:nth-child(4),
.why-feature:nth-child(5){
    grid-column:auto;
}

.contact{grid-template-columns:1fr;gap:40px}

.nav-button{display:none}

}

/* MOBILE */

@media(max-width:700px){

.navbar{padding:13px 18px}

.logo{font-size:18px}

.logo img{width:45px;height:35px}

.nav-links{display:none}

.nav-right{margin-left:auto}

.hero{min-height:auto;grid-template-columns:1fr}

.hero-text{padding:55px 20px 45px}

h1{font-size:36px}

.hero-text p{font-size:14px}

.buttons{flex-direction:column}

.button{text-align:center}

.hero-decoration{min-height:330px}

.hero-circle{
width:250px;
height:250px;
top:40px;
right:50%;
transform:translateX(50%)
}

.hero-circle:before{inset:25px}

.hero-circle:after{inset:60px}

.hero-card{width:155px;padding:15px}

.hero-card b{font-size:14px}

.hero-card small{font-size:9px}

.card-one{top:45px;left:5%}

.card-two{top:125px;right:5%}

.card-three{bottom:25px;left:8%}

.trust{grid-template-columns:1fr}

.trust div{
border-right:none;
border-bottom:1px solid #eee;
padding:15px
}

.trust div:last-child{border-bottom:none}

section{padding:65px 20px}

.section-title h2{font-size:32px}

.process-grid{grid-template-columns:1fr}

.services{padding:65px 20px 75px}

.services-title{margin-bottom:35px}

.services-title h2{font-size:32px}

.services-title p{font-size:14px}

.service-process{
display:flex;
flex-direction:column;
gap:16px
}

.service-step{
width:100%;
min-height:0;
grid-template-columns:50% 50%
}

.service-image{
min-height:0;
height:100%;
aspect-ratio:auto
}

.service-image img{
width:100%;
height:100%;
display:block;
object-fit:initial
}

.service-info{padding:18px 15px}

.service-icon{
width:36px;
height:36px;
font-size:17px;
margin-bottom:9px
}

.service-number{font-size:10px}

.service-info h3{font-size:18px;margin-bottom:7px}

.service-info p{font-size:11.5px}

.service-arrow{display:none}

.why{padding:65px 20px}

.why-heading h2{font-size:32px}

.why-features{
    margin-top:40px;
    gap:14px;
}

.why-feature{
    padding:22px;
}

.cta h2{font-size:32px}

.contact h2{font-size:34px}

footer{padding:40px 18px 25px}

.footer-location{
max-width:100%;
padding:15px 16px
}

.footer-location-text p{font-size:12px}

.whatsapp-button{
right:18px;
bottom:18px;
width:54px;
height:54px;
padding:0;
justify-content:center;
border-radius:50%
}

.whatsapp-button span{display:none}

.whatsapp-icon{width:27px;height:27px}

}

/* =========================================================
   PACK & DASH — REVISED BLUE WEBSITE THEME
   Added to the end so it overrides the existing white theme.
========================================================= */

/* Main page background */
body {
    background: #f4f9fd;
    color: #12345a;
}

/* HEADER — soft blue instead of plain white */
header {
    background: #eaf4fb;
    border-bottom: 1px solid #d6e8f4;
    box-shadow: 0 2px 12px rgba(16, 45, 75, 0.04);
}

.nav-links a,
#languageBtn {
    color: #12345a;
}

.nav-links a:hover,
#languageBtn:hover {
    color: #1684d8;
}

/* Main CTA */
.nav-button {
    background: #1684d8;
    color: #fff;
}

.nav-button:hover {
    background: #102d4b;
}

/* HERO — light blue instead of white */
.hero {
    background: linear-gradient(135deg, #eef7fd 0%, #f8fbfe 65%, #e7f3fb 100%);
}

/* Give the hero visual a little more blue atmosphere */
.visual-circle {
    border-color: rgba(22, 132, 216, 0.16);
}

.flow-line {
    border-color: rgba(22, 132, 216, 0.30);
}

/* TRUST BAR */
.trust {
    background: #eaf4fb;
    border-bottom: 1px solid #d6e8f4;
}

/* PROCESS / HOW IT WORKS */
.process {
    background: #f8fbfe;
}

.card {
    background: #ffffff;
    border-color: #dceaf3;
}

/* SERVICES */
.services {
    background: #eaf4fb;
}

.service-step {
    background: #ffffff;
    border-color: #d6e7f1;
}

/* WHY PACK & DASH */
.why {
    background: linear-gradient(135deg, #eef7fd 0%, #ffffff 100%);
}

/* CTA stays strong and dark */
.cta {
    background: #102d4b;
}

/* CONTACT section */
.contact {
    background: #ffffff;
}

/* FOOTER */
footer {
    background: #0b2945;
}

/* Slightly stronger blue accents throughout */
.card-number,
.service-number,
.why-number {
    color: #1684d8;
}

.service-icon,
.trust-icon,
.card-icon {
    background: #e8f4fc;
    color: #1677b8;
}

/* Mobile header remains clean */
@media (max-width: 700px) {
    header {
        background: #eaf4fb;
    }
}


/* ========================================
   PACK & DASH — JPG ICONS
======================================== */

.card-icon{
    overflow:hidden;
    padding:0;
}

.card-icon img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.trust-icon{
    overflow:hidden;
    padding:0;
}

.trust-icon img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.service-icon{
    overflow:hidden;
    padding:0;
}

.service-icon img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* ========================================
   SELLING PLATFORMS
======================================== */

.platforms{
    max-width:1250px;
    margin:auto;
    background:#f4f9fd;
    padding:90px 25px 100px;
}

.platforms-title{
    max-width:820px;
    margin:0 auto 48px;
    text-align:center;
}

.platforms-title small{
    display:inline-block;
    color:#12345a;
    font-size:13px;
    font-weight:bold;
    letter-spacing:1px;
    position:relative;
    padding-bottom:14px;
}

.platforms-title small:after{
    content:"";
    position:absolute;
    width:55px;
    height:2px;
    background:#1684d8;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
}

.platforms-title h2{
    color:#102d4b;
    font-size:42px;
    line-height:1.12;
    margin:20px 0 18px;
}

.platforms-title p{
    color:#687b8e;
    max-width:700px;
    margin:auto;
    font-size:14px;
}

.platform-grid{
    max-width:1050px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.platform-card{
    display:flex;
    align-items:center;
    gap:20px;
    background:#fff;
    border:1px solid #dce6ed;
    border-radius:16px;
    padding:18px;
    transition:.25s ease;
    box-shadow:0 5px 20px rgba(16,45,75,.04);
}

.platform-card:hover{
    transform:translateY(-5px);
    box-shadow:0 14px 32px rgba(16,45,75,.10);
    border-color:#c9ddea;
}

.platform-card img{
    width:105px;
    height:105px;
    border-radius:12px;
    object-fit:contain;
    flex-shrink:0;
}

.platform-card span{
    display:block;
    color:#1684d8;
    font-size:10px;
    font-weight:bold;
    margin-bottom:7px;
}

.platform-card h3{
    color:#102d4b;
    font-size:18px;
    margin-bottom:6px;
}

.platform-card p{
    color:#687b8e;
    font-size:11px;
    line-height:1.5;
}

@media(max-width:900px){
    .platform-grid{
        grid-template-columns:1fr;
        max-width:650px;
    }
}

@media(max-width:700px){
    .platforms{
        padding:65px 20px 75px;
    }

    .platforms-title h2{
        font-size:32px;
    }

    .platform-card img{
        width:85px;
        height:85px;
    }
}


/* Instagram footer icon */
.footer-instagram a{display:inline-flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;}
.instagram-icon{width:24px;height:24px;display:block;}