/* MAIN PROPERTIES */

/* FONTS */
@font-face { 
    font-family: "Red Hat"; 
    src: url('../fonts/Red_Hat_Display/RedHatDisplay-VariableFont_wght.ttf'); 
}  

body {
    font-family: "Red Hat";
    overflow-x:hidden !important;
    position: relative;
}

div.icon-div {
    background-color: #E33924;
    text-align: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: fixed;
    bottom: 100px;    
    right: 20px;     
    z-index: 1000; 
    line-height: 55px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

div.icon-div i{
    font-size: 23px;
    color: white;
}


main#home {
    padding: 1px 50px;
    color: #f7f7f7;
    overflow-x:hidden !important;
}

@media (max-width:1023.98px) {
    main#home {
        padding: 1px 0px;
        color: #f7f7f7;
    }
}

.text-justify {
    text-align: justify;
}

/* Button CTA */
.btn.cta-btn,
.btn.cta-btn-4 {
    border: 0;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.btn.cta-btn {
    background: linear-gradient(to left, rgba(1, 138, 166, 1), rgba(51, 204, 204, 1));
    padding-left: 10px;
    padding-right: 10px;
}

@media (min-width:992px) {
    .btn.cta-btn {
        padding-left: 30px;
        padding-right: 30px;
    }
}

.btn.cta-btn span,
.btn.cta-btn-2 span,
.btn.cta-btn-3 span{
    color: #f7f7f7;
    font-weight: bold;
    font-size: 15px;
}


.btn.cta-btn:hover,
.btn.cta-btn:focus,
.btn.cta-btn:active{
    background: rgba(254, 255, 255, 1);
    border: 2px solid rgba(1, 138, 166, 1);
}

.btn.cta-btn:hover span,
.btn.cta-btn:active span,
.btn.cta-btn:focus span,
.btn.cta-btn-2:hover span,
.btn.cta-btn-2:active span,
.btn.cta-btn-2:focus span,
.btn.cta-btn-3:hover span,
.btn.cta-btn-3:active span,
.btn.cta-btn-3:focus span{
    color: rgba(1, 138, 166, 1);
}

/* NAVBAR */
.navbar {
    background-color: rgba(22, 78, 99, 1);
    font-size: 14.5px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    padding-bottom: 10px;
}

.navbar-nav {
    flex: 1;
    display: flex;
    padding-left: 30px;
}

.navbar-toggler:hover,
.navbar-toggler:active,
.navbar-toggler:focus{
    outline: none;
    box-shadow: none;
}

.navbar-toggler{
    border: none;
}

.navbar-toggler i{
    color: #ffffff;
    font-size: 23px;
}

.navbar-nav .dropdown-menu {
    background-color:  rgba(22, 78, 99, 1);
    padding-left: 20px;
    padding-right: 20px;
}
.navbar-nav .nav-single-item a.nav-link.nav-cs-link,
.navbar-nav .dropdown a.nav-link.nav-cs-link{
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 5px;
    margin-right: 5px;
}

.navbar-nav .nav-single-item a.nav-link.nav-cs-link span,
.navbar-nav .dropdown a.nav-link.nav-cs-link span {
    font-weight: 600;
    text-transform: capitalize;
}

.navbar-nav .nav-single-item a.nav-link.nav-cs-link span{
    position: relative;
    top: 1px;
}

.navbar-nav .nav-single-item a.nav-link.nav-cs-link span,
.navbar-nav .dropdown a.nav-link.nav-cs-link span,
.navbar-nav .dropdown a.nav-link.nav-cs-link i,
.dropdown-item.dropdown-cs-item span{
    color: #f7f7f7;
}

.navbar-nav .dropdown a.nav-link.nav-cs-link i {
    font-size: 16px;
    position: relative;
    top: 4px;
}

.navbar-nav .nav-single-item a.nav-link.nav-cs-link:focus,
.navbar-nav .nav-single-item a.nav-link.nav-cs-link:hover,
.navbar-nav .nav-single-item a.nav-link.nav-cs-link.active,
.navbar-nav .dropdown a.nav-link.nav-cs-link:focus,
.navbar-nav .dropdown a.nav-link.nav-cs-link:hover,
.navbar-nav .dropdown a.nav-link.nav-cs-link.active,
.dropdown-item.dropdown-cs-item.active,
.dropdown-item.dropdown-cs-item:focus,
.dropdown-item.dropdown-cs-item:hover {
    background: transparent;
    border: 1.2px solid rgb(83, 252, 252);
    border-radius: 15px;
}

.navbar-nav .nav-single-item a.nav-link.nav-cs-link.active span,
.navbar-nav .nav-single-item a.nav-link.nav-cs-link:focus span,
.navbar-nav .nav-single-item a.nav-link.nav-cs-link:hover span,
.navbar-nav .dropdown a.nav-link.nav-cs-link.active span,
.navbar-nav .dropdown a.nav-link.nav-cs-link:focus span,
.navbar-nav .dropdown a.nav-link.nav-cs-link:hover span,
.navbar-nav .dropdown a.nav-link.nav-cs-link.active i,
.navbar-nav .dropdown a.nav-link.nav-cs-link:focus i,
.navbar-nav .dropdown a.nav-link.nav-cs-link:hover i,
.dropdown-item.dropdown-cs-item.active span,
.dropdown-item.dropdown-cs-item:focus span,
.dropdown-item.dropdown-cs-item:hover span{
    color: rgb(83, 252, 252);
    font-weight: 800;
}

.dropdown-item.dropdown-cs-item.active span,
.dropdown-item.dropdown-cs-item:focus span,
.dropdown-item.dropdown-cs-item:hover span{
   font-size: 14.5px;
}

.navbar-nav .dropdown-toggle::after {
    display: none;
}

.navbar-brand .image-box.logo {
    width: 95px;
    height: 30px;
}

@media (max-width:991.98px) {
    .navbar-brand .image-box.logo {
        width: 75px;
        height: 30px;
    }
}

.navbar-brand .image-box.logo .main-image {
    object-fit: contain;
}

@media (max-width:991.98px) {
    .navbar {
        padding: 10px 10px 15px;
    }
}

@media screen and (min-width:992px) {
    .dropdown.dropdown-cs #solutions-marketing-menu {
        left: -16rem;
    }
    .dropdown.dropdown-cs #startup-menu,
    .dropdown.dropdown-cs #notre-agence-menu{
        left: -31rem;
    }
}

/* MAIN */
@media (max-width:1023.98px) {
    #home #hero {
        margin-top: 50px;
    }

    #main #hero {
        padding-top: 100px;
    }
}

@media (max-width:767.98px) {
    #hero .title {
        font-size: 26px;
    }

    #section-2 .title,
    #section-3 .title,
    #section-4 .title,
    #section-5 .title,
    #section-6 p.title,
    #section-7 .title,
    #section-8 .title,
    #section-9 .title,
    #section-12 .title,
    #section-13 .title,
    #section-14 .title,
    #section-19 .title,
    #section-20 .title,
    #section-21 .title,
    #section-23 .title,
    #section-24 .title,
    #section-25 .title,
    #section-26 .title,
    #section-27 .title,
    #section-28 .title,
    #section-29 .title,
    #section-30 .title,
    #section-31 .title,
    #section-34 .title,
    #section-37 .title{
        font-size: 22px;
    }

    #hero .description{
        font-size: 14px;
    }
}

@media (min-width:768px) and (max-width:1023.98px) {
    #hero .title {
        font-size: 25px;
    }

    #section-2 .title,
    #section-3 .title,
    #section-4 .title,
    #section-5 .title,
    #section-6 p.title,
    #section-7 .title,
    #section-8 .title,
    #section-9 .title,
    #section-12 .title,
    #section-13 .title,
    #section-14 .title,
    #section-19 .title,
    #section-20 .title,
    #section-21 .title,
    #section-23 .title,
    #section-24 .title,
    #section-25 .title,
    #section-26 .title,
    #section-27 .title,
    #section-28 .title,
    #section-29 .title,
    #section-30 .title,
    #section-31 .title,
    #section-34 .title,
    #section-37 .title{
        font-size: 25px;
    }

    #hero .description{
        font-size: 16px;
    }
}

@media (min-width:1024px) {
    #hero .title {
        font-size: 36px;
    }
}

#hero .title {
    font-weight: 900;
}

#section-2 .title,
#section-3 .title,
#section-4 .title,
#section-5 .title,
#section-6 p.title,
#section-7 .title,
#section-8 .title,
#section-9 .title,
#section-12 .title,
#section-13 .title,
#section-14 .title,
#section-19 .title,
#section-20 .title,
#section-21 .title,
#section-23 .title,
#section-24 .title,
#section-25 .title,
#section-26 .title,
#section-27 .title,
#section-28 .title,
#section-29 .title,
#section-30 .title,
#section-31 .title,
#section-34 .title,
#section-37 .title{
    font-weight: 900;
}

