/* ==========================
TRAVEL SECTION
========================== */


.travel-section{

padding:50px 0;

background:#f8f8fb;

position:relative;

overflow:hidden;

}



.travel-section:before{

content:"";

position:absolute;

right:-120px;

top:0;

width:350px;

height:350px;

background:url("../images/dna-pattern.png");

background-size:contain;

opacity:.08;

}





/* TITLE */


.travel-title{

text-align:center;

margin-bottom:45px;

}



.travel-title span{

color:#f8770e;

font-size:14px;

font-weight:700;

letter-spacing:3px;

}



.travel-title h2{

font-size:40px;

font-weight:800;

color:#22356c;

margin:15px 0;

}



.venue{

display:inline-block;

background:white;

padding:12px 30px;

border-radius:30px;

box-shadow:0 8px 20px rgba(0,0,0,.08);

color:#22356c;

font-weight:600;

}



.venue i{

color:#f8770e;

}





/* ROUTE CARD */


.route-card{

display:grid;

grid-template-columns:220px 1fr 130px;

align-items:center;

background:white;

border:2px solid #1f56a8;

border-radius:20px;

margin-bottom:18px;

overflow:hidden;

transition:.4s;

}



.route-card:hover{

transform:translateY(-5px);

box-shadow:0 15px 35px rgba(31,86,168,.15);

}





/* SOURCE */


.source{

padding:25px;

text-align:center;

border-right:1px solid #1f56a8;

}



.source i{

font-size:35px;

color:#1f56a8;

}



.source h4{

font-size:15px;

color:#22356c;

margin-top:12px;

}



.source span{

font-size:13px;

color:#777;

}





/* JOURNEY */


.journey{

display:flex;

justify-content:center;

align-items:center;

gap:25px;

}



.step{

text-align:center;

}



.step i{

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

background:#edf3fa;

border-radius:50%;

font-size:22px;

color:#1f56a8;

margin:auto;

}



.step p{

font-size:12px;

font-weight:600;

color:#444;

}





.journey > i{

color:#f8770e;

font-size:20px;

}





/* TIME BOX */


.time-box{

height:100%;

background:#edf3fa;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

padding:15px;

border-left:1px solid #1f56a8;

}



.time-box i{

font-size:30px;

color:#1f56a8;

}



.time-box h4{

font-size:16px;

color:#22356c;

margin:8px 0;

}



.time-box p{

font-size:12px;

margin:0;

}





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


@media(max-width:991px){


.route-card{

grid-template-columns:180px 1fr 110px;

}


.journey{

gap:15px;

}


.step p{

font-size:11px;

}


}





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


@media(max-width:700px){



.travel-section{

padding:60px 15px;

}



.travel-title h2{

font-size:28px;

}



.route-card{

display:block;

}



.source{

border-right:none;

border-bottom:1px solid #ddd;

}



.journey{

padding:20px;

flex-direction:column;

}



.journey > i{

transform:rotate(90deg);

}



.time-box{

border-left:none;

border-top:1px solid #1f56a8;

padding:20px;

}



.step i{

width:60px;

height:60px;

}



}