/*
==================================================
Homepage
==================================================
*/

.hp-hero{

    background:#173B6D;

    overflow:hidden;

    padding:80px 0;

}

.hp-grid{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:70px;

}

.hp-left{

    flex:1;

}

.hp-right{

    flex:1;

    display:flex;

    justify-content:flex-end;

}

.hp-truck{

    width:100%;

    max-width:650px;

    display:block;

}

.hp-badge{

    display:inline-block;

    color:#fff;

    opacity:.8;

    font-size:18px;

    margin-bottom:20px;

}

.hp-title{

    color:#fff;

    font-size:58px;

    line-height:1.3;

    margin-bottom:30px;

}

.hp-text{

    color:#d9e3f0;

    font-size:18px;

    line-height:2;

    margin-bottom:40px;

}

.hp-buttons{

    display:flex;

    gap:20px;

}

.hp-btn{

    padding:16px 36px;

    text-decoration:none;

    border-radius:8px;

    transition:.3s;

}

.hp-btn-primary{

    background:#D71920;

    color:#fff;

}

.hp-btn-outline{

    border:2px solid #fff;

    color:#fff;

}

.hp-btn:hover{

    transform:translateY(-4px);

}




/* ==================================================
BACKGROUND LIGHT
==================================================*/

.hp-hero::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    left:-250px;
    top:-200px;

    border-radius:50%;

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

    filter:blur(90px);

}

.hp-hero::after{

    content:"";

    position:absolute;

    width:900px;
    height:900px;

    right:-350px;
    bottom:-350px;

    border-radius:50%;

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

    filter:blur(120px);

}

/* ==================================================
TYPOGRAPHY
==================================================*/

.hp-title{

    font-size:68px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:25px;

}

.hp-text{

    max-width:650px;

    opacity:.9;

}

/* ==================================================
BUTTONS
==================================================*/

.hp-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:190px;

    height:58px;

    font-size:16px;

    font-weight:700;

    transition:.35s;

}

.hp-btn-primary{

    background:#D71920;

    box-shadow:

        0 12px 30px rgba(215,25,32,.35);

}

.hp-btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:

        0 18px 40px rgba(215,25,32,.45);

}

.hp-btn-outline{

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

    backdrop-filter:blur(12px);

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

}

.hp-btn-outline:hover{

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

    transform:translateY(-6px);

}

/* ==================================================
TRUCK
==================================================*/

.hp-right{

    position:relative;

}

.hp-truck{

    max-width:760px;

    width:120%;

    margin-right:-80px;

    animation:truckFloat 5s ease-in-out infinite;

    filter:

        drop-shadow(0 30px 40px rgba(0,0,0,.35));

}

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

@keyframes truckFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}

.hp-left{

    animation:fadeLeft 1s ease;

}

.hp-right{

    animation:fadeRight 1.2s ease;

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/* ==================================================
STATISTICS
==================================================*/

.hp-stats{

    margin-top:-70px;

    position:relative;

    z-index:5;

}

.hp-stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.hp-stat-card{

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

    backdrop-filter:blur(18px);

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

    border-radius:18px;

    padding:35px 25px;

    text-align:center;

    box-shadow:0 20px 40px rgba(0,0,0,.15);

    transition:.35s;

}

.hp-stat-card:hover{

    transform:translateY(-10px);

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

}

.hp-stat-card h2{

    color:#ffffff;

    font-size:42px;

    font-weight:800;

    margin-bottom:10px;

}

.hp-stat-card span{

    color:#d9e3f0;

    font-size:17px;

    font-weight:500;

}

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

@media(max-width:992px){

    .hp-grid{

        flex-direction:column;

        text-align:center;

    }

    .hp-right{

        justify-content:center;

    }

    .hp-truck{

        width:100%;

        max-width:550px;

        margin:0;

    }

    .hp-stats-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:576px){

    .hp-title{

        font-size:40px;

    }

    .hp-buttons{

        flex-direction:column;

    }

    .hp-btn{

        width:100%;

    }

    .hp-stats-grid{

        grid-template-columns:1fr;

    }

}



/* ==================================================
SERVICES
==================================================*/

.hp-services{

    padding:120px 0;

    background:#ffffff;

}

.hp-section-header{

    text-align:center;

    max-width:750px;

    margin:auto;

    margin-bottom:70px;

}

.hp-section-header span{

    color:#D71920;

    font-weight:700;

    letter-spacing:1px;

}

.hp-section-header h2{

    color:#173B6D;

    font-size:42px;

    margin:20px 0;

}

.hp-section-header p{

    color:#6c757d;

    line-height:2;

}

.hp-services-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.hp-service-card{

    background:#ffffff;

    border-radius:20px;

    padding:40px 30px;

    text-align:center;

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

    transition:.35s;

}

.hp-service-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 50px rgba(0,0,0,.12);

}

.hp-service-icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#173B6D;

    color:#ffffff;

    font-size:34px;

}

.hp-service-card h3{

    color:#173B6D;

    margin-bottom:15px;

}

.hp-service-card p{

    color:#6c757d;

    line-height:1.9;

}

@media(max-width:992px){

    .hp-services-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:576px){

    .hp-services-grid{

        grid-template-columns:1fr;

    }

}




/*==================================================
WHY RAHBAN TIR
==================================================*/

.hp-why{

    padding:130px 0;

    background:#f8fafc;

}

.hp-why-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.hp-world-map{

    width:100%;

    max-width:600px;

}

.hp-section-mini{

    color:#D71920;

    font-weight:700;

}

.hp-why-content h2{

    color:#173B6D;

    font-size:44px;

    margin:20px 0;

}

.hp-why-content>p{

    color:#6b7280;

    line-height:2;

    margin-bottom:40px;

}

.hp-why-list{

    display:flex;

    flex-direction:column;

    gap:30px;

}

.hp-why-item{

    display:flex;

    gap:20px;

}

.hp-check{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#173B6D;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    flex-shrink:0;

}

.hp-why-item h4{

    color:#173B6D;

    margin-bottom:10px;

}

.hp-why-item p{

    color:#6b7280;

    line-height:1.8;

}

@media(max-width:992px){

    .hp-why-grid{

        grid-template-columns:1fr;

    }

}

/*==================================================
ROUTES
==================================================*/

.hp-routes{

    padding:120px 0;

    background:#ffffff;

}

.hp-routes-grid{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

}

.hp-route-card{

    width:240px;

    padding:35px 25px;

    border-radius:18px;

    background:#fff;

    text-align:center;

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

    transition:.35s;

}

.hp-route-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 45px rgba(0,0,0,.12);

}

.hp-route-flag{

    font-size:42px;

    margin-bottom:18px;

}

.hp-route-card h3{

    color:#173B6D;

    margin-bottom:10px;

}

.hp-route-card p{

    color:#6b7280;

}

.hp-route-arrow{

    font-size:34px;

    color:#D71920;

    font-weight:bold;

}

@media(max-width:768px){

    .hp-routes-grid{

        flex-direction:column;

    }

    .hp-route-arrow{

        transform:rotate(90deg);

    }

}
.network-image-section{

    padding:100px 0;

    background:#051933;

    text-align:center;

}

.network-image{

    max-width:1200px;

    width:100%;

    height:auto;

    display:block;

    margin:auto;

}