@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700;800;900&display=swap");

:root {
    --red: #ff3838;
    --gray: #3b3b3b;
    --blue: #1494a9;
    --white: #ffffff;
    --chalk: #f5f5f5;
    --green: #11b76b;
    --purple: #b12fad;
    --orange: #e86121;
    --yellow: #ffab10;
    --text: #555555;
    --dark: #0d0633;
    --black: #000;
    --border: #e8e8e8;
    --heading: #232d3b;
    --primary: #0044bb;
    --primary-light: #75a7ff;
    --primary-hover: #0022aa;
    --view: #8edb04;
    --click: #01cbd5;
    --rating: #e8ce00;
    --sale: #dc3545;
    --rent: #03a70c;
    --booking: #7209af;
    --facebook: #3b5998;
    --linkedin: #0e76a8;
    --twitter: #00acee;
    --primary-bshadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
    --primary-tshadow: 2px 3px 8px rgba(0, 0, 0, 0.1)
}

* {
    margin: 0px;
    padding: 0px;
    outline: 0px
} 

a {
    text-decoration: none;
    display: inline-block
}

a:hover {
    text-decoration: none;
    color: var(--yellow);
}

ul,
ol {
    list-style: none
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
span,
label {
    margin-bottom: 0px
}

body {
    color: var(--dark);
    font-size: 16px;
    font-weight: 400;
    font-family: 'Heebo', sans-serif;
    line-height: 26px
}
/* header start */
.headerInfo{
    background-color: var(--gray);
    color: var(--white);
    text-align: center;
    height: 50px;
}

.headerInfoAd{
    background-color: var(--gray);
    color: var(--white);
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.headerInfoAdMobil{
    background-color: var(--gray);
    color: var(--white);
    height: 50px;
    justify-content: center;
    display: flex;
    flex-direction: row;
}

.headerInfoAdMobil p{
    margin-top: 12px;
}

.headerInfo span{
    position: relative;
    top: 10px;
}

.headerInfoAd p{
    position: relative;
    top: 10px;
}

.headerInfoAd span{
    position: relative;
    top: 10px;
}

.headerInfo .headerPhone{
    margin-left: 50px;
}

.headerInfoAd .headerPhoneAd{
    margin-left: 20px;
}

.headBntUser{
    display: flex;
    flex-direction: row;
}

.headerLogo{
    background-color: var(--white);
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;

}

.headerBanner{
   background-image: url('../images/counter-bg.jpg');
   height: 400px;
   background-position: center;
    background-size: cover;
   color: var(--white);
}

.headerBackg{
    background-color: #232d3bc1;
    height: 400px;
}

.headerBanner .txtBanner{
    position: relative;
    top: 150px;
    text-align: center;
    font-size: 75px;
}

.headerBanner p{
    position: absolute;
    margin-top: 150px;
    margin-left: 13%;
}

.headerBanner .txtL{
    color: var(--yellow);
}

.btnLink{
    color: var(--yellow);
    margin-right: 10px;
}
/* Header end */

/*--- Footer start ---*/

.footerBanner{
    background-color: rgb(0, 0, 0);
    background-image: url('../images/carte.png');
   height: 400px;
   background-position: center;
    background-size: cover;
   color: var(--white);
}

.footerBackg{
    background-color: #000000c1;
    height: 400px;
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.footerInfos{
    display: flex;
    flex-wrap: wrap;
}

.footerInfos p{
    color: rgb(161, 160, 160);
}

.footerZone1 {
    flex: 70%;
  }
  
  .footerZone2 {
    flex: 30%;
  }

.footerCopyrigth{
    color: rgb(161, 160, 160);
    margin-top: 100px;
}

/* Footer end */


/* Card formation start */
.cardFull{
    margin-top: 50px;
    margin-bottom: 50px;
}

.imgCard{
    /* background-image: url('../images/base.png'); */
   height: 300px;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   border-radius: 10px;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.442);
   margin-top: 20px;
}

.infoCard{
    /* background-image: url('../images/base.png'); */
    background-color: #fff;
   height: 300px;
   border-radius: 10px;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.442);
   padding: 25px;
   margin-top: 20px;
}

.flexCard2{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.infoPrice{
    color: var(--rating);
    font-weight: bold;
    font-size: 25px;
}

.txt1{
    background-color: var(--sale);
    color: var(--white);
    width: 150px;
    text-align: center;
    padding: 8px;
    border-radius: 15px;
    margin-bottom: 20px;
}

.txt2{
    margin-bottom: 10px;
}

.txt3{
    margin-bottom: 50px;
}

.section2{
    margin-top: 45px;
}

.selectMode{
    width: 300px;
}

.widthBtn{
    width: 100%;
    margin-top: 20px;
    color: white;
}

.imgBorderVisa{
    /* border: #000 1px solid;
    padding: 10px;
    border-radius: 10px; */
    height: 30px;
}

.imgBorderMaster{
    /* border: #000 1px solid;
    padding: 10px;
    border-radius: 10px; */
    height: 40px;
    margin-left: 20px;
}

.inputTop{
    margin-top: 10px;
}

.inputInfo{
    margin-top: 27px;
}

.flexIcon{
    display: flex;
    
}

.icon1{
    width: 30px;
    height: 30px;
    background-color: var(--yellow);
    border-radius: 100%;
}

.icon2{
    width: 30px;
    height: 30px;
    background-color: var(--yellow);
    margin-left: 5px;
    border-radius: 100%;
}

.icon3{
    width: 30px;
    height: 30px;
    background-color: var(--yellow);
    margin-left: 5px;
    border-radius: 100%;
}

.iconSvg{
    position: relative;
    top: 5px;
    left: 6px;
}

.iconSvg2{
    position: relative;
    top: 3px;
    left: 5px;
}

.iconSvg3{
    position: relative;
    top: 2px;
    left: 6px;
}

.filtre{
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
    margin-bottom: 20px;
}

.selectZone1{
    display: flex;
}

.btnSlect{
    height: 40px;
    margin-left: 20px;
}

.formatFile{
    margin-bottom: 50px;
}

.btnXls{
    margin-left: 20px;
}

.filtreZone1{
    flex: 50%;
}

.filtreZone2{
    flex: 50%;
    display: flex;
    flex-direction: row;
}

.btnSlect2{
    height: 40px;
    margin-top: 25px;
    margin-left: 20px;
}

.dFin{
    margin-left: 10px;
}
/* Card formation end */