#hero .description{
    font-weight: 500;
    text-align: justify;
}

@media (min-width:1024px) {
    #section-2 .title,
    #section-3 .title,
    #section-4 .title,
    #section-5 .title,
    #section-6 p.title,
    #section-7 .title,
    #section-8 .title,
    #section-9 .title,
    #section-12 .title,
    #section-13 .title,
    #section-14 .title,
    #section-19 .title,
    #section-20 .title,
    #section-21 .title,
    #section-23 .title,
    #section-24 .title,
    #section-25 .title,
    #section-26 .title,
    #section-27 .title,
    #section-28 .title,
    #section-29 .title,
    #section-30 .title,
    #section-31 .title,
    #section-34 .title,
    #section-37 .title{
        font-size: 30px;
    }
    
    #hero .description{
        font-size: 16px;
    }
}

@media (max-width:1023.98px) {    
    #section-2 .description,
    #section-3 .description,
    #section-4 .description,
    #section-5 .description,
    #section-8 .description,
    #section-9 .description,
    #section-12 .description,
    #section-13 .description,
    #section-14 .description,
    #section-20 .description,
    #section-24 .description,
    #section-27 .description,
    #section-30 .description,
    #section-31 .description,
    #section-34 .description{
        text-align: justify;
        font-size: 14px;
    }

}

@media (min-width:1024px) {    
    #section-2 .description,
    #section-3 .description,
    #section-4 .description,
    #section-5 .description,
    #section-8 .description,
    #section-9 .description,
    #section-12 .description,
    #section-13 .description,
    #section-14 .description,
    #section-20 .description,
    #section-24 .description,
    #section-27 .description,
    #section-30 .description,
    #section-31 .description,
    #section-34 .description{
        font-size: 16px;
    }
    
    #section-3 .description {
        text-align: center;
    }
}

#section-2 .description,
#section-3 .description,
#section-4 .description,
#section-5 .description,
#section-8 .description,
#section-9 .description,
#section-12 .description,
#section-13 .description,
#section-14 .description,
#section-20 .description,
#section-24 .description,
#section-27 .description,
#section-30 .description,
#section-31 .description,
#section-34 .description{
    font-weight: 500;
}

#section-10 {
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
}

section#hero {
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

@media (max-width:991.98px) {
    section#hero {
        padding-top: 50px;
    }

    #hero .description {
        margin: 20px 0 0px;
    }
}

@media (min-width:992px) {
    section#hero {
        padding-top: 150px;
        padding-bottom: 100px;
    }

    #hero .description {
        margin: 30px 0 50px;
    }
}


/******************* HOME *******************/

body.home_body {
    background-color: rgba(22, 78, 99, 1);
    color: #f7f7f7;
}

/* Sections */
#home section,
#main section {
    padding: 30px 20px;
}

@media screen and (min-width:1024px) {
    #home section,
    #main section {
        padding: 100px 30px 60px;
    }
}

/* HERO */

/* Image fluid */
#home img.main-image {
    width: 100%;
    height: 100%;
}

/* Text animation */
.changing-text {
    display: inline-block;
    text-align: left;
    vertical-align: -2px;
    color: rgba(0, 161, 194, 1);
    position: relative;
    bottom: 43px;
}

@media (max-width:991.98px) {
    .changing-text {
        display:flex;
        margin-top: 40px;
    }
}  

.changing-text > div {
    font-size:0px;
    opacity:0;
    margin-left:-30px;
    position:absolute;
}

.changing-text > div:nth-child(1) {
    animation: roll 10s linear infinite 0s;
}
.changing-text > div:nth-child(2) {
    animation: roll 10s linear infinite 3s;
}
.changing-text > div:nth-child(3) {
    animation: roll 10s linear infinite 5s;
}
.changing-text > div:nth-child(4) {
    animation: roll 10s linear infinite 7s;
}

@keyframes roll {
0% {
    font-size:0px;
    opacity:0;
    margin-left:-30px;
    margin-top:0px;
    transform: rotate(-25deg);
}
3% {
    opacity:1;
    transform: rotate(0deg);
}
5% {
    font-size:inherit;
    opacity:1;
    margin-left:0px;
    margin-top:0px;
}
20% {
    font-size:inherit;
    opacity:1;
    margin-left:0px;
    margin-top:0px;
    transform: rotate(0deg);
}
27% {
    font-size:0px;
    opacity:0.5;
    margin-left:20px;
    margin-top:100px;
}
100% {
    font-size:0px;
    opacity:0;
    margin-left:-30px;
    margin-top:0px;
    transform: rotate(15deg);
}
}
  
/* image hero */
#hero .image-box{
    height: 300px;
}

@media (min-width:992px) {
    #hero .image-box{
        width: 100%;
        height: 400px;
        margin: 0;
    }
}

#hero img.main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

/* SECTION 2 & 9 */
/* image */
@media (max-width:991.98px) {
    #section-2 .image-box{
        height: 250px;
    }
}

@media (min-width:992px) {
    #section-2 .image-box{
        height: 420px;
    }
}

#section-2 .image-box{
    width: 100%;
}

#section-2 .main-image,
#section-9 .main-image,
#section-34 .main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

/* SECTION 3 - Nos expertises */
/* image */
#section-3 .image-box.icon-top,
#section-5 .image-box.icon-top,
#section-7 .image-box.icon-top,
#section-15 .image-box.icon-top {
    width: 70px;
    height: 70px;
}

#section-3 .icon-top .main-image,
#section-5 .icon-top .main-image,
#section-7 .icon-top .main-image,
#section-15 .icon-top .main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

/* cards */

#section-3 .card.card-cs,
#section-7 .card.card-cs {
    width: 21rem;
    border-radius: 20px;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#section-3 .card.card-cs {
   height: 480px;
}

@media (min-width:1024px) {
    #section-3 .card.card-cs,
    #section-7 .card.card-cs {
        padding: 10px 20px;
    }

    #section-3 .card.card-cs {
        width: 23rem;
    }
}

#section-3 .image-box.card-image-box,
#section-7 .image-box.card-image-box{
    width: 100%;
    height: 155px;
}

#section-3 .card-image-box .main-image,
#section-6 .card-image-box .main-image,
#section-7 .card-image-box .main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

@media (max-width:992px) {
    #section-3 .card-body.card-cs-body,
    #section-7 .card-body.card-cs-body {
        padding: 15px;
    }
}

@media (min-width:1024px) {
    #section-3 .card-body.card-cs-body,
    #section-7 .card-body.card-cs-body {
        padding: 15px 20px 0;
    }
}
/* 
@media (max-width:991.98px) {
    
    #section-3 .card-title.card-cs-title,
    #section-7 .card-title.card-cs-title {
        font-size: 16px;
    }

    #section-3 .card-text.card-cs-text,
    #section-7 .card-text.card-cs-text {
        font-size: 13px;
    }
    
    #section-3 .btn.btn-link-cta span {
        font-size: 13px;
    }
} */

    
    #section-3 .card-title.card-cs-title,
    #section-7 .card-title.card-cs-title {
        font-size: 18px;
    }

    #section-3 .card-text.card-cs-text,
    #section-7 .card-text.card-cs-text {
        font-size: 15px;
    }

    #section-3 .btn.btn-link-cta span {
        font-size: 14px;
    }


#section-3 .card-title.card-cs-title,
#section-7 .card-title.card-cs-title {
    font-weight: 800;
    color: rgba(22, 78, 99, 1);
}

#section-3 .card-text.card-cs-text,
#section-7 .card-text.card-cs-text {
    color: rgba(55, 71, 79, 0.8);
    line-height: 24px;
    font-weight: 500;
    text-align: justify;
}

#section-3 .btn.btn-link-cta {
    border: none;
    background-color: transparent;
}

#section-3 .btn.btn-link-cta span.icon{
    color: rgb(255, 255, 255);
    background-color: rgba(1, 138, 166, 1);
    border-radius: 20px;
    height: 30px;
    width: 30px;
    padding: 3px 5px ;
    font-size: 18px;
    margin-right: 7px;
}

#section-3 .btn.btn-link-cta span.icon i{
    position: relative;
    top: 2px;
    font-size: 18px;
}

#section-3 .btn.btn-link-cta span{
    color: rgba(1, 138, 166, 1);
    font-weight: 500;
}

/* SECTION 4 - Nos realisations */
#section-4 .icon.image-box,
#section-13 .icon.image-box {
    width: fit-content;
    height: 80px;
}

