:root {
    --primary:#da238f ;
    --secondary: #0B2154;
    --light: #F2F2F2;
    --dark: #24a44f;
}

.fw-medium {
    font-weight: 600 !important;
}

body{
    overflow-x: hidden;
    font-family:'Open Sans', 'Helvetica Neue', sans-serif; 
}

.text-center{
    background-color: #24a44f;
    color: #fff;
    text-align: justify;
}
.text-center3{
    background-color: gray;
    color: #000000;
    text-align: justify;
}

#presidente{
    font-size: small;
}
/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

.benevole{
    background-color: #da238f;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 15px;
    margin-right: 30px;
   
}
.benevole:hover{
    background-color: #24a44f;
    color: #fff;
    text-decoration: none;
}
.col-lg-6{
    display: inline-block;
}
/*** Button ***/
.btn {
    font-weight: 500;
   
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-secondary {
    color: #FFFFFF;
    background-color: #da238f;
    padding: 20px;
}


.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 2px;
}


/*** Navbar ***/
.haut{
    background-color: #da238f;
    padding: 15px;
    text-align: right;
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    vertical-align: middle;
    margin-left: 8px;
}

.navbar-light .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 30px 0;
    color: #FFFFFF;
    font-size: 15px;
    outline: none;
    
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--primary);
}

@media (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar-light .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
   
}

.navbar-light .navbar-brand,
.navbar-light a.btn {
    height: 75px;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--dark);
    font-weight: 500;
}

.navbar-light.sticky-top {
    top: -100px;
    transition: .5s;
}

@media (min-width: 992px) {
    .n .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
        
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}

.album button{
    margin-right: 200px;
}
.album a:hover{
    background-color: #da238f;
}
/*** Header ***/
.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .7);
    z-index: 1;
}

.carousel-control-prev,
.carousel-control-next {
    width: 10%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
}

@media (max-width: 768px) {
    #header-carousel .carousel-item {
        position: relative;
        min-height: 450px;
    }
    
    #header-carousel .carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
}

.page-header {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.page-header-inner {
    background: rgba(0, 0, 0, .7);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--light);
}
.mb{
    text-align: center;
    margin-bottom: 10px;
}
.mb-0{
    color: #fff;
}

/*** Service ***/
.service .nav .nav-link {
    background: var(--light);
    transition: .5s;
}

.service .nav .nav-link.active {
    background: var(--primary);
}

.service .nav .nav-link.active h4 {
    color: #FFFFFF !important;
}



/*** Team ***/
.team-item .team-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    transform: scale(0);
    transition: .5s;
}

.team-item:hover .team-overlay {
    transform: scale(1);
}

.team-item .team-overlay .btn {
    color: var(--primary);
    background: #FFFFFF;
}

.team-item .team-overlay .btn:hover {
    color: #FFFFFF;
    background: var(--secondary)
}
 
.testimonial-carousel .owl-item .testimonial-text,
.testimonial-carousel .owl-item.center .testimonial-text * {
    transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-text {
    background: var(--primary) !important;
}

.testimonial-carousel .owl-item.center .testimonial-text * {
    color: #FFFFFF !important;
}

.testimonial-carousel .owl-dots {
    margin-top: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    border: 1px solid #CCCCCC;
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    background: var(--primary);
    border-color: var(--primary);
}




/*** Footer ***/
.footer {
    background-color: #da238f;
    color: #fff;
    padding-left:15px;
    padding-right:15px;
   
}

.footer .btn.btn-social {
    margin-right: 5px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light);
    border: 1px solid #FFFFFF;
    border-radius: 35px;
    transition: .3s;
}

.footer .btn.btn-social:hover {
    color: var(--primary);
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: var(--light);
}

.footer .footer-menu a {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, .3);
}

.footer .footer-menu a:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}

/** debut contact **/

.contact {
	margin-top: 15px;
    
}
.contour{
    border: #da238f solid 2px;
    border-radius: inherit;
    padding: 20px 50px 20px 50px;
}
.contact h3 {
	color: #fff;
	font-weight: 500;
	font-size: 28px;
    		line-height: 30px;
	padding-bottom: 30px;
	text-transform: uppercase;
}

.contact span {
	color: #fff;
	font-size: 17px;
	line-height: 27px;
}
.contact .main_form {
    background: #fff;
  
   padding: 40px;
} 
.contact .main_form {
    background: #fff;
  
   padding-top: 3%;
   padding-right: 2%;
   padding-left: 2%;
} 

