html {
    scroll-behavior: smooth;
}
body{
    font-family: "MontserratRegular";
    font-size: 21.28px;
    background-color: #f5f4f2;
    /*min-height: 1000px !important;*/

}
button:disabled,
button[disabled]{
    cursor: not-allowed !important;
    background-color: #9e9e9eb4 !important;
    border-color: #9e9e9eb4 !important;
    color: white !important;
}

* {
    scrollbar-color: #c88a0f #f4f4f4;
    scrollbar-width: thin;
    /* user-select: none;
    cursor: pointer; */
}
*:focus{
  outline: none;
  border: 0;
}
*::-webkit-scrollbar {
  height: 15px;
  width: 15px;
  background-color:#f4f4f4;
}
*::-webkit-scrollbar-thumb {
  background-color: #c88a0f;
  border-radius: 6px;
}
*::-webkit-scrollbar-track {
  box-shadow: inset 0 0 1px rgba(#c88a0f, 0.3);
  background-color:#f4f4f4;
}

.bg-carousel{
    margin-top: 45px;
}

header.navheader{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}





.container, .container-fluid{
    max-width: 1440px;
    /*min-width: 360px;*/
    margin: 0 auto;
}

.container-layout{
    max-width: 1440px;
    /*min-width: 360px;*/
    margin: 0 auto !important;
}

/*.container, .container-fluide{*/
    /*max-width: 1200px;*/
    /*margin: 0 auto;*/
/*}*/

.fs-26{
    font-size: 26px;
}
.fs-20{
    font-size: 20px;
}
.fs-40{
    font-size: 40px;
    letter-spacing: -1px;
}
.fs-50{
    font-size: 50px;
}
.fs-34{
    font-size: 34px;
}
.fs-14{
    font-size: 14px;
}
.fs-12{
    font-size: 12px;
}
.fs-10{
    font-size: 10px;
}
.fs-30{
    font-size: 30px;
}

.empty-col-top{
    height: 60px;
    background-color: #2e2e2c;
}

.bg-color {
    background-color: #2e2e2c;
}
.yellow-color {
    background-color: #c98c0f;
}
.gris-color {
    background-color: #f5f4f2;
    position: relative;
}
.bg-color-left{
    background-color: #c88a0f;
}
.section-2-top{
    height: 40px;
    background-color: #f5f4f2;
}
.well{
    background-color: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    /*margin: 8px;*/
}



/*.bg-logo{*/
/*background-image: url('../img/bg-logo.PNG');*/
/*background-repeat:no-repeat;*/
/*!*background-size: cover;*!*/
/*width:100%;*/

/*}*/
/*oumayma*/
.bg-logo{
    background-image: url('../img/bg-logo.PNG');
    background-repeat:no-repeat;
    background-size: contain;
    width:100%;
    /*padding: 20px 100px;*/
}

.corr-padding{
    padding: 0px 0px 0px 0px;
}
.vertical-center{
    height: 100px;
}
.input-radius input{
    border-radius: 1.5rem;
}
.btn-radius{
    border-radius: 1.5rem;
    float: right;
}

.fixe-h{
    min-height: 500px;
}
.marge-btn{
    margin-top: 8%;
}
.marge-div-s5{
    margin-top: 0px;
}
.marge-section5{
    margin-left: 2%;
}
/*.h-0{*/
/*height: 0px;*/
/*}*/

.bg-input-clr{
    background-color: #535250;
    border-color: #535250;
}

.textarea-input{

    border-radius: 15px;
}

.logo-slider img{
    width: 150px;
}

/*********************************************************************************************/
/************************************ MONTSERRAT FONT ****************************************/
/*********************************************************************************************/

.font-MontserratBlack{
    font-family: "MontserratBlack";
}
@font-face {
    font-family: "MontserratBlack";
    src: url("../fonts/Montserrat-Font/Montserrat-Black.ttf") format("opentype");
}

.font-MontserratBold{
    font-family: "MontserratBold";
}
@font-face {
    font-family: "MontserratBold";
    src: url("../fonts/Montserrat-Font/Montserrat-Bold.ttf") format("opentype");
}

.font-MontserratExtraBold{
    font-family: "MontserratExtraBold";
}
@font-face {
    font-family: "MontserratExtraBold";
    src: url("../fonts/Montserrat-Font/Montserrat-ExtraBold.ttf") format("opentype");
}

.font-MontserratLight{
    font-family: "MontserratLight";
}
@font-face {
    font-family: "MontserratLight";
    src: url("../fonts/Montserrat-Font/Montserrat-Light.ttf") format("opentype");
}

.font-MontserratMedium{
    font-family: "MontserratMedium";
}
@font-face {
    font-family: "MontserratMedium";
    src: url("../fonts/Montserrat-Font/Montserrat-Medium.ttf") format("opentype");
}

.font-MontserratRegular{
    font-family: "MontserratRegular";
}
@font-face {
    font-family: "MontserratRegular";
    src: url("../fonts/Montserrat-Font/Montserrat-Regular.ttf") format("opentype");
}

.font-MontserratThin{
    font-family: "MontserratThin";
}
@font-face {
    font-family: "MontserratThin";
    src: url("../fonts/Montserrat-Font/Montserrat-Thin.ttf") format("opentype");
}
/*******************************************************************************************************/
/******************************************* HEADER ****************************************************/
/*******************************************************************************************************/

header {
    height: 50px;
    font-size: 12px;
    letter-spacing: 1.2px;
}

.navbar-toggler{
    border: 0!important;
}

.nav-link{
    padding: 0 !important;
}
.underline-item a{
    border-bottom: 1px solid;
    padding: 0;

}

.menu {
        padding: 0 1.337em;
    }

    .menu ul li {
        padding: 0px 1.337em!important;
    }

.authentification-menu{
    width: 20%;
}

.authentification-menu ul{
    width: 100%;
    margin: 0 auto;
}

.authentification-menu ul.navbar-nav li:nth-child(2) a{
    letter-spacing: 0px;
}
.right-menu li:nth-child(1) a{
    line-height: 24px;
    font-size: 10px;
    letter-spacing: 1px;
}

.right-menu li:nth-child(2) {
    position: relative;
}

.right-menu li:nth-child(2) hr{
    background-color: #fff;
    position: absolute;
    top: 13px;
    left: 8px;
    width: 75px;
}

.lang-selector{
    height: 100%;
    background-color: transparent !important;
    border: 0px!important;
    color: #fff;
    text-transform: capitalize;
    margin: auto;
    padding: 0!important;
    font-size: 12px;
}

.lang-selector opxion{
    height: 100%;
    background-color: rgba(200, 138, 15, 0.9);
    color: #fff;
}

.lang-menu{
    padding: 5px 2px;
    min-width: 55px;
}

.lang-menu a{
    padding: 0;
    width: 50px;
}

.dropdown-menu{
    left: -33px !important;
    font-family: 'MontserratRegular';
    font-size: 10px;
    letter-spacing: 4px;
}
/*******************************************************************************************************/
/******************************************* SLIDER ****************************************************/
/*******************************************************************************************************/

.my-slider{
    position: absolute;
    top: 48.23%;
}

.marge-slider{
    padding-bottom: 16%;
}

.slider-message{
    width: 100%;
    margin: auto;
    font-size: 45px;
    text-align: center;
    letter-spacing: 4.5px;
}

.bg-img{
    background-image: url('../img/slider-1.png');
    background-size: cover;
    text-align: center;
    height: 100vh;
    position: relative;
}
.bg-img1{
    background-image: url('../img/slider-img1.png');
    background-size: cover;
    text-align: center;
    height: 100vh;
    position: relative;
}
.bg-img2{
    background-image: url('../img/slider-img2.png');
    background-size: cover;
    text-align: center;
    height: 100vh;
    position: relative;
}
.bg-img3{
    background-image: url('../img/slider-img3.png');
    background-size: cover;
    text-align: center;
    height: 100vh;
    position: relative;
}



.content{

    background-color: rgba(0,0,0,0.34);
    height: 100%;
}



.logo-slider {
    width: 100%;
    max-width: 2880px;
    position: absolute;
    top: 135px;
    /*left: 45%;*/
    text-align: center;
}

.marge-slider h1{
    padding-top: 30px;
}




/*******************************************************************************************************/
/******************************************* SECTION 1 *************************************************/
/*******************************************************************************************************/



.img-float{
    width: 39%;
    z-index: 1;
    position: relative;
    top: 100px;
    left: 26.63%;
}

.marge-section1{
    padding: 0% 20% 0% 20%;
    margin-right: 0;
    margin-left: 0;
}

.section1-text{
    font-size: 36px;
    line-height: 56px;
    /*padding-top: 125px;*/
    width: 60.03%;
}



/*******************************************************************************************************/
/******************************************* SECTION 2 *************************************************/
/*******************************************************************************************************/

.yellow-img{
    background-image: url('../img/bg-s3.PNG');
    background-size: cover;
}

.section2-yellow-part{
    padding: 100px;
}

/*.marge-section2{*/
    /*padding: 230px 0 0 0;*/
/*}*/

.marge-img img{
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.5);
}

