@charset "UTF-8";


/* =========================================================
   GLOBAL
========================================================= */

:root{

    --navy:#07111f;
    --navy2:#0b1627;
    --navy3:#111827;

    --red:#e31837;
    --red-dark:#bf1530;

    --white:#ffffff;

    --text:#111827;
    --muted:#667085;

}

html{
    scroll-behavior:smooth;
}

::selection{
    background:var(--red);
    color:#fff;
}

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

body{

    font-family:'Poppins',sans-serif;

    background:#f5f7fa;

    color:var(--text);

    overflow-x:hidden;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
    margin:0;
    padding:0;
}

.container{
    max-width:1320px;
}


/* =========================================================
   NAVBAR
========================================================= */

.custom-navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:999;

    padding:8px 0;

    background:rgba(7,17,31,.80);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.08);

    transition:.35s;

}

.navbar-brand{

    display:flex;

    align-items:center;

    padding:0;
    margin:0;

}

.navbar-brand img{

    width:205px;

    height:66px;

    max-width:205px;
    max-height:66px;

    object-fit:contain;

    display:block;

}

.nav-link{

    color:#e8edf5 !important;

    font-size:14px;

    font-weight:500;

    margin-left:17px;

    position:relative;

    transition:.3s;

}

.nav-link::after{

    content:"";

    position:absolute;

    left:8px;

    bottom:1px;

    width:0;

    height:2px;

    background:var(--red);

    transition:.3s;

}

.nav-link:hover{

    color:#fff !important;

}

.nav-link:hover::after{

    width:calc(100% - 16px);

}

.nav-login-btn{

    color:#fff;

    border:1px solid rgba(255,255,255,.30);

    border-radius:30px;

    padding:9px 22px;

    font-size:13px;

    font-weight:600;

    background:rgba(255,255,255,.07);

}

.nav-login-btn:hover{

    background:#fff;

    color:#111827;

}

.btn-danger{

    background:var(--red);

    border:none;

    border-radius:30px;

    padding:10px 25px;

    font-weight:600;

}

.btn-danger:hover{

    background:var(--red-dark);

}


/* =========================================================
   NAVBAR SCROLLED
========================================================= */

.custom-navbar.scrolled{

    background:rgba(7,17,31,.96);

    box-shadow:0 8px 30px rgba(0,0,0,.16);

    padding:5px 0;

}

.custom-navbar.scrolled .nav-link{

    color:#fff !important;

}

.custom-navbar.scrolled .navbar-brand img{

    height:58px;

}


/* =========================================================
   HERO
   EXISTING truck.png
========================================================= */

.hero{

    position:relative;

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

    background:

        url("../images/truck.png")
        center center/cover no-repeat;

}

.overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            90deg,

            rgba(4,12,25,.94) 0%,

            rgba(4,12,25,.78) 43%,

            rgba(4,12,25,.28) 100%

        );

}

.hero-content{

    position:relative;

    z-index:2;

    max-width:720px;

    padding-top:70px;

    animation:fadeUp .9s ease;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#fff;

    padding:8px 15px;

    border-radius:30px;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.16);

    backdrop-filter:blur(10px);

    font-size:12px;

    margin-bottom:20px;

}

.hero-badge i{

    color:#4ade80;

}

.hero-content h5{

    color:#ff4059;

    letter-spacing:4px;

    font-size:14px;

    margin-bottom:13px;

    font-weight:600;

}

.hero-content h1{

    color:#fff;

    font-size:68px;

    font-weight:800;

    line-height:1.08;

    margin-bottom:22px;

    text-shadow:0 10px 30px rgba(0,0,0,.25);

}

.hero-content h1 span{

    color:#ff3856;

}

.hero-content p{

    color:#dce2eb;

    font-size:17px;

    line-height:1.8;

    max-width:620px;

    margin-bottom:30px;

}

