/*====================================================
  RAHBAN TIR
  NETWORK SECTION
====================================================*/

.network-section{

    position:relative;

    padding:120px 0;

    background:#051933;

    overflow:hidden;

}

.network-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        rgba(23,59,109,.15),
        rgba(5,25,51,1)
    );

    pointer-events:none;

}

.network-section .rt-container{

    position:relative;

    z-index:2;

}

/*=============================
Header
=============================*/

.network-header{

    text-align:center;

    margin-bottom:70px;

}

.network-mini-title{

    display:inline-block;

    color:#E53935;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:15px;

}

.network-header h2{

    color:#ffffff;

    font-size:52px;

    font-weight:800;

    margin-bottom:20px;

}

.network-header p{

    color:#d8e2f0;

    font-size:20px;

    max-width:700px;

    margin:auto;

    line-height:1.9;

}

/*=============================
Map
=============================*/

.network-wrapper{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}

.network-map-bg{

    width:100%;

    max-width:1400px;

    opacity:.16;

    display:block;

    user-select:none;

    pointer-events:none;

}

/*=============================
Grid
=============================*/

.network-grid{

    position:absolute;

    inset:0;

    display:grid;

    grid-template-columns:1fr;

    grid-template-rows:

        120px

        160px

        180px;

    justify-items:center;

    align-items:center;

}

/*=============================
Russia
=============================*/

.network-russia{

    display:flex;

    justify-content:center;

    align-items:center;

}

/*=============================
Main Route
=============================*/

.network-main{

    display:grid;

    grid-template-columns:

        130px
        70px
        130px
        70px
        130px
        70px
        130px;

    align-items:center;

}




/*====================================================
COUNTRIES
====================================================*/

.country{

    width:120px;
    height:120px;

    border-radius:50%;

    background:#ffffff;

    border:3px solid #3F82FF;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#173B6D;

    font-size:22px;
    font-weight:700;

    box-shadow:0 0 25px rgba(63,130,255,.35);

    transition:.35s;

}

.country:hover{

    transform:translateY(-6px);

}

.iran{

    background:#E53935;

    color:#ffffff;

    border:4px solid #ffffff;

    box-shadow:0 0 35px rgba(229,57,53,.75);

}

/*====================================================
TRUCK
====================================================*/

.truck{

    font-size:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#ffffff;

}

/*====================================================
CHINA
====================================================*/

.network-china{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    margin-top:30px;

}

.transport{

    display:flex;

    gap:70px;

    margin-bottom:30px;

    font-size:46px;

}

.transport div{

    transition:.3s;

}

.transport div:hover{

    transform:translateY(-5px) scale(1.08);

}

/*====================================================
LINES
====================================================*/

.network-wrapper::before{

    content:"";

    position:absolute;

    width:4px;

    height:190px;

    background:#3F82FF;

    left:50%;

    bottom:170px;

    transform:translateX(-50%);

    opacity:.85;

}

.network-russia::after{

    content:"";

    position:absolute;

    width:4px;

    height:120px;

    background:#3F82FF;

    left:50%;

    top:120px;

    transform:translateX(-50%);

    opacity:.85;

}


/*====================================================
بخش سوم
====================================================*/



/*====================================================
LAYOUT FIX
====================================================*/

.network-wrapper{

    min-height:820px;

}

.network-russia{

    position:absolute;

    top:30px;

    left:50%;

    transform:translateX(-50%);

}

.network-main{

    position:absolute;

    top:290px;

    left:50%;

    transform:translateX(-50%);

}

.network-china{

    position:absolute;

    top:470px;

    left:50%;

    transform:translateX(-50%);

}

/*====================================================
RESPONSIVE
====================================================*/

@media(max-width:1200px){

.network-main{

grid-template-columns:

110px 55px 110px 55px 110px 55px 110px;

}

.country{

width:95px;
height:95px;

font-size:18px;

}

.truck{

font-size:34px;

}

.transport{

gap:40px;

font-size:38px;

}

}

@media(max-width:768px){

.network-wrapper{

min-height:auto;

}

.network-map-bg{

display:none;

}

.network-russia,
.network-main,
.network-china{

position:relative;

left:auto;
top:auto;

transform:none;

}

.network-main{

display:flex;

flex-direction:column;

gap:18px;

}

.network-wrapper::before,
.network-russia::after{

display:none;

}

.transport{

margin:25px 0;

}

}




.network-wrapper{

    position:relative;

    min-height:820px;

    background:url('/assets/images/world-map2.png')
               center center
               no-repeat;

    background-size:contain;

}


.network-icon{

    font-size:40px;

    color:#E53935;

    transition:.3s;

    filter:drop-shadow(0 0 10px rgba(229,57,53,.45));

}

.network-icon:hover{

    color:#3F82FF;

    transform:translateY(-5px) scale(1.1);

}