#section-4 .icon .main-image,
#section-13 .icon .main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

@media (max-width:991.98px) {
    #section-4 .image-box,
    #section-7 .image-box,
    #section-13 .image-box {
        height: 250px;
    }
}

@media (min-width:992px) {
    #section-4 .image-box,
    #section-7 .image-box,
    #section-13 .image-box {
        height: 352px;
    }
}
#section-4 .image-box,
#section-7 .image-box,
#section-13 .image-box {
    width: max-content;
    border-radius: 25px;
}


#section-4 .main-image,
#section-8 .main-image{
    width: 100%;
    height: 100%;
    object-fit: contain; 
    border-radius: 25px;
}

/* SECTION 5 - Industries avec lesquelles nous collaborons ? */
#section-5 .image-container {
    position: relative;
    display: inline-block; 
}


#section-5 .image-container .image-box.icon-top {
    background-color: white;
    border-radius: 20px;
    padding: 20px;
    height: 100px;
    width: fit-content;
}

@media (min-width:1024px) {
    #section-5 .image-container .image-box.icon-top {
        padding: 30px;
        height: 150px;
    }
    
}

#section-5 .image-container img.main-image {
    display: block; 
    width: 100%;
    height: 100%;
    object-fit: contain; 
  }
  
#section-5 .image-container .text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(1, 138, 166, 0.8); 
    color: #f7f7f7;
    font-weight: 800;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; 
    transition: opacity 0.3s ease; 
    text-align: center; 
    padding: 10px; 
    box-sizing: border-box; 
}
  
#section-5 .image-container:hover .text {
    opacity: 1;
}

@media (max-width:991.98px) {
    #section-5 .d-flex.industries {
        gap: 20px ;
    }
}

@media (min-width:992px) {
    #section-5 .d-flex.industries {
        gap: 100px ;
    }
}

/* SECTION 6 - Avis clients */

/* section title */
#section-6 p.title {
    text-align: center;
}

/* cards */
#section-6 .card.card-cs {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 10px 20px;
    width: 21.3rem;
    border: none;
    box-shadow: none;
}

@media (min-width:992px) {
    #section-6 .card.card-cs {
        width: 23.5rem;
    }
}

#section-6 .image-box.card-image-box {
    width: fit-content;
    height: 120px;
    position: relative;
}

#section-6 .image-box.card-image-box .i-box {
   background-color:  rgba(1, 138, 166, 1);
   border-radius: 4px;
   padding: 2px 5px;
   position: absolute;
   right: 0;
   top: 0;
}

#section-6 .image-box.card-image-box .i-box i{
   font-size: 23px;
   color: white;
}

#section-6 .card-body.card-cs-body i.color{
   color: #018AA6 !important;
}

#section-6 .card-body.card-cs-body .starr span{
    font-weight: 600;
    font-size: 14px;
}

#section-6 .card-title.card-cs-title {
    font-size: 18px;
    font-weight: 800;
    color: white;
}

#section-6 .subtitle {
    font-size: 16px;
    font-weight: 700;
    color: white;
}

#section-6 .card-text.card-cs-text {
    font-size: 15px;
    color: rgb(250, 250, 250);
    line-height: 24px;
    font-weight: 500;
}

/* SECTION 7 - Actualité */

#section-7 .description {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

/* card */
#section-7 .btn.btn-link-cta {
    text-decoration: underline;
    color: rgba(1, 138, 166, 1);
    font-size: 14px;
    font-weight: 500;
}

/* SECTION 8 -  Prêt à donner vie à votre projet ?  */

#section-8 .image-box,
#section-14 .image-box{
    width: 100%;
}

@media (max-width:991.98px) {
    #section-8 .image-box,
    #section-14 .image-box{
        height: 300px;
    }
}

@media (min-width:992px) {
    #section-8 .image-box,
    #section-14 .image-box{
        height: 400px;
    }
}

#section-8 img.main-image,
#section-14 img.main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}
/******************* END HOME *******************/

/********* Solutions Numériques pages **********/

body.main_body {
    font-family: "Red Hat";
    color: #f7f7f7;
    padding: 0;
    margin: 0;
}

/**** DESIGN UX/UI ****/

#main section#hero {
    background-color: rgba(22, 78, 99, 1);
}

/* Section 9 */
#section-9,
#section-34 {
    color: rgba(67, 77, 82, 1);
}

@media screen and (max-width:991.98px) {
    #section-9 .image-box,
    #section-24 .image-box,
    #section-27 .image-box,
    #section-34 .image-box {
        height: 300px;
    }
}

@media screen and (min-width:992px) {
    #section-9 .image-box,
    #section-24 .image-box,
    #section-27 .image-box,
    #section-34 .image-box {
        height: 400px;
    }
}

#section-9 .image-box,
#section-24 .image-box,
#section-27 .image-box,
#section-34 .image-box {
    width: 100%;
}

/* Section-10 */
#section-10 {
    background-color: rgba(250, 250, 250, 1);
}

#section-10 .card.card-cs {
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(22, 78, 99, 0.9);
    border-radius: 15px;
    box-shadow: 0;
    width: 20rem;
}

#section-10 .card.card-cs .card-body.card-cs-body {
    color: rgba(67, 77, 82, 1);
    margin-top: 20px;
}

@media screen and (max-width:1023.98px){
    #section-10 .card.card-cs {
        padding: 0px;
    }

    #section-10 p.title,
    #section-11 p.title.main,
    #section-17 p.title.main{
        font-size: 25px;
    }

    #section-10 .card.card-cs .card-body.card-cs-body {
        font-size: 14px;
    }

    #section-11 p.description.main, #section-17 p.description.main,
    #section-10 .card.card-cs .card-title.card-cs-title {
        font-size: 16px;
    }

    #section-11 p.description{
        font-size: 14px;
    }

    #section-11 p.title {
        font-size: 20px;
    }

}

@media screen and (min-width:1024px){
    #section-10 p.title,
    #section-11 p.title.main,
    #section-17 p.title.main{
        font-size: 36px;
    }

    #section-10 .card.card-cs {
        padding: 1px 30px 30px;
    }

    #section-10 .card.card-cs .card-title.card-cs-title {
        font-size: 18px;
    }

    #section-11 p.description.main, #section-17 p.description.main {
        font-size: 18px;
    }

    #section-11 p.description{
        font-size: 16px;
    }

    #section-11 p.title {
        font-size: 27px;
    }

}

#section-10 p.title,
#section-11 p.title.main,
#section-17 p.title.main{
    color: rgba(22, 78, 99, 1) ;
    font-weight: 800;
}

#section-10 .card.card-cs .card-title.card-cs-title {
    color: rgba(22, 78, 99, 1);
    font-weight: 700;
}

#section-10 .card.card-cs .image-box.card-image-box{
    width: 80px;
    height: 80px;
    position: absolute;
    top: -32px;
    left: -25px;
    right: 0;
}

#section-10 .card.card-cs .image-box.card-image-box .card-img-top.main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

/* Section 11 */
#section-11 p.description.main,
#section-11 p.description{
    color: rgba(33, 36, 102, 0.8);
    line-height: 30px;
    font-weight: 400;
}

#section-11 p.description.main,
#section-17 p.description.main {
    text-align: center;
}

#section-11 p.title {
    color: rgba(67, 77, 82, 1);
    font-weight: 700;
}

#section-11 .image-box,
#section-17 .image-box {
    width: 100%;
    height: 250px;
}

#section-11 .image-box .main-image,
#section-17 .image-box .main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

/* Section 12 */
#section-12 {
    background-color: rgba(22, 78, 99, 0.9);
}

#section-12 .image-box {
    width: 100%;
    height: 150px;
}

#section-12 .image-box .main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

/* Section 13 */

#section-13 .title,
#section-14 .title,
#section-13 .description,
#section-14 .description {
   color: rgb(31, 32, 35);
}

#section-13 .main-image {
    height: 100%;
    object-fit: contain; 
    border-radius: 30px;
}

/* Section 14 */
/* section#section-14{
    padding-top: 0;
} */

/** END DESIGN UX/UI **/

/** SITES E-COMMERCE  **/
/* Section 15 */
section#section-15,
section#section-16 {
    background: rgba(250, 250, 250, 1);
    padding-bottom: 100px;
}

#section-15 .title,
#section-16 .title,
#section-18 .title {
    font-size: 30px;
    font-weight: 900;
    color: rgba(22, 78, 99, 1);
}

#section-15 .description,
#section-16 .description {
    text-align: center;
}

#section-15 .description,
#section-16 .description,
#section-18 .description {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color:rgba(38, 50, 56, 1);
}