.hero-actions{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.hero-content .btn{

    padding:13px 25px;

    border-radius:10px;

    font-size:14px;

    font-weight:600;

    transition:.3s;

}

.hero-content .btn:hover{

    transform:translateY(-3px);

}

.hero-btn{

    border:none;

}

.hero-btn:hover{

    background:#f0f2f5;

}

.hero-trust{

    margin-top:28px;

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    color:#c5ceda;

    font-size:11px;

}

.hero-trust i{

    color:#4ade80;

    margin-right:4px;

}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* =========================================================
   TRACKING
========================================================= */

.tracking-section{

    position:relative;

    z-index:20;

    margin-top:-70px;

}

.tracking-card{

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    padding:28px 32px;

    border-radius:24px;

    border:1px solid rgba(255,255,255,.80);

    box-shadow:0 25px 60px rgba(15,23,42,.16);

}

.tracking-heading{

    display:flex;

    align-items:center;

    gap:17px;

}

.tracking-icon{

    min-width:58px;

    width:58px;
    height:58px;

    border-radius:17px;

    background:#fff0f2;

    color:var(--red);

    display:flex;

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

    font-size:25px;

}

.mini-label{

    color:var(--red);

    font-size:10px;

    font-weight:700;

    letter-spacing:1.6px;

}

.tracking-card h3{

    font-size:22px;

    font-weight:700;

    margin:3px 0 4px;

}

.tracking-card p{

    color:#6b7280;

    font-size:12px;

    margin:0;

}

.tracking-input-wrapper{

    display:flex;

    align-items:center;

    background:#f8fafc;

    border:1px solid #e4e7ec;

    padding:5px 5px 5px 17px;

    border-radius:13px;

}

.tracking-input-wrapper > i{

    color:#98a2b3;

    font-size:18px;

}

.track-input{

    height:50px;

    border:none;

    background:transparent;

    box-shadow:none !important;

    padding:0 14px;

    font-size:13px;

}

.track-input:focus{

    background:transparent;

}

.track-btn{

    min-width:125px;

    height:46px;

    border-radius:9px;

    font-size:12px;

}


/* =========================================================
   COMMON
========================================================= */

.section-subtitle{

    display:block;

    color:#ff4059;

    font-size:12px;

    font-weight:700;

    letter-spacing:2.5px;

    margin-bottom:10px;

}

.section-heading h2{

    font-size:37px;

    font-weight:700;

    margin-bottom:10px;

}

.section-heading p{

    color:#c7cfda;

    font-size:13px;

}

.floating-card{

    transition:.35s;

}

.floating-card:hover{

    transform:translateY(-5px);

}


/* =========================================================
   HOW IT WORKS
   NEW back4.png
========================================================= */

.how-section{

    position:relative;

    padding:130px 0 100px;

    background:

        linear-gradient(
            rgba(6,15,29,.34),
            rgba(6,15,29,.48)
        ),

        url("../images/back4.png")
        center center/cover no-repeat;

    background-attachment:fixed;

}

.how-card{

    background:rgba(7,17,31,.62);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.17);

    border-radius:27px;

    padding:55px;

    box-shadow:0 30px 70px rgba(0,0,0,.28);

    color:#fff;

}

.timeline{

    position:relative;

    display:flex;

    justify-content:space-between;

    text-align:center;

    margin-top:45px;

}

.line{

    position:absolute;

    top:44px;

    left:10%;

    width:80%;

    height:2px;

    background:rgba(227,24,55,.70);

    z-index:0;

}

.step{

    position:relative;

    z-index:2;

    width:23%;

}

.step-number{

    position:absolute;

    top:-7px;

    right:calc(50% - 53px);

    width:25px;

    height:25px;

    display:flex;

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

    border-radius:50%;

    background:#fff;

    color:#111827;

    font-size:9px;

    font-weight:700;

    z-index:4;

}

