@import 'root-colors.css';

body {
    font-family: "Roboto", sans-serif;
}

a {
    text-decoration: none;

}

section {
    padding: 3rem 0;
    position: relative;
}

section:nth-child(2n) {
    background-color: #f6f6f6;
}
.navbar.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    animation: slideDown 0.3s ease-out;
}

.navbar.fixed  .fixed-nav-center{
  margin: auto;
}


/*.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}*/

.card-number {


    background-color: #fff;
    color: #000;
    border:1px solid var(--color1);
    border-radius: 6px;
    padding: 4px 0;
    position: absolute;
    z-index: 9999;
    min-width: 150px;



}

.card-number::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid ;
    border-color:   var(--color1) transparent transparent transparent;
}


/* Animation pour l'apparition de la navbar */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}


body.has-fixed-nav {
    padding-top: 60px;
}
.titre-section {
    margin-bottom: 30px
}

.titre-section .title {
    font-size: 30px;
    color: var(--color1);
    font-weight: 500;

}
.titre-section span {
   color: var(--color2) ;
}

.titre-section .description-title {
    font-size: 16px;
    color: #595564;
    font-weight: 400;

}
.header-sunline .dropdown-item:focus, .dropdown-item:hover {
    color: var(--color2);

}

ul {
    margin-bottom: 0
}

/*header*/
.navbar-nav .nav-item,
a.nav-link.active,.navbar-expand-lg .navbar-nav .nav-link:hover {
    color: var(--color1) ;
}

.circle-reseaux {
    padding: 4px 4px;
}

.circle-reseaux i{
    font-size:18px
}





.header-sunline  a , .log-sunline  {
    font-size: 13px;
    color: #333333;
    font-weight: 500;
    text-decoration: none;
    font-family: "Roboto", sans-serif;

}

.goog-te-gadget-simple{
    border: none !important;
}
.goog-te-gadget-simple span {

    color: #333333 !important;

    font-family: "Roboto", sans-serif;
    border-left: none !important;

}
.facebook i {
    color: #3c5a98;

}
.hr-header{

    border-color: #212529;
}

.instagram i {
    color: deeppink;
}


.youtube i {
    color: #e52d27;
}


.twitter i {
    color: #5ea8dd;
}


 .brand-logo img {
    width: 220px;
    height: auto;
}

.dropdown-toggle::after {
    color: var(--color1);
}

.rounded-circle {
    border: 1px solid var(--color1);
    border-radius: 50%;
    padding: 5px
}



.white-space-nowrap{
    white-space: nowrap;
}
/**/
.hero, .banner {
    position: relative
}


/*card**/


.card {
    border-radius: 6px;

    border-color: transparent;
    background-color: transparent;
}

/*.card:hover, .card:focus {
    border: 2px solid #d8c303
}*/

.card p {
    margin-bottom: 0
}

h5.card-title {
    font-size: 18px;
    margin-bottom: 0;
    color: #000000;
    font-weight: 500;

}

.card-rating .fa-star {
    color: #fa9e0d;
    font-size: 10px
}

.card-ville {
    font-size: 14px;

    color: #595564;
    font-weight: 400;

}

span.des {
    font-size: 12px;

    color: #fff;
    font-weight: 400;


}

.border-dashed {
    border-left: 1px dashed #888
}

p.code {
    font-size: 12px;

    color: #595564;
    font-weight: 400;


}

h3.price-card {
    font-size: 20px;
    margin-bottom: 0;
    color: #fff;
    font-weight: 700;

}

.btn-card-details {
    padding: 6px;
    border-radius: 6px;
    background-color: var(--color2);
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 400;

}
.btn-link-news{
    background-color: var(--color2);
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    padding-right: 8px;
    padding-left: 7px;
    border-radius: 6px;
    box-shadow: none;
}
.btn-link-news:hover{
    background-color: white;
    color:var(--color2);
    border: 1px solid var(--color2);
}
.item:hover .btn-card-details{
    background-color: white;
    color:var(--color2);
    border: 1px solid var(--color2);

}


.card-img {
    position: relative;
    overflow: hidden;
}

.card-img, .card-img-top {
    border-radius: 10px;
}

.item:hover .card-img img {
    transform: scale(1.05) ;
    transition: all.3s;

}

.card-img:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    background: linear-gradient(to bottom, rgb(10 87 198 / 95%) 10%, transparent 50%, transparent 30%, rgb(10 87 198 / 90%) 100%);
    z-index: 1;
    border-radius: 10px;
}


.card-top-overlay {
    padding: 1rem;
    position: absolute;
    right: 0;
    left: auto;
    top: auto;
    z-index: 555
}