.form-control, .textarea {
    border-radius: inherit;
    margin-bottom: 30px;
    padding: 13px 20px;
    background-color: #d9dbda;
}
.form-control:focus, .textarea:focus {
    box-shadow: inherit;
    border: #24a44f solid 1px !important;
}

.textarea {
    
    margin-bottom: 30px;
    padding: 13px 20px;
    width: 100%;
    padding-top: 40px;
    background-color: #d9dbda;
    border: none;
} 

.send {
   max-width: 212px;
   margin: 0 auto;
   display: block;
   background: #da238f;
   color: #fff;
   padding: 5px 0px;
   width: 100%;
   font-size: 17px;
   border: none;
}

.send:hover {
    background: #24a44f;
}

#color{
    color: #da238f;
}

.copy{
    padding: 5px;
    color: #fff;
    background-color: #24a44f;
    text-align: center;
    z-index: 1;

}
.copy2{
    text-size-adjust: 5px;
    color: #fff;
    font-style:italic ;
    font-size: small;
    font-weight: lighter;
}
.product_page .title {text-align: center;}

#mot{
background-color:#da238f;
color: #fff;
}

#marge{
    margin: 50px;
    display: inline;
}
.icon{
    height: 50px;
    margin-top: 50px;
}
.slider{
    display: inline-block;
    
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
    background-color: #24a44f;
    color: #fff !important;
    padding: 2% !important;

    }
    
.fw-bold{
    background-color: #fff;
    color: #fff;
    padding: 10px;
}
.ps-3{

    text-align: justify;
}
#back{
    background-image: url(../img/logo2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 900px;
}
#motbienvenue{
    margin-right: 0px;
}
.client_section .heading_container {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
.container-c{
   padding-left: 50px;
   padding-right: 50px;
} 
  .slide2{
    margin-top: 20px !important;
    margin-left: -0,7% !important;
    margin-right: 4% !important;
    
  }
  
  .client_section .carousel_btn-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  
  .client_section .carousel-control-prev,
  .client_section .carousel-control-next {
    color: #000000;
    position: unset;
    width: 45px;
    height: 45px;
    border: none;
    opacity: 1;
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: center;
    background-color: #24a44f;
    background-position: center;
    border-radius: 100%;
    margin: 0 2.5px;
  }
  
  .client_section .carousel-control-prev:hover,
  .client_section .carousel-control-next:hover {
    background-color: #da238f;
  }
  
  .client_section .carousel-control-next {
    left: initial;
  }
  .client_section{
    align-items: center;
  }
/* Grid
--------------------------------------------------------------------------------------------------------------- */

.clear, .group{display:block;}
.clear::before, .clear::after, .group::before, .group::after{display:table; content:"";}
.clear, .clear::after, .group, .group::after{clear:both;}

a{outline:none; text-decoration:none;}

.fl_left, .imgl{float:left;}
.fl_right, .imgr{float:right;}

img{width:auto; max-width:100%; height:auto; margin:0; padding:0; border:none; line-height:normal; vertical-align:middle;}
.imgl{margin:0 15px 10px 0; clear:left;}
.imgr{margin:0 0 10px 15px; clear:right;}

 .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:inline-block; float:left; margin:0 0 0 3.06748466257669%; list-style:none; margin-bottom: 20px;}

.first{margin-left:0; clear:left;}

.one_quarter{width:22.69938650306748%;}
.one_third{width:31.28834355828221%;}
 .two_quarter{width:48.46625766871166%;}
.two_third{width:65.6441717791411%;}
.three_quarter{width:74.23312883435584%;}

/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:978px){
	.hoc{max-width:978px;}
}


/* Mobile Devices
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:900px){
	.hoc{max-width:90%;}
    
	#header{padding:30px 0 15px;}
	#header #logo{margin:0;}


}


@media screen and (max-width:750px){
	.imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
	.fl_left, .fl_right{display:block; float:none;}
	.one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}

	#header{text-align:center;}
	#header #logo{margin-bottom:15px;}
}


/* Other
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:650px){
	.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
	.scrollable table{margin:0; padding:0; white-space:nowrap;}

	.inline li{display:block; margin-bottom:10px;}
	.pushright li{margin-right:0;}

	.font-x2{font-size:1.4rem;}
	.font-x3{font-size:1.6rem;}

	#pageintro li article{max-width:none; width:100%;}
	#pageintro li .heading{font-size:2rem;}
}