@media (max-width: 720px) {
    body {
        /* background-color: red; */
        display: flex;
        flex-direction: column;
        margin: 0;
        width: 100%;
        padding: 0;
    }

    * {
        margin: 0;
        padding: 0;
        /* font-family: Inter, sans-serif; */
        font-size: 'Open Sans', arial, sans-serif;
    }
    html {
        scroll-behavior: smooth;
    }
    .nav1 .navbrand a {
        color: #fff;
        font-weight: bold;
        text-decoration: none;
        font-size: 1.4em;
    }
    .nav1 .navbrand {
        text-align: right;
    }
    .navbar {
        width: 100%;
        height: 70px;
        z-index: 99;
        position: fixed;
        list-style-type: none;
        /* background-color: #20386d; */
        /* position: relative; */
        /* background-color: green; */
    }
    .navbar .reshead {
        display: flex;
        width: 100%;
        line-height: 0px;
    }

    .navbar header .logo {
        position: absolute;
        top: 2px;
        /* left: -3px; */
        margin: 0em 1em 1em 1em;
        color: #fff;
        max-height: 0px;
        z-index: 100;
    }
    .navbar header a img {
        margin-bottom: 2px;
        max-width: 150px;
    }

    
.navbar .hamburger{
    display: block;
    position: absolute;
    right: 10px;
    border: none;
    background-color: transparent;
    font-size: 2em;
    width: 50px;
    color: #fff;
}

.navbar header .hide{
    display: block;
    transform: translateX(0);
}
    .navbar header .navul {
        top: 70px;
        display: none;
        /* text-align: center; */
        flex-direction: column;
        list-style-type: none;
        /* justify-content: center; */
        /* justify-items: center; */
        position: absolute;
        background-color: #ed7227;
        width: 100%;
        z-index: 1;
        height: 300px;
        z-index: 1;
        border-top: 1px solid #fff;
        width: 100%;
        border-bottom-left-radius: 10% 10%;
        border-bottom-right-radius: 10% 10%;
    }
    .navbar header ul .nali {
        margin:2em 2em 0em 0em;
        color: #fff;
        position: relative;
    }

    .navbar header ul .nali .dropdown-menu{
        margin-top:1px;
        color: #fff;
        height: auto;
        width: auto;

    }
    .navbar header ul .nali a {
        color: #fff;
        text-decoration: none;
    }
    .navbar header ul .nali a:hover {
        border-bottom: 1px solid #fff;
    }
    .navbar header ul .nali .dropdown ul li {
        margin: 0em 0em 0em 0em;
        padding: 0em;
        line-height: 2em;
    }
    .navbar header ul .nali .dropdown ul li a {
        margin: 0em 0em 0em 0em;
        color: #20386d;
    }
    .navbar header ul li .btncon {
        background-color: #fff;
        color: #20386d;
        font-weight: bold;
        text-decoration: none;
        padding: 2em;
        border-radius: 10px;
        width: 250px;
        text-align: center;
        display: inline-block;
    }
    html {
        scroll-behavior: smooth;
    }
    .nav1 {
        padding: 1em;
        background-color: #20386d;
        position: fixed;
        width: 100%;
        z-index: 1000;
    }
    .banner {
        /* background-image: url(../image/car6.jpg); */
        /* background-color: rgb(187, 212, 236);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center; */
        /* position: relative;
        background: #2c3e50;
        height: 100vh; */
    }
    

    
.banner {
    background-image: url(../image/car5.jpg);
    /* background-color: rgb(187, 212, 236); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position:  center center fixed;
    position: relative;
    position: relative;
    /* background: #2c3e50; */
    min-height: 53em;
}
    .banner .logo a {
        margin-left: auto;
        font-size: 3.5em;
        text-decoration: none;
        font-weight: bold;
        color: #ed7227;
        text-shadow: 5px 5px 9px #fff;
    }
    /* left side*/
    .banner .row {
        display: flex;
        flex-direction: column-reverse;
    }
    
    .banner .rowB{
        display: flex;
        flex-direction: column;
    }
    
.banner .left-side {
    animation: transX 1s 1s ease-out forwards ;
    opacity: 0;
    transform:  translateY(-30px);
    position: initial;
    right: 0%;
   
    /* background-color: rgba(0, 0, 0, 0.5); */
    margin-top: 7em;
    height: 100%;

    /* background-color: red; */

}
    .banner .tabs-content .ic {
        display: flex;
        justify-content: center;
        color: #fff;
        font-weight: bold;
        line-height: 100px;
        background-color: rgba(250, 250, 250, 0.5);
        height: 100px;
        width: 100px;
        justify-items: center;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        font-size: 2em;
        display: none;
    }
    .banner .tabs-content h4 {
        margin-top: 0px;
        margin-bottom: 1px;
        font-size: 2em;
        color: #fff;
        font-weight: 700;
    }
    .banner .tabs-content h4 i {
        margin-top: 0px;
        font-size: 1.2em;
        display: inline-block;
        color: #fff;
        font-weight: 700;
        margin-left: 0.5em;
        /* background-color: rgb(228, 236, 252); */
        background-color: rgba(250, 250, 250, 0.5);
        border-radius: 100%;
    }
    .banner .social-links {
        list-style: none;
        margin-top: 0px;
        padding-right: 100px;
    }
    /* 
    .banner .social-links li {
        display: block;
        text-align: center;
        margin: 10px 0px;
        transition: all 0.5s;
    } */
    .banner .social-links a em,
    .banner .social-links .dropdown em {
        font-style: normal;
        font-weight: 700;
    }
    .banner .social-links .dropdown i {
        float: right;
        background-color: rgba(250, 250, 250, 0.2);
        height: 60px;
        width: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 36px;
    }
    .banner .social-links .dropdown .dropdown-menu a {
        color: #20386d;
    }
    .banner .social-links a i {
        float: right;
        background-color: rgba(250, 250, 250, 0.2);
        height: 60px;
        width: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 36px;
    }
    .banner .social-links li:hover {
        background-color: #ed7227;
        ;
    }
    /*
    .banner .social-links li:hover i {
        background-color: rgba(255, 225, 101, 0.3);
    } */
    .page-direction-button a {
        display: inline-block;
        line-height: 60px;
        width: 270px;
        height: 60px;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        background-color: #ed7227;
        font-size: 18px;
        font-weight: 700;
        color: #20386d;
        text-align: center;
        text-decoration: none;
        letter-spacing: 0px;
        margin-top: 125px;
        margin-left: 1em;
    }
    /********************************right side***************************************/
    .recherche-button a {
        display: inline-block;
        /* line-height: 60px; */
        width: 100%;
        padding: 0.7em;
        /* height: 60px; */
        background-color: #ed7227;
        border-radius: 10px;
        font-size: 18px;
        font-weight: 700;
        color: #20386d;
        text-align: center;
        text-decoration: none;
        letter-spacing: 0px;
    }
    .banner .right-side {
        margin-top: 0px;
        animation: transX 1s 1.5s ease-out forwards ;
        opacity: 0;
        transform: translateY(-30px);
    }
    .banner .right-side .reservation h1 {
        text-align: center;
        font-weight: bold;
        font-size: 3em;
        color: #fff;
        margin-bottom: 1px;
    }
    .banner .right-side .reservation .card,
    .checkvoyage .slider-right .card {
        border-radius: 10px;
    }
    .banner .right-side .reservation .input-group,
    .checkvoyage .slider-right .input-group {
        background-color: rgb(228, 236, 252);
        padding: 0.4em;
        border-radius: 10px;
    }
    .banner .right-side .reservation .input-group .input-group-text i {
        color: #20386d;
    }
    /*********************************banner-wraper*********************/
    .banner-wrapper .card {}
    .banner-wrapper {
        margin-top: 5em;
        text-align: center;
        color: #20386d;
        margin-bottom: 3em;
    }
    .banner-wrapper h4 {
        font-size: 2em;
        font-weight: bold;
    }
    .banner-wrapper .card {
        background-color: rgb(228, 236, 252);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1opx;
    }
    .banner-wrapper .card img {
        max-width: 350px;
    }
    .banner-wrapper .col-right {
        position: relative;
    }
    .banner-wrapper .col-right .card-body {
        position: absolute;
        left: 0%;
        top: 13%;
        line-height: 2em;
    }
    .banner-wrapper .col-right .card-body .card-title {
        color: #20386d;
        font-weight: bold;
        font-size: 1.5em;
    }
    .banner-wrapper .col-right .card-body .card-text {
        color: #20386d;
        font-size: 1.1em;
    }
    .banner-wrapper .col-right .card-body .btn {
        background-color: #ed7227;
        color: #20386d;
        padding: 0.8em 2em;
        font-weight: bold;
    }
    .banner-wrapper .col {
        margin-top: 5em;
        width: 100%;
    }
    .banner-wrapper .col ul {
        list-style-type: none;
        display: flex;
        justify-content: space-between;
        font-size: 3em;
        font-weight: bold;
        color: #20386d;
        position: relative;
    }
    .banner-wrapper .col ul li {
        background-color: #20386d;
        height: 100px;
        width: 100px;
        border-radius: 50%;
        color: #fff;
        line-height: 100px;
    }
    .banner-wrapper .col ul::before {
        content: "";
        width: 30PX;
        height: 2px;
        background-color: #20386d;
        position: absolute;
        top: 50%;
        left: 260px;
    }
    .banner-wrapper .col ul::after {
        content: "";
        width: 30px;
        height: 2px;
        background-color: #20386d;
        position: absolute;
        top: 50%;
        right: 229px;
    }
    /* **************************slider*******************/
    
.slider {
    margin-top: 1em;
}

.slider .card-header {
    background-color: transparent;
    color: #20386d;
    font-weight: bold;
    text-align: center;
    font-size: 2em;
    margin-bottom: 1em;
}
    .slider .card-slide {
        /* background-image: url(../image/car2.jpg); */
        /* background-repeat: no-repeat;
        background-size: cover;
        background-position: center center; */
        background-color: rgb(228, 236, 252);
        margin-top: 2em;
    }
    .slider .card-slide::before {
        /* background-color: rgba(0, 0, 0, 0.5); */
    }
    .slider .card-slide .row {
        margin: 0em 0em 0em 0em;
        padding: 1em;
    }
    .slider .card-slide .row .card::before {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        top: -10%;
        left: 45%;
        background-color: #fff;
        transform: rotate(45deg);
    }
    .slider .card-slide .row .card {
        border-radius: 10px;
        height: 150px;
        border: none;
        transition: all 0.3s ease-in-out;
    }
    .slider .card-slide .row .card:hover {
        box-shadow: 0px 0px 5px black;
    }
    .slider .card-slide .row .card .card-body .card-title {
        color: #20386d;
        font-weight: bold;
    }
    .slider .card-slide .row .card .card-body .card-text {
        color: #2c3e50;
    }
    .slider .card-slide .row .card .card-body .btn {
        color: #fff;
        background-color: rgb(44, 62, 80);
        font-size: 25px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        box-shadow: none;
    }
    .slider .card-slide .card {
        color: #fff;
        /* padding: 40px 30px 30px 30px; */
        padding: 0.6em;
        text-align: center;
        display: block;
        /* background-color: rgba(250, 250, 250, 0.4); */
        background-color: #fff;
    }
    .slider .card-slide .card .card-body {
        max-width: 350px;
    }
    .slider .card-slide .card .card-footer {
        color: #fff;
        text-align: center;
        display: block;
        background-color: rgba(250, 250, 250, 0.9);
        padding: 2em;
        color: #20386d;
        font-size: 1em;
        font-weight: bold;
    }
    /*******************banerregister***************/
    .banerregister {
        background-image: url(../image/car5.jpg);
        /* background-color: rgb(187, 212, 236); */
        background-repeat: no-repeat;
        background-size: cover;
        object-fit: cover;
        background-position: center center;
        position: relative;
        /* background: #2c3e50; */
        height: 50vh;
        margin-bottom: 5em;
        margin-top: 5em;
        width: 100%;
    }
    .banerregister .row .col-md-3 .logo img {
        position: absolute;
        margin-top: 0em;
        margin-bottom: 2px;
        max-width: 300px;
        top: 0%;
        color: #ed7227;
        left: 0%;
        max-width: 150px;
    }
    .banerregister .row {
        position: relative;
        margin-left: 5em;
    }
    .banerregister .row .col-md-3 {
        position: absolute;
        width: 100%;
    }
    .banerregister .row .col-md-5 {
        width: 100%;
        position: absolute;
        margin-top: 4em;
        color: #fff;
        right: 20%;
    }
    .banerregister .row .col-md-5 .input-group .form-control {
        padding: 0.75em;
        width: 68%;
    }
    .banerregister .row .col-md-5 .input-group .btn {
        padding: 0.75em 0.5em;
        color: #20386d;
        font-weight: bold;
        background-color: #ed7227;
    }
    .banerregister::before {
        content: "";
        width: 100%;
        height: 100%;
        background-color: rgba(32, 56, 109, 0.90);
        position: absolute;
    }
    /* ************************footer**********************/
    .curved {
        color: #ed7227;
        /* position: relative; */
        background: #20386d;
        height: auto;
        /* border-top-left-radius: 50% 20%; */
        /* border-top-right-radius: 50% 20%; */
        color: #fff;
    }
    .curved .row .nav {
        margin-top: 1em;
        color: #fff;
    }
    .curved .row .nav li:nth-child(1) {
        font-weight: bold;
    }
    .curved .row .nav li .bnt {
        padding: 1em;
        color: #20386d;
        width: 170px;
        border-radius: 10px;
        font-size: 1.1em;
        font-weight: bold;
        background-color: #ed7227;
    }
    .curved .row .nav li .nav a {
        text-align: center;
        padding: 1em;
        color: #20386d;
        /* width: 170px; */
        border-radius: 10px;
        font-size: 1.1em;
        font-weight: bold;
        background-color: #ed7227;
    }
    .curved .row .nav li a {
        /* margin: 10px; */
        margin-left: 10px;
        color: #fff;
    }
    /* *********************checkvoyage********************/
    .checkvoyage {
        padding: 5em 0em 0em 2em;
        display: none;
    }

    
.checkvoyage2{
    margin: 0 auto;
    opacity: 0;
    transform: translateY(-30px);
    animation: transX 1s 1s ease-out forwards ;
}


.checkvoyage2 .row  {
    margin-top: 100px;
  
}


.checkvoyage2 .row .list .card .navul{
    position: relative;
}


.checkvoyage2 .row .list .card .navul .link {
    /* display: block; */
    padding: 1rem;
    color: #20386d;
    text-decoration: none;
    display: flex;
    margin: 1em 0em 0em 0em;
    justify-content: space-between;
    background-color: #fff;
    border: 0.002em solid rgb(219, 216, 216);
    /* transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out */
}

.checkvoyage2 .row .list .card .navul .list1{
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    line-height: 40px;
    width: 100%;
    text-align: center;
    background-color: #fff;
    /* display: inline-table; */
}


.checkvoyage2 .row .list .card .navul .item1 {
    background-color: inherit;
    border: none;

}


.checkvoyage2 .row .list .card {
    margin-top: 20px;
    border-radius: 10px 10px 0px 0px;
    border: none;
    padding: 0;
    background-color: transparent;
}
    .checkvoyage .anime {
        animation: transX 2s linear;
    }
    .checkvoyage .slider-right {
        position: fixed;
        /* animation: transX 2s linear; */
        left: 13%;
        top: 15%;
        display: none;
    }
    .checkvoyage .slider-right h5 {
        color: #20386d;
        text-align: center;
        margin-top: 1px;
        font-weight: bold;
        margin-bottom: 2em;
    }
    .checkvoyage .slider-right .btnback {
        position: fixed;
        line-height: 5em;
        text-align: center;
        left: 5%;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #fff;
        top: 30%;
    }
    .checkvoyage .slider-left .card1 {
        padding: 1em;
        border: 1px solid #20386d;
        font-size: 1em;
        font-weight: bold;
        text-transform: uppercase;
    }
    .checkvoyage .slider-left {
        margin-left: inherit;
        padding: 0;
        width: 100%;
        right: auto;
        /* animation: transX 3s linear; */
    }
    .checkvoyage .slider-left .card2 {
        margin-left: 0;
        right: 0;
        padding: 0em 0em 0em 0em;
        width: 100%;
        height: 100px;
        /* border: 1px solid #20386d; */
        font-size: 1em;
        font-weight: bold;
        position: initial;
        border-radius: 20px;
        margin-bottom: 5em;
        transition: all 0.4s ease-out;
    }
    .checkvoyage .slider-left .card2:hover {
        transform: scale(1.0);
    }
    .checkvoyage .slider-left .card2 .card-header {
        width: 100%;
        background-color: #fff;
        border: none;
        border-radius: 20px;
        /* margin-bottom: 1em; */
    }
    .checkvoyage .slider-left .card2 .card-header .acheter {
        padding: 0.50em 0.6em;
        background-color: #ed7227;
        color: #fff;
        border-radius: 5px;
        text-decoration: none;
        margin: 10em auto 0em 1em;
    }
    .checkvoyage .slider-left .card2 .card-conte {
        background-color: #fff;
        border-radius: 20px;
        height: 100%;
        box-shadow: 0px 0px 0px black, -0px -2px -5px black;
        position: relative;
    }
    /*
    .checkvoyage .slider-left .card2::before {
        content: "";
        background-color: red;
        position: absolute;
        display: block;
        width: 30px;
        height: 30px;
        transform: rotate(180deg);
        left: -1%;
    } */
    .checkvoyage .slider-left .card2 .pull1::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        z-index: 100;
        position: absolute;
        background-color: #fff;
        border: 1px solid #20386d;
        top: 15%;
        left: 22%;
    }
    .checkvoyage .slider-left .card2 .pull1,
    .checkvoyage .slider-left .card2 .pull2 {
        margin: 0.2em 0.4em 1.6em 7em;
    }
    .checkvoyage .slider-left .card2 .time {
        top: 25%;
        left: 2%;
        z-index: 100;
        margin: 0.4em 0.6em 1.5em 1em;
        font-size: 1.2em;
        position: absolute;
        font-weight: 500;
    }
    .checkvoyage .slider-left .card2 .prix {
        top: 10%;
        color: #ed7227;
        left: 60%;
        z-index: 100;
        margin: 0.7em 0.6em 1.5em 0.3em;
        font-size: 1.5em;
        position: absolute;
        font-weight: 500;
    }
    .checkvoyage .slider-left .card2 .pull2::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        z-index: 100;
        position: absolute;
        background-color: #20386d;
        top: 79%;
        left: 22%;
    }
    .checkvoyage .slider-left .card2 .pull3 {
        width: 5px;
        height: 49px;
        top: 24%;
        left: 23%;
        z-index: 100;
        position: absolute;
        border-left: 1px dashed #20386d;
    }

    