.icon{

    width:82px;
    height:82px;

    background:linear-gradient(135deg,#e31837,#ff4863);

    color:#fff;

    border-radius:23px;

    display:flex;

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

    margin:auto;

    font-size:31px;

    transition:.35s;

    box-shadow:0 15px 30px rgba(227,24,55,.28);

}

.step:hover .icon{

    transform:translateY(-5px) scale(1.04);

}

.step h5{

    margin-top:20px;

    font-size:15px;

    font-weight:600;

}

.step p{

    color:#c4ccd7;

    font-size:11px;

}


/* =========================================================
   SERVICES
   EXISTING warehouse.png
========================================================= */

.services{

    position:relative;

    padding:100px 0;

    background:

        linear-gradient(
            rgba(5,14,27,.72),
            rgba(5,14,27,.86)
        ),

        url("../images/warehouse.png")
        center center/cover no-repeat;

}

.services-heading{

    color:#fff;

}

.services h2{

    color:#fff;

    font-size:40px;

    font-weight:700;

}

.services-heading p{

    color:#c5ced9;

    font-size:13px;

}

.service-card{

    height:100%;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.16);

    border-radius:21px;

    padding:30px 25px;

    color:#fff;

    box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.service-card:hover{

    background:rgba(255,255,255,.17);

    box-shadow:0 30px 60px rgba(0,0,0,.24);

}

.service-icon{

    width:58px;

    height:58px;

    border-radius:16px;

    display:flex;

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

    background:rgba(227,24,55,.18);

    border:1px solid rgba(255,67,94,.25);

    margin-bottom:22px;

}

.service-card i{

    color:#ff4059;

    font-size:26px;

    margin:0;

}

.service-card h4{

    color:#fff;

    font-size:17px;

    font-weight:600;

    margin-bottom:10px;

}

.service-card p{

    color:#c7cfda;

    font-size:12px;

    line-height:1.8;

    margin:0;

}


/* =========================================================
   WHY CHOOSE
   NEW back1.png
========================================================= */

.choose-wrapper{

    position:relative;

    padding:100px 0;

    background:

        linear-gradient(
            rgba(6,15,29,.30),
            rgba(6,15,29,.44)
        ),

        url("../images/back1.png")
        center center/cover no-repeat;

    background-attachment:fixed;

}

.choose-card{

    background:rgba(7,17,31,.66);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.17);

    border-radius:27px;

    padding:55px;

    box-shadow:0 30px 70px rgba(0,0,0,.28);

    color:#fff;

}

.choose-card h2{

    color:#fff;

    font-size:38px;

    line-height:1.35;

    font-weight:700;

    margin-bottom:20px;

}

.choose-text{

    color:#c7cfda;

    font-size:13px;

    line-height:1.9;

    margin-bottom:28px;

}

.features-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:11px;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:10px;

    margin:0;

    padding:12px 14px;

    border-radius:12px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.10);

    transition:.3s;

}

.feature-item i{

    font-size:17px;

    color:#4ade80;

}

.feature-item span{

    font-size:11px;

    font-weight:500;

    color:#fff;

}

.feature-item:hover{

    background:rgba(255,255,255,.14);

    transform:translateX(4px);

}

.feature-item:hover i{

    color:#4ade80;

}

.feature-item:hover span{

    color:#fff;

}

.choose-image-wrapper{

    position:relative;

    display:inline-block;

}

.choose-img{

    width:100%;

    max-width:500px;

    border-radius:22px;

    box-shadow:0 25px 60px rgba(0,0,0,.30);

}

.choose-img:hover{

    transform:none;

}

.image-badge{

    position:absolute;

    left:-25px;

    bottom:25px;

    display:flex;

    align-items:center;

    gap:11px;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(15px);

    color:#111827;

    padding:13px 17px;

    border-radius:13px;

    box-shadow:0 15px 35px rgba(0,0,0,.18);

}

.image-badge > i{

    width:38px;
    height:38px;

    border-radius:10px;

    background:#eafbf1;

    color:#22a65a;

    display:flex;

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

    font-size:19px;

}

.image-badge strong{

    display:block;

    font-size:11px;

}

.image-badge small{

    display:block;

    color:#667085;

    font-size:9px;

}


/* =========================================================
   PLATFORM FEATURES
========================================================= */

.stats{

    background:#0b1220;

    padding:90px 0;

}

.stats-heading{

    margin-bottom:40px;

}

.stats-heading h2{

    color:#fff;

    font-size:34px;

    font-weight:700;

}

.stat-box{

    height:100%;

    text-align:left;

    color:#fff;

    padding:25px;

    border-radius:18px;

    background:rgba(255,255,255,.055);

    border:1px solid rgba(255,255,255,.09);

    transition:.3s;

}

.stat-box:hover{

    background:rgba(255,255,255,.09);

    transform:translateY(-4px);

}

.stat-icon{

    width:50px;
    height:50px;

    display:flex;

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

    border-radius:14px;

    background:rgba(227,24,55,.15);

    color:#ff4059;

    font-size:22px;

    margin-bottom:18px;

}

.stat-box h4{

    font-size:15px;

    font-weight:600;

    margin-bottom:8px;

}