.section2-sub-title-1, .section2-sub-title-2{
    font-size: 30px;
    margin: 110px 0 55px 0;
}
.section2-sub-title-1{
    /*margin-top: 130px;*/
}

ul.section2-right-list, ul.section2-left-list{
    /*width: 100%;*/
    font-size: 16px;

    /*margin-left: 7%;*/
}
ul.section2-right-list{
    /*margin-bottom: 170px;*/
}

ul.section2-right-list li,ul.section2-left-list li{
    /*padding-top: 45px;*/
}

ul.section2-right-list li:nth-child(1), ul.section2-left-list li:nth-child(1){
    /*padding-top: 0px;*/
}

.section-2-title1{
    font-size: 50px;
    /*width: 58%;*/
}

.section2-sub-title-1, .section2-sub-title-2{
    /*font-size: 15px;*/
    /*margin: 263px 0 110px 0;*/
}

/*******************************************************************************************************/
/******************************************* SECTION 3 *************************************************/
/*******************************************************************************************************/

#section3{
    padding: 50px 200px;
}

#section3 p{
    font-size: 14px;
    line-height: 20px;
    width: 100%;
    text-align: justify;
}

.section3-title{
    font-size: 50px;
    position: relative;
    top: 70%;
    /*right: 30%;*/
    z-index: 1;
    text-align: center;
}