.checkvoyage2 .row .detail .card-header .d-right button {
    background-color: #ed7227;
    text-decoration: none;
    padding: 0.5em;
    color: #fff;
    border-radius: 5px;
}

.checkvoyage2 .row .detail .card-header .d-right {
    margin-top: 2.5em;
}



.checkvoyage2 .row .detail .card-body .prix {
    position: absolute;
    top: 45%;
    left: 30%;
    font-size: 1.2em;
    /* font-size: 10px; */
}


.checkvoyage2 .row .detail .card-body .prix  small ,

.checkvoyage2 .row .detail .card-body .prix #gar{
    font-size: 13px;
}



/*************************recapvoyage*********************/

.recapvoyage {
    padding-top: 7em;
    padding-block-end: 3em;
    background-color: rgb(244, 246, 252);
    min-height: 90vh;
    opacity: 0;
    transform: translateY(-30px);
    animation: transX 1s 1s ease-out forwards ;
}



.recapvoyage .left .card {
    padding: 1em;
    margin-top: 1em;
    border-radius: 10px;
}


.recapvoyage .left .card .typp{
    font-size: 12px;
    font-weight: bold;
}



.recapvoyage .card .card-b {
    background-color: rgb(244, 246, 252);
    height: 100px;
    border-radius: 10px;
    margin-top: 1em;
}

