/* =================================================================
 *  VFastrr — shared content-page theme
 *  Used by about-us, domestic/global shipping, warehouse, contact,
 *  privacy/refund/terms. Brand: navy #03123b, accent orange #ff5f2a.
 * ================================================================= */

:root{
    --vf-navy:#03123b;
    --vf-navy-2:#0a225e;
    --vf-orange:#ff5f2a;
    --vf-orange-2:#ff8a3d;
    --vf-ink:#5e6164;
    --vf-soft:#f6f7fb;
}

/* ---------- Banner / breadcrumb hero ---------- */
.breadcrumb-option{
    position:relative;
    height:300px;
    padding-top:80px; /* clear the fixed site header */
    background-image:linear-gradient(120deg, rgba(3,18,59,.92) 0%, rgba(3,18,59,.55) 55%, rgba(255,95,42,.45) 100%), url(../img/carousel-1.jpg);
    background-size:cover;
    background-position:center;
    overflow:hidden;
}
.breadcrumb-option:after{ /* subtle bottom fade */
    content:"";position:absolute;left:0;right:0;bottom:0;height:120px;
    background:linear-gradient(to top, rgba(0,0,0,.25), transparent);
}
.breadcrumb__text{ position:relative; z-index:2; }
.breadcrumb__text h2{
    font-size:54px; line-height:1.1; font-weight:800; color:#fff;
    text-transform:uppercase; letter-spacing:1px; margin:0;
    text-shadow:0 6px 24px rgba(0,0,0,.35);
    animation:vfFadeUp .7s ease both;
}
.breadcrumb__text h2:after{
    content:""; display:block; width:70px; height:4px; border-radius:4px;
    margin:18px auto 0; background:linear-gradient(90deg,var(--vf-orange),var(--vf-orange-2));
    animation:vfFadeUp .9s ease both;
}
.breadcrumb__links{
    display:inline-flex; align-items:center; gap:10px;
    padding:12px 30px; border-radius:50px;
    background:rgba(255,255,255,.12); backdrop-filter:blur(4px);
    border:1px solid rgba(255,255,255,.20);
    text-transform:uppercase; letter-spacing:1px;
    animation:vfFadeUp .8s ease both;
}
.breadcrumb__links a,.breadcrumb__links span{ color:#fff !important; font-size:16px; font-weight:600; }
.breadcrumb__links a:hover{ color:var(--vf-orange) !important; }
@media (max-width:767px){
    .breadcrumb-option{ height:240px; }
    .breadcrumb__links{ padding:10px 22px; }
    .breadcrumb__links a,.breadcrumb__links span{ font-size:14px; }
}

/* ---------- Section titles ---------- */
.section-title span{
    display:inline-block; color:var(--vf-orange); font-size:13px; font-weight:700;
    letter-spacing:3px; text-transform:uppercase; margin-bottom:14px;
    padding:6px 16px; border-radius:50px; background:rgba(255,95,42,.10);
}
.section-title h2{
    color:var(--vf-navy); font-weight:800; line-height:1.2; text-transform:uppercase;
    position:relative; display:inline-block;
}
.section-title h2:after{
    content:""; display:block; width:60px; height:4px; border-radius:4px; margin-top:16px;
    background:linear-gradient(90deg,var(--vf-orange),var(--vf-orange-2));
}

/* ---------- Intro paragraphs ---------- */
.svc-intro p,.about-intro p{
    color:var(--vf-ink); line-height:1.95; margin-bottom:18px; font-size:16px;
}

/* ---------- Feature / service cards ---------- */
.svc-card,.about-feature{
    position:relative; background:#fff; border:1px solid #eef0f5; border-radius:16px;
    padding:38px 30px; height:100%; margin-bottom:30px; overflow:hidden;
    box-shadow:0 10px 30px rgba(3,18,59,.05);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    animation:vfFadeUp .6s ease both;
}
.svc-card:before,.about-feature:before{
    content:""; position:absolute; top:0; left:0; width:100%; height:4px;
    background:linear-gradient(90deg,var(--vf-orange),var(--vf-orange-2));
    transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.svc-card:hover,.about-feature:hover{
    transform:translateY(-10px); border-color:transparent;
    box-shadow:0 24px 50px rgba(3,18,59,.13);
}
.svc-card:hover:before,.about-feature:hover:before{ transform:scaleX(1); }

.svc-card i,.about-feature i{
    display:inline-flex; align-items:center; justify-content:center;
    width:66px; height:66px; border-radius:18px; font-size:28px; color:#fff;
    margin-bottom:22px;
    background:linear-gradient(135deg,var(--vf-orange),var(--vf-orange-2));
    box-shadow:0 10px 22px rgba(255,95,42,.35);
    transition:transform .35s ease;
}
.svc-card:hover i,.about-feature:hover i{ transform:rotate(-6deg) scale(1.06); }
.svc-card h5,.about-feature h5{
    color:var(--vf-navy); font-weight:700; text-transform:uppercase;
    font-size:18px; margin-bottom:12px; letter-spacing:.3px;
}
.svc-card p,.about-feature p{ color:var(--vf-ink); margin:0; line-height:1.85; }
.svc-card p a,.about-feature p a{ color:var(--vf-orange); font-weight:600; }

/* stagger the entrance */
.svc-card:nth-child(2),.about-feature:nth-child(2){ animation-delay:.1s; }
.svc-card:nth-child(3),.about-feature:nth-child(3){ animation-delay:.2s; }
.svc-card:nth-child(4),.about-feature:nth-child(4){ animation-delay:.3s; }

/* ---------- Check lists ---------- */
.svc-list{ list-style:none; padding:0; margin:24px 0 0; }
.svc-list li{
    position:relative; padding:16px 16px 16px 60px; margin-bottom:14px;
    color:var(--vf-navy); line-height:1.6; font-weight:500; font-size:15.5px;
    background:var(--vf-soft); border-radius:12px;
    transition:transform .25s ease, box-shadow .25s ease;
}
.svc-list li:hover{ transform:translateX(6px); box-shadow:0 10px 24px rgba(3,18,59,.06); }
.svc-list li i{
    position:absolute; left:16px; top:50%; transform:translateY(-50%);
    width:30px; height:30px; border-radius:50%; color:#fff; font-size:14px;
    display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--vf-orange),var(--vf-orange-2));
}

