html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Verdana, sans-serif;
}

html {
    scroll-behavior: smooth;
}

body{
    background-image: url("../images/favicone_bg2.png");
    background-color: #111111c1;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    user-select: none;
}

/* Style du bouton menu */
.menu-toggle {
    display: none; /* Masqué par défaut sur grand écran */
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    padding: 10px;
    z-index: 4;
}

/*================================================================================================================================================
                                                            Preloader Area CSS
=================================================================================================================================================*/


.preloader {
  position: fixed;
  left: 0;
  width: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  z-index: 9999999;
  -webkit-transition: .9s;
  transition: .9s;
}

.preloader .loader {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: inline-block;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 45%;
  -webkit-transform: translateY(-45%);
          transform: translateY(-45%);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.preloader .loader .loader-outter {
  position: absolute;
  border: 4px solid #922676;
  border-left-color: transparent;
  border-bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
          animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}

.preloader .loader .loader-inner {
  position: absolute;
  border: 4px solid #922676;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  left: calc(40% - 21px);
  top: calc(40% - 21px);
  border-right: 0;
  border-top-color: transparent;
  -webkit-animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
          animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}

.preloader .loader .indicator {
  position: absolute;
  right: 0;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%) scale(1.5);
          transform: translateY(-50%) scale(1.5);
}

.preloader .loader .indicator svg polyline {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.preloader .loader .indicator svg polyline#back {
  stroke: #ffffff;
}

.preloader .loader .indicator svg polyline#front {
  stroke: #922676;
  stroke-dasharray: 12, 36;
  stroke-dashoffset: 48;
  -webkit-animation: dash 1s linear infinite;
          animation: dash 1s linear infinite;
}

.preloader::before, .preloader::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 60%;
  z-index: -1;
  background: #EFE0EB;
  -webkit-transition: .9s;
  transition: .9s;
}

.preloader::after {
  left: auto;
  right: 0;
}

.preloader.preloader-deactivate {
  visibility: hidden;
}

.preloader.preloader-deactivate::after, .preloader.preloader-deactivate::before {
  width: 0;
}

.preloader.preloader-deactivate .loader {
  opacity: 0;
  visibility: hidden;
}