.recapvoyage .card .card-b .d-flex .cont {
    /* margin: 1em; */
    padding: 1em;
    display: inline-block;
    border-right: 0px solid;
    font-size: 13px;
    color: #20386d;
}

.recapvoyage .card .card-b .d-flex .cont:nth-child(2),
.recapvoyage .card .card-b .d-flex .cont:nth-child(2) {
    /* border-right: 1px solid transparent; */
}

.recapvoyage .card .dc {
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 5px;
}

.recapvoyage .right .card {
    padding: 1em;
    margin-top: 3em;
    border-radius: 10px;
}

.recapvoyage .right .card .bnt {
    width: 100%;
    padding: 1em;
    text-align: center;
}

.recapvoyage .right .card .bnt a {
    border-radius: 10px;
    background-color: #ed7227;
    margin-top: 1.9em;
    line-height: 10px;
    padding: 1em 5em;
    font-weight: bold;
    color: #fff;
    width: 100%;
    font-size: 1.1em;
}



    /************************************************voyage*****************************************************************/
    .voyage {
        background-color: rgb(228, 236, 252);
        min-height: 100vh;
        padding-top: 6em;
    }
    /***********************detailvoyage******************/
    /* detailticket */
    .detailvoyage {
        /* animation: transs 1s linear; */
        background-color: rgb(228, 236, 252);
    }
    .bac {
        top: -5%;
        z-index: 1000;
        left: 5%;
        border-radius: 50%;
        line-height: 110px;
        color: #fff;
        text-decoration: none;
        font-size: 2em;
        position: fixed;
        text-align: center;
        background-color: #d9dcdf;
        /* background-color: #c1c4c7; */
        width: 0px;
        height: 0px;
        transition: all 0.4s ease-in-out;
    }
    .bac:hover {
        color: #fff;
        background-color: #c1c4c7;
        padding-right: 10px;
    }
    .detailvoyage .col-md-4 .hede {
        line-height: 40px;
        background-color: #20386d;
        width: 100%;
        height: 60px;
        color: #fff;
        display: flex;
        border-radius: 10px;
        font-size: 1.1em;
        margin-bottom: 0.5em;
        font-weight: bold;
        border: none;
    }
    .detailvoyage .card-detail .card-footer {
        width: 100%;
        border: none;
        background-color: transparent;
    }
    .detailvoyage .card-detail .card-footer a {
        display: inline-block;
        line-height: 60px;
        width: 100%;
        height: 60px;
        background-color: #ed7227;
        border-radius: 10px;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        text-decoration: none;
        letter-spacing: 0px;
    }
    .detailvoyage .card-detail .card {
        border-radius: 10px;
    }
    .detailvoyage .card-detail .card .card-header {
        background-color: transparent;
        text-align: center;
        font-weight: bold;
        color: #20386d;
    }
    .detailvoyage .card-detail .card .card-footer {
        text-align: center;
        font-weight: bold;
        color: #20386d;
        background-color: rgb(228, 236, 252);
        border-radius: 0px 0px 10px 10px;
    }
    .detailvoyage .card-detail .card .pull1,
    .detailvoyage .card-detail .card .pull2 {
        margin: 1em 0.4em 1em 6em;
        font-weight: bold;
        font-size: 1.2em;
        color: #20386d;
    }
    .detailvoyage .card-detail .card .time {
        top: 25%;
        left: 50%;
        color: #20386d;
        z-index: 100;
        margin: 0.4em 0.6em 1.7em 2em;
        font-size: 1.4em;
        position: absolute;
        font-weight: 400;
    }
    .detailvoyage .card-detail .card .pull1::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        z-index: 100;
        position: absolute;
        background-color: #fff;
        border: 1px solid #20386d;
        top: 12%;
        left: 22%;
    }
    .detailvoyage .card-detail .card .pull2::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        z-index: 100;
        position: absolute;
        background-color: #20386d;
        top: 79%;
        left: 22%;
    }
    .detailvoyage .card-detail .card .pull3 {
        width: 5px;
        height: 49px;
        top: 24%;
        left: 23%;
        z-index: 100;
        position: absolute;
        border-left: 1px dashed #20386d;
    }
    .detailvoyage .card-detail .card .card-conte {
        height: 100%;
        position: relative;
    }
    /**************formulaireClient************/
    .formulaireclient {
        background-color: rgb(228, 236, 252);
    }
    .formulaireclient .card-detail .col-md-4 .hede {
        line-height: 40px;
        background-color: #20386d;
        width: 100%;
        height: 60px;
        color: #fff;
        display: flex;
        border-radius: 10px;
        font-size: 1.1em;
        margin-bottom: 0.5em;
        font-weight: bold;
        border: none;
    }
    .formulaireclient .card-detail .card-footer {
        width: 100%;
        border: none;
        background-color: transparent;
    }
    .formulaireclient .card-detail .card-footer a {
        display: inline-block;
        line-height: 60px;
        width: 100%;
        height: 60px;
        background-color: #ed7227;
        border-radius: 10px;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        text-decoration: none;
        letter-spacing: 0px;
    }
    .formulaireclient .card-detail .card {
        border-radius: 10px;
    }
    .formulaireclient .card-detail .card .card-header {
        background-color: transparent;
        text-align: center;
        font-weight: bold;
        color: #20386d;
    }
    .formulaireclient .card-detail .card .card-footer {
        text-align: center;
        font-weight: bold;
        color: #20386d;
        background-color: rgb(228, 236, 252);
        border-radius: 0px 0px 10px 10px;
    }
    .formulaireclient .card-detail .card .card-body .form-control {
        background-color: rgb(229, 230, 231);
        /* background-color: rgb(228, 236, 252); */
        padding: 0.7em;
        border-radius: 10px;
        margin: 3px;
        transition: all 0.4s ease-in-out;
    }
    .formulaireclient .card-detail .card .card-body .form-control:hover,
    .formulaireclient .card-detail .card .card-body .form-control:focus {
        /* background-color: rgb(229, 230, 231); */
        background-color: rgb(228, 236, 252);
        padding: 0.7em;
        border-radius: 10px;
        margin: 3px;
        box-shadow: 0px 0px 5px #ed7227;
        border: 1px solid #ed7227;
    }
    .formulaireclient .card-detail .card .card-body h5 {
        color: #20386d;
        font-weight: bold;
        margin-bottom: 0.5em;
    }
    /****************infovoyageur*************/
    .infovoyageur {
        background-color: rgb(228, 236, 252);
    }
    .infovoyageur .card {
        border-radius: 10px;
    }
    .infovoyageur .col-md-4 .card-footer a {
        display: inline-block;
        line-height: 60px;
        width: 100%;
        height: 60px;
        background-color: #ed7227;
        border-radius: 10px;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        text-decoration: none;
        letter-spacing: 0px;
    }


    