/* ---------- CTA blocks ---------- */
.svc-cta,.about-cta{
    position:relative; border-radius:20px; padding:60px 40px; text-align:center;
    overflow:hidden;
    background:linear-gradient(120deg,var(--vf-navy) 0%, var(--vf-navy-2) 70%, #142f7a 100%);
    box-shadow:0 24px 60px rgba(3,18,59,.25);
}
.svc-cta:before,.about-cta:before{ /* glow accent */
    content:""; position:absolute; top:-60px; right:-60px; width:240px; height:240px;
    border-radius:50%; background:radial-gradient(circle,rgba(255,95,42,.45),transparent 70%);
}
.svc-cta h3,.about-cta h3{ position:relative; color:#fff; font-weight:800; margin-bottom:14px; }
.svc-cta p,.about-cta p{ position:relative; color:#cfd6e6; margin-bottom:28px; font-size:16px; }
.svc-cta .btn,.about-cta .btn{ position:relative; }

/* ---------- Buttons (CTA + banner) ---------- */
.svc-cta .btn-primary,.about-cta .btn-primary,
.breadcrumb__text .btn-primary{
    background:linear-gradient(135deg,var(--vf-orange),var(--vf-orange-2)) !important;
    border:none !important; color:#fff !important; font-weight:600;
    border-radius:50px; padding:14px 40px !important; letter-spacing:.4px;
    box-shadow:0 12px 26px rgba(255,95,42,.4);
    transition:transform .25s ease, box-shadow .25s ease;
}
.svc-cta .btn-primary:hover,.about-cta .btn-primary:hover{
    transform:translateY(-3px); box-shadow:0 18px 36px rgba(255,95,42,.5); color:#fff !important;
}

/* ---------- Stats strip ---------- */
.vf-stats{ display:flex; flex-wrap:wrap; gap:24px; }
.vf-stat{
    flex:1 1 200px; text-align:center; padding:34px 20px; border-radius:16px;
    background:linear-gradient(135deg,var(--vf-navy),var(--vf-navy-2));
    color:#fff; box-shadow:0 14px 34px rgba(3,18,59,.18);
}
.vf-stat .num{ font-size:40px; font-weight:800; color:#fff; line-height:1; }
.vf-stat .num span{ color:var(--vf-orange); }
.vf-stat p{ margin:10px 0 0; color:#cfd6e6; font-weight:600; letter-spacing:.4px; font-size:14px; text-transform:uppercase; }

/* ---------- How it works steps ---------- */
.vf-step{
    position:relative; background:#fff; border:1px solid #eef0f5; border-radius:16px;
    padding:34px 26px 30px; height:100%; margin-bottom:30px; text-align:center;
    box-shadow:0 10px 30px rgba(3,18,59,.05); transition:transform .35s ease, box-shadow .35s ease;
}
.vf-step:hover{ transform:translateY(-8px); box-shadow:0 22px 46px rgba(3,18,59,.12); }
.vf-step .step-no{
    display:inline-flex; align-items:center; justify-content:center;
    width:54px; height:54px; border-radius:50%; font-size:20px; font-weight:800; color:#fff;
    margin-bottom:18px; background:linear-gradient(135deg,var(--vf-orange),var(--vf-orange-2));
    box-shadow:0 10px 22px rgba(255,95,42,.35);
}
.vf-step h5{ color:var(--vf-navy); font-weight:700; text-transform:uppercase; font-size:17px; margin-bottom:10px; }
.vf-step p{ color:var(--vf-ink); margin:0; line-height:1.8; }

/* ---------- FAQ ---------- */
.vf-faq{ max-width:880px; margin:0 auto; }
.vf-faq__item{
    background:#fff; border:1px solid #eef0f5; border-radius:14px;
    padding:24px 28px; margin-bottom:18px; box-shadow:0 8px 22px rgba(3,18,59,.04);
    transition:box-shadow .3s ease;
}
.vf-faq__item:hover{ box-shadow:0 14px 32px rgba(3,18,59,.08); }
.vf-faq__item h3{
    position:relative; color:var(--vf-navy); font-weight:700; font-size:18px;
    margin:0 0 12px; padding-left:34px;
}
.vf-faq__item h3:before{
    content:"\f059"; font-family:FontAwesome; position:absolute; left:0; top:0;
    color:var(--vf-orange); font-size:20px;
}
.vf-faq__item p{ color:var(--vf-ink); margin:0; line-height:1.85; }

/* ---------- Contact page ---------- */
.contact__text p{ color:var(--vf-ink); line-height:1.9; }
.contact__text ul{ list-style:none; padding:0; margin:26px 0 0; }
.contact__text ul li{ display:flex; align-items:flex-start; gap:18px; margin-bottom:24px; }
.contact__widget__icon{
    flex:0 0 auto; width:56px; height:56px; border-radius:14px; color:#fff; font-size:22px;
    display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--vf-orange),var(--vf-orange-2));
    box-shadow:0 10px 22px rgba(255,95,42,.3);
}
.contact__widget__text h5{ color:var(--vf-navy); font-weight:700; text-transform:uppercase; font-size:15px; margin:4px 0 6px; }
.contact__widget__text p{ margin:0; }
.contact__widget__text a{ color:var(--vf-ink); }
.contact__widget__text a:hover{ color:var(--vf-orange); }

/* ---------- Legal / policy content ---------- */
.services .container p,
.services .container li{ color:var(--vf-ink); line-height:1.9; }
.services .container h3,
.services .container h4{ color:var(--vf-navy); font-weight:700; margin-top:26px; }

/* ---------- Animation ---------- */
@keyframes vfFadeUp{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:none;} }
@media (prefers-reduced-motion:reduce){
    .breadcrumb__text h2,.breadcrumb__text h2:after,.breadcrumb__links,
    .svc-card,.about-feature{ animation:none !important; }
}

/* =================================================================
 *  Homepage (index.php — post-42250) — logistics redesign
 *  All Divi-targeting rules are scoped to #post-42250 so other
 *  pages are untouched.
 * ================================================================= */

/* ----- Hero banner ----- */
#post-42250 #banner.backgroung_banner{ position:relative; }
#post-42250 #banner.backgroung_banner:before{
    content:""; position:absolute; inset:0; z-index:0;
    background:linear-gradient(120deg, rgba(3,18,59,.93) 0%, rgba(3,18,59,.72) 45%, rgba(255,95,42,.55) 100%);
}
#post-42250 #banner .et_pb_row{ position:relative; z-index:1; }
#post-42250 #banner .et_pb_text_0 h1{
    font-size:46px !important; line-height:1.15 !important; font-weight:800 !important;
    letter-spacing:.3px; margin-bottom:6px !important;
    text-shadow:0 6px 24px rgba(0,0,0,.35); animation:vfFadeUp .7s ease both;
}
#post-42250 #banner .et_pb_text_1 p{
    font-size:20px !important; color:#e7ecf7 !important; font-weight:500 !important;
    animation:vfFadeUp .9s ease both;
}
/* hero CTA cluster */
#post-42250 #banner .et_pb_row_1{ text-align:center; padding-top:6px; }
#post-42250 #banner .et_pb_image_0{ margin-bottom:0 !important; }
#post-42250 #banner .et_pb_image_0 .et_pb_image_wrap{
    display:inline-flex; align-items:center; justify-content:center;
    width:74px; height:74px; border-radius:50%; padding:16px;
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.30);
    backdrop-filter:blur(4px);
}
#post-42250 #banner .et_pb_text_2 .et_pb_text_inner{
    color:#fff !important; font-weight:700; text-transform:uppercase;
    letter-spacing:2px; font-size:15px; margin-top:14px;
}

