/* ******************** * BASED COLOR * ******************** */

:root{ 
    --main-clr : #3b5998 ;
    --two-clr : #FFE9E5 ;
    --three-clr : #e4e9eb ;
    --four-clr : #171B2A ;
    --five-clr : #282B38 ;
    --six-clr : #707070 ;
    --blue-clr : #3b5998;
    --gray-light : #e6e6e6;
    --blue-light : #cfe2ff;
}
.hide-item{
    display: none;
}
.bg-main{
    background-color: var(--main-clr)  !important;
}
.bg-snd-clr{
    background-color: var(--two-clr)  !important;
}
.bg-blue-clr{
    background-color: var(--blue-clr)  !important;
}
.bg-blue-light-clr{
    background-color: var(--blue-light)  !important;
}
.bg-three-clr{
    background-color: var(--three-clr)  !important;
}
.bg-foot1{
    background-color: var(--four-clr)  !important;
}
.bg-foot2{
    background-color: var(--five-clr)  !important;
}
.bg-white-trans{
    background-color: rgba(0,0,0,0.1)  !important;
}
.bg-gray-light{
    background-color: var(--gray-light)  !important;
}


.text-blue-clr{
    color: var(--blue-clr)  !important;
}

.text-clr {
    color: var(--four-clr)  !important;
}
.marge-m-60{
    position: relative;
    top: -100px;
}
.property{
    position: relative;
    top: 10px ;
    left: 20px ;
}
.position{
    position: absolute;
}
.middle{
    position : relative;
    top : 300px
}
.scroller {
    height: 946px;
    overflow-y: scroll;
    scrollbar-width: thin;
  }
/* ******************** * BUTTON AND LINK * ******************** */
.btn-main{
    background-color: var(--main-clr)  !important;
    color: #e1e3e4   !important;
}
.btn-white{
    border: 1px solid var(--main-clr) !important;
    background-color:  white  !important;
    color: var(--main-clr) !important;
}
.btn-outline-main{
    text-decoration: none !important;
    color: var(--main-clr)  !important;
    border: 1px solid var(--main-clr) !important;
    background-color: transparent !important;
    transition: all 1s;
}
.btn-outline-main:hover{
    background-color: var(--main-clr)  !important;
    color: white  !important;
    transition: all 1s;
}

.link , .link-outline, .link-sml{
    cursor: pointer !important;
    text-decoration: none !important;
    color: var(--snd-clr) !important;
}
.link-sml{
    font-size: small !important;
}
.link-outline:hover{
    color : var(--main-clr) !important;
}




.bg-op-80{
    background-color: rgba(255, 255, 255, 0.404);
}
.main-bg{
    background-color: var(--main-clr);
}
.bg-snd-clr{
    background-color: var(--snd-clr);
}
.bg-transparent{
    background-color: transparent !important;
}
/* ******************** * DIFFERENT FONT COLOR * ******************** */
.main-color{
    color : var(--main-clr) !important;
}
.color-gray{
    color : #e1e3e4 !important;
}
.color-white{
    color : #ffffff !important;
}
.color-blue{
    color : var(--blue-clr) !important;
}
/* ******************** * TYPE OF TITLE * ******************** */

.title-xl{
    font-size: xx-large ;
    font-weight: bold;
}