.stat-box p{

    color:#9da7b5;

    font-size:11px;

    line-height:1.7;

    margin:0;

}


/* =========================================================
   TESTIMONIAL
========================================================= */

.testimonial{

    padding:100px 0;

    background:#f4f6f9;

}

.testimonial-heading h2{

    font-size:36px;

    font-weight:700;

}

.testimonial-heading p{

    color:#667085;

    font-size:13px;

}

.testimonial-card{

    height:100%;

    background:#fff;

    padding:28px;

    border-radius:19px;

    border:1px solid #edf0f4;

    box-shadow:0 15px 40px rgba(15,23,42,.07);

}

.testimonial-card:hover{

    box-shadow:0 22px 50px rgba(15,23,42,.12);

}

.testimonial-user{

    display:flex;

    align-items:center;

    gap:14px;

}

.testimonial-card img{

    width:60px;
    height:60px;

    border-radius:17px;

    object-fit:cover;

    margin:0;

    border:none;

}

.testimonial-user h4{

    font-size:14px;

    font-weight:600;

    margin:0 0 3px;

}

.testimonial-user small{

    color:#98a2b3;

    font-size:10px;

}

.stars{

    color:#ffc107;

    font-size:15px;

    margin:18px 0 10px;

}

.testimonial-card p{

    color:#667085;

    line-height:1.8;

    font-size:12px;

    margin:0;

}


/* =========================================================
   FAQ
   back4.png
========================================================= */

.faq-wrapper{

    padding:100px 0;

    background:

        linear-gradient(
            rgba(5,14,27,.46),
            rgba(5,14,27,.58)
        ),

        url("../images/back4.png")
        center center/cover no-repeat;

    background-attachment:fixed;

}

.faq-card{

    max-width:1000px;

    margin:auto;

    background:rgba(7,17,31,.68);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    padding:48px;

    border-radius:26px;

    border:1px solid rgba(255,255,255,.16);

    box-shadow:0 30px 70px rgba(0,0,0,.28);

    color:#fff;

}

.faq-card h2{

    font-size:34px;

    font-weight:700;

}

.faq-card > .text-center > p{

    color:#c5ced9;

    font-size:13px;

}

.accordion-item{

    border:none;

    border-radius:13px !important;

    overflow:hidden;

    background:rgba(255,255,255,.09);

    border:1px solid rgba(255,255,255,.11);

    margin-bottom:11px;

    box-shadow:none;

}

.accordion-button{

    font-size:13px;

    font-weight:500;

    padding:18px;

    background:rgba(255,255,255,.08);

    color:#fff;

}

.accordion-button::after{

    filter:brightness(0) invert(1);

}

.accordion-button:not(.collapsed){

    background:var(--red);

    color:#fff;

    box-shadow:none;

}

.accordion-button:focus{

    box-shadow:none;

}

.accordion-body{

    padding:18px;

    color:#d0d6df;

    font-size:12px;

    line-height:1.8;

    background:rgba(0,0,0,.12);

}


/* =========================================================
   FOOTER
========================================================= */

.footer{

    background:#080f1c !important;

    color:#fff;

    padding:60px 0 25px;

}

.footer-logo{

    width:185px;

    height:65px;

    object-fit:contain;

    margin-bottom:12px;

}