/* ----- Buttons (page-wide on homepage) ----- */
#post-42250 .et_pb_button{
    background-image:linear-gradient(135deg,var(--vf-orange),var(--vf-orange-2)) !important;
    background-color:transparent !important; border:none !important; color:#fff !important;
    font-weight:600 !important; border-radius:50px !important; padding:14px 38px !important;
    letter-spacing:.4px; box-shadow:0 12px 26px rgba(255,95,42,.40);
    transition:transform .25s ease, box-shadow .25s ease;
}
#post-42250 .et_pb_button:hover{
    transform:translateY(-3px); box-shadow:0 18px 38px rgba(255,95,42,.55);
    color:#fff !important; padding:14px 38px !important;
}
#post-42250 .et_pb_button:after{ display:none !important; }

/* ----- Stat counters ----- */
#post-42250 #cleintslogos{ margin-top:12px; }
#post-42250 #cleintslogos .et_pb_column{
    background:linear-gradient(135deg,var(--vf-navy),var(--vf-navy-2));
    border-radius:16px; padding:30px 18px !important; margin-bottom:20px; border:none !important;
    box-shadow:0 14px 34px rgba(3,18,59,.18);
    transition:transform .3s ease, box-shadow .3s ease;
}
#post-42250 #cleintslogos .et_pb_column:hover{ transform:translateY(-6px); box-shadow:0 22px 46px rgba(3,18,59,.28); }
#post-42250 #cleintslogos .percent p{ font-size:40px !important; font-weight:800 !important; color:#fff !important; line-height:1; margin:0; }
#post-42250 #cleintslogos .percent-value,#post-42250 #cleintslogos .percent-sign{ color:#fff !important; }
#post-42250 #cleintslogos .percent-sign{ color:var(--vf-orange) !important; }
#post-42250 #cleintslogos h3.title{
    color:#cfd6e6 !important; font-size:14px !important; font-weight:600;
    text-transform:uppercase; letter-spacing:.5px; margin-top:10px;
}