.card-img-overlay {

    left: auto;
    top: auto;
    z-index: 555
}


.img-categorie {
    width: auto;
    height: 80px;
    object-fit: cover;
    border-radius: 6px
}

/*.media{
    max-width: 200px;
}*/


/*height hotels*/
.img-hotel {
    height: 240px;
    object-fit: cover;
}

.img-circuits{
    height: 300px;
    object-fit: cover;
}
/*themehotels*/
.themehotel .nav-pills .nav-link {
    border-radius: 12px;
    background-color: #ffffff;
    font-size: 16px;
    border: 1px solid #f6f6f6;
    color: #888888;
    font-weight: 400;
    padding: 8px;
    white-space: nowrap;
}
.themehotel .nav-pills .nav-link:hover,.themehotel .nav-pills .nav-link:focus,
.themehotel .nav-pills .nav-link.active {
    border: 1px solid var(--color1) ;
}
.img-voyage{
    height:350px;
    object-fit: cover;
}
.card-img-overlay.voyage {
    bottom: 5px;
    right: 5px;
    left: 5px;
    top: auto;
    z-index: 555;

}

.card-img-overlay.voyage p.des, .card-img-overlay.voyage h3.price-card, .card-img-overlay.voyage .code {
    color: #fff
}


.circuits .card-img-overlay-top, .voyage .card-img-overlay-top, .card-img-overlay-top {
    position: absolute;
    top: 16px;
    left: 10px;
    z-index: 555;
}

.circuits .card-img-overlay-top h5.card-title, .circuits .card-img-overlay-top p.card-text {
    color: #fff
}

.circuits{
    background: url("../images/circuits.png")no-repeat center center;
    background-size: auto;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
}

.voyage{
    background: url("../images/voyage-bg.png")no-repeat center center;
    background-size: auto;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;

}


.box {
    text-align: center;
    margin: 30px 0;
    padding: 25px
}

.desc-icon {
    margin-top: 20px;
    font-size: 16px;

    color: #595564;
    font-weight: 400;

}


/**footer**/

.bg-footer-sunline{

padding: 40px 0 10px 0 ;
    background-repeat: repeat;
    background-size: cover;

}

.box-footer .title-box{
    color: #fff;
    font-weight: 600;
    font-size: 18px;
}
.box-footer .list-unstyled,.contenu-box.faq_accordions{
    margin:20px 0

}

.box-footer .list-unstyled li a,.box-footer .list-unstyled li{
    color:#fff;
    font-weight:500;
    margin-bottom:10px
}

/* Style pour les liens du footer */
.footer-sunline .box-footer .contact-sunline {
    position: relative;
    display: inline-block;
    padding-bottom: 3px;
    transition: color 0.7s ease;
}

/* Effet de soulignement */
.footer-sunline .box-footer  .contact-sunline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color2);
    transition: width 0.3s ease;
}

/* Animation au survol */
.footer-sunline .box-footer  .contact-sunline:hover::after,
.footer-sunline .box-footer  .contact-sunline:focus::after {
    width: 100%;
}
.reseaux-sociaux i{
    font-size:20px
}
.copyright-text  {
    color:#83818c;
}

.copyright-text a {
    color:#83818c;
}
.rounded-circle-footer {
    border: 1px solid #fff;
    border-radius: 50%;
    padding: 8px;
}
/*--------- FAQ --------------*/

/* Custom style */
.accordion-button::before {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
    transform: scale(0.7) !important;
}

.faq_accordions .accordion-button:not(.collapsed)::before {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
}

.faq_accordions .accordion-button {
    position: relative;
    display: flex;
    align-items: center;

    padding: 1rem 1rem;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    background-color: #fff;
    border: 0;
    border-radius: 0;

    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease;
    width: fit-content;

    gap: 5px;
    flex-direction: row-reverse;

}


.faq_accordions .accordion-button::after {
    flex-shrink: 0;
    /* width: 1rem;
     height: 1rem;*/
    margin-left: auto;
    content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
    filter: invert(99%) sepia(99%) saturate(2%) hue-rotate(20deg) brightness(104%) contrast(100%);
}



.banner  .owl-nav{
    margin-top: 0;
    position: absolute;
    width: 100%;
    display: flex
;
    justify-content: space-between;
    align-items: center;
    top: 50%;
    padding: 0 10px;
}


.owl-nav{
    margin-top: 30px;
}
.banner .owl-carousel .owl-dots {
    text-align: center;
    margin-top: -40px;
    z-index: 555555;
    position: relative;
}