#section-15 .card.card-cs {
    width: 24rem;
    border-radius: 20px;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#section-15 .image-box.card-image-box,
#section-16 .image-box.card-image-box{
    width: 200px;
    height: 155px;
}

#section-15 .card-image-box .main-image,
#section-16 .card-image-box .main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

#section-15 .card-title.card-cs-title,
#section-16 .card-title.card-cs-title,
#section-18 .card-title.card-cs-title {
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    color: rgba(22, 78, 99, 1);
    text-align: start;
}

#section-15 .card-body.card-cs-body,
#section-16 .card-body.card-cs-body{
    padding: 10px;
}

#section-15 .card-body.card-cs-body,
#section-15 .card-body.card-cs-body ul,
#section-16 .card-body.card-cs-body,
#section-16 .card-body.card-cs-body ul,
#section-18 .card-body.card-cs-body{
    font-size: 15px;
    font-weight: 400;
    color: rgba(55, 71, 79, 0.8);
    text-align: justify;
    line-height: 24px;
    padding-left: 1rem;
    margin-bottom: 0;
}

/** END SITES E-COMMERCE  **/

/** APPLICATIONS **/
/* Section 16 */
#section-16 .card.card-cs {
    padding: 10px;
    width: 22rem;
    border-radius: 20px;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
/** END APPLICATIONS **/

/** PLATEFORMES MLM **/
/* Section 17 */
#section-17 .title {
    font-size: 25px;
    font-weight: 800;
    color: rgba(22, 78, 99, 1);
}

#section-17 .description{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color:#434D52;
}

/* Section 18 */
section#section-18{
    padding-bottom: 100px;
    background: rgba(250, 250, 250, 1);
}

#section-18 .card.card-cs {
    max-width: 540px;
    border-radius: 30px;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#section-18 .card.card-cs:hover {
    background-color: #018AA6;
}

#section-18 .card.card-cs:hover .card-body.card-cs-body{
    color: #ffffff;
}

#section-18 .card-body.card-cs-body{
    padding: 15px;
}

#section-18 .image-box{
    max-width: 400px;
    height: 200px;
}

#section-18 .image-box.card-image-box{
    max-width: 300px;
    height: 200px;
    position: relative;
    top: 10px;
}
#section-18 .card-image-box .main-image,
#section-18 .image-box .main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}
/** END PLATEFORMES MLM **/
/********* END Solutions Numériques ***********/


/*********** Solutions Marketing *************/
/** IDENTITE VISUELLE **/
/* Section 19 */
#section-19 .title{
    color: #164E63;
}

#section-19 .card.card-cs,
#section-21 .card.card-cs,
#section-37 .card.card-cs{
    width: 22rem;
    border-radius: 20px;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding-bottom: 30px;
}

#section-19 .image-box.card-image-box,
#section-21 .image-box.card-image-box,
#section-37 .image-box.card-image-box{
    width: 200px;
    height: 200px;
}

#section-19 .card-image-box .main-image,
#section-21 .card-image-box .main-image,
#section-25 .card-image-box .main-image,
#section-26 .card-image-box .main-image,
#section-37 .card-image-box .main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

#section-19 .card-title.card-cs-title,
#section-21 .card-title.card-cs-title,
#section-37 .card-title.card-cs-title {
    color: rgba(22, 78, 99, 1);
}

#section-19 .card-title.card-cs-title,
#section-21 .card-title.card-cs-title,
#section-25 .card-title.card-cs-title,
#section-26 .card-title.card-cs-title,
#section-37 .card-title.card-cs-title {
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    text-align: start;
}

#section-19 .card-body.card-cs-body,
#section-21 .card-body.card-cs-body,
#section-37 .card-body.card-cs-body{
    font-size: 15px;
    font-weight: 400;
    color: rgba(55, 71, 79, 0.8);
    text-align: justify;
    line-height: 24px;
}
#section-19 .card-body.card-cs-body,
#section-21 .card-body.card-cs-body{
    padding: 20px 50px;
}

/* Section 20 */
#section-20,
#section-23 {
    background-color: rgba(22, 78, 99, 0.9);
}

#section-20 .image-box {
    width: 100%;
    height: 350px;
}

#section-20 .image-box .main-image,
#section-23 .image-box .main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}
/** END IDENTITE VISUELLE **/

/** SEO/SEA **/
/* Section 21 */
#section-21,
#section-37 {
    background: #164E63;
}

#section-21 .title,
#section-37 .title{
    color: #ffffff;
}
/** END SEO/SEA **/

/** CRM/ERP **/
/* Section 20 */
#section-20 i.icon {
    position: relative;
    font-size: 13px;
    margin-right: 10px;
}

/* Section 22 */
#section-22 .description {
    color: rgba(33, 36, 102, 0.8);
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
}

#section-22 p.description.main {
    font-size: 18px;
    text-align: center;
}

#section-22 p.description {
    font-size: 16px;
}

#section-22 p.title {
    color: rgba(67, 77, 82, 1);
    font-size: 27px;
    font-weight: 700;
}

#section-22 .image-box,
#section-25 .image-box {
    width: 100%;
    height: 200px;
}

#section-22 .image-box .main-image,
#section-24 .image-box .main-image,
#section-27 .image-box .main-image,
#section-30 .image-box .main-image,
#section-28 .image-box.icon .main-image,
#section-28 .image-box .main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

/* Section 23 */
#section-23 .image-box {
    width: 100%;
    height: 400px;
}
/** END CRM/ERP **/
/******* END Solutions Marketing **********/

/************** Notre Agence ************/
/* À PROPOS DE NOUS */
/* Section-24 */
#section-24 {
    background-color: #F8F8F8;
}

#section-24 .title,
#section-27 .title {
    color: #161616;
}

#section-24 .description,
#section-27 .description{
    color: #272727;
}

/* Section-25 */
#section-25 .title,
#section-26 .title,
#section-28 .title,
#section-29 .title,
#section-25 .card-title.card-cs-title, 
#section-26 .card-title.card-cs-title,
#section-28 .card-title.card-cs-title {
    color: #263238;
}

#section-25 .card.card-cs {
    width: 24rem;
    height: auto;
    border-radius: 30px;
    padding: 10px;
    border: none;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

#section-25 .card-body.card-cs-body,
#section-26 .card-body.card-cs-body {
    font-size: 15px;
    font-weight: 400;
    color: rgba(55, 71, 79, 0.8);
    text-align: justify;
    line-height: 24px;
}

#section-25 .image-box {
    width: 100%;
    border-radius: 22px;
    background-color: #018ba64d;
    object-fit: contain; 
}

/* Button CTA-2 */
.btn.cta-btn-2 {
    background: rgba(1, 138, 166, 1);
    border-radius: 15px;
    padding: 7px 20px;
    border: 0;
    box-shadow: none;
    transition: border 100ms;
}

.btn.cta-btn-2:hover, 
.btn.cta-btn-2:active, 
.btn.cta-btn-2:focus  {
    background-color: rgba(254, 255, 255, 1);
    border: 2px solid rgba(1, 138, 166, 1);
}

/* Section 26*/
#section-26 .card.card-cs {
    width: 20rem;
    height: auto;
    border-radius: 20px;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

#section-26 .card.card-cs.card-cs-1:hover {
    background-color: #018AA6;
}

#section-26 .card.card-cs.card-cs-2:hover {
    background-color: #06965C;
}

#section-26 .card.card-cs.card-cs-3:hover {
    background-color: #000000;
}

 #section-26 .card-body.card-cs-body {
    padding-left: 0;
    padding-right: 0;
 }
 
 #section-26 .image-box.card-image-box{
    width: fit-content;
    height: 60px;
 }
 
#section-26 .card-title.card-cs-title {
    text-transform: uppercase;
}

#section-26 .image-transparent {
    display: flex;
}

#section-26 .image-colored {
    display: none;
}

#section-26 .card.card-cs.card-cs-1 {
    border: 1px solid #018AA6;
}

#section-26 .card.card-cs.card-cs-2 {
    border: 1px solid #06965C;
}

#section-26 .card.card-cs.card-cs-3 {
    border: 1px solid #000000;
}

#section-26 .card.card-cs.card-cs-1:hover,
#section-26 .card.card-cs.card-cs-2:hover,
#section-26 .card.card-cs.card-cs-3:hover {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#section-26 .card.card-cs.card-cs-1:hover .image-transparent,
#section-26 .card.card-cs.card-cs-2:hover .image-transparent,
#section-26 .card.card-cs.card-cs-3:hover .image-transparent {
    display: none;
}