/* ----- Section titles (Our Key Products / Best Integrations) ----- */
#post-42250 .et_pb_text_14 .et_pb_text_inner,
#post-42250 .et_pb_text_21 .et_pb_text_inner{ text-align:center; }
#post-42250 .et_pb_text_14 h3,#post-42250 .et_pb_text_21 h3{ position:relative; display:inline-block; }
#post-42250 .et_pb_text_14 h3:after,#post-42250 .et_pb_text_21 h3:after{
    content:""; display:block; width:64px; height:4px; border-radius:4px; margin:14px auto 0;
    background:linear-gradient(90deg,var(--vf-orange),var(--vf-orange-2));
}

/* ----- Key product (Domestic) card ----- */
#post-42250 #keyimagwithtext .keyimages img{
    border-radius:16px !important; width:100%; height:auto;
    box-shadow:0 18px 40px rgba(3,18,59,.14);
}
#post-42250 #keyimagwithtext .et_pb_text_15 h4{
    color:var(--vf-navy) !important; font-weight:800; text-transform:uppercase;
    font-size:24px; margin-top:22px;
}
#post-42250 #keyimagwithtext .et_pb_text_15 h4:after{
    content:""; display:block; width:60px; height:4px; border-radius:4px; margin-top:12px;
    background:linear-gradient(90deg,var(--vf-orange),var(--vf-orange-2));
}
#post-42250 #keyimagwithtext .lstkey{ list-style:none !important; padding-left:0 !important; }
#post-42250 #keyimagwithtext .lstkey li{
    position:relative; padding:11px 12px 11px 40px !important; margin-bottom:10px;
    color:var(--vf-navy); background:var(--vf-soft); border-radius:10px; line-height:1.5; font-weight:500;
}
#post-42250 #keyimagwithtext .lstkey li:before{
    content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900;
    position:absolute; left:13px; top:11px; color:var(--vf-orange);
}

