/*trip section css*/
.trip-section {
    background-size: cover !important;
    background-position: center bottom !important;
    height: 645px;
    display: flex;
    align-items: center;
}
.trip-box { max-width:889px; background: rgba(48, 117, 183, 0.7); padding: 60px 70px;  border-radius: 20px;     border: 1px solid #707070;}
.trip-list { max-width: 100%;}
.trip-box h2{ margin-bottom:25px;     max-width: 680px;}
.trip-list li  { margin-bottom:5px;}
.trip-list li span {  font-weight:700; font-size:22px; color: #fff; width: 100%; display: block; padding-left:26px;  position: relative;}
.trip-list li span::before { content: ""; background-image: url(../images/star.svg); background-repeat: no-repeat;  background-size: 100% auto; width: 16px; 
    height:16px; display: inline-block; position: absolute; top:50%; left: 0; transform: translateY(-50%);   }
/*trip section css*/


@media screen and (max-width:1750px) {
    /*trip-box section css*/
    .trip-box {max-width: 790px;}
/*trip-box section css*/

}

@media screen and (max-width:1600px) {

/*trip choose section css*/
.trip-section {height: 545px;}
.choose-card h3 { font-size: 30px;}
.choose-section, .how-book {padding:70px 0;}
/*trip choose section css*/
}


@media screen and (max-width:1399px) {
/*trip choose section css*/
.trip-box {  max-width: 730px; padding: 50px;}
.trip-section {  height: 500px;}
.choose-card { margin-bottom: 65px;}
.choose-card h3 {font-size: 28px; margin-bottom: 15px;}
/*trip choose section css*/
}

@media screen and (max-width:1199px) { 
.trip-box { max-width: 620px; padding: 30px; } 
}


@media screen and (max-width:991px) {
.trip-box {  max-width: 380px;   padding: 25px;  border-radius: 10px;  border: none;}
.trip-list li { margin-bottom: 10px; }
    .trip-section {
        height: 401px;
        background-position: center bottom !important;
        background-size: 100% !important;
    } 
.trip-box h2 { max-width: 300px; line-height: 1; } 
.trip-list li span { line-height: 1.1; font-size: 20px; font-weight: 300; } 
.trip-list li span::before {top: 1px;     transform: initial;} 
}

@media screen and (max-width:767px) {
    .trip-section {
        position: relative;
        background-position: 98% 4% !important;
        background-size: cover !important;
    } 
.trip-box { max-width: 93%; padding:25px; border-radius: 10px; margin: 0 auto; position: absolute; bottom: 0; right: 0; left: 0; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; padding-bottom: 0px; } 
.trip-box h2 {max-width: 100%;     font-size: 32px; text-align: left;}


 
}