@-webkit-keyframes loader-outter {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes loader-outter {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes loader-inner {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}

@keyframes loader-inner {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}

@-webkit-keyframes dash {
  62.5% {
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes dash {
  62.5% {
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
  }
}



/*================================================================================================================================================
                                                           End Preloader Area CSS
=================================================================================================================================================*/

/*================================================================================================================================================
                                                              Start  Header CSS
=================================================================================================================================================*/

#background_dm{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000000b0;
    z-index: 2;
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

#background_dm.visible{
    opacity: 1;
}

*{
    box-sizing: border-box;
}

header{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 100px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3;
}

header.scrolled {
    background: white;
    border-bottom: 2px solid #922676;
}

.header_mkt {
    border-bottom: 2px solid #922676;
}

.header_mkt nav > ul > li a{
    color: #2A284B;
}

.header_mkt nav > ul > .menu_title i{
    color: #2A284B;
}

header.scrolled_mkt {
    background: white;
    border-bottom: 2px solid #922676;
}


header nav > ul{
    padding: 0;
    display: flex;
    align-items: center;
    list-style: none;
}

nav > ul > li{
    margin: 0 20px;
    padding: 10px 20px;
    position: relative;
}

nav > ul > li a{
    text-decoration: none;
    color: white;
    font-weight: 700;
    font-size: 17px;
}

nav > ul > li .menu_title i{
    font-size: 12px;
    color: #fff;
}

.header_mkt nav .menu_title i{
    color: #2A284B;
}

header.scrolled nav > ul > li .menu_title a{
    color: #2A284B;
}


nav > ul > li:last-child > a{
    border: 1px solid white;
    border-radius: 8px;
    padding: 10px 25px;
}


header.scrolled nav > ul > li:last-child > a{
    border: 1px solid #922676;
    color: #922676;
}

header.scrolled nav .menu_title i{
    color: #2A284B;
}

nav > ul > li:not(:last-child) > a{
    padding-bottom: 5px;
    position: relative; 
    text-decoration: none;
}

nav > ul > li:not(:last-child) > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 3px; 
    background: linear-gradient(90deg, #c589bb, #922676); 
    transition: width 0.4s ease-in-out; 
}

nav > ul > li:not(:last-child) > a:hover::after {
    width: 100%; 
}

nav > ul > li:last-child > a:hover{
    background-color: #9226751d;
    border: 1px solid #922676;
}

.header_mkt nav > ul > li:last-child > a{
    color: white;
    background-color: #922676;
}

.header_mkt nav > ul > li:last-child > a:hover{
    background-color: #551644;
}

.submenu{
    display: none;
    list-style: none;
    padding: 0;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    top: 40px;
    left: 0px;
    border: none;
    width: 430px;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
}

.submenu li{
    width: 100%;
    padding: 0;
    margin: 0;
}

.submenu li a{
    display: flex;
    align-items: flex-start;
    text-decoration: none;
    color: #2A284B;
    padding: 20px;
}

.submenu li a:not(:last-child){
    border-bottom: 1px solid #2A284B;
}


nav > ul > li:hover .submenu{
    display: block;
    animation: submenu 0.5s ease;
}

@keyframes submenu {
    from{
        opacity: 0;
        transform: translateY(100px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

.icone_div{
    padding: 0 20px;
}

.icone_div i{
    font-size: 20px;
    color: #6e5367;
    margin-top: 3px;
}

.icone_div img{
    width: 20px;
    margin-top: 3px;
}

.contenu-elm span{
    display: block;
}

.contenu-elm h2{
    font-size: 20px;
    margin: 0 0 5px 0;
}

.contenu-elm h6{
    font-size: 14px;
    margin: 0;
    font-weight: 100;
}

.submenu li a:hover h2{
    color: #922676;
}


/*================================================================================================================================================
                                                              End  Header CSS
=================================================================================================================================================*/

/*================================================================================================================================================================================================================================================
                                                            Start Baniere Home section 1 
=================================================================================================================================================================================================================================================*/

.baniere{
    display: flex;
    padding: 100px;
    position: relative;
    width: 100%;
    height: 110vh;
    background: linear-gradient(#111 19%, #922676 96%);
}

.baniere div{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.baniere h1{
    font-size: 50px;
    color: rgb(187, 187, 187);
}

.mask{
    position: relative;
    top: -100px;
    width: 100%;
    height: 110px;
    background-image: url("../images/mask.png");
    background-repeat: no-repeat;
    background-size: cover;
}


/*================================================================================================================================================================================================================================================
                                                            End Home: section 1 
=================================================================================================================================================================================================================================================*/


/*================================================================================================================================================
                                                                       Start Home: Marketing (section 2)
=================================================================================================================================================*/

.marketing_section {
    padding: 70px 100px;
}


.marketing_section h2{
    font-size: 40px;
    text-align: center;
    color: #2A284B;
    margin: 0 0 20px 0;
    padding: 0 200px;
}
.marketing_section h3{
    font-size: 25px;
    text-align: center;
    color: #2A284B;
    font-weight: 100;
    margin: 0 0 10px 0;
    padding: 0 200px;
}
.marketing_section p{
    font-size: 20px;
    text-align: center;
    color: #2A284B;
    padding: 0 200px;
}

.list_marketing-elm{
    display: flex;
    justify-content: center;
    padding: 0 100px;
    margin-bottom: 20px;
}

.list_marketing-elm ul{
    width: 80%;
    padding: 0;
    column-count: 2;
    list-style: none;
}

.list_marketing-elm ul li{
    width: 85%;
    padding: 15px 20px;
    border-radius: 10px;
    background-color: #92267629;
    text-align: center;
    margin: 10px auto;
    font-size: 19px;
    display: flex;
    align-items: center;
}

.list_marketing-elm ul li:first-child{
    margin-top: 0;
}

.list_marketing-elm ul li i{
    font-size: 25px;
    margin-right: 15px;
    color: #7f737c;
}

.image_marketing{
    width: 100%;
    padding: 0 100px;
    display: flex;
    justify-content: center;
}

.image_marketing picture{
    width: 100%;
}

.image_marketing img{
    width: 100%;
}

.degradetext{
    background-color: #08833C;
    background-image: linear-gradient(to right, #08833C, #7EB827);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}


/*================================================================================================================================================
                                                                       End Home: Marketing (section 2)
=================================================================================================================================================*/

/*================================================================================================================================================
                                                                        Start Home: Nos services section 3 
=================================================================================================================================================*/

#services-select{
    display: none;
}

.services{
    padding: 50px 100px;
}

.services h2{
    font-size: 35px;
    text-align: center;
}

.services p{
    font-size: 18px;
    text-align: center;
    color: #455468;
}

.services-list{
    width: 100%;
    padding: 30px 100px;
    display: flex;
    justify-content: center;
}

.services-list-ctn{
    width: 90%;
    display: flex;
    height: 80vh;
}

.button-select{
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.button-select button{
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    padding: 20px;
    width: 100%;
    height: calc(100% / 7);
    border: 1px solid rgb(29, 29, 29);
    border-right: none;
    background-color: white;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.5s;
}

.button-select button.active{
    background: linear-gradient(to right, #922676,#551644);
    color: white;
}

.button-select button:hover{
    background: linear-gradient(to right, #922676,#551644);
    color: white;
}

.services-ctn{
    width: 70%;
    background-color: #551644;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    position: relative;
}

.list-services-ctn{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 15px;
    opacity: 0;
    visibility: hidden;
}

.list-services-ctn.active{
    opacity: 1;
    visibility: visible;
}


.list-services-ctn .list-type{
    width: 100%;
    height: 85%;
    display: flex;
    flex-wrap: wrap;
}

.list-service img{
    width: 33%;
}

.btnplus_ctn{
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 15px;
}

.btnplus_ctn a{
    background-color: white;
    border-radius: 50px;
    padding: 15px 20px;
    font-size: 20px;
    text-decoration: none;
    color: #111;
}

.list-service{
    background-color: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(100% / 2 - 10px);
    height: calc(100% / 2 - 5px);
    margin: 5px;
    padding: 50px;
    transform: scale(0.5);
    transition: transform 0.5s ease; /* Transition fluide */
}

.list-service h3{
    font-size: 18px;
    font-weight: 400;
    text-align: center;
}

.list-services-ctn.active .list-service {
    transform: scale(1);   /* Zoom à 100% */
}

/*================================================================================================================================================
                                                                        End Home: Nos services section 3 
=================================================================================================================================================*/


/*================================================================================================================================================
                                                                        Start section 4 : Communication
=================================================================================================================================================*/

.comm{
    padding: 100px;
    display: flex;
}

.comm h2{
    color: #08833C;
}

.comm p{
    font-size: 20px;
    color: #2A284B;
}

.comm div{
    width: 50%;
}

.com_img {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.com_img img{
    width: 50%;
}


/*================================================================================================================================================
                                                                        End section 4 : Communication
=================================================================================================================================================*/



/*================================================================================================================================================
                                                                            Start section 5: Formation
=================================================================================================================================================*/

.formation_sct{
    width: 100%;
}

.rubrique_recherche{
    position: relative;
    background-image: url("../images/2334.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    background-position: center;
    width: 100%;
    height: 85vh;

}

.container_bg_v{
    background-color: #160712d4;
    width: 100%;
    height: 100%;
    padding: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container_bg_v h2 {
    text-align: center;
    color: white;
    font-size: 30px;
    text-transform: uppercase;
    width: 60%;
    margin-bottom: 80px;
}

.search-container {
    display: flex;
    align-items: center;
    width: 60%;
}

.search-box {
    display: flex;
    align-items: center;
    border-radius: 5px 0 0 5px;
    padding: 5px;
    flex: 1;
    background: white;
    height: 60px;
    position: relative;
}

.search-box input {
    border: none;
    outline: none;
    flex: 1;
    padding: 5px;
    font-size: 16px;
}


.search-container #autocomplete-results{
    position: absolute !important;
    top: 42px;
    left: 0;
    width: 100%;
    background-color: white;
    z-index: 1;
    width: 100%;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 20px;
    display: none;
}

.search-container #autocomplete-results a{
    text-decoration: none;
    color: #2A284B;
    padding: 10px;
    width: 100%;
    display: block;
}

.search-container #autocomplete-results a:hover{
    background-color: #08833b28;
}

#autocomplete-results.active{
    display: block;
}

.search-box .icon {
    margin-right: 8px;
    color: gray;
}

.search-button {
    background: #08833C;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
    font-size: 16px;
    height: 60px;
}

.search-button:hover {
    background: #0c9947;
}

.other_search_txt{
    display: flex;
    justify-content: flex-end;
    padding: 15px 10px;
    color: white;
    width: 60%;
}

.other_search_txt a{
    color: white;
    margin-left: 15px;
}

.formation-ent{
    width: 100%;
    padding: 0 100px;
    position: absolute;
    bottom: -90px;
    display: flex;
    align-items: center;
}

.element-form{
    width: 25%;
    height: 125px;
    margin: 10px;
    display: flex;
    background-color: white;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
    text-decoration: none;
}

.element-form:first-child h3{
    color: #33378a;
}

.element-form:nth-child(3) h3{
    color: #1B9DD9;
}
.element-form:last-child h3{
    color: #a11e29;
}

.element-form:hover{
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.4);
}

.img-form-elm{
    width: 30%;
    height: 100%;
    overflow: hidden;
}

.img-form-elm img{
    width: 100%;
    height: 100%;
}

.form-elmt-ctn{
    width: 70%;
    padding: 20px 5px 20px 15px;
}

.form-elmt-ctn h3{
    font-size: 17px;
    color: #08833bb5;
    margin: 0 0 10px 0;
}

.form-elmt-ctn p{
    font-size: 14px;
    font-weight: 100;
    color: #2A284B;
}

.rubrique_thematique{
    padding: 150px 100px 100px 100px;
}

.rubrique_thematique h2{
    text-align: center;
    color: #922676;
    margin-bottom: 20px;
    font-size: 30px;
}

.rubrique_thematique p{
    text-align: center;
    font-weight: 100;
    font-size: 18px;
    color: #455468;
}

.list_thematique{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 50px;
}

.thematique{
    width: calc(100% / 6);
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.thematique div{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    box-shadow: 1px 1px 6px #9226754c;
    margin-bottom: 10px;
}

.thematique div i{
    font-size: 30px;
    color: #922676;
}

.thematique span{
    text-transform: uppercase;
    font-weight: 100;
    font-size: 15px;
    text-align: center;
    color: #2A284B;
}

.btnplus{
    display: flex;
    justify-content: center;
    padding: 50px;
}

.btnplus a{
    background-color: #922676;
    color: white;
    border-radius: 7px;
    padding: 10px 15px;
    text-decoration: none;
    transition: all 0.3s;
}

.btnplus a:hover{
    opacity: 0.8;
}


/*================================================================================================================================================
                                                                            End section 5: Formation
=================================================================================================================================================*/


/*================================================================================================================================================
                                                                            Start section 6 Newsletter
=================================================================================================================================================*/

.newsletter_ctn{
    padding: 0 0 30px 0;
    background: linear-gradient(to right bottom, #111 19%, #922676 121%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.newsletter_ctn .mask2{
    top: -40px;
}

.newsletter_ctn h2{
    text-align: center;
    font-weight: 600;
    font-size: 35px;
    color: white;
}

.newsletter_ctn p{
    text-align: center;
    color: white;
    width: 50%;
}


.newsletter_input-container {
    display: flex;
    align-items: center;
    width: 40%;
    position: relative;
}

.newsletter_input-container p{
    position: absolute;
    top: -20px;
}

.messages{
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
}

.messages .message{
    background-color: #ffffffbb;
    padding: 15px;
}

.messages .message.success{
    color: green;
}

.messages .message.error{
    color: rgb(153, 14, 14);
}

.newsletter_input-container .search-box {
    display: flex;
    align-items: center;
    border: 2px solid #ccc;
    border-radius: 5px 0 0 5px;
    padding: 0;
    flex: 1;
    background: none;
    color: white;
    height: 50px;
}

.newsletter_input-container .search-box input {
    border: 1px solid #ccc;
    color: white;
    background: none;
    outline: none;
    flex: 1;
    padding: 5px;
    padding-left: 20px;
    font-size: 16px;
    height: 100%;
}

.newsletter_input-container .search-button {
    background: none;
    color: white;
    border: 2px solid #ccc;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
    font-size: 16px;
    height: 50px;
}

.newsletter_input-container .search-button:hover {
    background: #0c9947;
}

.social_ico{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 30px;
}
.social_ico a{
    text-decoration: none;
    margin: 20px;
}

.social_ico i{
    font-size: 30px;
    color: white;
}



/*================================================================================================================================================
                                                                            End section 6 Newsletter
=================================================================================================================================================*/


/*================================================================================================================================================
                                                                        Start Footer
=================================================================================================================================================*/

footer{
    padding: 30px 200px;
    background-color: #0e0e0e;
}

.footer_list_ctn{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.footer_list_ctn div{
    display: flex;
    justify-content: center;
    align-items: center;
}


.footer_list_ctn div img{
    width: 120px;
}

.footer_list_ctn ul li{
    list-style: none;
    margin: 20px;
}

.footer_list_ctn ul a{
    color: white;
    text-decoration: none;
}

.footer_list_ctn ul a:hover{
    border-bottom: 1px dotted #afafaf;
}

.copyright{
    width: 100%;
    padding: 10px;
}

.copyright p{
    text-align: center;
    color: #b7b7b7;
}

.mask, .mask2, .mask3{
    display: none;
}


/*================================================================================================================================================
                                                                        End Footer
=================================================================================================================================================*/

/*================================================================================================================================================
                                                                     Page marketing Section 1                                              
=================================================================================================================================================*/

.baniere_marketing{
    display: flex;
    padding: 100px;
    position: relative;
    width: 100%;
    height: 110vh;
    background: #ffecfa;
}

.baniere_marketing > div{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.baniere_marketing h1{
    font-size: 40px;
    color: #2A284B;
}

.btn-ctn-mark{
    display: flex;
    padding: 30px 10px;
    width: 100%;
}

.btn-ctn-mark a{
    background-color: #08833C;
    color: white;
    padding: 15px 20px;
    font-size: 20px;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-ctn-mark a:hover{
    background-color: #7EB827;
}

.imgdiv-mark{
    background-image: url('../images/bg_marketing_favicone.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left bottom; 
    perspective: 1000px;
}

.imgdiv-mark img{
    width: 60%;
    margin-left: 40px;
    transition: transform 0.2s ease-out;
    transform-origin: center; 
}

/*================================================================================================================================================
                                                                    End Page marketing Section 1                                              
=================================================================================================================================================*/

/*================================================================================================================================================
                                                                    Page marketing Section 2                                             
=================================================================================================================================================*/



.resume_marketing{
    padding: 50px 100px;	
    display: flex;
    flex-direction: column;
    align-items: center;
}

.resume_marketing h2{
    font-size: 32px;
    width: 40%;
    text-align: center;
    color: #2A284B;
    margin-bottom: 20px;
}

.resume_marketing > hr{
    width: 10%;
    border: 3px solid #2A284B;
    margin-bottom: 20px;
}

.resume_marketing > p{
    width: 40%;
    text-align: center;
    font-weight: 200;
    color: #2A284B;
}

.container_mkt-dgt{
    display: flex;
    padding: 50px 100px;
}

.container_mkt-dgt > div{
    width: 50%;
}   

.container_mkt-dgt h3{
    font-size: 24px;
    margin-bottom: 5px;
}

.container_mkt-dgt .line_solution hr{
    width: 60px;
    border: 2px solid #922676;
}

.mkt-dgt{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mkt-dgt p{
    font-size: 18px;
    color: #2A284B;
    margin: 41px 0;
}

.mkt-dgt ul{
    padding: 0;
    list-style: none;
    column-count: 2;
}

.mkt-dgt ul li{
    margin: 15px 0;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #424242;
}

.mkt-dgt ul li:first-child{
    margin-top: 0;
}

.mkt-dgt ul li img{
    width: 20px;
    margin-right: 10px;
}

.ctn-img_mkt{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ctn-img_mkt img{
    width: 90%;
}



/*================================================================================================================================================
                                                                    End Page marketing Section 2                                             
=================================================================================================================================================*/


/*================================================================================================================================================
                                                                    Start Page marketing section 3: axe d'intervention
=================================================================================================================================================*/

.axe-intervention{
    width: 100%;
    background-image: url('../images/communication.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 40vh;
    position: relative;
}

.axe-intervention > p{
    position: absolute;
    bottom: 0;
    right: 100px;
    color: white;
}

.axe-intervention > p a{
    color: #7EB827;
}

.container_axe{
    width: 100%;
    height: 100%;
    padding: 30px 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3b0c2edb;
}

.container_axe .axe-list-ctn{
    width: calc(100% / 4);
    margin: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container_axe .axe-list-ctn i{
    border: 3px solid white;
    padding: 20px;
    font-size: 40px;
    color: white;
    border-radius: 50%;
    margin-right: 15px;
}


.container_axe .axe-list-ctn span{
    display: block;
    color: white;
    font-size: 40px;
}

.container_axe .axe-list-ctn p{
    color: white;
    font-size: 16px;
    margin: 0;
}




/*================================================================================================================================================
                                                                    End Page marketing section 3: axe d'intervention
=================================================================================================================================================*/

/*================================================================================================================================================
                                                                Page marketing Section 4 Management
=================================================================================================================================================*/


.container_mgmt{
    display: flex;
}

.display-service{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-left: 80px;
}

.container_mgmt .single-service{
    width: calc(100% / 3);
    margin: 30px 40px;
}

.container_mgmt .single-service p{
    margin: 0;
}

.container_mgmt .single-service h3{
    margin-bottom: 5px;
}

.container_mgmt .single-service i{
    font-size: 40px;
    color: #922676;
    position: absolute;
    left: -60px;
}

.container_mgmt .single-service img{
    width: 60px;
    position: absolute;
    left: -70px;
}

.container_mgmt .single-service .title-service{
    display: flex;
    align-items: center;
    position: relative;
}



/*================================================================================================================================================
                                                               End Page marketing Section 4 Management
=================================================================================================================================================*/



/*================================================================================================================================================
                                                               Page communication
=================================================================================================================================================*/


.imgdiv-mark-com img{
    width: 80%;
    margin-left: 40px;
    transition: transform 0.2s ease-out;
    transform-origin: center; 
}

.strategie, .communication-360, .design_graphique, .audiovisuel{
    padding: 50px 100px;	
    display: flex;
    flex-direction: column;
    align-items: center;
}

.communication-360, .audiovisuel{
    background-color: #9226751a;
}

.strategie h2, .communication-360 h2, .design_graphique h2, .audiovisuel h2{
    font-size: 32px;
    width: 45%;
    text-align: center;
    color: #2A284B;
    margin-bottom: 20px;
}

.strategie > hr, .communication-360 > hr, .design_graphique > hr, .audiovisuel > hr{
    width: 10%;
    border: 3px solid #2A284B;
    margin-bottom: 20px;
}

.strategie > p, .communication-360 > p, .design_graphique > p, .audiovisuel > p{
    width: 40%;
    text-align: center;
    font-weight: 200;
    color: #2A284B;
}

.container_strategie, .container_com-360, .container_design, .container_audio{
    display: flex;
    padding: 50px 0;
}

.container_strategie > div, .container_com-360 > div, .container_design > div, .container_audio > div{
    width: 50%;
}   

.container_strategie h3, .container_com-360 h3, .container_design h3, .container_audio h3{
    font-size: 24px;
    margin-bottom: 5px;
}

.container_strategie .line_solution hr, .container_com-360 .line_solution hr, 
.container_design .line_solution hr, .container_audio .line_solution hr{
    width: 60px;
    border: 2px solid #922676;
}

.strat-com, .mkt-com-360, .sol-design, .audiodiv{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.strat-com p, .mkt-com-360 p, .sol-design p, .audiodiv p{
    font-size: 18px;
    color: #2A284B;
    margin: 41px 0;
}

.mkt-com-360 p:last-child, .audiodiv p:last-child{
    align-self: flex-end;
}

.strat-com ul, .mkt-com-360 ul, .sol-design ul, .audiodiv ul{
    padding: 0;
    list-style: none;
    column-count: 2;
}

.strat-com ul li, .mkt-com-360 ul li, .sol-design ul li, .audiodiv ul li{
    margin: 15px 0;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #424242;
}

.strat-com ul li:first-child, .mkt-com-360 ul li:first-child, .sol-design ul li:first-child, .audiodiv ul li:first-child{
    margin-top: 0;
}

.strat-com ul li img, .mkt-com-360 ul li img, .sol-design ul li img, .audiodiv ul li img{
    width: 20px;
    margin-right: 10px;
}

.strat-com p:last-child, .mkt-com-360 p:last-child, .sol-design p:last-child, .audiodiv p:last-child{
    background-color: #9222651e;
    padding: 0;
    display: flex;
    align-items: center;
    padding-left: 10px;
}

.strat-com p:last-child a, .mkt-com-360 p:last-child a, .sol-design p:last-child a, .audiodiv p:last-child a{
    background-color: #922676;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    margin-left: 10px;
    transition: all 0.3s;
}

.strat-com p:last-child a:hover, .mkt-com-360 p:last-child a:hover, .sol-design p:last-child a:hover, .audiodiv p:last-child a:hover{
    border-radius: 10px;
    background-color: #471139;
}

.ctn-img_com, .ctn-img_com-360, .ctn-img_audio{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ctn-img_com img, .ctn-img_com-360 img, .ctn-img_audio img{
    width: 90%;
}

/*================================================================================================================================================
                                                               End Page communication section 1
=================================================================================================================================================*/




/*================================================================================================================================================
                                                                Page solution digitale Section 1
=================================================================================================================================================*/

.solution_ban{
    width: 100%;
    height: 67vh;
    background-image: url('../images/solution1.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.bgban{
    width: 100%;
    height: 100%;
    padding: 100px;
    background: linear-gradient(#111111a7, #922676 );
}

.solution_ban h1{
    font-size: 40px;
    color: white;
    text-align: center;
    margin-top: 65px;
}

.ctn-solution{
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0;
    bottom: -100px;
}

.list-solution{
    width: 70%;
    background-color: #0e0e0e;
    background: linear-gradient(to right bottom,#111111, #c589bb );
    border-radius: 10px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-solution a{
    text-decoration: none;
    display: block;
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
    width: calc(100% / 4 - 20px);
    height: 28vh;
    text-align: center;
    color: #2A284B;
}

.list-solution a i{
    font-size: 40px;
    color: #922676;
}

.list-solution a h2{
    font-size: 17px;
    margin: 10px 0;
}

.list-solution a p{
    font-size: 13px;
    font-weight: 200;
    margin: 10px 0;
    transition: all 0.5s;
}

.list-solution a:hover{
    background-color: #922676;
    color: white;
}

.list-solution a:hover i{
    color: white;
}


/*================================================================================================================================================
                                                               End Page solution digitale Section 1
=================================================================================================================================================*/



/*================================================================================================================================================
                                                             Page solution digitale Section 2: transformation digitale
=================================================================================================================================================*/

.transformation-section{
    padding: 100px 100px 0 100px;
}

.transformation-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 150px;
}

.transformation-header p{
    text-align: center;
}

.transformation-header hr{
    width: 60px;
    border: 2px solid #922676;
}

.transformation-section > h2{
    margin-top: 50px;
    margin-bottom: 0;
    font-size: 30px;
    display: flex;
    align-items: center;
    color: #440c35;
}

.transformation-section .line{
    height: 5px;
    margin-left: 10px;
    background-color: #7EB827;
}

.transformation-section h3{
    text-align: center;
    padding: 20px 100px 0 100px;
}

.trans-ctn{
    width: 100%;
    display: flex;
    height: 100vh;
    position: relative;
    margin-bottom: 30px;
}

.visible-div{
    display: flex;
    margin-top: 50px;
    height: 100vh;
    width: 100%;
}

.trans-ctn .arc-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 600px;
    height: 600px;
    position: relative;
}

.trans-ctn .arc-container div{
    position: absolute;
}

.trans-ctn .arc-container .arc{
    width: 100%;
    height: 100%;
    border: 15px solid #922676;
    border-radius: 50%;
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(45deg);
    left: -290px;
}

.trans-ctn .needle{
    left: -10px;
    top: 12%;
}

.trans-ctn .needle img{
    width: 200px;
    transform-origin: left bottom;
    transform: rotateZ(0deg);
    transition: transform 0.5s;
}

.trans-ctn .content{
    flex: 1;
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.trans-ctn .content *{
    text-align: left;
    padding: 0;
}

.trans-ctn .content h2{
    font-size: 15px;
    transition: color 0.5s;
    margin-bottom: 0;
}

.trans-ctn .content ul{
    padding-left: 30px;
}

.trans-ctn .content ul li{
    font-size: 13px;
    list-style: none;
    display: flex;
    align-items: center;
}

.trans-ctn .content .description{
    transition: opacity 0.5s;
    padding: 10px;
    background-color: #9226751f;
    margin-top: 0;
    opacity: 0;
}

.trans-ctn .content ul i{
    color: #212121;
    font-size: 15px;
    margin-right: 10px;
} 

.trans-ctn .content .item{
    margin-bottom: 25px;
}

.trans-ctn .content .item.active h2{
    color: #922676;
}

.trans-ctn .content .item.active i{
    color: #922676;
}

.trans-ctn .content .item:first-child{
    transform: translateX(-45%);

}
.trans-ctn .content .item:nth-child(2){
    transform: translateX(-35%);

}
.trans-ctn .content .item:nth-child(3){
    transform: translateX(-30%);
}
.trans-ctn .content .item:nth-child(4){
    transform: translateX(-35%);
}
.trans-ctn .content .item:last-child{
    transform: translateX(-45%);
}

.cta-trans{
    width: 70%;
    margin-top: 70px;
    display: flex;
    align-items: center;
    background-color: #9226751f;
    text-align: center;
    padding: 0;
    justify-self: end;
}

.cta-trans p{
    margin-top: 0;
    margin-bottom: 0;
}

.cta-trans a{
    border: 1px solid #922676;
    background-color: transparent;
    color: #922676;
    padding: 10px 20px;
    transition: all 0.3s;
    text-decoration: none;
}

.cta-trans a:hover{
    background-color: #922676;
    border-radius: 7px;
    color: white;
}


/*================================================================================================================================================
                                                            End Page solution digitale Section 2: transformation digitale
=================================================================================================================================================*/



/*================================================================================================================================================
                                                            Page solution digitale Section 3: developpement informatique
=================================================================================================================================================*/

.developpement-infor{
    padding: 0;
    background-color: #9226751d;
}

.developpement-infor .dev-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 150px;
}


.developpement-infor .dev-header p{
    text-align: center;
    font-size: 16px;
    margin-bottom: 30px;
}

.developpement-infor .dev-header hr{
    width: 60px;
    border: 2px solid #922676;
}

.developpement-infor > h2{
    margin-top: 50px;
    margin-bottom: 0;
    font-size: 30px;
    color: #440c35;
    display: flex;
    align-items: center;
    padding: 80px 150px 20px 150px;
}

.developpement-infor h3{
    text-align: center;
    font-size: 20px;
    padding: 0;
}

.container-inf{
    width: 100% !important;
    height: 80vh;
    padding: 60px 150px;
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 colonnes de largeur égale */
    grid-template-rows: repeat(2, auto); /* 2 lignes */
    gap: 10px; /* Espacement entre les éléments */
    width: fit-content; /* Ajuste la taille au contenu */
    margin: auto;
}

.list-dev{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.container-inf .list-dev img{
    width: 80px;
}
.list-dev span{
    text-align: center;
}

.container-inf-cpt{
    background-color: #450c35;
    height: 110vh;
    padding: 30px 150px 0 150px;
}

.container-inf-cpt h2{
    text-align: center;
    color: white;
    font-size: 25px;
    margin-bottom: 50px;
}

.container-inf-cpt-list{
    width: 100% !important;
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 colonnes de largeur égale */
    grid-template-rows: repeat(5, auto); /* 2 lignes */
    gap: 10px; /* Espacement entre les éléments */
    width: fit-content; /* Ajuste la taille au contenu */
    margin: auto;
}

.container-inf-cpt .list-dev img{
    width: 100px;
}

.container-inf-cpt p{
    color: white;
}

.container-inf-cpt p:first-child{
    text-align: end;
}


/*================================================================================================================================================
                                                            End Page solution digitale Section 3: developpement informatique
=================================================================================================================================================*/




/*================================================================================================================================================
                                                             Page solution digitale Section 4 developpement web
=================================================================================================================================================*/



.web-ctn{
    padding: 100px 100px 0 100px;
}

.section-content{
    display: flex;
}

.section-content > div{
    width: 50%;
}

.section-content img{
    width: 80%;
}

.section-content-left{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.section-content-right{
    display: flex;
    justify-content: center;
    align-items: center;
}


.section-content-left .line_solution{
    position: relative;
    margin-bottom: 20px;
}

.section-content-left .line_solution hr{
    width: 60px;
    border: 2px solid #922676;
    position: absolute;
    left: 0;
}

.section-content h2{
    font-size: 28px;
    color: #16151e;
    margin-bottom: 5px;
}

.section-content p{
    font-size: 18px;
    line-height: 34px;
}

.section-content-left a{
    background-color: #922676;
    color: white;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    margin-top: 10px;
    display: inline-block;
    transition: all 0.3s;
}

.section-content-left a:hover{
    background-color: #551644;
}



/*================================================================================================================================================
                                                            End Page solution digitale Section 4 developpement web
=================================================================================================================================================*/


/*================================================================================================================================================
                                                         Page solution digitale Section 5 developpement mobile
=================================================================================================================================================*/


.mob-ctn{
    width: 100%;
    padding: 100px;
}

.dev-mobile-ctn{
    display: flex;
    justify-content: center;
    padding: 30px 0;
}

.dev-mobile-ctn > div{
    width: calc(100% / 3);
}

.dev-mobile-header{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.dev-mobile-header h2{
    font-size: 32px;
    color: #16151e;
    margin-bottom: 0px;
}

.dev-mobile-header hr{
    width: 60px;
    border: 2px solid #922676;
    margin-bottom: 2px;
}

.dev-mobile-header p{
    margin-bottom: 60px;
}

.ctn-img-mob{
    display: flex;
    justify-content: center;
}

.ctn-img-mob img{
    width: 65%;
}

.container-mob{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
}

.container-mob .list-app-type{
    display: flex;
    align-items: flex-start;
}

.container-mob .list-app-type h2{
    margin-top: 0;
}

.list-app-type-left h2, .list-app-type-left p{
    text-align: right;
}

.list-app-type-left img{
    margin-left: 15px;
}

.list-app-type-right img{
    margin-right: 15px;
}

.list-app-type-right h2, .list-app-type-right p{
    text-align: left;
}

.container-mob img{
    width: 50px;
}


/*================================================================================================================================================
                                                        End Page solution digitale Section 5 developpement mobile
=================================================================================================================================================*/


/*================================================================================================================================================
                                                        Page solution digitale Section 6 identite graphique
=================================================================================================================================================*/

.section-graphique{
    padding: 100px;
    background-color: #08833b16;
}

.id-graph-header{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.id-graph-header h2{
    font-size: 32px;
    color: #16151e;
    margin-bottom: 0px;
}

.id-graph-header hr{
    width: 60px;
    border: 2px solid #11040e;
    margin-bottom: 2px;
}

.id-graph-header p{
    margin-bottom: 60px;
}

.id-graph-ctn{
    display: flex;
}

.id-graph-ctn > div{
    width: 50%;
}

.id-graph-ctn img{
    width: 70%;
}

.id-graph-content-left{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.id-graph-content-right{
    display: flex;
    justify-content: center;
    align-items: center;
}


.id-graph-content-left .line_solution{
    position: relative;
    margin-bottom: 20px;
}

.id-graph-content-left .line_solution hr{
    width: 60px;
    border: 2px solid #922676;
    position: absolute;
    left: 0;
}

.id-graph-ctn h3{
    font-size: 24px;
    color: #16151e;
    margin-bottom: 5px;
}

.id-graph-ctn p{
    font-size: 18px;
    line-height: 34px;
}

.id-graph-content-left a{
    background-color: #922676;
    color: white;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    margin-top: 10px;
    display: inline-block;
    transition: all 0.3s;
}

.id-graph-content-left a:hover{
    background-color: #551644;
}

.id-graph-ctn ul {
    padding: 0;
    list-style: none;
    column-count: 3;
}

.id-graph-ctn ul li:first-child {
    margin-top: 0;
}

.id-graph-ctn ul li {
    margin: 15px 0;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #424242;
}

.id-graph-ctn ul li img {
    width: 20px;
    margin-right: 10px;
}

/*================================================================================================================================================
                                                        End Page solution digitale Section 6 identite graphique
=================================================================================================================================================*/

/*================================================================================================================================================
                                                            Page solution digitale Section 7 securite
=================================================================================================================================================*/


.section-securite{
    padding: 100px;
}

.securite-header{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.securite-header h2{
    font-size: 32px;
    color: #16151e;
    margin-bottom: 0px;
}

.securite-ctn h3{
    font-size: 28px;
    color: #16151e;
    margin-bottom: 0px;
}

.securite-header hr{
    width: 60px;
    border: 2px solid #0f030c;
    margin-bottom: 2px;
}

.securite-header p{
    margin-bottom: 60px;
}

.securite-ctn{
    display: flex;
}

.securite-ctn > div{
    width: 50%;
}

.securite-ctn img{
    width: 70%;
}

.securite-content-left{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.securite-content-right{
    display: flex;
    justify-content: center;
    align-items: center;
}


.securite-content-left .line_solution{
    position: relative;
    margin-bottom: 20px;
}

.securite-content-left .line_solution hr{
    width: 60px;
    border: 2px solid #922676;
    position: absolute;
    left: 0;
}

.securite-ctn h2{
    font-size: 32px;
    color: #16151e;
    margin-bottom: 5px;
}

.securite-ctn p{
    font-size: 18px;
    line-height: 34px;
}

.securite-content-left a{
    background-color: #922676;
    color: white;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    margin-top: 10px;
    display: inline-block;
    transition: all 0.3s;
}

.securite-content-left a:hover{
    background-color: #551644;
}



/*================================================================================================================================================
                                                           End Page solution digitale Section 7 securite
=================================================================================================================================================*/

/*================================================================================================================================================
                                                         Page Formation & certification Section 1 baniere
=================================================================================================================================================*/


.formation_ban{
    width: 100%;
    height: 67vh;
    background-image: url('../images/reunion.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.bgbanformation{
    width: 100%;
    height: 100%;
    padding: 0 100px;
    display: flex;
    align-items: center;
    background: linear-gradient(#111111a7, #922676 );
}


.formation_ban h1{
    color: rgba(255, 255, 255, 0.763);
    text-align: center;
    padding: 40px;
    font-size: 65px;
}



/*================================================================================================================================================
                                                        End Page Formation & certification Section 1 baniere
=================================================================================================================================================*/

/*================================================================================================================================================
                                                             Page Formation & certification - Introduction
=================================================================================================================================================*/


.introduction{
    padding: 100px;
    display: flex;
}

.introduction > div{
    width: 50%;
}

.introduction > div:last-child{
    display: flex;
    justify-content: center;
    align-items: center;
}

.introduction p:nth-child(2){
    margin-bottom: 30px;
}

.introduction a{
    background-color: #922676;
    color: white;
    padding: 12px 15px;
    transition: all 0.3s;
    text-decoration: none;
    margin-left: 30%;
}

.introduction a:hover{
    background-color: #4e103d;
    border-radius: 13px;
}

.img-intro img{
    width: 80%;
}


/*================================================================================================================================================
                                                            End Page Formation & certification - Introduction
=================================================================================================================================================*/

/*================================================================================================================================================
                                                       Page Formation & certification  - liste formations
=================================================================================================================================================*/


.formation_liste{
    padding: 100px;
    background-color: #92267520;
}

.ctn-liste-form{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ctn-liste-form.top{
    transform: translateY(70px);
}
.ctn-liste-form.bottom{
    transform: translateY(-70px);
}

.ctn-liste-form .hexagon{
    width: 250px;
    height: 270px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    margin: 5px;
    padding: 10px;
    transition: transform 0.5s;
}

.ctn-liste-form .hexagon:hover{
    transform: scale(1.1);
}

.ctn-liste-form .hexagon h3{
    font-size: 18px;
    color: white;
    margin-top: 5px;
    margin-bottom: 10px;
    text-align: center;
}

.ctn-liste-form .hexagon h2{
    font-size: 18px;
    color: white;
    text-align: center;
}

.ctn-liste-form .hexagon p{
    font-size: 13px;
    color: white;
    margin-bottom: 10px;
    text-align: center;
}

.ctn-liste-form .hexagon hr{
    width: 50px;
    border: 2px solid white;
}

.hex1{
    background-color: #36b191;
    transform-origin: bottom right;
    transform-style: preserve-3d;
}
.hex2{
    background-color: #869f2f;
    transform-origin: bottom left;
    transform-style: preserve-3d;
}
.hex3{
    background-color: #BDBDBD;
    transform-origin: right;
    transform-style: preserve-3d;
}
.hex4{
    background-color: #78206E;
}
.hex5{
    background-color: #40ACDB;
    transform-origin: left;
    transform-style: preserve-3d;
}
.hex6{
    background-color: #C21D81;
    transform-origin: top right;
    transform-style: preserve-3d;
}
.hex7{
    background-color: #EFAF4E;
    transform-origin: top left;
    transform-style: preserve-3d;
}


/*================================================================================================================================================
                                                       End Page Formation & certification - liste formations
=================================================================================================================================================*/

/*================================================================================================================================================
                                                Page Formation & certification Section 2 formation
=================================================================================================================================================*/


.formation_section {
    position: relative;
    padding: 100px 100px 0 100px;
}

.formation_section .box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 45px;
  background-color: #9226751c;
  padding: 20px;
  border-radius: 5px;
  height: 200px;
}

.formation_section .box .img-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 125px;
  min-width: 75px;
  height: 75px;
  margin-right: 25px;
}

.formation_section .box .img-box i {
  font-size: 40px;
  -webkit-transition: all .3s;
  transition: all .3s;
  color: #922676;
}

.formation_section .box .detail-box h5 {
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 0;
}

.ctn_btn-axe{
    display: flex;
    justify-content: center;
    padding: 20px 50px;
}

.ctn_btn-axe a{
    padding: 14px 20px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
    margin: 20px;
}

.ctn_btn-axe a:first-child{
    background-color: #922676;
    color: white;
}

.ctn_btn-axe a:first-child:hover{
    background-color: #4e103d;
    border-radius: 14px;
}

.ctn_btn-axe a:last-child{
    color: #922676;
    border: 2px solid #922676;
    font-weight: 600;
}


.ctn_btn-axe a:last-child:hover{
    background-color: #922675ea;
    border-radius: 14px;
    color: white;
}

.heading_container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.heading_container h2 {
  position: relative;
  font-weight: bold;
  margin-bottom: 0;
  font-size: 35px;
}

.heading_container h2 span {
  color: #7EB827;
}

.heading_container p {
  margin-top: 10px;
}


.heading_container a{
    border: 1px solid #922676;
    color: #922676;
    padding: 12px 20px;
    text-decoration: none;
    margin-top: 10px;
    display: inline-block;
    transition: all 0.3s;
}

.heading_container a:hover{
    background-color: #922676;
    color: white;
    border-radius: 10px;
}

.heading_container.heading_center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}
  
.ctn-list-form{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.ctn-list-form > div{
    width: calc(100% / 2 - 50px);
}

.catalogue-ctn{
    width: 100%;
    height: 100%;
    background-color: #000000d8;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5000;
    display: none;
}

.catalogue-ctn form{
    width: 35%;
    background-color: white;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
    padding: 30px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    transform: scale(0);
    transition: transform 0.5s;
}

.catalogue-ctn form.visible{
    transform: scale(1);
}

.catalogue-ctn form input, .catalogue-ctn form textarea{
    padding: 20px 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 20px;
}

.catalogue-ctn form textarea{
    height: 105px;
}

.catalogue-ctn form input:nth-child(4){
    background-color: #92267526;
}

.catalogue-ctn form input:focus, .catalogue-ctn form textarea:focus{
    outline: none;
    border: 2px solid #922676;
}

.catalogue-ctn form button{
    background-color: #922676;
    color: white;
    padding: 10px;
    font-size: 18px;
    border: none;
    cursor: pointer;
    transition: all 0.5s;
}

.catalogue-ctn form button:hover{
    background-color: rgb(56, 10, 44);
}

.form-message p.success{
    font-size: 25px;
    text-align: center;
    color: green;
    font-weight: bold;
    background-color: rgba(0, 128, 0, 0.177);
}
.form-message p.error{
    font-size: 25px;
    text-align: center;
    color: red;
    font-weight: bold;
    background-color: rgba(128, 0, 0, 0.177);
}

/*================================================================================================================================================
                                                    End Page Formation & certification Section 2 formation
=================================================================================================================================================*/


/*================================================================================================================================================
                                Page Formation & certification Section 4 certification
=================================================================================================================================================*/



.certification{
    padding: 100px;
    display: flex;
}


.certification .img-box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
}

.certification .heading_container{
    width: 60%;
}

.certification .img-box img{
    width: 85%;
}

.ctn_plus a{
    color: #922676;
    border: 2px solid #922676 !important;
    text-decoration: none;
    transition: all 0.3s;
    border: none;
    margin: 0 !important;
}

.ctn_plus{
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.ctn_plus p{
    background-color: #92267523;
    padding-left: 10px;
}

.certificat-list-ctn{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.certificat-list-ctn .certificat-list{
    padding: 0 10px;
    width: calc(100% / 3 - 20px);
}

.certificat-list-ctn .certificat-list h3{
    background-color: #922675df;
    color: white;
    text-align: center;
    padding: 10px 20px;
    font-size: 13px;
}

.certificat-list-ctn .certificat-list ul{
    list-style: none;
    padding-left: 15px;
}

.certificat-list-ctn .certificat-list .item-solo h3{
    height: 88px;
    display: flex;
    align-items: center;
}

.certificat-list-ctn .certificat-list ul img{
    margin-right: 10px;
    width: 27px;
}


.certificat-list-ctn .certificat-list ul li{
    margin: 7px 0;
    font-size: 13px;
    display: flex;
    align-items: center;
}

.certificat-list-ctn .certificat-list .cyber-list{
    background-color: #08833b20;
    margin: 0;
}

.certificat-list .cyber-list li{
    display: flex;
    align-items: center;
}

.certificat-list .cyber-list i{
    color: #08833C;
    margin-right: 7px;
}

.certificat-list-ctn .list-ctn-item h3{
    margin: 0;
}

#pecb{
    background-color: #92267515;
}

#pecb ul{
    display: none;
}


/*================================================================================================================================================
                                             End Page Formation & certification Section 4 certification
=================================================================================================================================================*/

/*=============================================================================================================================================
                                                           Start page contact
===============================================================================================================================================*/

.contact_ban{
    width: 100%;
    height: 67vh;
    background-image: url('../images/reunion.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.bgbancontact{
    width: 100%;
    height: 100%;
    padding: 0 100px;
    display: flex;
    align-items: center;
    background: linear-gradient(#111111a7, #922676 );
}


.contact_ban h1{
    text-align: center;
    padding: 70px;
    font-size: 95px;
    color: white;
}

.contact-us{
    padding: 100px;
}

.contact-us .inner{
	box-shadow: 0px 0px 10px #00000024;
	border-radius: 5px;
	overflow:hidden;
}
.contact-us .contact-us-left{
    width: 100%;
    height: 100%;
}
.contact-us .contact-us-form{
	padding:50px 40px;
}
.contact-us .contact-us-form h2 {
	position: relative;
	font-size: 32px;
	color: #333;
	font-weight: 600;
	line-height: 27px;
	margin-bottom: 12px;
	padding-bottom: 20px;
	text-align: left;
}
.contact-us .contact-us-form h2:before{
	position:absolute;
	content:"";
	left:0;
	bottom:0;
	height:2px;
	width:50px;
	background:#922676;
}
.contact-us .contact-us-form p {
	font-size: 14px;
	color: #333;
	font-weight: 400;
	text-align: left;
	margin-bottom:50px;
}
.contact-us .form {
	margin-top: 30px;
}
.contact-us .form .form-group {
	margin-bottom: 22px;
}
.contact-us .form .form-group input {
	width: 100%;
	height: 50px;
	border: 1px solid #eee;
	text-transform: capitalize;
	padding: 0px 18px;
	color: #555;
	font-size: 14px;
	font-weight: 400;
	border-radius: 4px;
}
.contact-us .form .form-group textarea {
	width: 100%;
	height:100px;
	border: 1px solid #eee;
	text-transform: capitalize;
	padding:18px;
	color: #555;
	font-size: 14px;
	font-weight: 400;
	border-radius: 4px;
}
.contact-us .form .form-group.login-btn {
	margin: 0;
}
.contact-us .form button {
	border: none;
}
.contact-us .form .btn {
	display: inline-block;
	margin-right: 10px;
	color: #6d6d6d;
	line-height: 20px;
	width:100%;
}
.contact-us .form .btn:hover{
	background:#922676;
	color:#fff;
    cursor: pointer;
}
.contact-us .contact-us-form .checkbox {
	text-align: left;
	margin: 0;
	margin-top: 20px;
	display:inline-block;
	
}
.contact-us .contact-us-form .checkbox label {
	font-size: 14px;
	font-weight: 400;
	color: #333;
	position: relative;
	padding-left: 20px;
}
.contact-us .contact-us-form .checkbox label:hover{
	cursor:pointer;
}
.contact-us .contact-us-form .checkbox label input{
	display:none;
}
.contact-us .contact-us-form .checkbox label::before {
	position: absolute;
	content: "";
	left: 0;
	top: 5px;
	width: 15px;
	height: 15px;
	border: 1px solid #922676;
	border-radius: 100%;
}
.contact-us .contact-us-form .checkbox label::after {
	position: relative;
	content: "";
	width: 7px;
	height: 7px;
	left: -16px;
	top: -15px;
	opacity: 0;
	visibility: hidden;
	transform: scale(0);
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	transition: all 0.4s ease;
	display: block;
	font-size: 9px;
	background: #922676;
	border-radius: 100%;
}
.contact-us .contact-us-form .checkbox label.checked::after{
	opacity:1;
	visibility:visible;
	transform:scale(1);
}
.contact-us .contact-info{
	margin-top:50px;
}
.contact-us .single-info {
	background: #922676;
	padding: 40px 60px;
	height: 150px;
	border-radius: 10px;
	position:relative;
	-webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}
.contact-us .single-info:before{
	position: absolute;
    z-index: -1;
    content: '';
    bottom: -10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 80%;
    height: 90%;
    background:#922676;
    opacity: 0;
    filter: blur(10px);
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}
.contact-us .single-info:hover:before{
	opacity: 0.8;
}
.contact-us .single-info:hover{
	transform: translateY(-5px);
}
.contact-us .single-info i{
	font-size:42px;
	color:#fff;
	position:absolute;
	left:40px;
}
.contact-us .single-info .content {
	margin-left: 45px;
}
.contact-us .single-info .content h3{
	color:#fff;
	font-size:18px;
	font-weight:600;
	
}
.contact-us .single-info .content p{
	color:#fff;
	margin-top:5px;
}
/* Google Map */
.contact-us #myMap {
	height: 100%;
	width: 100%;
}


/*=============================================================================================================================================
                                                               End page contact
===============================================================================================================================================*/