/* ----- "Why VFastrr" feature strip ----- */
.vf-home-features{ padding:72px 0 54px; background:var(--vf-soft); }
.vf-fwrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
.vf-fhead{ text-align:center; max-width:760px; margin:0 auto 46px; }
.vf-fhead span{
    display:inline-block; color:var(--vf-orange); font-size:13px; font-weight:700;
    letter-spacing:3px; text-transform:uppercase; margin-bottom:14px;
    padding:6px 16px; border-radius:50px; background:rgba(255,95,42,.10);
}
.vf-fhead h2{ color:var(--vf-navy); font-weight:800; font-size:34px; line-height:1.2; margin:0 0 14px; text-transform:uppercase; }
.vf-fhead p{ color:var(--vf-ink); font-size:16px; line-height:1.8; margin:0; }
.vf-fgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.vf-fcard{
    background:#fff; border:1px solid #eef0f5; border-radius:16px; padding:36px 26px; text-align:center;
    box-shadow:0 10px 30px rgba(3,18,59,.05); animation:vfFadeUp .6s ease both;
    transition:transform .35s ease, box-shadow .35s ease;
}
.vf-fcard:hover{ transform:translateY(-10px); box-shadow:0 24px 50px rgba(3,18,59,.13); }
.vf-fcard i{
    display:inline-flex; align-items:center; justify-content:center;
    width:68px; height:68px; border-radius:18px; font-size:28px; color:#fff; margin-bottom:22px;
    background:linear-gradient(135deg,var(--vf-orange),var(--vf-orange-2));
    box-shadow:0 10px 22px rgba(255,95,42,.35); transition:transform .35s ease;
}
.vf-fcard:hover i{ transform:rotate(-6deg) scale(1.06); }
.vf-fcard h5{ color:var(--vf-navy); font-weight:700; text-transform:uppercase; font-size:16px; margin:0 0 10px; }
.vf-fcard p{ color:var(--vf-ink); margin:0; line-height:1.75; font-size:14.5px; }
.vf-fcard:nth-child(2){ animation-delay:.08s; }
.vf-fcard:nth-child(3){ animation-delay:.16s; }
.vf-fcard:nth-child(4){ animation-delay:.24s; }
@media (max-width:980px){ .vf-fgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .vf-fgrid{ grid-template-columns:1fr; } .vf-fhead h2{ font-size:26px; } }