.owl-dots button.owl-dot.active {

    background-color: transparent;
    border: 1px solid #9BC23C;
    border-radius: 50%
}

.owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px;
    background: #D6D6D6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    border-radius: 50%
}

.owl-dots .owl-dot.active span {
    background: #9BC23C;
}
.owl-carousel .owl-nav.disabled{
    display: flex !important;
    justify-content: center;
    gap: 10px;
}
.owl-nav {
    display: flex;
    justify-content: center;
    gap: 10px;

}

.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
    width: 40px;
    height: 40px;
    border-radius:4px
}

.owl-prev {

    border: 1px solid #fa9e0d !important;
    color: #fa9e0d !important;
}
.owl-prev:hover{
    background-color: #fa9e0d !important;
    color: white !important;
}

.owl-next {
    border: 1px solid #888 !important;
    color: #888

}
.owl-next:hover  {
    border: 1px solid #888 !important;
    background-color: #888 !important;
    color: white !important;

}

.owl-nav button {
    position: relative;
    top: 50%;
    transform: translateY(-50%);

}


.owl-nav button:focus {
    outline: none;
}
.circuits .owl-nav {
    display: flex;
    justify-content: start;
}

.bg-filtre {
    padding: 20px;
    border-radius: 14px;
    background-color: rgba(40, 89, 164, 0.3);
    position: relative;
    margin-top: -60px;
    z-index: 55;
}
/*.bg-filtre .form-control:hover , .bg-filtre .form-control:focus{
    border: 1px solid #f36800;
}*/


.bg-filtre .form-control {
    height: 70px;
    padding: 30px 8px 8px 20px;
  }
.bg-filtre .depart , .bg-filtre .chambre{
    padding: 30px 8px 8px 50px;
}
.input-calendar label , .input-users label{
    padding-left: 50px;
}

.form-control:focus  {
    box-shadow: none !important;

}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: var(--color2) !important;



}
.daterangepicker .drp-buttons .btn-primary {
    background-color:var(--color1) ;
    color: white;

}

.daterangepicker .drp-buttons .btn-primary:hover{
    background-color: white;
    color:var(--color1);
    border: 1px solid var(--color1);
}
.bg-filtre .form-control[readonly] {
    background-color: #fff;
}

.bg-filtre label {
    position: absolute;

    font-size: 14px;
    color: #636f7b;
    font-weight: 400;

    padding-top: 10px

}

.fa-concierge-bell{
    color: var(--color1) ;
}

/* block HTML  */
.card-why-us img {

    filter:
            brightness(0)
            saturate(100%)
            invert(27%)
            sepia(90%)
            saturate(1500%)
            hue-rotate(195deg);

}
.why-us-sunline .card-why-us h5 {
    font-size: 16px;
    color: #595564;
    font-weight: 400;
}
.card-why-us:hover{
    transform: scale(1.09);
    transition: all .3s;
    color: var(--color1) ;
}

.card-why-us:hover h5{

    color: var(--color1);
}
@media (min-width: 992px) and  (max-width: 1200px) {
    .icon-loop {
        display: none;
    }
}



#check_in {
    border-radius: 4px 0 0 4px;

}

#check_out {
    border-radius: 0 4px 4px 0;
}
.input-icon::before {

    text-align: center;
    position: absolute;
    margin-top: 16px;
    margin-left: 10px;
    height: 40px;
    width: 40px;
    background-repeat: no-repeat;

}

.input-destionation::before {

    content: "";
    background-image: url(../images/mp.svg);
}
.input-calendar::before {

    content: "";
    background-image: url(../images/calendar.svg);
}
.input-users::before {

    content: "";
    background-image: url(../images/pers.svg);
}


.input-destionation label {
    padding-left: 40px;
}

.bg-filtre div[class^="col-"] {
    padding-left: 5px;
    padding-right: 5px;
}

.form-control.bg-input.typeahead.destination {
    padding-left: 40px;
}
.btn.btn-link {

    background-color: var(--color2);
    font-size: 16px;
    text-decoration: none;
    color: #ffffff;
    border-radius: 10px;
    font-weight: 400;
    box-shadow: none;
    width: fit-content;
    overflow: hidden;
    position: relative;
    border: none;
    text-align: center;
}


.btn-filtre {

    border-radius: 5px;
    background-color: var(--color2);
    height: 70px;
    font-size: 18px;
    color: #ffffff;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
    line-height: 60px;
    overflow: hidden;
    position: relative;
    border: none;

}

.btn-filtre::before , .btn.btn-link::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    box-sizing: border-box;
    transition: all 0.8s ease;
}