#section-26 .card.card-cs.card-cs-1:hover .image-colored,
#section-26 .card.card-cs.card-cs-2:hover .image-colored,
#section-26 .card.card-cs.card-cs-3:hover .image-colored {
    display: flex;
}

#section-26 .card.card-cs.card-cs-1:hover .card-body.card-cs-body,
#section-26 .card.card-cs.card-cs-2:hover .card-body.card-cs-body,
#section-26 .card.card-cs.card-cs-3:hover .card-body.card-cs-body {
    color: #F8F8F8;
}

#section-26 .card.card-cs.card-cs-1:hover .card-title.card-cs-title,
#section-26 .card.card-cs.card-cs-2:hover .card-title.card-cs-title,
#section-26 .card.card-cs.card-cs-3:hover .card-title.card-cs-title {
    color: #ffffff;
}

/* Section 28 */
#section-28 .card.card-cs {
    width: 20rem;
    border-radius: 15px;
    border: none;
    background-color: #ffffff;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    position: relative;
    transition: bottom 0.5s ease-in-out;
}

#section-28 .card.card-cs:hover {
    transform: translateY(-50px);
}

#section-28 .card.card-cs i {
    font-size: 50px;
    color: #b1b1b1;
}

#section-28 .card-body.card-cs-body {
    font-size: 15px;
    font-weight: 400;
    color: rgba(55, 71, 79, 0.8);
    text-align:left;
    line-height: 20px;
}

#section-28 .card-footer.card-cs-footer {
    background-color: #00729b98;
    border: 0;
    border-radius: 15px;
    border-top-right-radius: 0;
    border-top-left-radius: 30px;
}

#section-28 .card-footer.card-cs-footer p:nth-child(1) {
    color: #263238;
    font-size: 14px;
}

#section-28 .card-footer.card-cs-footer p:nth-child(2) {
    color: #164E63;
    font-size: 13px;
    text-transform: uppercase;
}

#section-28 .image-box {
    width: fit-content;
    height: 40px;
}
#section-28 .image-box.icon {
    width: fit-content;
    height: 50px;
    opacity: 0.2;
}

#section-28 .card-body.card-cs-body .review i{
    font-size: 14px;
    color: #8E8B8C;
 }
 
 #section-28 .card-body.card-cs-body .review i.color{
    color: #20B0A2 !important;
 }
 
#section-28 .card-body.card-cs-body .review span{
    font-weight: 600;
    font-size: 14px;
}

/******** End A PROPOS DE NOUS ********/

/******** IMUXT CLASSROOM ********/
/* Section 29 */
#section-29 .title {
    color: #263238;
}

#section-29 .container.container-cs {
    background: #018AA6;
    border-radius: 20px;
    padding: 50px 20px;
    position: relative;
    margin-top: 50px;
}

#section-29 .card.card-cs{
    width: 16rem;
    border-radius: 0px;
    border: none;
    box-shadow: none;
    background: transparent;
    transition: transform 0.5s ease;
}

#section-29 .card.card-cs:hover {
    background-color: #282142;
    border-radius: 12px;
}

@media screen and (min-width:1024px){
    #section-29 .container.container-cs {
        height: 230px;
    }

    #section-29 .card.card-cs{
        position: absolute; 
        height: 17rem;
    }

    #section-29 .card.card-cs.card-cs-1 {
        top: 5%;
        left: 5%;
        
    }

    #section-29 .card.card-cs.card-cs-2 {
        top: 0%;
        left: 38%;
        right: 50%;
        
    }

    #section-29 .card.card-cs.card-cs-3 {
        top: 5%;
        right: 5%;
        
    }

    #section-29 .card.card-cs.card-cs-1:hover {
        padding: 20px;
    } 

    #section-29 .card.card-cs.card-cs-2:hover {
        padding: 10px;
    }

    #section-29 .card.card-cs.card-cs-3:hover {
        padding: 30px;
    }

    #section-29 .card.card-cs.card-cs-1:hover, 
    #section-29 .card.card-cs.card-cs-2:hover, 
    #section-29 .card.card-cs.card-cs-3:hover {
        transform: scale(1.3); 
        z-index: 1;
    }
}

#section-29 .card.card-cs i{
    font-size: 25px;
    color: #ffffff;
}

#section-29 .card-body.card-cs-body {
    font-size: 15px;
    font-weight: 400;
    color: #f8f8f8;
}

#section-29 .card-title.card-cs-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
}
/**** End Imuxt Classroom *****/

/**** LEGITE ****/
/* Section 30 */
#section-30 .title {
    color: #024969;
}

#section-30 .image-box {
    width: 100%;
    height: 400px;
}

#section-30 .description {
    color: #5c5c5c;
    text-align: justify;
}

#section-30 .number {
    font-size: 60px;
    font-weight: 900;
    color: #018AA6;
    border-right: 2px solid #018AA6;
    height: fit-content;
}

/* Section 31 */
#section-31 p.title {
    color: #164E63;
}

#section-31 p.description {
    color: rgb(71, 71, 71);
    line-height: 30px;
}

#section-31 img.main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

#section-31 div.image-box {
    width: 100%;
    height: 400px;
}

/* Section 32 */
#section-32 .row.card-row{
    width: min-content;
}

#section-32 .card.card-cs {
    background-color: #f8f8f8;
    border: none;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    width: 18rem;
    padding: 1px 10px 15px;
    margin-right: 20px;
    transition: transform 0.5s ease;
}

#section-32 .card.card-cs .title-box .title {
    color: #ffffff;
}

 /* Single */
#section-32 .card.card-cs.card-single:hover {
    background-color: #1A7C9C;
}

#section-32 .card.card-cs.card-single:hover .title-box{
    background-color: #ffffff;
}

#section-32 .card.card-cs.card-single:hover .title-box .title{
    color: #1A7C9C;
}

/* Visiteur */
#section-32 .card.card-cs.card-visiteur:hover {
    background-color: #2DCC70;
}

#section-32 .card.card-cs.card-visiteur:hover .title-box{
    background-color: #ffffff;
}

#section-32 .card.card-cs.card-visiteur:hover .title-box .title{
    color: #2DCC70;
}

/* Dual */
#section-32 .card.card-cs.card-dual:hover {
    background-color: #835AB8;
}

#section-32 .card.card-cs.card-dual:hover .title-box{
    background-color: #ffffff;
}

#section-32 .card.card-cs.card-dual:hover .title-box .title{
    color: #835AB8;
}

/* Business */
#section-32 .card.card-cs.card-business:hover {
    background-color: #FBA01E;
}

#section-32 .card.card-cs.card-business:hover .title-box{
    background-color: #ffffff;
}

#section-32 .card.card-cs.card-business:hover .title-box .title{
    color: #FBA01E;
}

#section-32 .card.card-cs .title-box {
    border-radius: 30px;
    padding: 7px 15px;
    width: min-content;
}

#section-32 .card.card-cs.card-visiteur {
    background-color: #1a7c9c2f;
}

#section-32 .card.card-cs.card-visiteur {
    background-color: #2DCC702f;
}

#section-32 .card.card-cs.card-dual {
    background-color: #835AB82f;
}

#section-32 .card.card-cs.card-business {
    background-color: #FBA01E2f;
}

#section-32 .card.card-cs.card-single .title-box {
    background-color: #1A7C9C;
}

#section-32 .card.card-cs.card-visiteur .title-box {
    background-color: #2DCC70;
}

#section-32 .card.card-cs.card-dual .title-box {
    background-color: #835AB8;
}

#section-32 .card.card-cs.card-business .title-box {
    background-color: #FBA01E;
}

#section-32 .card.card-cs.card-single .card-title.card-cs-title {
    color: #1A7C9C;
}

#section-32 .card.card-cs.card-visiteur .card-title.card-cs-title {
    color: #2DCC70;
}

#section-32 .card.card-cs.card-dual .card-title.card-cs-title {
    color: #835AB8;
}

#section-32 .card.card-cs.card-business .card-title.card-cs-title {
    color: #FBA01E;
}

#section-32 .card.card-cs.card-single:hover,
#section-32 .card.card-cs.card-visiteur:hover,
#section-32 .card.card-cs.card-dual:hover,
#section-32 .card.card-cs.card-business:hover{
    transform: scale(1.1);
}

#section-32 .card.card-cs.card-single:hover .card-title.card-cs-title,
#section-32 .card.card-cs.card-visiteur:hover .card-title.card-cs-title,
#section-32 .card.card-cs.card-dual:hover .card-title.card-cs-title,
#section-32 .card.card-cs.card-business:hover .card-title.card-cs-title{
    color: #fff;
}

#section-32 .card.card-cs .card-body.card-cs-body {
    color: rgba(67, 77, 82, 1);
    margin-top: 20px;
    text-align: center;
}