.marge-section3{


    padding-top:  7%;
}
.marge-section3-right{

    padding-left: 6.94%;
    padding-right: 5.55%;
}
.marge-section3-left{

    padding-right: 6.94%;
    padding-left: 5.55%;
}

.right-title{
    margin-right: 13.88%;
    /* text-align: right; */
}
.left-title{
    margin-left: 34.88%;
    /* text-align: left; */
}

.fonction_logo{
    width:150px;
    position: absolute;
    top: 18%;
    left:25%;
}

/*******************************************************************************************************/
/******************************************* SECTION 4 ********************************************/
/*******************************************************************************************************/

.bg-carousel{
    background-image: url('../img/bg-carousel.PNG');
    background-size: cover;
    margin-top: -60px;
}

.marge-section4{
    padding: 4% 10% 7% 10%;
}


/*******************************************************************************************************/
/******************************************* SECTION 5 Tarifs *******************************************/
/*******************************************************************************************************/

.sup{
    position: absolute;
    top: 52px;
    left: 67%;
}
.tarifs-section{
    margin: 0 200px;
}

.tarifs-title{
    /*padding: 139px 0 149px 0;*/
    font-size: 50px;
}

.square-white{
    margin-top: 200px;
}

.tarif-lisence{
    /*display: -webkit-box;*/
    /*display: -moz-box;*/
    /*display: -ms-flexbox;*/
    /*display: -webkit-flex;*/
    /*display: flex;*/
    /*flex-direction: column;*/
    /*-webkit-flex-direction: column;*/
    /*justify-content: space-around;*/
    /*-webkit-justify-content: space-around;*/
}