.footer h5{

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

.footer p{

    color:#9da7b5;

    line-height:1.8;

    font-size:11px;

}

.footer ul li{

    margin-bottom:11px;

}

.footer a{

    color:#9da7b5;

    font-size:11px;

    transition:.25s;

}

.footer a i{

    color:#e31837;

    font-size:9px;

    margin-right:5px;

}

.footer a:hover{

    color:#fff;

    padding-left:4px;

}

.footer-contact-icon{

    color:#e31837;

    margin-right:7px;

}

.footer-security{

    display:flex;

    gap:8px;

    flex-wrap:wrap;

}

.footer-security span{

    padding:6px 10px;

    border-radius:7px;

    background:rgba(255,255,255,.06);

    color:#9da7b5;

    font-size:9px;

}

.footer-security i{

    color:#4ade80;

}

.footer hr{

    border-color:rgba(255,255,255,.10);

    margin:35px 0 20px;

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    color:#667085;

    font-size:10px;

}


/* =========================================================
   BUTTON EFFECT
========================================================= */

.btn{

    transition:.3s;

    position:relative;

    overflow:hidden;

}

.btn:hover{

    transform:translateY(-2px);

}

.ripple{

    position:absolute;

    border-radius:50%;

    transform:scale(0);

    animation:ripple .6s linear;

    background:rgba(255,255,255,.45);

}

@keyframes ripple{

    to{

        transform:scale(4);

        opacity:0;

    }

}


/* =========================================================
   EXISTING SUCCESS ICON
   PRESERVED
========================================================= */

.success-icon{

    width:90px;

    height:90px;

    background:#28a745;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    color:white;

    font-size:45px;

    animation:
        pop .8s ease-out,
        pulse 2s infinite 1s;

}

@keyframes pop{

    0%{

        transform:scale(0) rotate(-180deg);

        opacity:0;

    }

    70%{

        transform:scale(1.15) rotate(15deg);

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(40,167,69,.6);

    }

    70%{

        box-shadow:0 0 0 20px rgba(40,167,69,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(40,167,69,0);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:991px){

    .custom-navbar{

        background:#07111f;

    }

    .navbar-toggler{

        background:#fff;

        border:none;

    }

    .navbar-collapse{

        padding:20px 0;

    }

    .nav-link{

        margin-left:0;

        padding:10px 0;

    }

    .hero{

        min-height:760px;

    }

    .hero-content h1{

        font-size:52px;

    }

    .tracking-section{

        margin-top:-40px;

    }

    .tracking-heading{

        margin-bottom:10px;

    }

    .how-section,
    .choose-wrapper,
    .faq-wrapper{

        background-attachment:scroll;

    }

    .timeline{

        display:grid;

        grid-template-columns:1fr 1fr;

        gap:35px;

    }

    .line{

        display:none;

    }

    .step{

        width:100%;

    }

    .choose-card{

        padding:35px;

    }

    .choose-card h2{

        font-size:31px;

    }

    .choose-img{

        margin-top:25px;

    }

    .image-badge{

        left:10px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:576px){

    .navbar-brand img{

        width:145px;

        height:50px;

    }

    .hero{

        min-height:700px;

        background-position:center;

    }

    .hero-content{

        text-align:left;

        padding-top:80px;

    }

    .hero-content h1{

        font-size:40px;

    }

    .hero-content p{

        font-size:14px;

    }

    .hero-actions{

        flex-direction:column;

    }

    .hero-content .btn{

        width:100%;

    }

    .hero-trust{

        gap:10px;

    }

    .tracking-section{

        margin-top:-25px;

        padding:0 10px;

    }

    .tracking-card{

        padding:22px 18px;

    }

    .tracking-heading{

        align-items:flex-start;

    }

    .tracking-input-wrapper{

        flex-direction:column;

        background:transparent;

        padding:0;

        border:none;

        gap:8px;

    }

    .tracking-input-wrapper > i{

        display:none;

    }

    .track-input{

        width:100%;

        height:52px;

        border:1px solid #e4e7ec;

        background:#fff;

        border-radius:10px;

    }

    .track-btn{

        width:100%;

    }

    .how-section{

        padding:80px 12px;

    }

    .how-card{

        padding:35px 20px;

    }

    .section-heading h2{

        font-size:28px;

    }

    .timeline{

        grid-template-columns:1fr;

    }

    .services{

        padding:80px 12px;

    }

    .services h2{

        font-size:31px;

    }

    .choose-wrapper{

        padding:80px 12px;

    }

    .choose-card{

        padding:30px 20px;

    }

    .choose-card h2{

        font-size:27px;

    }

    .features-grid{

        grid-template-columns:1fr;

    }

    .image-badge{

        position:relative;

        left:auto;

        bottom:auto;

        margin-top:12px;

        text-align:left;

    }

    .stats{

        padding:70px 12px;

    }

    .stats-heading h2{

        font-size:27px;

    }

    .testimonial{

        padding:80px 12px;

    }

    .testimonial-heading h2{

        font-size:29px;

    }

    .faq-wrapper{

        padding:80px 12px;

    }

    .faq-card{

        padding:30px 18px;

    }

    .faq-card h2{

        font-size:27px;

    }

    .accordion-button{

        font-size:12px;

    }

    .footer{

        padding:50px 12px 25px;

    }

    .footer-bottom{

        flex-direction:column;

        gap:7px;

        text-align:center;

    }

}