#section-32 .card.card-cs .card-title.card-cs-title {
    color: rgba(22, 78, 99, 1);
    font-size: 30px;
    font-weight: 800;
}

#section-32 .card.card-cs:hover .card-text.card-cs-text {
    color: #ffffff;
    text-align: center;
}

.btn.cta-btn-3 {
    border-radius: 30px;
    padding: 7px 20px;
    border: 0;
    box-shadow: none;
    transition: border 100ms;
}

.btn.cta-btn-3:hover, 
.btn.cta-btn-3:active, 
.btn.cta-btn-3:focus  {
    background-color: rgba(254, 255, 255, 1);
}

/* Single */
#section-32 .card.card-cs.card-single .btn.cta-btn-3 {
    background: #018AA6;
}

#section-32 .card.card-cs.card-single:hover .btn.cta-btn-3 span{
    color: #018AA6;
}

#section-32 .card.card-cs.card-single:hover .btn.cta-btn-3,
#section-32 .card.card-cs.card-single .btn.cta-btn-3:hover, 
#section-32 .card.card-cs.card-single .btn.cta-btn-3:active, 
#section-32 .card.card-cs.card-single .btn.cta-btn-3:focus  {
    background-color: rgba(254, 255, 255, 1);
    border: 2px solid #018AA6;
}

/* Visiteur */
#section-32 .card.card-cs.card-visiteur .btn.cta-btn-3 {
    background: #06965C;
}

#section-32 .card.card-cs.card-visiteur:hover .btn.cta-btn-3 span{
    color: #06965C;
}

#section-32 .card.card-cs.card-visiteur:hover .btn.cta-btn-3,
#section-32 .card.card-cs.card-visiteur .btn.cta-btn-3:hover, 
#section-32 .card.card-cs.card-visiteur .btn.cta-btn-3:active, 
#section-32 .card.card-cs.card-visiteur .btn.cta-btn-3:focus  {
    background-color: rgba(254, 255, 255, 1);
    border: 2px solid #06965C;
}

/* Dual */
#section-32 .card.card-cs.card-dual .btn.cta-btn-3 {
    background: #835AB8;
}

#section-32 .card.card-cs.card-dual:hover .btn.cta-btn-3 span{
    color: #835AB8;
}

#section-32 .card.card-cs.card-dual:hover .btn.cta-btn-3,
#section-32 .card.card-cs.card-dual .btn.cta-btn-3:hover, 
#section-32 .card.card-cs.card-dual .btn.cta-btn-3:active, 
#section-32 .card.card-cs.card-dual .btn.cta-btn-3:focus  {
    background-color: rgba(254, 255, 255, 1);
    border: 2px solid #835AB8;
}

/* Business */
#section-32 .card.card-cs.card-business .btn.cta-btn-3 {
    background: #FBA01E;
}

#section-32 .card.card-cs.card-business:hover .btn.cta-btn-3 span{
    color: #FBA01E;
}

#section-32 .card.card-cs.card-business:hover .btn.cta-btn-3, 
#section-32 .card.card-cs.card-business .btn.cta-btn-3:hover, 
#section-32 .card.card-cs.card-business .btn.cta-btn-3:active, 
#section-32 .card.card-cs.card-business .btn.cta-btn-3:focus  {
    background-color: rgba(254, 255, 255, 1);
    border: 2px solid #FBA01E;
}

/* Section 34 */
#section-34 {
    background: #FBFBFB;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
    position: relative;
    bottom: 70px;
    z-index: -1;
}

/**** End LEGITE ****/

/**** NOS REALISATIONS ****/
/* Section 33 */
#section-33 .title {
    color: #272727;
    font-size: 25px;
    font-weight: 700;
}

#section-33 .card.card-cs {
    background-color: none;
    border: 0;
    border-radius: 30px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    width: 18rem;
    padding: 0;
    transition: display 0.5s ease, width 0.5s ease;
}

#section-33 .card.card-cs .card-body.card-cs-body {
    color: rgba(67, 77, 82, 1);
    background-color: #d4f3ff;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    padding: 10px 30px;
}


#section-33 .card.card-cs .image-box.card-image-box {
    width: 100%;
    height: 200px;
    border-radius: 30px;
}

#section-33 .card.card-cs:hover .image-box.card-image-box {
    width: 100%;
    height: 100px;
    border-radius: 30px;
}

#section-33 .card.card-cs .image-box.card-image-box .card-img-top.main-image {
    width: 100%;
    height: 100%;
    border-radius: 30px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    object-fit: cover; 
}

#section-33 .card.card-cs .card-title.card-cs-title {
    color: rgba(22, 78, 99, 1);
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
}

#section-33 .card.card-cs .card-subtitle.card-cs-subtitle {
    color: rgb(124, 124, 124);
    font-size: 14px;
    font-weight: 600;
}

#section-33 .card.card-cs .card-text.card-cs-text ul li{
    color: rgb(69, 73, 75);
    font-size: 16px;
    font-weight: 500;
}

#section-33 .card.card-cs .card-text.card-cs-text {
    display: none;
}

#section-33 .card.card-cs:hover .card-text.card-cs-text {
    display: block;
}
/**** End NOS REALISATIONS ****/

/*** DEVENIR STAGIAIRE ***/
#section-35 .title {
    font-size: 36px;
    font-weight: 800;
    color: #263238;
}

#section-35 input.form-control.form-cs-control,
#section-35 textarea.form-control.form-cs-control,
#section-38 input.form-control.form-cs-control,
#section-38 textarea.form-control.form-cs-control{
    border: 1px solid #4B4B4B;
    border-radius: 10px;
    box-shadow: none;
}

#section-35 input.form-control.form-cs-control,
#section-38 input.form-control.form-cs-control{
    height: 45px;
}

#devenir-partenaire-form input[type="file"],
#soumettre-projet-form input[type="file"],
#devenir-stagiaire-form input[type="file"],
#attestation,
#preuve,
#portofolio,
#lettre {
    display: none;
}

#section-35 #file-label,
#section-38 #file-label,
#section-35 #attestation-label,
#section-35 #preuve-label,
#section-35 #portofolio-label,
#section-35 #lettre-label,
#section-35 input.form-control.form-cs-control::placeholder,
#section-38 input.form-control.form-cs-control::placeholder,
#section-35 textarea.form-control.form-cs-control::placeholder,
#section-38 textarea.form-control.form-cs-control::placeholder {
    color: #4B4B4B;
    font-size: 14px;
    font-weight: 400;
}

#section-35 textarea.form-control.form-cs-control::placeholder,
#section-38 textarea.form-control.form-cs-control::placeholder {
    color: rgb(68, 68, 68, 0.85);
    font-size: 13px;
    font-weight: 400;
}

#section-35 #file-label,
#section-38 #file-label,
#section-35 #attestation-label,
#section-35 #preuve-label,
#section-35 #portofolio-label,
#section-35 #lettre-label {
    cursor: pointer;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    padding-right: 5px;

}

#section-35 .form-label.form-cs-label,
#section-38 .form-label.form-cs-label {
    color: #272727;
    font-size: 14px;
    font-weight: 600;
}

#section-35 .form-label.form-cs-label .required,
#section-38 .form-label.form-cs-label .required {
    color: #D65863;
    font-size: 13px;
}

#section-35 .input-group-text.input-group-cs-text,
#section-38 .input-group-text.input-group-cs-text {
    background-color: #018AA6;
    border: 0;
    padding: 0.375rem 1.2rem;
}

#section-35 .input-group-text.input-group-cs-text i,
#section-38 .input-group-text.input-group-cs-text i{
    color: #ffffff;
    font-size: 20px;
    position: relative;
    top: 3px;
}

#section-35 label.form-control.form-cs-control,
#section-38 label.form-control.form-cs-control {
    border: 1px solid #4B4B4B;
    border-radius: 10px;
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
    height: 45px;
    line-height: 30px;
}


#section-35 .form-border-cs{
    width: 135px;
    height: 600px;
}

#section-35 .form-border-cs,
#section-36 .form-border-cs{
    background-color: #2D6073;
    border-radius: 50px;
    position: relative;
}

@media screen and (min-width:320px) and (max-width:575px) {
    #section-35 .form-border-cs.form-border-cs-2,
    #section-36 .form-border-cs.form-border-cs-2 {
        left: 22px;
    }
}

@media screen and (min-width:576px) and (max-width:667px) {
    #section-35 .form-border-cs.form-border-cs-2,
    #section-36 .form-border-cs.form-border-cs-2 {
        left: 34px;
    }
}