/*******************************voyageurinfo*********************/

.voyageurinfo {
    padding-top: 8em;
    /* background-color: rgb(244, 246, 252); */
    min-height: 90vh;
    opacity: 0;
    transform: translateY(-30px);
    animation: transX 1s 1s ease-out forwards ;
}


.content-modal{
    top: auto;    
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    animation: transX 4s 1s ease-out forwards ;
}

.voyageurinfo .right .card {
    margin-top: 2em;
    padding: 1em;
    margin-right: 0px;
}

.voyageurinfo .left .card {
    padding: 1em;
    /* background-color: red; */
}

.voyageurinfo .left .card .form-control {
    background-color: rgb(244, 246, 252);
    padding: 0.7em;
}

.voyageurinfo .right .card .bnt button {
    padding: 0.1em;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    width: 100%;
    background-color: #20386d;
    color: #fff;
}

.voyageurinfo .right .card .aller,
.voyageurinfo .right .card .retour {
    position: relative;
    background-color: rgb(244, 246, 252);
    border-radius: 10px;
}



.voyageurinfo .right .card .card-body{
    margin: 0;
    /* font-size: 1px; */
    /* display: none; */
}

.voyageurinfo .right .card .card-body span {
    display: block;
    margin: 2em 0em 0em 3em;
}

