/*==================================================
RAHBAN TIR
HERO SECTION
==================================================*/

.hp-hero{

    position: relative;
    overflow: visible;

    background:
        linear-gradient(
            135deg,
            #0d2c63 0%,
            #163d78 45%,
            #1b4b89 100%
        );

    padding: 80px 0 170px;

}

/*---------------------------------------*/

.hp-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(255,255,255,.05),
            transparent 35%
        ),

        radial-gradient(
            circle at 90% 10%,
            rgba(255,255,255,.04),
            transparent 40%
        );

    pointer-events:none;

}

/*==================================================
CONTAINER
==================================================*/

.hp-hero .rt-container{

    width:100%;

    max-width:1400px;

    margin:auto;

    padding:0 20px;

    position:relative;

    z-index:2;

}

/*==================================================
GRID
==================================================*/

.hp-grid{

    display:grid;

    grid-template-columns:58% 42%;

    align-items:center;

    gap:25px;

    min-height:580px;

}

/*==================================================
LEFT
==================================================*/

.hp-left{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

}

/*==================================================
BADGE
==================================================*/

.hp-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    border-radius:50px;

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

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

    color:#fff;

    font-size:15px;

    font-weight:700;

    margin-bottom:28px;

    backdrop-filter:blur(8px);

}

/*==================================================
TITLE
==================================================*/

.hp-title{

    color:#fff;

    font-size:64px;

    font-weight:900;

    line-height:1.25;

    margin:0 0 28px;

    max-width:760px;

    text-shadow:

        0 10px 30px rgba(0,0,0,.18);

}


/*==========================================
section2
==========================================*/
/*==================================================
TEXT
==================================================*/

.hp-text{

    max-width:650px;

    color:rgba(255,255,255,.90);

    font-size:18px;

    line-height:2.15;

    margin-bottom:42px;

}

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

.hp-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

.hp-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:190px;

    height:58px;

    border-radius:14px;

    font-size:16px;

    font-weight:700;

    text-decoration:none;

    transition:.35s ease;

}

/*------------------------------*/

.hp-btn-primary{

    background:#e31e24;

    color:#fff;

    box-shadow:0 10px 25px rgba(227,30,36,.35);

}

.hp-btn-primary:hover{

    transform:translateY(-4px);

    background:#ff2d33;

    color:#fff;

}

/*------------------------------*/

.hp-btn-outline{

    color:#fff;

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

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

    backdrop-filter:blur(8px);

}

.hp-btn-outline:hover{

    background:#fff;

    color:#163d78;

    transform:translateY(-4px);

}

/*==================================================
RIGHT
==================================================*/

.hp-right{

    display:flex;

    justify-content:flex-start;

    align-items:center;

    position:relative;

    overflow:visible;

}

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

.hp-truck{

    width:135%;

    max-width:none;

    height:auto;

    display:block;

    transform:translateX(-40px);

    filter:drop-shadow(0 35px 60px rgba(0,0,0,.28));

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

}

@keyframes truckFloat{

    0%{

        transform:translateX(-40px) translateY(0);

    }

    50%{

        transform:translateX(-40px) translateY(-10px);

    }

    100%{

        transform:translateX(-40px) translateY(0);

    }

}
/*===================================================
section 3 
===================================================*/

/*==================================================
HERO HEIGHT
==================================================*/

.hp-hero{

    min-height:720px;

}

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

@media (max-width:1200px){

    .hp-grid{

        grid-template-columns:1fr;

        text-align:center;

        gap:40px;

    }

    .hp-left{

        align-items:center;

    }

    .hp-title{

        max-width:850px;

        font-size:52px;

    }

    .hp-text{

        max-width:760px;

    }

    .hp-right{

        order:-1;

        justify-content:center;

    }

    .hp-truck{

        width:100%;

        max-width:700px;

        transform:none;

    }

}

@media (max-width:768px){

    .hp-hero{

        padding:70px 0 130px;

        min-height:auto;

    }

    .hp-grid{

        gap:30px;

    }

    .hp-title{

        font-size:38px;

        line-height:1.45;

    }

    .hp-text{

        font-size:16px;

        line-height:2;

    }

    .hp-buttons{

        width:100%;

        justify-content:center;

    }

    .hp-btn{

        width:100%;

        max-width:320px;

    }

    .hp-truck{

        width:100%;

        max-width:420px;

    }

}

@media (max-width:480px){

    .hp-title{

        font-size:30px;

    }

    .hp-badge{

        font-size:13px;

        padding:10px 18px;

    }

}