@media screen and (min-width:668px) and (max-width:768px) {
    #section-35 .form-border-cs.form-border-cs-2,
    #section-36 .form-border-cs.form-border-cs-2 {
        left: 50px;
    }
}

@media screen and (min-width:768px) and (max-width:868px) {
    #section-35 .form-border-cs.form-border-cs-2,
    #section-36 .form-border-cs.form-border-cs-2 {
        left: 60px;
    }
}

@media screen and (min-width:868px) and (max-width:991px) {
    #section-35 .form-border-cs.form-border-cs-2,
    #section-36 .form-border-cs.form-border-cs-2 {
        left: 80px;
    }
}

@media screen and (min-width:992px) {
    #section-35 .form-border-cs.form-border-cs-2,
    #section-36 .form-border-cs.form-border-cs-2 {
        left: 100px;
    }
}

#section-35 .form-border-cs.form-border-cs-1 ,
#section-36 .form-border-cs.form-border-cs-1 {
    right: 150px;
}

#section-35 .subtitle,
#section-38 .subtitle {
    font-size: 12px;
}

#section-35 .subtitle,
#section-38 .subtitle,
#section-36 .description {
    color: rgb(68, 68, 68, 0.85);
}

/* Section 36*/
#section-36 {
    margin-bottom: 100px;
}

#section-36 .title {
    color: #024969;
    font-size: 27px;
    font-weight: 700;
    margin-bottom: 30px;
}

#section-36 .description {
    text-align: center;    
    font-size: 15px;
}

#section-36 .form-border-cs {
    width: 135px;
    height: 400px;
}
/*** End DEVENIR STAGIAIRE ***/
/*********** END Notre Agence ***********/

/************* STARTUP *************/
/* Financement Startup */
/* SECTION 37 */
#section-37 .card-body.card-cs-body {
    padding: 20px;
}
/* END Financement Startup */

/*  Devenir partenaire */
/* SEction 38 */
#section-38 .bg-colored{
    background: #00405c;
    border-radius: 40px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 50px 0px 50px 50px;
    height: 550px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}


#section-38 .bg-colored .title.main {
    color: #fff;
}

#section-38 .bg-form .title.main {
    color: #00293b;
}

#section-38 .bg-colored .title.main,
#section-38 .bg-form .title.main {
    font-size: 22px;
    font-weight: 900;
}

#section-38 .bg-colored .title {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

#section-38 .description {
    text-align: center;    
    font-size: 14px;
    color: #FBFBFB;
}  

#section-38 .image-box {
    width: fit-content;
    height: 70px;
}

#section-38 .image-box.image-box  {
    height: 90px;
}

#section-38 .image-box .main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

#section-38 .bg-form {
    background: #ffffff;
    border-radius: 40px;
    padding: 50px ;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

#section-38 .bg-form .title {
    color: #164E63;
    font-size: 16px;
    font-weight: 700;
}
/* END Devenir partenaire */
/*********** END STARTUP ***********/

/*********** BLOG ***********/
/* All news */
/* Section 39 */
#section-40,
#section-39 {
    margin-top: 50px;
}

#section-39  .title.main {
    color: #1a1a1a;
    font-size: 30px;
    font-weight: 800;
    text-align: center;
}

#section-39  .description {
    color: rgb(69, 73, 75);
    font-size: 16px;
}

#section-39  a.card-link {
    text-decoration: none;
    color: #000000;
    position: relative;
}

#section-39 a.card-link .card {
    width: 21rem;
    height: 430px;
    border-radius: 15px;
    border: 0;
    border-bottom: 8px solid #129A8D;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

#section-39 a.card-link .image-box{
    width: 100%;
    height: 250px;
    border-radius: 15px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
    
#section-39 a.card-link .image-box .card-img-top.main-image {
    width: 100%;
    height: 100%;
    border-radius: 30px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    object-fit:cover; 
}

#section-39 a.card-link .card-body{
    padding: 20px;
    background: #F3F8F7;
}

#section-39 a.card-link .card-body div.circle{
    position: absolute;
    width: 25px;
    height: 25px;
    background: #018AA6;
    border-radius: 100%;
    top: 59%;
    left: 50%;
    transform: translate(-50%, -50%); 
}

#section-39 a.card-link .card-body .card-title {
    color: #018AA6;
    font-size: 16px;
    font-weight: 800;
}

#section-39 a.card-link .card-body ul li.card-text{
    color: #212121;
    font-size: 15px;
    font-weight: 600;
}

#section-39 a.card-link .card-body p.card-text.date{
    color: #E33924;
    font-size: 13px;
    font-weight: 500;
}

/* BUTTON CTA 3 */
.btn.cta-btn-4 {
    background: #FFF;
    padding: 5px 30px;
    border-radius: 10px;
}

.btn.cta-btn-4 span{
    color: rgb(1, 138, 166);;
    font-weight: 700;
    font-size: 13.5px;
}

.btn.cta-btn-4:hover,
.btn.cta-btn-4:focus,
.btn.cta-btn-4:active{
    background: rgb(1, 138, 166);
}


.btn.cta-btn-4:hover span,
.btn.cta-btn-4:focus span,
.btn.cta-btn-4:active span{
    color: #fff;
}

/**** BLOG DETAIL ****/
/* Section 40 */
#section-40 .btn-row{
    margin-bottom: 20px;
}

.btn.btn-cta-5,
#section-40 .feature {
    background: #f5f5f5;
    padding: 5px 10px;
    border-radius: 30px;
    border: 0;
    box-shadow: 0;
}

.btn.btn-cta-5:hover,
#section-40 .btn.btn-cta-5:focus {
    background: #333333;
}

#section-40 .btn.btn-cta-5 i{
    position: relative;
    top: 2px;
    margin-right: 3px;
}

#section-40 .btn.btn-cta-5 i,
#section-40 .btn.btn-cta-5 span,
#section-40 .feature{
   font-size: 13px;
   font-weight: 600;
}

#section-40 .btn.btn-cta-5 i,
#section-40 .btn.btn-cta-5 span{
    color: #4e4e4e;                                                                                                                                                                                             
}

#section-40 .btn.btn-cta-5:hover i,
#section-40 .btn.btn-cta-5:focus i,
#section-40 .btn.btn-cta-5:hover span,
#section-40 .btn.btn-cta-5:focus span{
   color: #fff ;
}

#section-40 .feature{
    color: #4e4e4e;
    width:min-content;
    height: auto;
}

#section-40 .title.main{
    color: #263238;
    font-size: 30px;
    font-weight: 800;
}

#section-40 .date{
    color: #616161;
    font-size: 13px;
    font-weight: 400;
}

#section-40 .header.image-box{
    width: 100%;
    height: 450px;
    border-radius: 30px;
    background: linear-gradient(to bottom, rgba(0, 53, 64, 0.322), rgba(0, 53, 64, 0.322)), url('../images/img-146.jpg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

/* Anchor sidebar */
#section-40 .summary ul {
    border-left: 1px solid #3f3f3f;
    position: sticky;
}

#section-40 .summary ul a {
    color: #434D52;
    text-decoration: none;
}

#section-40 .summary ul a.active div.border-cs{    
    width: 4px;
    height: auto;
    background-color: #434D52;
    position: relative;
    right: 18px;
}

#section-40 .summary ul li span.link{
    color: #7c7c7c;
    font-size: 15px;
    font-weight: 500;
}

#section-40 .summary ul a.active span.link{    
    color: #444444;
    font-weight: 700;
}

#section-40 .summary .title{
    color: #2b2b2b;
    font-size: 17px;
    font-weight: 800;
}

#section-40 .summary div.image-box {
    width: 100%;
    height: 30px;
}

#section-40 .summary div.image-box .main-image{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Content */
#section-40 .content {
    overflow-y: scroll;
}

#section-40 .content .container.box{
    height: 700px;
}


#section-40 .content .title {
    color: #272727;
    font-size: 20px;
    font-weight: 800;
}

#section-40 .content .description {
    color: #434D52;
    font-size: 15px;
    font-weight: 500;
}


/**** END BLOG DETAIL ****/
/*********** END BLOG ***********/

/* *** FOOTER *** */
@media (max-width:1023.98px) {
    #footer {
        margin-top: 0px;
    }

    #footer .container-fluid.container-cs-fluid {
        padding:30px
    }
}

#footer {
    background-color: #164E63;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

@media (min-width:1024px) {
    #footer {
        margin-top: 100px;
    }

    #footer .container-fluid.container-cs-fluid {
        padding: 100px 50px 1px;
    }
    
    #footer .container-fluid.container-cs-fluid-2 {
        padding: 10px 50px 1px;
    }
}

/* Logo */
#footer .logo.image-box {
    width: 80px;
    height: 30px;
}