/* ----- Homepage responsive ----- */
@media (max-width:767px){
    #post-42250 #banner .et_pb_text_0 h1{ font-size:30px !important; }
    #post-42250 #banner .et_pb_text_1 p{ font-size:16px !important; }
    #post-42250 #cleintslogos .et_pb_column{ padding:24px 14px !important; }
    #post-42250 #cleintslogos .percent p{ font-size:32px !important; }
}
@media (prefers-reduced-motion:reduce){
    #post-42250 #banner .et_pb_text_0 h1,#post-42250 #banner .et_pb_text_1 p,
    .vf-fcard,.vf-step{ animation:none !important; }
}

/* ----- Hero trust chips ----- */
#post-42250 .vf-hero-chips{
    display:flex; flex-wrap:wrap; gap:12px 14px; justify-content:center;
    max-width:680px; margin:24px auto 0; animation:vfFadeUp 1s ease both;
}
#post-42250 .vf-hero-chips span{
    display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:50px;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
    color:#fff; font-size:14px; font-weight:600; backdrop-filter:blur(4px);
}
#post-42250 .vf-hero-chips i{ color:var(--vf-orange-2); }

/* ----- How It Works ----- */
.vf-home-steps{ padding:74px 0 60px; background:#fff; }
.vf-sgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.vf-sgrid .vf-step{ animation:vfFadeUp .6s ease both; }
.vf-sgrid .vf-step:nth-child(2){ animation-delay:.1s; }
.vf-sgrid .vf-step:nth-child(3){ animation-delay:.2s; }
@media (max-width:860px){ .vf-sgrid{ grid-template-columns:1fr; } }

/* ----- Closing CTA band ----- */
.vf-home-cta{ padding:8px 0 78px; background:var(--vf-soft); }
.vf-home-cta .vf-fwrap{ max-width:1060px; }
.vf-home-cta .svc-cta .btn-primary{ display:inline-block; text-decoration:none; }

/* =================================================================
 *  Homepage fixes — hero card, counters, key products, integrations
 * ================================================================= */

/* Hero: kill the leftover white service-card box, sit CTA on the image */
#post-42250 #banner .et_pb_column_1{
    background-color:transparent !important; height:auto !important;
    border-radius:0 !important; padding:4px 0 0 !important;
}
#post-42250 #banner .et_pb_row_1{ margin-bottom:8px !important; }

/* Counters: always visible (numbers no longer depend on JS) */
#post-42250 #cleintslogos .et_pb_module,
#post-42250 #cleintslogos .percent,
#post-42250 #cleintslogos .title{ opacity:1 !important; visibility:visible !important; }
#post-42250 #cleintslogos .et_pb_number_counter .percent{ display:block !important; }

/* Key Products: two columns — text left, image right, vertically centered */
#post-42250 #keyimagwithtext{ display:flex !important; flex-wrap:wrap; align-items:center; }
#post-42250 #keyimagwithtext > .et_pb_column{ float:none !important; margin-top:0 !important; }
#post-42250 #keyimagwithtext .et_pb_text_16 .et_pb_text_inner > p{ color:var(--vf-ink); line-height:1.8; }
@media (max-width:980px){
    #post-42250 #keyimagwithtext{ flex-direction:column; }
    #post-42250 #keyimagwithtext > .et_pb_column{ width:100% !important; }
}

/* Integrations: turn the broken/stacked carousel into a clean centered logo wall */
#post-42250 #bestintegration .swiper-wrapper{
    display:flex !important; flex-wrap:wrap !important; justify-content:center; align-items:center;
    gap:26px 50px; transform:none !important; width:100% !important;
}
#post-42250 #bestintegration .swiper-slide{
    width:auto !important; flex:0 0 auto; margin:0 !important; height:auto !important;
}
#post-42250 #bestintegration .swiper-slide-duplicate{ display:none !important; }
#post-42250 #bestintegration .wpcp-slide-image img{ filter:grayscale(100%); opacity:.75; transition:filter .3s ease, opacity .3s ease; }
#post-42250 #bestintegration .wpcp-slide-image img:hover{ filter:none; opacity:1; }
#post-42250 #bestintegration .wpcp-carousel-preloader,
#post-42250 #bestintegration .swiper-button-next,
#post-42250 #bestintegration .swiper-button-prev{ display:none !important; }