.btn-filtre:hover , .btn.btn-link:hover {
    background-color: #fff;
    color: var(--color2) ;
    transform: translateY(-2px);
}

.btn-filtre:hover::before , .btn.btn-link:hover::before {
    border-color: var(--color2) ;
    border-radius: 6px;
    stroke-dasharray: 15, 310;
    stroke-dashoffset: 48;
    animation: borderAnimation 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes borderAnimation {
    0% {
        clip-path: inset(0 0 98% 0);
    }
    25% {
        clip-path: inset(0 98% 0 0);
    }
    50% {
        clip-path: inset(98% 0 0 0);
    }
    75% {
        clip-path: inset(0 0 0 98%);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

select {
    border: 1px solid #ccc;
    color: #959595;
    font-size: 14px;
    text-transform: none;
    height: 42px;
    background-color: #fff;
    font-weight: 400;
    width: 100%;
    border-radius: 4px
}

.btn-orange {
    background-color: var(--color2) ;
    color:#fff
}

.btn-orange:hover{
    background-color: white;
    color:var(--color2) ;
    border: 1px solid var(--color2);
}
.btn-secondary {
    color: var(--color1) ;
    background-color: white;
    border-color: var(--color1) ;
}
.btn-secondary:hover{
    color: white;
    background-color: var(--color1) ;

}
.reseaux-sociaux li:hover , .reseaux-sociaux a:hover {
    transform: scale(1.2);
    transition: all .3s;
}
.footer-sunline .reseaux-sociaux i {
    color: white;
}


.fa-trash {
    color: red
}


.accordion-collapse ul li a {
    font-size: 14px;
    margin-left: 26px;
    margin-bottom: 15px
}


/***/

#preloader {
    position: fixed;
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    z-index: 99999999;


}

.loader {

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

.loader img {
    width: 150px;
}

.dropdown-header {

    color: var(--color1) ;

}

.footer-sunline .map-footer{
    border-radius:10px
}

.footer-sunline .widget-sunline{
    border-radius: 10px;
}
.footer-sunline .form-control{
    border-radius: 10px;

}

.dropdown-menu {
    z-index: 11111;
}

.dropdown-item:active , .dropdown-item:hover{
    background-color: rgba(0, 174, 239, 0.12) !important;
}



@media  (max-width: 1024px){


    .footer-sunline .box-footer .list-unstyled li a, .box-footer .list-unstyled li  {
        font-size: 14px;
    }




}



@media (max-width: 991.9px) {

.list-inline-item a , .account-sunline {
    color: #333333;
    font-size: 14px;
    font-weight: 500;
}
    .bg-filtre {

        margin-top: 11px;
        border: 1px solid #ced4da;
        padding: 12px 12px 0 12px;
        background-color: white;

    }
    .banner  .owl-nav{
        margin-top: 25px;
    }

    .hero {

        padding-bottom: 0;
    }

    #check_in {
        border-radius: 4px;
    }

    #check_out {
        border-radius: 4px;
    }
    .bg-filtre div[class^="col-"]{
        padding: 0;

    }
    .input-sunline{
        border-bottom: 1px solid #ced4da;
    }
    .form-control{
        border: none;
    }
    .btn-filtre{
        border-top-right-radius: 0;
        border-top-left-radius: 0;
    }
    .se-connecter{
        display: ruby !important;
    }
    .circuits .owl-nav {
        justify-content: center;
    }
    .top-bar {
        border-bottom: 1px solid #dee2e6;
        padding-top: 4px;

    }
}

@media (max-width: 576px){
    .card-why-us{
        width: 100% !important;
    }
    .bg-footer-sunline{
        padding: 10px 0 10px 0;
    }
.copyright-text{
    font-size: 14px;
}

    .banner .owl-nav {
        display: none;
    }

}

.promohotels .card-img:before , .themehotel .card-img:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 37%;
    opacity: 0.6;
    background: linear-gradient(to bottom, rgb(10 87 198 / 95%) 10%, transparent 100%, transparent 30%, rgb(10 87 198 / 90%) 100%);
    z-index: 1;
    border-radius: 10px;
}

.goog-te-gadget img {
    display: none;
}


#google_translate_element .goog-te-gadget-simple span[aria-hidden="true"] {
    color: #0A57C6 !important;
    font-size: 9px;
    line-height: 1;
    padding-left: 4px;
}

.phone-number {
    display: inline;
}
.tel-sunline:hover #collapsephone {
    display: block;
}

@media (max-width: 1024px) {
    .phone-number {
        display: none;
    }
}

.tooltip-inner {
    background-color: #fff;
    color: var(--color1);
    border: 1px solid var(--color1);
    font-weight: 500;
}