#footer .logo.image-box .main-image {
    object-fit: contain;
}

/* Text */
#footer .title {
    font-size: 15px;
    font-weight: 800;
}

#footer .description{
    font-size: 14px;
    font-weight:400;
}

/* Form */
#footer input.form-control.form-cs-control{
    background-color: transparent;
    border: 0;
    border-radius:0;
    font-size: 14px;
    color: #ffffff;
}

#footer input.form-control.form-cs-control:focus{
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#footer input.form-control.form-cs-control::placeholder {
    color: #cfcfcf;
    font-size: 14px;
}

#footer .input-group.input-cs-group{
    background-color: transparent;
    border: 2px solid rgba(1, 138, 166, 1);
    border-radius:40px;
    padding:3px 10px;
}

#footer .input-group-text.input-cs-group-text{
    background-color: transparent;
    border: 0;
    border-radius:0
}

#footer .image-box.icon{
    width: 30px;
    height: 30px;
    border-radius: 40px;
    padding: 3px 5px;
    border: none;
    background: linear-gradient(rgba(1, 138, 166, 1), rgba(51, 204, 204, 1));
}

#footer .image-box.icon .main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

#footer .shortcut-link {
    font-weight: 500;
    color: #f7f7f7;
    font-size: 14px;
    margin-bottom: 10px;
}
#footer img.main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

@media (max-width:991.98px) {
    #footer .image-box {
        height: 250px;
      }
}

@media (min-width:992px) {
    #footer .image-box {
        height: 450px;
      }
}

#footer .image-box{
    width:auto;
}

#footer .btn.btn-cta {
    background-color: transparent;
    border: 2px solid rgba(1, 138, 166, 1);
    border-radius: 40px;
    width: 100%;
    height: 46px;
}

#footer .btn.btn-cta:hover,
#footer .btn.btn-cta:focus {
    background: linear-gradient(to left, rgba(1, 138, 166, 1), rgba(51, 204, 204, 1));
    border: 0;
}

#footer .btn.btn-cta span{
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

#footer .btn.btn-cta:hover span,
#footer .btn.btn-cta:focus span{
    color: #ffffff;
}

#footer .btn.btn-cta.bg-full{
    background: linear-gradient(to right, rgba(1, 138, 166, 1),rgba(51, 204, 204, 1));
    border: 0;
}

@media (max-width:1023.98px) { 
    #footer .btn.btn-cta.bg-full{
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

@media (min-width:1024px) { 
    #footer .btn.btn-cta.bg-full{
        margin-top: 50px;
        margin-bottom: 50px;
    }
}

#footer .btn.btn-cta.bg-full:hover,
#footer .btn.btn-cta.bg-full:focus{
    background: transparent;
    border: 2px solid rgba(1, 138, 166, 1);
}

#footer .btn.btn-cta.bg-full:hover span,
#footer .btn.btn-cta.bg-full:focus span{
    color: #fff;
}

#footer .btn.btn-cta.bg-full i{
    font-size: 18px;
}

#footer .social-link .image-box {
    width: 28px;
    height: 28px;
}

#footer .social-link .image-box .main-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

#footer .hr.hr-cs {
    border-top: 1px solid rgba(224, 224, 224, 1);
    opacity: 1;
}

/* help */
#helpModal .modal-content {
    background-color: #fdfdfd;
    border-radius: 30px;
    border: 1px solid transparent;
}

@media (min-width:1024px) {
    #helpModal .modal-dialog {
        min-width: 600px;
    }
}

#helpModal .modal-header{
    padding: 15px 30px;
}

#helpModal .modal-header .icon-box{
    background-color: #00729b34;
    border-radius: 50%;
    padding: 9px;
    text-align: center;
    width: 40px;
    height: 40px;
}

#helpModal .modal-header .icon-box i{
    color: #00729b;
    font-size: 17px;
    position: relative;
}

#helpModal .modal-header {
    padding-bottom: 5px;
}

#successModal-intern .btn.btn-close:focus, 
#successModal-intern .btn.btn-close:hover, 
#successModal-intern .btn.btn-close:visited,
#failModal .btn.btn-close:focus, 
#failModal .btn.btn-close:hover, 
#failModal .btn.btn-close:visited,
#successModal .btn.btn-close:focus, 
#successModal .btn.btn-close:hover, 
#successModal .btn.btn-close:visited,
#helpModal .btn.btn-close:focus, 
#helpModal .btn.btn-close:hover, 
#helpModal .btn.btn-close:visited {
    border: none;
}

#helpModal .modal-title {
    font-weight: 700;
    color: #1a1a1a;
}

#helpModal .modal-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: #7a7a7a;
}

#successModal-intern .modal-header .btn-close,
#failModal .modal-header .btn-close,
#successModal .modal-header .btn-close,
#helpModal .modal-header .btn-close{
    padding: 0;
    background: none !important;
}

#helpModal .modal-header .btn-close i{
    top: -24px;
}

#successModal-intern .modal-header .btn-close i,
#failModal .modal-header .btn-close i,
#successModal .modal-header .btn-close i,
#helpModal .modal-header .btn-close i{
    color: #7c7c7c;
    font-size: 13px;
    position: relative;
}

#helpModal .modal-body {
    padding: 15px 30px;
}

#helpModal .modal-body label.form-label {
    font-size: 12px;
    color: #313131;
    font-weight: 500;
    margin-bottom: 1px;
}

#helpModal .modal-body label.form-label span.required{
    color: #E33924;
}

#helpModal .modal-body textarea.form-control:focus,
#helpModal .modal-body input.form-control:focus {
    outline: none;
    box-shadow: none;
}

#helpModal .modal-body textarea.form-control,
#helpModal .modal-body input.form-control {
    border: 1px solid #b9b9b9;
    border-radius: 10px;
    background-color: transparent;
    font-size: 14px;
    color: #212121;
    font-weight: 500;
}

#helpModal .modal-body textarea.form-control::placeholder,
#helpModal .modal-body input.form-control::placeholder{
    color: #808080;
}

#helpModal .modal-footer {
    padding: 15px 30px;
}

#successModal-intern .modal-footer button.btn.cta-btn,
#failModal .modal-footer button.btn.cta-btn,
#successModal .modal-footer button.btn.cta-btn,
#helpModal .modal-footer button.btn.cta-btn-2 {
    border-radius: 15px;
    border: 1px solid transparent;
    width: max-content;
}

#helpModal .modal-footer button.btn.cta-btn-2 {
    border-radius: 15px;
    border: 1px solid transparent;
    width: max-content;
}

#successModal-intern .modal-footer button.btn.cta-btn span,
#failModal .modal-footer button.btn.cta-btn span,
#successModal .modal-footer button.btn.cta-btn span,
#helpModal .modal-footer button.btn.cta-btn-2 span{
    font-size: 13px;
    font-weight: 800;
    color: #fff;
}

#helpModal .modal-footer button.btn.cta-btn-2.submit {
    background-color: #016aa6;
}

#helpModal .modal-footer button.btn.cta-btn-2.cancel {
    background-color: #1a1a1a;
}

/* success modal */
@media (min-width:1024px) {
    #successModal .modal-dialog {
        width: 350px;
    }

    #successModal-intern .modal-dialog {
        width: 500px;
    }

    #failModal .modal-dialog {
        width: 350px;
    }
}

#successModal-intern .modal-content,
#failModal .modal-content,
#successModal .modal-content {
    background-color: #fff;
    border-radius: 30px;
    border: 1px solid transparent;
    box-shadow: rgba(235, 235, 235, 0.2) 0px 8px 24px;
}

#successModal-intern .modal-body,
#failModal .modal-body,
#successModal .modal-body {
    padding: 30px;
}

#successModal-intern .modal-body .title,
#failModal .modal-body .title,
#successModal .modal-body .title {
    font-size: 20px;
    font-weight: 900;
    color: #1a1a1a;
}

#successModal-intern .modal-body .subtitle,
#failModal .modal-body .subtitle,
#successModal .modal-body .subtitle {
    color: #5c5c5c;
    font-size: 15px;
    font-weight: 500;
}

#successModal-intern .modal-body i,
#successModal .modal-body i {
    font-size: 70px;
    color: #1A7C9C;
}

#failModal .modal-body i {
    font-size: 70px;
    color: #E33924;
}

#successModal-intern .modal-footer,
#successModal .modal-footer {
    padding-bottom: 30px;
}

#successModal-intern .modal-footer button.btn.cta-btn,
#successModal .modal-footer button.btn.cta-btn {
    background: #1A7C9C;
    border-radius: 20px;
}

#failModal .modal-footer button.btn.cta-btn {
    background: #E33924;
    border-radius: 20px;
}