/* ******************** * FONT SIZE * ******************** */
.fs-xs{
    font-size: small;
}
.fs-sml{
    font-size: medium;
}
.fs-md{
    font-size: large !important;
}
.fs-lg{
    font-size: x-large !important;
}
.fs-xl{
    font-size: xx-large;
}
.bold {
    font-weight: bolder !important ;
}
/* ******************** * CIRCLE * ******************** */
.circle{  
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.border-main{
    border: 1px solid var(--main-clr);
}
.border-btm-main{
    border-bottom: 6px solid var(--main-clr);
}
.border-btm-three{
    border-bottom: 6px solid var(--three-clr);
}
.border-left-main{
    border-left: 8px solid var(--main-clr);
}
.bouton{
    background-color: transparent;
    color: #707070;
    border: none;
    outline: none;
    width: 200px;
}
/* ********************* * SLIDE * ******************* */
.region-container{
    background-image: url('../img/home-top-img.jpg') !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}
.region-overlayer{
    position: relative;
    background-color: #1c2332ee !important;
    width: 100%;
}
.slides , .slide-fixed, .bg-img{
    width: 100% !important;
    height: 60vh !important;
    margin: 0 !important;
    background-image: url('../img/home-top-img.jpg') !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}
.slides-half-cover{
    position: relative;
    left: 0;
    width: 50%;
    height: 60vh !important;
    background-color: rgba(0, 0, 0, 0.7);
}
.slides{
    background-attachment: fixed !important;
}
.slide-fixed{
    height: 80vh !important;
    background-image: url('/img/stylish.jpg') !important;
    background-attachment: fixed !important;
}
.bg-img{
    height: 400px !important;
    background-image: url('/img/moon-slide-image.png') !important;
}
.canvas-bg{
    background-image: url('/img/grid.png') !important;
    background-size: cover;
    background-repeat: no-repeat;
}
.over-slide{
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    height: 90vh !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
}
.sidebar, .sub-sidebar{
    width: 120px !important;
    padding: 0px;
}
.panel{
    width: calc(100% - 120px) !important;
    padding: 0px;
}
.sidebar-trigger{
    display: none !important;
}

@media (max-width : 1020px ) {

    .hide{
        display: none !important;
    }
}

@media (max-width : 900px ) {

    .sidebar, .sub-sidebar{
        width: 100% !important;
    }

    .panel{
       width: 100% !important;
    }
    .sidebar-trigger{
       display: block !important;
    }
    .hidden{
        display: none;
    }
    .visible{
        display: flex !important;
        flex-direction: column !important;
    }
    .slides-half-cover{
      width: 100%;
    }
 } 

.fs-xs{
    font-size: small !important;
}
.cursor{
    cursor: pointer;
}
.color-dark{
    color: #585858 !important;
}
.modal-container{
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: rgba(219, 231, 243, 0.7);
    width: 100%;
    height: 100vh;
    z-index: 99999;
}
.img-slide{
    width: 100%;
    height: 320px;
}
.transition-2{
    transition: all 1s !important;
}

.navBar-outline{
    background-color: var(--blue-clr);
    transition: all 1s;
}
.inputs{
    border: 1px solid var(--blue-clr);
    outline: none;
    width: 100%;
    background-color: transparent !important;
}
.border-blue{
    border: 1px solid var(--blue-clr) !important;
}
.level{
    z-index: 1000 !important;
}
.sidebar-menu {
   text-decoration: none;
   transition: all 0.5s;
}
.sidebar-menu:hover {
    background-color: var(--three-clr);
    transition: all 0.5s;
}
.sidebar-menu-active{
    border-right: 2px solid var(--main-clr) !important;
}
.border-blue{
    border: 3px solid var(--blue-clr) !important;
}
.link-active{
    border-bottom: 2px solid var(--main-clr) !important;
}
.filter{
    width: 300px !important;
}
.contain{
    display: flex;
}
.frame{
    width : calc(100% - 300px);
    left : 300px;
}
.flex-fluid{
    display:flex;
    align-items : center;
}

@media (max-width : 720px ) {

    .contain{
       display: flex;
       flex-direction: column;
    }
    .filter{
       width: 100% !important;
    }
    .frame{
       width : 100%;
       left : 0px;
    }
    .flex-fluid{
       display: flex;
       flex-direction: column;
       align-items: start;
    }


}

.scroll{
  overflow-y: scroll !important;
  height : 80vh;
}
.scroll-md{
  overflow-y: scroll !important;
  height : 340px !important;
}
::-webkit-scrollbar {
  width: 0px;
}

.solde{
    width:220px !important;
}



.flex-1{
    flex: 2;
}
.flex-3{
    flex: 4;
}



.containes {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}
.column {
    flex: 1 1 ; /* 3 colonnes max avec l'espace (gap) */
    box-sizing: border-box;
    min-width: 250px; /* pour qu'une colonne ne devienne pas trop étroite */
    max-width: 300px;
}

@media (max-width: 900px) {
    .column {
        flex: 1 1; /* 2 colonnes en tablette */
    }
}

@media (max-width: 600px) {
    .column {
        flex: 1 1 100%; /* 1 colonne en mobile */
    }
    .flex-column-sm{
        flex-direction: column !important;
    }
}

.scale:hover{
   transform: scale(1.04) !important;
   transition: 0.5s;
   cursor: pointer;
}
.checkbox{
  width: 20px !important;
  height: 20px !important;
  cursor: pointer;
}
.checkbox:checked{
    accent-color: var(--blue-clr);
}

.width-140{
    width: 140px !important;
}
/* Leaflet map styles */
.leaflet-container {
  height: 600px;
  width: 100%;
}

.z-index-sm{
    z-index: 500 !important;
}

.z-index-md {
    z-index: 900 !important;
}