.tarifs-packs{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    justify-content: space-around;
    -webkit-justify-content: space-around;
}

.card-content{
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    flex-wrap: wrap;
}

.moz-card-content{
    height: 100%;
    display: -webkit-box;
    flex-direction: column;
    -webkit-flex-direction: column;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    flex-wrap: wrap;
}
.edge-card-content{
    height: 100%;
    display: -ms-flexbox;
    flex-direction: column;
    -webkit-flex-direction: column;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    flex-wrap: wrap;
}

.pack-offre{
    width: 30%;
}

div.card{
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}

.btn-commander{
    border: 1px solid;
    background-color: #1d2124;
    border-color: #171a1d;
    color: #fff;
    padding: 16px 20px;
    font-size: 13px;
    letter-spacing: 1.3px;
}

.pack {
    margin: 0px 0 30px;
    padding: 0px 0 20px;
}

.commander-btn-section{
    padding-top: 50px;
}

/*******************************************************************************************************/
/******************************************* SECTION 6 **************************************************/
/*******************************************************************************************************/


.gris-img{
    background-image: url('../img/img-section6.png');
    background-size: cover;
}

.section-6{
    /*height: 300px;*/
    width:100%;
    padding: 285px 0 300px 0;
}

.marge-section6{
    padding: 15% 7% 7% 7%;
}

/*******************************************************************************************************/
/******************************************* Nous contacter ****************************************************/
/*******************************************************************************************************/

.input-radius{
    padding: 0 0;
}

.contacts-title {
    font-size: 50px;
}

.contacts-info{
    padding: 200px 200px 200px 200px ;
}
.contacts-info input{
    height: 100px;
    padding: 0 23px;
}
.contacts-info input, .contacts-info textarea{
    padding: 10px 23px;
    border-radius: 1em;
    font-size: 17px;
    font-weight: 600;
}
.contacts-info label{
    font-size: 14px;
    /* margin-left: 20px; */
}

button[type="submit"]{
    letter-spacing: 4px;
}



.right-input{
    padding-right: 50px !important;
}
.left-input{
    padding-left: 50px !important;
}

.btn-envoye{
    letter-spacing: 1.2px;
}
/*******************************************************************************************************/
/******************************************* Footer ****************************************************/
/*******************************************************************************************************/
.page-footer {
    padding: 40px 100px 35px;
    height: 135px;
}

.footer-texts{
    padding-top: 10px;
}

.footer-copyright{
    text-align: center;
}