.voyageurinfo .right .card .aller .vil,
.voyageurinfo .right .card .retour .vil {
    position: relative;
}

.voyageurinfo .right .card .aller .vil::after,
.voyageurinfo .right .card .retour .vil::after {
    position: absolute;
    content: "";
    width: 10px;
    left: -6%;
    top: 49%;
    height: 10px;
    border-radius: 50%;
    background-color: #20386d;
}

.voyageurinfo .right .card .aller .vil::before,
.voyageurinfo .right .card .retour .vil::before {
    position: absolute;
    content: "";
    width: 10px;
    left: -6%;
    top: 300%;
    height: 10px;
    border-radius: 50%;
    background-color: #20386d;
}

.voyageurinfo .right .card .aller .vill::before,
.voyageurinfo .right .card .retour .vill::before {
    position: absolute;
    content: "";
    width: 1px;
    left: 10%;
    top: 55%;
    height: 55px;
    background-color: #20386d;
}

.voyageurinfo .right .card .aller .tim,
.voyageurinfo .right .card .retour .tim {
    position: absolute;
    position: absolute;
    left: 20%;
    top: 40%;
    font-weight: bold;
    font-size: 1em;
    width: 70%;
    /* display: flex; */
    /* justify-content: space-evenly; */
    align-items: center;
}


/*'''''''''''''''''''''''''''''''''''''register'''''''''''''''''''''''''''*/

.voyageformulaire {
    background-color: #20386d;
    min-height: 100vh;
    padding-top: 8em;
}

.voyageformulaire .input-group {
    background-color: rgb(229, 230, 231);
    /* background-color: rgb(228, 236, 252); */
    padding: 0.7em;
    border-radius: 10px;
    margin: 3px;
    transition: all 0.4s ease-in-out;
}

.voyageformulaire .input-group .form-control {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.voyageformulaire .col-md-5 .card-footer a {
    display: inline-block;
    line-height: 60px;
    width: 100%;
    height: 60px;
    background-color: #ed7227;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0px;
}

.voyageformulaire .card-detail .card .card-header {
    background-color: transparent;
    text-align: center;
    border: none;
}

.voyageformulaire .card-detail .card {
    border-radius: 20px;
}
/* 
..voyageformulaire .card-detail {
    justify-content: center;
    text-align: center;
    position: relative;
} */

.voyageformulaire .card-detail .logo img {
    max-width: 200px;
    position: absolute;
    left: 40%;
    top: 1%;
}



/*******************************************css compte******************************************************/
.comptecontent{
    /* width: 100%; */
    height: 100vh;
    background-color: #e2e0e0;
}

.compte .navbar{
    background-color: #ed7227;
}


.compte .logo{
    position: absolute;
    top: 2px;
    /* left: -3px; */
    margin: 0em 1em 1em 1em;
    color: #fff;
    max-height: 0px;
    z-index: 100;
}

    .compte .logo  img {
        margin-bottom: 2px;
        max-width: 150px;
    }

.compte .navbar .nav-link{
    color: #fff;
    font-size: 2.1em;
        top: 0px;
        right: -15px;
    position: absolute;
    z-index: 99;
}

.comptecontent .slide{
    position: fixed;
    right: -100%;
    top: 10%;
    /* top: -100%; */
    /* transform: translateX(100%); */
    /* background:rgba(0, 0, 0, 0.5); */
    /* z-index: 100; */
    width: 100%;
    height: 90vh;
    transition: 0.4s;
}


.comptecontent .slide.active2{
    right: 0%;
}


.comptecontent .slide .card{
    position: absolute;
    top: 0%;
    width: 80%;
    right: 0%;
    border: none;
    height: 100%;
}

.comptecontent .slide .card .nav{

    line-height: 50px;

}


.comptecontent .slide .card .nav li{

    border-bottom: 1px solid rgb(196, 194, 194);
}


.comptecontent .slide .card .nav li:hover{
    background-color: #fff;
}


.comptecontent .slide .card .nav li a{
    color:#20386d;
    font-weight: bold;
    display: flex;
    font-size: 1.2em;
}



.comptecontent .slide .card .nav li a .ba{
    background-color: #fff;
    border-radius: 50%;
    height: 60px;
    width: 60px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-right: 1em; */
}


.comptecontent .profil{

    padding-top: 5em;
}
.comptecontent .profil .card .card-header{

    background-color: transparent;
    border: none;
}

.comptecontent .profil .card.pp{

    /* background-color: #20386d; */
    border-radius: 10px;
}

.comptecontent .profil .card .card-header .biuser{
    color: #fff;
    width: 60px;
    height: 60px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5em;
    border-radius: 50%;
    font-size: 1.5em;

}

.comptecontent .profil .card h5{
    color:#20386d;
    font-weight: bold;
}


.comptecontent .profil .card  .card-body .card{
        padding: 1em;
        border: none;
        box-shadow: 0px 0px 2px 0px  gray;
        color: #20386d;
        font-weight:500;

}



.comptecontent .profil .card  .card-body .bntmodif{
    background-color: #ed7227;
    width: 0;
    padding: 1em 1.5em;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    border-radius: 10px;
    margin-bottom: 20   rem;
}



.comptecontent .card .card-b {
    background-color: rgb(244, 246, 252);
    height: 100px;
    border-radius: 10px;
    margin: 1em 0em 1em 0em;
}
/* 
#textbillet::-webkit-scrollbar {

    color: #ed7227;
    } */

.compte .listebillet{

padding-top: 5em;
}

.compte .col-md-4.detailB{

    /* background-color: red; */
    position: absolute;
}


.compte .col-md-8.listB .card{

    /* background-color: red; */
    border-radius: 10px;
    background-color: #ed7227;
    color: #fff;
    height: auto;

    margin: 1em 0 1em 0em;
}

.compte .col-md-8.listB .card .bntReserve {

    padding: 1em 2em;
    background-color: #fff;
    color: #20386d;
    font-weight: bold;
    margin: 1em 0em 1em 0em;
    text-align: center;
    border-radius: 10px
}
#textbillet{
    height: 400px;
    overflow-y: scroll;
    font-size: 13px;
    padding: 0em;
    width: 100%;
}