.footer-color{
    background-color: #f5f4f2;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}



/*******************************************************************************************************/
/******************************************* responsivité ***********************************************/
/*******************************************************************************************************/


@media only screen and (max-width: 890px) {
    .bg-logo {
        width: 100%;
        height: 100%;
    }
}

@media only screen and (min-width: 1440px) {
    .logo-slider img {
        width: 150px;
    }
    .fonction_logo {
        top: 20%;
        left: 35%;
    }

    a.navbar-brand.corr-padding.m-0 img{
        width: auto;
    }


    .slider-message{
        font-size: 45px;
        letter-spacing: 4.5px;
    }

    .first-half{
        padding-right: 95px;
    }

    ul.section2-right-list li, ul.section2-left-list li {
        padding-top: 22.5px;
    }
    ul.section2-right-list {
        margin-bottom: 85px;
    }

    .btn-commander{
        padding: 10px;
        height: 100px;
    }

    .tarifs-section {
        margin: 0 100px;
    }

    .tarifs-title {
        padding: 75px 0
        /* font-size: 25px; */
    }

    .section-6 {
        padding: 142.5px 0 150px 0;
    }

    .contacts-info input {
        height: 50px;
    }
    .section1-text{
        padding-top: 62.5px;
    }

    .fixe-h {
        min-height: 480px;
    }
    .btn-commander {
        /*padding: 12.5px 0;*/
        width: 222.5px;
        height: 50px;
    }
    .footer-logo img {
        /* height: auto; */
        max-width: 150%;
    }
}


@media only screen and (min-width: 1024px) and (max-width: 1440px){
    header{
        height: 50px;
        /*font-size: 6px;*/
    }

    .logo-slider img {
        width: 100px;
    }

    .slider-message{
        font-size: 45px;
        letter-spacing: 4.5px;
    }

    
    /*.authentification-menu{
        width: 21%;
    }
*/    .sup{
        top: 52px;
    }

    .section2-yellow-part{
        padding: 100px;
    }

    /*.slider-message{*/
        /*!*font-size: 22.5px;*!*/
    /*}*/
    .img-float{
        top: 90px;
    }



    .section1-text{
        /*font-size: 18px;*/
        /*line-height: 28px;*/
        padding-top: 62.5px;
    }
    .lang-selector{
        /*font-size: 6px;*/
        padding: 0;
    }
    .section-2-title1{
        /*font-size: 25px;*/
        /*width: 80%;*/
    }

    /*.marge-section2{*/
        /*padding: 115px 0 0 0;*/
    /*}*/
    .section2-sub-title-1, .section2-sub-title-2{
        /*font-size: 15px;*/
        margin: 110px 0 55px 0;
    }

    ul.section2-right-list, ul.section2-left-list{
        /*font-size: 8px;*/
    }
    ul.section2-right-list li, ul.section2-left-list li{
        padding-top: 22.5px;
    }

    ul.section2-right-list{
        margin-bottom: 85px;
    }

    .section3-title{
        /*font-size: 25px;*/
    }

    #section3{
        padding: 25px 100px;
    }

    .first-half{
        padding-right: 95px;
    }

    /****************************************** section 5 tarifs *****************************************/

    .tarifs-title {
        padding: 75px 0;
        /*font-size: 25px;*/
    }

    .fixe-h {
        min-height: 480px;
    }

    .tarifs-section {
        margin: 0 100px;
    }

    .square-white{
        margin-top: 100px;
    }
    /****************************************** section 6 *****************************************/
    .section-6 {
        padding: 142.5px 0 150px 0;
    }

    .btn-commander {
        padding: 12.5px 0;
        /*font-size: 6.5px;*/
        width: 222.5px;
    }
    /****************************************** Contact *****************************************/



    .contacts-info{
        padding: 100px 100px 100px 222px;
    }

    .contacts-info label {
        /*font-size: 12px;*/
    }

    .contacts-info input, .contacts-info textarea {
        padding: 10px 23px;
        border-radius: 1em;
        font-size: 17px;
        font-weight: 600;
        /*font-size: 7px;*/
   }

    .contacts-info input {
        height: 50px;
    }

    .right-input{
        padding-right: 25px !important;
    }
    .left-input{
        padding-left: 25px !important;
    }


    /**************************************** Footer ****************************************/
    .page-footer {
        padding: 40px 50px 35px;
        height: 135px;
    }

    .footer-logo img {
        /* height: auto; */
        max-width: 150%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1200px){
    .page-footer {
        padding: 40px 30px 35px;
        height: 130px;
    }
    .footer-texts div.float-left p a, .footer-texts div.float-right p {
        font-size: 10px!important;
    }
    .footer-texts div.float-right p{
        margin-top: 3px !important;
    }
    .footer-logo img {
        /* height: auto; */
        max-width: 150%;
    }
}
@media only screen and (max-width: 991px) {
    header {
        font-size: 10px;
        letter-spacing: 1px;
    }
    .right-menu li:nth-child(1) a {
         font-size: 10px!important;
        letter-spacing: 1px;
    }

    .marge-section3-right {
        padding-left: 6.43%;
        padding-right: 2.75%;
    }
    .slider-message {
         font-size: 35px!important;
         letter-spacing: 3.5px!important;;
    }
    .page-footer {
        padding: 40px 30px 35px;
        height: 225px;
    }


    .footer-logo img {
        /* height: auto; */
        max-width: 35%;
    }

}
@media only screen and (min-width: 767px) and (max-width: 1024px) {

    .dropdown-menu {
        position: absolute !important;
    }

    /*.bg-img1, .bg-img2, .bg-img3, .bg-img{*/
        /*background-image: url('../img/mobil-slider-img.png');*/
    /*}*/

    .img-float{
        top: 50px !important;
    }

    /*.logo-slider img{*/
        /*width: 9.8%;*/
    /*}*/

    .section1-text{
        /*font-size: 9px;*/
        /*line-height: 14px;*/
    }

    .section-2-title1{
        /*font-size: 12.5px;*/
        width: 100%;
    }

    /*.marge-section2{*/
        /*padding: 67px 0 0 0;*/
    /*}*/
    .section2-sub-title-1, .section2-sub-title-2{
        /*font-size: 7.5px;*/

        margin: 0 0 15px 0;
    }

    ul.section2-right-list, ul.section2-left-list{
        /*font-size: 8px;*/
    }
    ul.section2-right-list li, ul.section2-left-list li{
        padding-top: 22.5px;
    }


    #section3{
        padding: 25px;
    }



    /****************************************** section 5 tarifs *****************************************/

    .tarifs-title {
        padding: 65.5px 0 74.5px 0;
        /*font-size: 25px;*/
    }

    .fixe-h {
        /*min-height: 400px;*/
    }

    .tarifs-section{
        margin: 0 50px;
    }

    /*.tarifs-packs{*/
        /*width: 100%;*/
        /*flex-direction: column;*/
        /*-webkit-flex-direction: column;*/
    /*}*/

    .pack-offre{
        width: 100%;
    }

    /****************************************** section 6 *****************************************/
    .section-6 {
        padding: 142.5px 0 150px 0;
    }

    .btn-commander {
        padding: 12.5px 0;
        /*font-size: 6.5px;*/
        /*width: 30%;*/
    }
    /****************************************** Contact *****************************************/

    .contacts-info{
        padding: 30px;
    }
    .contacts-info input {
        height: 50px;
    }

    .contacts-info input, .contacts-info textarea {
        padding: 0 23px;
    }

    /**************************************** Footer ****************************************/

    /*.footer-logo img,*/
    /*.page-footer div.container-fluide div.row div.col-lg-8 div:nth-child(1) {*/
        /*margin-bottom: 50px;*/
    /*}*/

}
@media only screen and (min-width: 768px) and (max-width: 1024px){
    .tarifs-section div.row.text-center{
        /*flex: 0 0 100% !important;*/
        flex-direction: column !important;
        width: 100%;
    }

    .tarifs-section div.row.text-center .col-md-6{
        max-width: 100%;
    }


    .authentification-menu{
        width: 25%;
    }
    .right-menu li:nth-child(1) a {
        /*font-size: 5px!important;*/
    }
    .logo-slider img{
        width: 100px;
    }

    .menu ul li {
        padding: 0px 0.7em!important;
    }
    .menu {
        padding: 0 0.7em;
    }

    .slider-message{
        font-size: 45px;
        letter-spacing: 4.5px;
    }

    .bg-logo{
        padding: 20px 0;
    }
    .contacts-info {
        padding: 45px ;
    }

    .logo-slider{
        top: 85px;
    }

    .btn-commander {
        width: 222.5px;
    }
    .page-footer {
        padding: 40px 30px 35px;
        /*height: 200px;*/
    }
    .footer-copyright {
        font-size: 10px;
        text-align: right;
    }

}
@media only screen and (min-width: 767px ) and (max-width: 1440px) {
   
    .logo-slider {
        top: 85px;
    }

    ul.section2-right-list {
        /*margin-bottom: 20px;*/
    }

    .first-half{
        padding-right: 50px !important;
    }

    .section2-yellow-part{
        padding: 100px 50px;
    }

    ul.section2-right-list, ul.section2-left-list{
        /*width: 01%;*/
        /*margin-bottom: 2%;*/
    }

    .section2-sub-title-1, .section2-sub-title-2 {
        /*font-size: 22px;*/
        /*margin: 0 0 15px 0;*/
    }
    /*.section-2-title1 {*/
        /*font-size: 30px;*/
        /*width: 100%;*/
    /*}*/

    .section1-text{
        padding-top: 62.5px;
    }
}
@media only screen and (max-width: 767px) {
    .bg-carousel{
        margin-top: 70px;
    }
    header {
        height: 40px;
        font-size: 10px;
        letter-spacing: 1px;
    }

    .logo-slider {
        top: 85px;
    }

    .logo-slider img{
        width: 100px;
    }
    .sup{
        font-size: 11px !important;
        top: 40px;
        left: 55%;
    }

    .card-licence{
            min-height: 250px !important;
    }

    .tarifs-title {
        padding: 75px 0;
         font-size: 30px;
    }

    .fs-26 {
        font-size: 20px;
    }

    .fs-40 {
        font-size: 30px;
    }
    .fs-10 {
        font-size: 10px;
    }
    .fs-12-mobil {
        font-size: 12px;
    }

    .lang-selector {
        font-size: 10px;
    }
    .right-title,.left-title{
        margin: 0;
    }
    .right-input{
        padding-right: 5px !important;
    }
    .left-input{
        padding-left: 5px !important;
    }

    .marge-slider h1{
        font-size: 35px;
    }

    .my-slider{
        /*align-items: center !important;*/
        padding-top: 0;
    }

    .slider-message{
        width: 85%;
        font-size: 26px !important;
    }

    .authentification-menu{
        width: 50%;
        margin-left: 0;
        margin: 0;
    }

    .authentification-menu ul{

        margin: 0 !important;
        width: 100%;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        flex-direction: row;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }

    .tarifs-packs{
        width: 100%;
        flex-direction: column;
        -webkit-flex-direction: column;
    }


    .img-float{
        width: 50%;
        top: 65px!important;
        left: 25% !important;

    }

    .section3-title{
        position: initial;
        text-align: center;
        font-size: 25px;
    }

    .card{
        margin-bottom: 8px;
    }

    .btn-commander{
        width: 62.5%;
        margin: 20px 0;

    }

    section.gris-img {
        padding: 0px 5px;
    }

    .contacts-info div.container{
        max-width: 100%;
    }

    .right-menu li:nth-child(2) hr{
        left: 0px !important;
    }

    .form-submit-btn{
        text-align: center;
        margin: auto;
        width: auto;
    }

    .form-submit-btn p{
        margin-top: 10px;
    }

    ul.section2-right-list,ul.section2-left-list{
        width: auto;
        font-size: 14px;
    }

    .section2-yellow-part{
        padding: 20% 0  125px;;
    }

    .marge-section2{
        padding: 0% 5% 4% 4%;
    }

    .fs-30{
        font-size: 22px;
    }
    /*ul.section2-right-list li,ul.section2-left-list li{*/
    /*padding: 5px;*/
    /*}
  */

    .contacts-title{
        font-size: 26px;
    }

    .pack-offre{
        margin-bottom: 30px;
        margin-left: -1.25rem;
        margin-right: -1.25rem;
        border-bottom: 8px solid #dee2e6;
        /*box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.15);*/
    }

    #large-pack{
        margin-bottom: 0px;
        border-bottom: 0px solid #dee2e6;
    }

    .bg-img
    {
        background-image: url('../img/slider-img-responsive.png');
        -webkit-background-size: cover;
        background-size: cover;
        background-repeat: no-repeat;
        height: 707px;
    }

    .section1-text {
        font-size: 22px !important;
        line-height: 26px !important;
        padding-top: 50px;
        width: 90%;
    }

    .marge-section3{
        padding-bottom: 80px;
    }

    .section-6{
        padding: 130px 0 150px 0;
    }
    .commander-btn-section{
        padding-top: 0;
    }

    .right-menu li:nth-child(2){
        margin-left: 0!important;
    }

    .right-menu li:nth-child(1) a {
        font-size: 10px!important;
    }

    .menu ul li{
        padding: 10px 0!important;
    }

    .marge-section3{
        font-size: 14px;
        line-height: 20px;
        padding: 0 100px 80px;
    }

    #section3 p{
        font-size: 14px;
        line-height: 20px;
    }

    .pack-offre{
        width: auto;
    }

    .tarifs-section{
        margin: auto;
    }

    #section3 {
        padding: 100px 0;
    }
    .contacts-info {
        padding: 50px;
    }
    .page-footer{
        padding: 30px 0;
    }
    .footer-copyright {
        text-align: center;
        padding-top: 30px;
    }

    .contacts-info input {
        height: 50px;
    }

    .contacts-info input, .contacts-info textarea {
        padding: 0 23px;
    }

    .section-2-title1 {
        font-size: 30px;
        /* width: 58%; */
    }

    .section2-sub-title-1, .section2-sub-title-2 {
        font-size: 22px;
        margin: 55px 0 55px 0;
    }

    .marge-img{
        margin-top: 94px;
    }

    #section6-content h5.fs-34{
        font-size: 24px;
    }
    #section6-content h6.fs-26{
        font-size: 18px;
    }
    ul.section2-right-list, ul.section2-left-list{
        padding-left: 20px !important;
    }
    .marge-img img{
        box-shadow: none;
    }
    .yellow-img{
        max-width: calc(10*calc(100%/12)) !important;
    }
    .square-white{
        display: none;
        width: 100%;
        min-width: calc(2*calc(100%/12)) !important;
    }

    .fonction_logo{
        width: 180px;
        left: 35% ;
    }
}
@media only screen and (max-width: 575px) {

    header {
        font-size: 9px;
    }


    .lang-selector {
    }
    .col-sm-12 .marge-section6 {
        flex-direction: column;
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
    }
    .marge-section3 {

        padding-bottom: 40px;
        padding-right: 6.94%;
        padding-left: 5.55%;
    }

    .img-float{
        /*top: 40px!important;*/
    }
    .slider-message {
        font-size: 26px;
    }

    .contacts-info{
        padding: 50px 0;
    }

    .marge-section2 {
        padding: 0% 0 4% 0;
    }

    .sup {
        font-size: 11px !important;
        top: 40px;
        left: 59%;
    }
    .img-float{
        width: 70%;
        top: 65px!important;
        left: 10% !important;
    }
}
@media only screen and (max-width: 420px) {


    .fonction_logo{
        width: 150px;
        left: 30% ;
    }
    .slider-message{
        width: 99%;
        font-size: 22px;
    }
    .sup {
        font-size: 11px !important;
        top: 40px;
        left: 62%;
    }

    .img-float{
        top: 50px!important;
    }
    .section1-text{
        width: 100%;
        font-size: 20px!important;
    }
}
/*@media only screen and (max-width: 575px) {*/
/*.bg-logo {*/
/*width: 2%;*/
/*height: 2%;*/
/*}*/
/*.col-sm-12 text-white marge-section6 {*/
/*flex-direction: column;*/
/*}*/
/*}*/
/*oumayma*/

.spinner{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    display: none;
    background-color: #1d2124a9;
    z-index: 200;
}
.spinnerspan{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 80px;
    height: 80px;
    border-radius: 80px;
    border: 8px solid #c88a0f;
    border-top: 0;
    border-bottom: 0;
    animation: 2s linear infinite spinner;
}
.popupback{
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: #1d2124a9;
    z-index: 200;
}

.popup{
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 50%;
    min-width: 300px;
}






@keyframes spinner {
    0%{
        transform:translate(-50%,-50%) rotate(0deg);
    }
    100%{
        transform:translate(-50%,-50%) rotate(360deg);
    }
}