#textbillet::-webkit-scrollbar {
    width: 2px; /* width of the entire scrollbar */
  }
  
  #textbillet::-webkit-scrollbar-track {
    background: #e2e0e0; 
    /* color of the tracking area */
  }
  
  #textbillet::-webkit-scrollbar-thumb {
    background-color: #ed7227; /* color of the scroll thumb */
    border-radius: 20px; /* roundness of the scroll thumb */
    border: 3px solid orange; /* creates padding around scroll thumb */
  }


.comptecontent .card .card-b .d-flex .cont {
    /* margin: 1em; */
    padding: 1em;
    display: block;
    border-right: 2px solid;
    font-size: 0.89em;
    color: #20386d;
}

.comptecontent .card .card-b .d-flex .cont:nth-child(2),
.comptecontent .card .card-b .d-flex .cont:nth-child(3) {
    border-right: 2px solid transparent;
}

/**********************************************ticket*************************************/

.ticket .card-header{
    background-color: #ed7227;
    padding: 0.5em;
}


.ticket .card-body .dspan span:nth-child(odd){
color: #20386d;
font-weight: bold;

}

.ticket .card-body  .dropdown-divider ,
.ticket .card-body button{
    
    border-color: #ed7227;
}
.ticket .card-body .dspan span:nth-child(even){
    color: #848585;
    font-weight: bold;
    
    }

    .ticket  button{
        background-color: #ed7227;
        color: #fff;
    }



.ticket .card-body h5{
    color: #ed7227;
    font-weight: bold   ;
}


    /* ***********animation keyframes************************************************************************/
    @keyframes transX {
        0% {
            /* transform: translateX(-100%); */
            /* opacity: 0;
            visibility: hidden; */
            /* transform: scale(0); */
        }
        100% {
            /* transform: translateX(0%); */
            opacity: 1;
            visibility: visible;
            margin-left: 0em;
            /* transform: scale(1); */
        }
    }
    @keyframes transs {
        0% {
            /* transform: translateX(-100%); */
            opacity: 0;
            visibility: hidden;
            transform: rotateX(45deg);
        }
        100% {
            /* transform: translateX(0%); */
            opacity: 1;
            visibility: visible;
            transform: rotateX(0deg);
        }
    }
}